/* ---------- Case study cards (Figma component sets 118:687 / 443:1388) ----------
   Shared by the Campaigns and Art & Design Direction pages.
   Each card's cover can supply three crops via <picture>:
     · 4:5 for portrait iPads and phones
     · 32:9 for short, wide cards (most laptops/monitors)
     · 16:9 for taller cards (close to Figma's 1440×810) */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Case Study Card – 16x9 (Figma component set 118:687) ----------
   1440×810, 248px top / 120px side padding, 40px between text and buttons.
   Default: photo in black & white at 40% over the page background
   Hover:   photo in full colour at 75%
   (Figma's B&W fill is a 1024px greyscale export of the same photo, so the
   full-res colour image is desaturated in CSS instead — sharper, one download)
   Both: grey wash rgba(111,111,111,.3) → rgba(0,0,0,.3) + 250px inset vignette. */
/* Height follows the screen so the next card peeks in below the fold:
   viewport − header − 140px peek, between 480px and Figma's 810px.
   Text is vertically centred so it stays balanced at any height. */
.case-card {
  --card-pad: var(--page-margin);
  --header-h: 150px;
  --peek: 140px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
  height: clamp(480px, calc(100svh - var(--header-h) - var(--peek)), 810px);
  padding: var(--space-xl) var(--card-pad);
  overflow: hidden;
  background: var(--neutral-bg);
  color: var(--neutral-surface); /* all site copy uses Neutral/Surface, never pure white */
}

.case-card-media,
.case-card-media img,
.case-card-media::before,
.case-card-vignette {
  position: absolute;
  inset: 0;
}
.case-card-media { pointer-events: none; }
.case-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.case-card:hover .case-card-media img,
.case-card:focus-within .case-card-media img { opacity: 0.75; filter: grayscale(0); }
.case-card-media::before {
  content: "";
  background: linear-gradient(to bottom, rgba(111, 111, 111, 0.3), rgba(0, 0, 0, 0.3));
}
.case-card-vignette { box-shadow: inset 0 0 250px 10px rgba(0, 0, 0, 0.75); }

/* Title / role / description */
.case-card-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}
.case-card-title-block {
  display: flex;
  flex-direction: column;
}
.case-card-meta {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
}
.case-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 900;
  line-height: 96px;
}
/* Signal Orange divider runs from the text edge to the page's right edge */
.case-card-title-block::after {
  content: "";
  display: block;
  width: calc(100% + var(--card-pad));
  height: 1px;
  margin-top: 4px;
  background: var(--signal-orange);
}
.case-card-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-card-role {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
}
.case-card-desc {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
}

/* Art & Design Direction cards: all text in Neutral/Surface, as in Figma 126:737/738 */
.case-card--surface-text { color: var(--neutral-surface); }

/* Big Ten card: eyebrow and description in Neutral/Surface, as in Figma 443:1388 */
.case-card--surface .case-card-meta,
.case-card--surface .case-card-desc { color: var(--neutral-surface); }

/* Whole-card link: an invisible layer over the card (above the photo and text,
   below the buttons) so a click anywhere opens the case study */
.case-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.case-card-buttons {
  z-index: 2;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Tablet: Display/XL Mobile title */
@media (max-width: 1100px) {
  .case-card-title { font-size: 64px; line-height: 68px; }
  /* Eyebrow steps down with the title (12px → 10px); tracking stays 9% */
  .case-card-meta { font-size: 10px; line-height: 14px; letter-spacing: 0.09em; }
}

/* Collapsed (mobile-menu) header is ~79px tall */
@media (max-width: 960px) {
  .case-card { --header-h: 79px; }
}

/* iPad (1024px landscape) and smaller: drop the one-line description,
   the role line carries the card */
@media (max-width: 1024px) {
  .case-card-desc { display: none; }
}

/* Phone: content sets the height; 24px margins, 44px touch targets */
@media (max-width: 640px) {
  .case-card {
    --card-pad: var(--space-md);
    height: auto;
    padding: var(--space-xl) var(--card-pad);
    gap: var(--space-md);
  }
  .case-card-meta {
    /* One shared size, fitted to the longest eyebrow (Big Ten, ~37.5× its
       font size wide) inside the 24px margins */
    font-size: min(10px, calc((100vw - 2 * var(--space-md)) / 38.5));
    letter-spacing: 0.09em;
    white-space: nowrap;
  }
  .case-card-title { font-size: 40px; line-height: 44px; }
  .case-card-role { font-size: 18px; line-height: 22px; }
  .case-card-desc { font-size: 16px; line-height: 26px; }
  .case-card-buttons { gap: var(--space-sm); }
  /* Smaller button to match the smaller type; an invisible 44px-tall hit
     area keeps the minimum touch target */
  .case-card-buttons .btn {
    position: relative;
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-sm);
    font-size: 12px;
    line-height: 18px;
  }
  .case-card-buttons .btn::after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }
}

/* Cards without buttons link as a whole: show a focus ring for keyboard users */
.case-card-link:focus-visible { outline: 2px solid var(--signal-orange); outline-offset: -2px; }

/* Listing pages end on a Next Project link (styles in case-study.css);
   the footer sits one section gap below it */
main:has(> .cs-next:last-child) + .site-footer { margin-top: var(--space-2xl); }
@media (max-width: 640px) {
  main:has(> .cs-next:last-child) + .site-footer { margin-top: var(--space-xl); }
}