/* ==========================================================================
   04 BLOCKS: shortcode blocks and the Case Studies post type
   ==========================================================================
   Everything here uses the tokens from 01-tokens.css. Nothing is hardcoded,
   so a brand change still only needs one file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FAQ block, [geo_faq] and [geo_q]

   Questions are real headings, not styled paragraphs. That is the whole
   point of the block: generative engines use document structure to decide
   which chunk of a page answers which question. A question marked up as a
   <p> is far less likely to be quoted than the same text as an <h3>.
   -------------------------------------------------------------------------- */

.geo-faq {
  font-family: var(--geo-font);
  padding: var(--geo-space-2xl) 0;
}

.geo-faq-heading {
  font-size: var(--geo-fs-h2);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  line-height: var(--geo-lh-heading);
  margin-bottom: var(--geo-space-lg);
}

.geo-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-sm);
}

.geo-faq-item {
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-left: 3px solid var(--geo-accent);
  border-radius: 0 var(--geo-radius-lg) var(--geo-radius-lg) 0;
  padding: 24px 28px;
}

.geo-faq-q {
  font-size: var(--geo-fs-lead);
  font-weight: var(--geo-fw-bold);
  color: var(--geo-text-bright);
  line-height: 1.4;
  margin: 0 0 10px;
}

.geo-faq-a {
  font-size: var(--geo-fs-body);
  color: var(--geo-text-soft);
  line-height: var(--geo-lh-body);
}

.geo-faq-a p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .geo-faq { padding: 40px 0; }
  .geo-faq-heading { font-size: 24px; }
  .geo-faq-item { padding: var(--geo-space-md); }
  .geo-faq-q { font-size: 16px; }
}


/* --------------------------------------------------------------------------
   Case study, single
   -------------------------------------------------------------------------- */

.geo-cs-results-band {
  background: var(--geo-surface);
  border-top: 1px solid var(--geo-border);
  border-bottom: 1px solid var(--geo-border);
  padding: var(--geo-space-lg) 0;
}

.geo-cs-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--geo-space-md);
  justify-content: center;
}

.geo-cs-result {
  flex: 1 1 240px;
  max-width: 340px;
  background: var(--geo-surface-alt);
  border-left: 3px solid var(--geo-accent);
  border-radius: 0 var(--geo-radius-md) var(--geo-radius-md) 0;
  padding: 16px 20px;
  font-family: var(--geo-font);
  font-size: var(--geo-fs-body);
  font-weight: var(--geo-fw-semi);
  color: var(--geo-text-body);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .geo-cs-results { flex-direction: column; }
  .geo-cs-result { max-width: none; }
}


/* --------------------------------------------------------------------------
   Case study, archive grid
   -------------------------------------------------------------------------- */

.geo-cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--geo-space-lg);
  padding: var(--geo-space-2xl) 0;
}

.geo-cs-card {
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-xl);
  overflow: hidden;
  transition: border-color var(--geo-transition), transform var(--geo-transition);
  /* Containing block for the stretched link below. */
  position: relative;
}

.geo-cs-card:hover,
.geo-cs-card:focus-within {
  border-color: var(--geo-accent);
  transform: translateY(-3px);
}

/* STRETCHED LINK, changed in 1.2.0.
   The anchor now wraps only the title, so its accessible name is just the
   case study name rather than the whole card's text. This pseudo element
   restores the large, forgiving hit area for mouse and thumb. */
.geo-cs-card-link {
  text-decoration: none;
  color: inherit;
}

.geo-cs-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keep the real focus ring on the card, since the anchor itself is only as
   big as its text. */
.geo-cs-card:focus-within {
  outline: 2px solid var(--geo-accent);
  outline-offset: 2px;
}

.geo-cs-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--geo-surface-alt);
}

.geo-cs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.geo-cs-card-body {
  padding: 24px 28px 28px;
  font-family: var(--geo-font);
}

.geo-cs-card-industry {
  font-size: var(--geo-fs-label);
  font-weight: var(--geo-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--geo-accent);
  margin: 0 0 10px;
}

.geo-cs-card-title {
  font-size: var(--geo-fs-h4);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  line-height: 1.3;
  margin: 0 0 14px;
}

.geo-cs-card-results {
  list-style: none;
  margin: 0 0 var(--geo-space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-xs);
}

.geo-cs-card-results li {
  position: relative;
  padding-left: 18px;
  font-size: var(--geo-fs-small);
  color: var(--geo-text-soft);
  line-height: 1.5;
}

.geo-cs-card-results li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--geo-accent);
}

.geo-cs-card-excerpt {
  font-size: var(--geo-fs-small);
  color: var(--geo-text-muted);
  line-height: var(--geo-lh-body);
  margin: 0 0 var(--geo-space-md);
}

.geo-cs-card-more {
  display: inline-block;
  font-size: var(--geo-fs-fine);
  font-weight: var(--geo-fw-bold);
  color: var(--geo-accent);
  letter-spacing: 0.02em;
}

.geo-cs-card-more::after {
  content: ' \2192';
  transition: none;
}

.geo-cs-empty {
  padding: var(--geo-space-2xl) 0;
  text-align: center;
  color: var(--geo-text-muted);
  font-family: var(--geo-font);
}

@media (max-width: 700px) {
  .geo-cs-grid {
    grid-template-columns: 1fr;
    gap: var(--geo-space-md);
    padding: 40px 0;
  }
  .geo-cs-card-body { padding: var(--geo-space-md); }
}


/* --------------------------------------------------------------------------
   Definition block, [geo_def]

   The term is bold and comes first, before any elaboration. That ordering is
   the whole point: it mirrors the shape of the query ("what is GEO") and the
   format Google uses for definition snippets.
   -------------------------------------------------------------------------- */

