/* ─────── Single article template styles ─────── */

.maverick-article-head {
  position: relative;
  overflow: hidden;
}
.maverick-article-head::after {
  content: '';
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='%23BA912E' opacity='0.05'><polygon points='120.9,182.4 116.5,195.8 153.7,168.8 146.6,163.7'/><polyline points='232.4,111.6 218.3,111.6 174,143.8 186.5,182.3 205.1,195.8 188.2,143.8'/><polygon points='160.8,59.6 153.7,81.4 163.5,111.6 177.7,111.6'/></svg>") no-repeat;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}
.maverick-article-head > * { position: relative; z-index: 2; }

.author-meta { gap: 16px; }
.author-meta > * + *::before { content: ''; }

/* Article body — post-content rich text */
.maverick-article-content > p.lede,
.maverick-article-content > p:first-of-type.is-style-lede {
  font-size: 19px;
  line-height: 1.7;
  color: #13294B;
  font-weight: 500;
  margin-bottom: 28px;
  letter-spacing: -0.005em;
}
.maverick-article-content p {
  color: #4a4a4a;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 18px;
}
.maverick-article-content h2 {
  color: #13294B;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 48px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.maverick-article-content h3 {
  color: #13294B;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 32px;
  margin-bottom: 10px;
  line-height: 1.3;
}
.maverick-article-content a {
  color: #BA912E;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.maverick-article-content a:hover { color: #13294B; }
.maverick-article-content strong { color: #13294B; font-weight: 700; }

/* Pull quote — applied via core/quote with is-style-pullquote, or a group with this class */
.maverick-article-content blockquote.wp-block-quote,
.maverick-article-content .pullquote {
  margin: 36px 0;
  padding: 36px 40px;
  background: #f5f1e8;
  border-radius: 12px;
  border-left: 3px solid #BA912E;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: #13294B;
}
.maverick-article-content blockquote.wp-block-quote cite,
.maverick-article-content .pullquote .attrib {
  display: block;
  margin-top: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: 12.5px;
  color: #8a8a8a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Numbered list / checklist — apply "checks" or "numbered" class to a core/list in the editor (Advanced > Additional CSS Class) */
.maverick-article-content ul.checks,
.maverick-article-content ol.numbered {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
}
.maverick-article-content ul.checks li,
.maverick-article-content ol.numbered li {
  padding: 12px 0 12px 30px;
  position: relative;
  border-top: 1px solid #e5e3dc;
  color: #4a4a4a;
  font-size: 15.5px;
  line-height: 1.65;
}
.maverick-article-content ul.checks li:first-child,
.maverick-article-content ol.numbered li:first-child { border-top: none; }
.maverick-article-content ul.checks li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 12px;
  color: #BA912E;
  font-size: 14px;
}
.maverick-article-content ol.numbered { counter-reset: nlist; }
.maverick-article-content ol.numbered li { counter-increment: nlist; }
.maverick-article-content ol.numbered li::before {
  content: counter(nlist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 12px;
  color: #BA912E;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1;
}

/* Stat callout — apply "stat-callout" class to a core/group, with nested groups classed "stat" */
.maverick-article-content .stat-callout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
  padding: 30px;
  background: #13294B;
  border-radius: 12px;
  color: #ffffff;
}
.maverick-article-content .stat-callout .stat .num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.maverick-article-content .stat-callout .stat .num .gold { color: #BA912E; }
.maverick-article-content .stat-callout .stat .label {
  color: rgba(255,255,255,0.7);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 8px;
}

/* Inline figure */
.maverick-article-content figure.wp-block-image {
  margin: 32px 0;
}
.maverick-article-content figure.wp-block-image img {
  border-radius: 12px;
}
.maverick-article-content figure.wp-block-image figcaption {
  color: #8a8a8a;
  font-size: 13px;
  font-style: italic;
  margin-top: 12px;
  text-align: center;
}

/* Tags + share row — apply "article-foot" class to a core/group at the end of post content */
.maverick-article-content .article-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 36px;
  margin-top: 50px;
  border-top: 1px solid #e5e3dc;
  flex-wrap: wrap;
}
.maverick-article-content .article-foot .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.maverick-article-content .article-foot .tags a {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid #e5e3dc;
  background: #ffffff;
  color: #4a4a4a;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s cubic-bezier(0.22,1,0.36,1), color 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s cubic-bezier(0.22,1,0.36,1);
}
.maverick-article-content .article-foot .tags a:hover {
  background: #13294B;
  color: #ffffff;
  border-color: #13294B;
}
.maverick-article-content .article-foot .share {
  display: flex;
  align-items: center;
  gap: 10px;
}
.maverick-article-content .article-foot .share .lbl { 
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a8a;
  font-weight: 700;
}
.maverick-article-content .article-foot .share a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f1e8;
  color: #BA912E;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s cubic-bezier(0.22,1,0.36,1), color 0.3s cubic-bezier(0.22,1,0.36,1);
}
.maverick-article-content .article-foot .share a:hover {
  background: #13294B;
  color: #ffffff;
}

@media (max-width: 980px) {
  .maverick-article-content h2 { font-size: 24px; }
  .maverick-article-content blockquote.wp-block-quote,
  .maverick-article-content .pullquote { font-size: 20px; padding: 28px; }
  .maverick-article-content .stat-callout { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
}
@media (max-width: 640px) {
  .maverick-article-content .article-foot { flex-direction: column; align-items: flex-start; }
}

/* ─────── Blog index (home.html) — featured card ─────── */
.featured-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.10);
}
/* Make the featured photo column fill full height */
.featured-card .featured-photo {
  position: relative;
  min-height: 420px;
}
.featured-card .featured-photo .wp-block-post-featured-image,
.featured-card .featured-photo .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Stretch post-title link to make the whole card clickable */
.featured-card .wp-block-post-title a {
  text-decoration: none;
  color: inherit;
}
.featured-card .wp-block-post-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ─────── Blog index (home.html) — article cards ─────── */
.article-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}
.article-card .wp-block-post-title a {
  text-decoration: none;
  color: inherit;
}
.article-card .wp-block-post-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.08);
}

