/* =============================================================
   FANATICS CASE STUDY — PAGE-SPECIFIC STYLES
   Overrides and additions on top of tokens + base + components.
   Scope: fanatics.html only.
   data-theme="fanatics" provides: --accent-dark #375A89,
   --accent-light #D9E5F5, --accent-lighter #ECF1F9
   ============================================================= */

/* -------------------------------------------------------------
   ACCESSIBILITY — SKIP LINK
   ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 10px 20px;
  background-color: var(--color-zinc-900);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* -------------------------------------------------------------
   BACK LINK
   Arrow link that appears above the page title, taking the user
   back to the home page.
   ------------------------------------------------------------- */
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-menu);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-zinc-400);
  margin-bottom: 32px;
  transition: color 0.2s ease;
}
.cs-back:hover {
  color: var(--accent-dark);
}

/* -------------------------------------------------------------
   HERO SECTION
   Tags · H1 · subtitle · meta (Duration / Tools)
   ------------------------------------------------------------- */
.cs-tags {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-dark);
  margin-bottom: 16px;
}

.cs-hero__title {
  color: var(--color-zinc-900);
  margin-bottom: 20px;
}

.cs-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
  max-width: 580px;
  margin-bottom: 40px;
}

.cs-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--color-line-stroke);
}

.cs-meta__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-meta__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-zinc-400);
}

.cs-meta__value {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  font-weight: 400;
  color: var(--color-zinc-900);
}

/* -------------------------------------------------------------
   HERO IMAGE SECTION
   Removes top padding so the image sits flush under the hero
   meta row (Duration / Tools) with only the hero section's
   natural bottom padding as breathing room.
   ------------------------------------------------------------- */
.section--cs-image {
  padding-top: 0;
}

/* -------------------------------------------------------------
   FULL-WIDTH IMAGE BLOCK
   Images span the full inner width without extra padding.
   Placeholder has a tinted background until real images are set.
   Reset figure default margins so no extra space appears.
   ------------------------------------------------------------- */
.cs-image-block {
  width: 100%;
  margin: 0;
  background-color: var(--accent-light);
  overflow: hidden;
}

/* 2:1 ratio — used for most case study images */
.cs-image-block--wide {
  aspect-ratio: 2 / 1;
}

/* Panoramic strip — used for the 820×152 banner image */
.cs-image-block--strip {
  aspect-ratio: 820 / 152;
}

/* Slightly taller variant for ~820×460 images */
.cs-image-block--tall {
  aspect-ratio: 820 / 460;
}

.cs-image-block img {
  width: 100%;
  height: auto;
  display: block;
}

/* On accent-lighter (blue) sections, give placeholder a slightly
   darker tint so it reads as a distinct image area */
.section--accent-lighter .cs-image-block {
  background-color: var(--accent-light);
}

/* Stack of multiple images, one per row with a gap */
.cs-image-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* -------------------------------------------------------------
   IMAGE BREAKOUT — DESKTOP ONLY
   On wide viewports, images expand beyond the 900px text column
   to span the full space between the section's horizontal padding.
   Uses max()/min() so the image is never narrower than 100%
   of its container at smaller desktop sizes.
   ------------------------------------------------------------- */
@media (min-width: 1221px) {
  .cs-image-block,
  .cs-image-stack {
    width: max(100%, calc(100vw - 2 * var(--space-section-h)));
    margin-left: min(0px, calc((var(--space-max-width) - (100vw - 2 * var(--space-section-h))) / 2));
  }

  /* Images inside a stack are already sized to the stack — no double breakout */
  .cs-image-stack .cs-image-block {
    width: 100%;
    margin-left: 0;
  }
}

/* -------------------------------------------------------------
   BODY TEXT BLOCKS
   Standard spacing for paragraphs inside case study sections.
   ------------------------------------------------------------- */
.cs-body {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
  max-width: 720px;
}

.cs-body + .cs-body {
  margin-top: 20px;
}

/* Headings inside a section get spacing from body text above */
.cs-section-heading {
  margin-bottom: 20px;
}

/* Gap between section label and heading */
.section-header + .cs-section-heading,
.section-header + h1,
.section-header + h2 {
  margin-top: var(--space-caption-head);
}