.geo-def {
  font-family: var(--geo-font);
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-left: 3px solid var(--geo-accent);
  border-radius: 0 var(--geo-radius-lg) var(--geo-radius-lg) 0;
  padding: 24px 28px;
  margin: var(--geo-space-lg) 0;
}

.geo-def-heading {
  font-size: var(--geo-fs-h4);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  line-height: 1.3;
  margin: 0 0 10px;
}

.geo-def-body {
  font-size: var(--geo-fs-lead);
  color: var(--geo-text-soft);
  line-height: var(--geo-lh-body);
  margin: 0;
}

.geo-def-term {
  color: var(--geo-text-bright);
  font-weight: var(--geo-fw-bold);
}

@media (max-width: 700px) {
  .geo-def { padding: var(--geo-space-md); }
  .geo-def-body { font-size: var(--geo-fs-body); }
}


/* --------------------------------------------------------------------------
   HowTo block, [geo_howto]

   A real <ol>, so the sequence lives in the markup rather than only in the
   numbers someone typed.
   -------------------------------------------------------------------------- */

.geo-howto {
  font-family: var(--geo-font);
  padding: var(--geo-space-2xl) 0;
}

.geo-howto-heading {
  font-size: var(--geo-fs-h2);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  line-height: var(--geo-lh-heading);
  margin: 0 0 var(--geo-space-sm);
}

.geo-howto-intro {
  font-size: var(--geo-fs-body);
  color: var(--geo-text-muted);
  line-height: var(--geo-lh-body);
  margin: 0 0 var(--geo-space-lg);
}

.geo-howto-steps {
  list-style: none;
  counter-reset: geo-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-sm);
}

.geo-howto-step {
  counter-increment: geo-step;
  position: relative;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-lg);
  padding: 22px 26px 22px 72px;
}

.geo-howto-step::before {
  content: counter(geo-step);
  position: absolute;
  left: 22px;
  top: 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--geo-accent);
  color: var(--geo-text-on-accent);
  font-size: var(--geo-fs-small);
  font-weight: var(--geo-fw-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.geo-howto-step-title {
  font-size: var(--geo-fs-lead);
  font-weight: var(--geo-fw-bold);
  color: var(--geo-text-bright);
  line-height: 1.4;
  margin: 0 0 8px;
}

.geo-howto-step-body {
  font-size: var(--geo-fs-body);
  color: var(--geo-text-soft);
  line-height: var(--geo-lh-body);
}

.geo-howto-step-body p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .geo-howto { padding: 40px 0; }
  .geo-howto-heading { font-size: 24px; }
  .geo-howto-step { padding: var(--geo-space-md) var(--geo-space-md) var(--geo-space-md) 60px; }
  .geo-howto-step::before { left: 16px; top: 18px; width: 28px; height: 28px; }
}


/* --------------------------------------------------------------------------
   Author box

   Appended to single posts and case studies. Closes the visible authorship
   gap: before this, the author name appeared on the published blog post only
   inside the Twitter card metadata.
   -------------------------------------------------------------------------- */

.geo-authorbox {
  display: flex;
  gap: var(--geo-space-md);
  align-items: flex-start;
  font-family: var(--geo-font);
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-xl);
  padding: 28px var(--geo-space-lg);
  margin: var(--geo-space-xl) 0 0;
}

.geo-authorbox-photo { flex: 0 0 auto; }

.geo-authorbox-photo img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 2px solid var(--geo-border);
}

.geo-authorbox-body { flex: 1; min-width: 0; }

.geo-authorbox-label {
  font-size: var(--geo-fs-label);
  font-weight: var(--geo-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--geo-text-muted);
  margin: 0 0 6px;
}

.geo-authorbox-name {
  font-size: var(--geo-fs-h4);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  line-height: 1.2;
  margin: 0 0 4px;
}

.geo-authorbox-credentials {
  font-size: var(--geo-fs-fine);
  font-weight: var(--geo-fw-semi);
  color: var(--geo-accent);
  margin: 0 0 var(--geo-space-sm);
}

.geo-authorbox-bio {
  font-size: var(--geo-fs-small);
  color: var(--geo-text-soft);
  line-height: var(--geo-lh-body);
}

.geo-authorbox-bio p:last-child { margin-bottom: 0; }

.geo-authorbox-links {
  margin: var(--geo-space-sm) 0 0;
  font-size: var(--geo-fs-fine);
}

.geo-authorbox-links a {
  color: var(--geo-accent);
  font-weight: var(--geo-fw-semi);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--geo-transition);
}

.geo-authorbox-links a:hover,
.geo-authorbox-links a:focus-visible { border-bottom-color: var(--geo-accent); }

@media (max-width: 700px) {
  .geo-authorbox {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px var(--geo-space-md);
  }
}


/* --------------------------------------------------------------------------
   Answer length hint

   Only ever rendered for logged in users who can edit posts, and only when
   answer_length_badges is switched on. Visitors never see this.
   -------------------------------------------------------------------------- */

.geo-answer-hint {
  font-family: var(--geo-font);
  font-size: var(--geo-fs-micro);
  font-weight: var(--geo-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--geo-space-sm) 0 0;
  padding: 4px 10px;
  border-radius: var(--geo-radius-sm);
  display: inline-block;
}

.geo-answer-hint--ok    { background: var(--geo-success-bg); color: var(--geo-success); }
.geo-answer-hint--short { background: var(--geo-surface-alt); color: var(--geo-text-muted); }
.geo-answer-hint--long  { background: var(--geo-error-bg);   color: var(--geo-error); }