/* ==========================================================================
   FORGYEN — Case Studies (homepage section 5)
   Builds on main.css tokens and .text-link. Scoped to .cs / .cs-slide.
   Every item links to its own page (case-studies/<slug>/).

   ≥768px   portfolio grid: 3 columns from 1200px, 2 below; each item shows
            its cover, title and "View Case Study". More items flow into rows.
   ≤767px   swipe carousel (native scroll-snap; case-studies.js adds the
            indicators and the single info area for the active case study,
            so a neighbouring caption is never cropped at the screen edge).

   Carousel geometry lives on .cs__viewport (a size container):
     --cs-edge     left edge of the page container (slides align to it)
     --cs-slide-w  width of one slide; the next slide peeks in after it
   Structure: 1 Section · 2 Head · 3 Items · 4 Grid (≥768) · 5 Carousel (≤767)
              6 Phones
   ========================================================================== */

/* 1. Section ------------------------------------------------------------- */
.cs {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding: clamp(80px, 8vw, 112px) 0 clamp(72px, 7vw, 104px);
  /* cools from Our Approach's warm ivory into soft steel and ivory */
  background:
    radial-gradient(42% 46% at 88% 14%, rgba(40, 74, 99, 0.08), transparent 70%),
    radial-gradient(46% 40% at 12% 78%, rgba(255, 255, 255, 0.7), transparent 72%),
    linear-gradient(180deg, #F2E3D4 0%, #F1EDEA 10%, #EDF0F3 52%, #F3F4F6 100%);
}

.cs__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.cs__arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(184, 115, 51, 0.2);
}
.cs__arc--a { width: 1100px; aspect-ratio: 1; right: -720px; top: -520px; }
.cs__arc--b { width: 1500px; aspect-ratio: 1; right: -1060px; top: -560px; border-color: rgba(40, 74, 99, 0.1); }
.cs__bead {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFE6CC, #E3A26C 35%, #9A5627);
}
.cs__bead--a { right: 27%; top: 3%; }
.cs__bead--b { right: 1.5%; top: 21%; width: 11px; height: 11px; }

/* 2. Head ---------------------------------------------------------------- */
.cs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(32px, 3.4vw, 48px);
}
.cs__mark {
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: var(--fg-copper);
  opacity: 0.85;
}
.cs__title {
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.375rem, 0.9rem + 3.6vw, 4.25rem);   /* same scale as Our Approach */
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.036em;
}
.cs__accent {
  color: var(--fg-copper);
  background: linear-gradient(180deg, #CC8650, #A35A28);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs__lead {
  margin: 14px 0 0;
  color: #2E3B52;
  font-size: clamp(1.125rem, 0.8rem + 0.75vw, 1.5rem);   /* 18 → 24 */
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* 3. Items (shared) ----------------------------------------------------- */
.cs__track {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-slide { min-width: 0; }
.cs-slide__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #E9ECEF;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 1px 2px rgba(40, 74, 99, 0.08),
    0 26px 48px -30px rgba(40, 74, 99, 0.45);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--fg-dur-std) var(--fg-ease), transform var(--fg-dur-std) var(--fg-ease);
}
.cs-slide__media:hover {
  box-shadow:
    0 0 0 1px rgba(184, 115, 51, 0.35),
    0 1px 2px rgba(40, 74, 99, 0.08),
    0 30px 52px -30px rgba(40, 74, 99, 0.5);
}
.cs-slide__media:focus-visible { outline-offset: 4px; }
.cs-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                     /* covers are 16:9: nothing is cropped */
}
.cs-slide__caption { padding-top: 22px; }
.cs-slide__title,
.cs__info-title {
  margin: 0;
  color: var(--fg-navy-950);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cs-slide__title { font-size: clamp(1.1875rem, 0.95rem + 0.4vw, 1.375rem); }   /* 19 → 22 */
.cs-slide__action,
.cs__info-action { margin-top: 4px; color: var(--fg-copper-700); white-space: nowrap; }
.cs-slide__action .text-link__label::before,
.cs__info-action .text-link__label::before { background: rgba(184, 115, 51, 0.25); }

/* hovering anywhere on an item resolves its link */
.cs-slide:hover .cs-slide__action .text-link__label::after { width: 100%; }
.cs-slide:hover .cs-slide__action .text-link__arrow { transform: translateX(4px); }

.cs__info,
.cs__dots[hidden] { display: none; }

/* 4. Grid (≥768px) ------------------------------------------------------- */
@media (min-width: 768px) {
  .cs__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 4vw, 56px) clamp(24px, 2.6vw, 36px);
    width: 100%;
    max-width: calc(var(--fg-container) + 2 * var(--fg-gutter));
    margin-inline: auto;
    padding-inline: var(--fg-gutter);
  }
  /* an odd last item sits centred rather than alone at the left */
  .cs-slide:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(24px, 2.6vw, 36px)) / 2);
  }
  @media (prefers-reduced-motion: no-preference) {
    .cs-slide__media:hover { transform: translateY(-3px); }
  }
}
@media (min-width: 1200px) {
  .cs__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-slide:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}