/* ─────── Category links disabled (temporary) ─────── */
/* Category archives are thin right now, so the category label still shows but
   is not clickable. Templates are untouched — deleting this block restores the
   links. Covers post-terms output on single, Insights and search cards. */
.wp-block-post-terms a,
.mtf-chip {
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}

/* ─────── Insights featured card: gold badge over the photo ─────── */
/* The badge is positioned by CSS (not just inline styles) so it stays a pill
   over the image even if the inline positioning is lost — otherwise the
   paragraph falls back to block-level and paints a full-width gold bar. */
.featured-photo { position: relative; }
.featured-photo > .wp-block-paragraph.has-background {
  position: absolute;
  top: 24px;
  left: 24px;
  width: auto;
  max-width: calc(100% - 48px);
  display: inline-block;
  border-radius: 100px;
  margin: 0;
}
/* An empty badge would still paint a gold blob, so hide it when it has no text. */
.featured-photo > .wp-block-paragraph.has-background:empty { display: none; }

/* ─────── Insights: latest-articles grid ─────── */
/* WordPress generates grid-template-columns + gap for this block from its
   layout settings, but only ships a 1-column rule below 600px. These add the
   tablet step and a roomier gap between rows. Two-class specificity (0,0,2,0)
   beats WP's generated .wp-container-* rule (0,0,1,0) while still yielding to
   core's 4x-class mobile rule below 600px, so the cascade stays: 3 -> 2 -> 1. */
.latest-articles-query .wp-block-post-template,
.search-results-query .wp-block-post-template {
  row-gap: 48px;   /* more breathing room between rows than the 24px columns */
}
@media (max-width: 981px) {
  .latest-articles-query .wp-block-post-template,
  .search-results-query .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The featured (single-post) query still needs display:contents so its lone
   <li> doesn't introduce a wrapper box around the featured card layout. The
   latest-articles query is deliberately NOT included: it uses WordPress's own
   grid layout (grid-template-columns + gap generated from the post-template
   block's layout settings), and display:contents would remove the <ul> from
   the box tree, leaving the cards to stack full-width with no gap. */
.featured-post-query .wp-block-post-template {
  display: contents;
}

@media (max-width: 980px) {
  .featured-card { flex-wrap: wrap !important; }
  .featured-card .featured-photo { min-height: 280px; width: 100% !important; flex-basis: 100% !important; }
  .featured-card .featured-text { width: 100% !important; flex-basis: 100% !important; }
}

/* ─────── Company page — careers split section ─────── */
.careers-photo-col {
  background-color: #1c3a66;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 320px;
}
.careers-photo-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19,41,75,0.4), transparent 30%);
}

@media (max-width: 980px) {
  .careers-photo-col { min-height: 240px; }
}

/* ─────── Team page — culture values list + photo split ─────── */
.culture-values {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.culture-values li {
  padding: 10px 0 10px 24px;
  position: relative;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.culture-values li:first-child { border-top: none; }
.culture-values li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 10px;
  color: #BA912E;
  font-size: 12px;
}

.culture-photo-col {
  background-image: url('../photos/office-meeting.jpg');
  background-color: #1c3a66;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 480px;
}
.culture-photo-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19,41,75,0.4), transparent 30%);
}

@media (max-width: 980px) {
  .culture-photo-col { min-height: 320px; }
}