/* -------------------------------------------------------------
   QUOTE / PULLOUT BLOCK
   Full-width callout in accent-lighter background.
   ------------------------------------------------------------- */
.cs-quote {
  background-color: var(--accent-lighter);
  padding: 24px 28px;
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-900);
  font-style: italic;
  border-left: 3px solid var(--accent-dark);
  margin-top: 32px;
}

/* On accent-lighter sections, invert to white background */
.section--accent-lighter .cs-quote {
  background-color: var(--color-white);
}

/* -------------------------------------------------------------
   TWO-COLUMN LAYOUT — BACKGROUND / PERSONAS
   50/50 split with a shared vertical divider.
   Collapses to single column on tablet and mobile.
   ------------------------------------------------------------- */
.cs-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.cs-2col__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-2col__col h2,
.cs-2col__col h3 {
  color: var(--color-zinc-900);
}

.cs-2col__col p {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
}

/* Smaller variant — sub-point pairs use the same h3 style as the rest */
.cs-2col--sm .cs-2col__col h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
}

.cs-2col--sm .cs-2col__col p {
  font-size: var(--text-body-s);
  line-height: 24px;
  color: var(--color-zinc-600);
}

@media (max-width: 799px) {
  .cs-2col {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* -------------------------------------------------------------
   INNER SECTION DIVIDER
   A horizontal rule + label used to separate sub-sections
   within a single .section wrapper.
   ------------------------------------------------------------- */
.cs-subsection {
  padding-top: 48px;
  margin-top: 48px;
}

/* -------------------------------------------------------------
   OUTCOME CARDS GRID
   2×2 grid on desktop, 1-column stack on mobile.
   Each card has a category tag, heading, and body.
   ------------------------------------------------------------- */
.cs-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--accent-light);
  margin-top: 40px;
}

.cs-outcome-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-right: 1px solid var(--accent-light);
  border-bottom: 1px solid var(--accent-light);
}

/* Remove right border from even cards (right column) */
.cs-outcome-card:nth-child(even) {
  border-right: none;
}

/* Remove bottom border from bottom row */
.cs-outcome-card:nth-last-child(-n + 2):nth-child(odd),
.cs-outcome-card:last-child {
  border-bottom: none;
}

.cs-outcome-card__tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-dark);
}

.cs-outcome-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
}

.cs-outcome-card__body {
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  line-height: var(--lh-body-base);
  color: var(--color-zinc-600);
}

@media (max-width: 799px) {
  .cs-outcomes-grid {
    grid-template-columns: 1fr;
  }

  /* On mobile all cards single column — reset border logic */
  .cs-outcome-card {
    border-right: none;
    border-bottom: 1px solid var(--accent-light);
  }

  .cs-outcome-card:last-child {
    border-bottom: none;
  }
}

/* -------------------------------------------------------------
   NEXT PROJECT STRIP
   Full-width row that links to the following case study.
   ------------------------------------------------------------- */
.cs-next-project {
  background-color: var(--accent-lighter);
  border-top: 1px solid var(--accent-light);
}

.cs-next-project__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cs-next-project__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  transition: opacity 0.2s ease;
}

.cs-next-project__link:hover {
  opacity: 0.7;
}

.cs-next-project__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-zinc-400);
}

.cs-next-project__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--color-zinc-900);
}

.cs-next-project__arrow {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  color: var(--accent-dark);
  flex-shrink: 0;
  align-self: flex-end;
}

/* -------------------------------------------------------------
   VERTICAL SPACING HELPERS
   Gap between consecutive elements within a section.
   ------------------------------------------------------------- */
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-48 {
  margin-top: 48px;
}
.mt-56 {
  margin-top: 56px;
}

/* -------------------------------------------------------------
   RESPONSIVE OVERRIDES
   ------------------------------------------------------------- */
@media (max-width: 1220px) {
  .cs-meta {
    gap: 32px;
  }

  .cs-subsection {
    padding-top: 40px;
    margin-top: 40px;
  }
}

@media (max-width: 799px) {
  .cs-meta {
    gap: 24px;
  }

  .cs-hero__subtitle {
    max-width: 100%;
  }

  .cs-quote {
    padding: 20px;
  }

  .cs-subsection {
    padding-top: 32px;
    margin-top: 32px;
  }

  .cs-back {
    margin-bottom: 24px;
  }

  .cs-next-project__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}