/* 5. Carousel (≤767px) --------------------------------------------------- */
@media (max-width: 767px) {
  .cs__viewport {
    --cs-gap: 14px;
    position: relative;
    container-type: inline-size;
  }
  .cs__track,
  .cs__info {
    --cs-edge: calc(max(0px, (100cqi - var(--fg-container) - 2 * var(--fg-gutter)) / 2) + var(--fg-gutter));
    --cs-slide-w: calc(100cqi - var(--cs-edge) - 48px);
  }
  .cs__track {
    position: relative;
    display: flex;
    gap: var(--cs-gap);
    padding: 10px var(--cs-edge) 48px;     /* room for the cover shadow */
    /* lets the last slide still snap to the left edge */
    padding-inline-end: calc(100cqi - var(--cs-edge) - var(--cs-slide-w));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--cs-edge);
    scrollbar-width: none;
  }
  .cs__track::-webkit-scrollbar { display: none; }
  .cs-slide {
    flex: 0 0 var(--cs-slide-w);
    scroll-snap-align: start;
  }
  .cs-slide__media { border-radius: 12px; }
  .cs.is-carousel .cs-slide:not(.is-active) .cs-slide__media { cursor: pointer; }   /* brings it forward */

  /* JS on: per-item captions give way to one info area for the active item */
  .cs.is-carousel .cs-slide__caption { display: none; }
  .cs.is-carousel .cs__info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100cqi - 2 * var(--cs-edge));
    margin: -36px 0 0 var(--cs-edge);      /* 12px under the cover */
  }
  .cs__meta { min-width: 0; }
  .cs__info-title { font-size: 1.25rem; }
  .cs__info-action { margin-top: 6px; }

  .cs.is-carousel .cs__dots:not([hidden]) {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: var(--cs-slide-w);
  }
  .cs__dot {
    display: grid;
    place-items: center;
    width: 44px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .cs__dot::before {
    content: "";
    width: 36px;
    height: 5px;
    border-radius: 999px;
    background: rgba(40, 74, 99, 0.16);
    transition: background-color var(--fg-dur-std) var(--fg-ease);
  }
  .cs__dot:hover::before { background: rgba(40, 74, 99, 0.3); }
  .cs__dot[aria-current="true"]::before { background: linear-gradient(90deg, #C9834D, #A9622E); }

  @media (prefers-reduced-motion: no-preference) {
    .cs__track { scroll-behavior: smooth; }
    .cs__meta.is-entering { animation: cs-info-in 360ms var(--fg-ease) both; }
  }
}
@keyframes cs-info-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 6. Phones: stacked heading, compact section ---------------------------- */
@media (max-width: 599px) {
  .cs { padding: 60px 0 64px; }
  .cs__head { margin-bottom: 26px; }
  .cs__mark { width: 40px; margin-bottom: 16px; }
  .cs__title { font-size: min(3.5rem, 14.6vw); line-height: 0.98; }
  .cs__title-line { display: block; }
  .cs__lead { margin-top: 12px; font-size: 1.0625rem; }

  .cs__arc--a { width: 600px; right: -420px; top: -260px; }
  .cs__arc--b { display: none; }
  .cs__bead--a { right: 10%; top: 4%; }
  .cs__bead--b { display: none; }
}