/* ============================================================
   CaseStudies — Section styles.
   Card (slide) styles live in CaseStudySlide.css.
   Carousel mechanics live in Carousel/Carousel.css.
   Design tokens are defined in src/tokens.css.
   ============================================================ */

.case-studies {
  background-color: var(--background);
  box-sizing:       border-box;
  display:          flex;
  flex-direction:   column;
  font-family:      var(--font-family-default);
  gap:              4rem;   /* 64px */
  padding:          6rem 0; /* 96px */
  width:            100%;
}


/* ============================================================
   Title group
   ============================================================ */

.case-studies__title-group {
  width: 100%;
}

.case-studies__title {
  color:       var(--foreground);
  font-size:   2.25rem;     /* 36px */
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem;      /* 40px */
  margin:      0;
}


/* ============================================================
   Carousel trailing-scroll override
   --carousel-trail lets the last card scroll fully to the left
   snap position. Value = track width − card width.
   Card widths are defined in CaseStudySlide.css.
   ============================================================ */

.case-studies .carousel {
  --carousel-trail: calc(100% - 36.375rem); /* desktop: 582px card */
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .case-studies {
    gap:     2.25rem; /* 36px — heading group to carousel */
    padding: 4rem 0;
  }

  .case-studies__title {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  /* Full-width cards: trail = one gutter so the last card can snap */
  .case-studies .carousel {
    --carousel-trail: var(--carousel-gutter);
  }
}

/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  width:     1024px;
  max-width: calc(100% - 160px); /* 80px × 2 — desktop */
  margin:    0 auto;
}

/* Tablet + landscape mobile (≤991px): 60px × 2 = 120px */
@media (max-width: 991px) {
  .container {
    max-width: calc(100% - 120px);
  }
}

/* Portrait mobile (≤479px): 24px × 2 = 48px */
@media (max-width: 479px) {
  .container {
    max-width: calc(100% - 48px);
  }
}

/* ============================================================
   Carousel — Draggable horizontal scroll carousel
   with accessible nav controls and smooth snap-on-release.

   CSS custom properties (set on .carousel or any ancestor):
     --carousel-gutter   Left padding & overlay width.
                         Default: matches the 1024px container breakpoints.
     --carousel-trail    Right padding — trailing scroll space that lets
                         the last card scroll to the snap start position.
                         Default: 0px (override per use case in consumer CSS).
   ============================================================ */

.carousel {
  --carousel-gutter: max(80px, calc((100% - 1024px) / 2));
  --carousel-trail:  0px;
  position: relative;
  width:    100%;
}


/* ============================================================
   Scrollable track
   ============================================================ */

@media (pointer: fine) {
  .carousel__track { cursor: grab; }
}

.carousel__track {
  display:             flex;
  gap:                 1rem;    /* 16px — must match CARD_GAP constant in Carousel.tsx */
  overflow-x:          auto;
  padding-bottom:      0.5rem;  /* breathing room so box-shadows aren't clipped */
  padding-left:        var(--carousel-gutter);
  scroll-padding-left: var(--carousel-gutter);
  padding-right:       var(--carousel-trail);
  scroll-snap-type:    x mandatory;
  scrollbar-width:     none;    /* Firefox */
}

.carousel__track::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}


/* ============================================================
   Navigation overlays — sit in the gutter on each side so
   they never cover the container content area.
   ============================================================ */

.carousel__overlay {
  align-items: center;
  bottom:      0;
  display:     flex;
  overflow:    hidden;
  position:    absolute;
  top:         0;
  box-sizing: border-box;
  width:       var(--carousel-gutter);
}

/* Right side — gradient fades left; button centered in gutter */
.carousel__overlay:not(.carousel__overlay--left) {
  background:      linear-gradient(to right, transparent 0%, var(--background) 60%);
  justify-content: center;
  right:           0;
}

/* Left side — gradient fades right; button centered in gutter */
.carousel__overlay--left {
  background:      linear-gradient(to left, transparent 0%, var(--background) 60%);
  justify-content: center;
  left:            0;
}

/* When gutter > 2rem + 40px + 1rem (88px), position button 2rem from the edge */
@media (min-width: 1201px) {
  .carousel__overlay:not(.carousel__overlay--left) {
    justify-content: flex-end;
    padding-right:   2rem;
  }

  .carousel__overlay--left {
    justify-content: flex-start;
    padding-left:    2rem;
  }
}


/* ============================================================
   Nav buttons
   ============================================================ */

.carousel__nav-btn {
  align-items:      center;
  background-color: var(--secondary);
  border:           1px solid var(--border);
  border-radius:    var(--radius-full);
  color:            var(--secondary-foreground);
  cursor:           pointer;
  display:          flex;
  flex-shrink:      0;
  height:           2.5rem;   /* 40px */
  justify-content:  center;
  transform:        translateX(0);
  transition:       background-color 120ms ease,
                    opacity          200ms ease,
                    transform        200ms ease;
  width:            2.5rem;
}

.carousel__nav-btn:hover:not(:disabled) {
  background-color: var(--muted);
}

/* Left button slides out to the left when at the start */
.carousel__overlay--left .carousel__nav-btn:disabled {
  opacity:   0;
  transform: translateX(-100%);
}

/* Right button slides out to the right when at the end */
.carousel__overlay:not(.carousel__overlay--left) .carousel__nav-btn:disabled {
  opacity:   0;
  transform: translateX(100%);
}

.carousel__nav-btn svg {
  display: block;
  height:  1rem;
  width:   1rem;
}


/* ============================================================
   Visually hidden — accessible to screen readers only
   ============================================================ */

.sr-only {
  clip:        rect(0 0 0 0);
  clip-path:   inset(50%);
  height:      1px;
  overflow:    hidden;
  position:    absolute;
  white-space: nowrap;
  width:       1px;
}


/* ============================================================
   Responsive gutter overrides — mirror container.css breakpoints
   ============================================================ */

@media (max-width: 991px) {
  .carousel { --carousel-gutter: 60px; }
}

@media (max-width: 767px) {
  .carousel { --carousel-gutter: 48px; }

  .carousel__nav-btn {
    height: 2rem;
    width:  2rem;
  }

  /* Gradient spans 24px — 50% of the 48px gutter */
  .carousel__overlay:not(.carousel__overlay--left) {
    background: linear-gradient(to right, transparent 0%, var(--background) 50%);
  }

  .carousel__overlay--left {
    background: linear-gradient(to left, transparent 0%, var(--background) 50%);
  }
}

@media (max-width: 479px) {
  .carousel { --carousel-gutter: 48px; }
}