/* ============================================================
   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 {
  position:  relative;
  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): 16px × 2 = 32px */
@media (max-width: 479px) {
  .container {
    max-width: calc(100% - 32px);
  }
}


/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1360px + 128px);  /* 1360px content + 64px × 2 */
  padding:    0 4rem;                /* 64px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet + landscape mobile (≤991px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 2rem;
  }
}

/* Portrait mobile (≤479px) */
@media (max-width: 479px) {
  .container-wide {
    padding: 0 1rem;
  }
}

/* ============================================================
   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; }
}

/* ============================================================
   CaseStudySlide — Individual testimonial card styles.
   Used inside the CaseStudies carousel.
   ============================================================ */

.case-study-card {
  background-color: var(--card);
  border-radius:    var(--radius-lg);   /* 24px */
  box-sizing:       border-box;
  display:          flex;
  flex:             0 0 36.375rem;      /* 582px */
  flex-direction:   column;
  justify-content:  space-between;
  overflow:         hidden;
  padding:          2.25rem;
  scroll-snap-align: start;
}


/* ---- Top row: quote mark + CTA ---- */
.case-study-card__top {
  align-items:     flex-start;
  display:         flex;
  justify-content: space-between;
  padding-bottom:  1.5rem;    /* 24px */
  width:           100%;
}

.case-study-card__quote-mark {
  color:       var(--border);           /* #D6CFC2 — extra-muted-foreground */
  font-size:   3rem;                    /* 48px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  height:      38px;
}


/* ---- Body: quote + author ---- */
.case-study-card__body {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;    /* 36px */
  flex: 1 0 0;
}

.case-study-card__quote {
  color:       var(--foreground);
  font-size:   1.5rem;        /* 24px */
  font-weight: 300;           /* Light — no token exists yet */
  line-height: 2rem;          /* 32px */
  margin:      0;
  flex: 1 0 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.case-study-card__author-group {
  align-items: center;
  display:     flex;
  gap:         0.75rem;       /* 12px */
}

.case-study-card__avatar {
  background-color: var(--opacity-primary-20);
  border-radius:    var(--radius-full);
  flex-shrink:      0;
  height:           3rem;     /* 48px */
  overflow:         hidden;
  width:            3rem;
}

.case-study-card__avatar img {
  display:    block;
  height:     100%;
  object-fit: cover;
  width:      100%;
}

.case-study-card__author-meta {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.case-study-card__author-name {
  color:       var(--foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  white-space: nowrap;
}

.case-study-card__author-role {
  color:       var(--muted-foreground);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


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

@media (max-width: 767px) {
  .case-study-card {
    flex:    0 0 calc(100vw - var(--carousel-gutter) * 2);
    padding: 1.5rem 2.25rem 2.25rem 2.25rem;
  }

  .case-study-card__quote {
    font-size:   1.25rem;   /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .case-study-card__author-name,
  .case-study-card__author-role {
    font-size:   0.75rem;   /* 12px */
    line-height: 1rem;      /* 16px */
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:     center;
  border:          1px solid transparent;
  box-sizing:      border-box;
  cursor:          pointer;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
  overflow:        hidden;
  text-decoration: none;
  user-select:     none;
  white-space:     nowrap;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1.25rem;           /* 8px 20px → height 36px */
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"] {
  background-color: var(--secondary);
  border-color:     var(--border);
  color:            var(--secondary-foreground);
}

.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Hover */
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.88;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon,
.btn[data-size="md"] .btn__icon,
.btn[data-size="lg"] .btn__icon { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}