/* ------------------------------------------------------------------
   Homepage hero carousel - .cc-hero
   Source of truth: Figma "Untitled" file, node 33:182 (the 1440-wide
   homepage hero). Slide layout from the 21:827 variant.

   Depends on tokens in global/colors.css, global/typography.css and
   global/spacing.css, on the .cc-btn pill in global/buttons.css, and on
   .cc-carousel-nav in global/carousel-nav.css (which supplies the black
   nav pill - this file only positions it). Load those first. It also
   overrides a fair amount of /splide/css/splide.min.css, so that must
   load BEFORE this file.

   Every measurement below is read off the 1440 comp: slide 1292x700,
   card padding 20, text column 468, image 691, 93 between them. The
   fixed values are kept as the upper end of a clamp so the section
   lands exactly on the design at 1440 and degrades below it, rather
   than scaling past 1440 into something no one drew.
   ------------------------------------------------------------------ */

:root {
  /* Card height. 700 at 1440 = 48.61vw. Capped so a 1920 monitor does
     not get a 933px-tall hero, floored so it stays a hero on a laptop. */
  --cc-hero-height: clamp(540px, 80vh, 1000px);

  /* Gap between the text column and the image. 93px at 1440 is what is
     left over once the 468 and 691 columns are placed inside the card. */
  --cc-hero-col-gap: clamp(var(--space-2xs), 6.46vw, 93px);

}

/* Full-bleed section. The side inset that reveals the neighbouring
   slides is Splide's own `padding` option (set in default.aspx), not
   padding here - Splide has to know about it to centre the active
   slide correctly. */
.cc-hero {
  margin-bottom: var(--section-gap);
}

/* Slides -------------------------------------------------------------- */

/* .splide__list already carries height:100% from splide.min.css, so the
   card's explicit height is what sizes the whole track. */
.cc-hero__card {
  display: flex;
  align-items: flex-end;
  gap: var(--cc-hero-col-gap);
  height: var(--cc-hero-height);
  padding: var(--space-2xs);
  background: var(--surface-panel);
  border-radius: var(--radius4);
  overflow: hidden;
  text-decoration: none;
  color: var(--foreground);
}

/* 468 : 691 is the designed column split. Both columns grow, and both
   shrink in proportion to those bases, so the ratio survives every
   width between the mobile breakpoint and 1440. */
.cc-hero__body {
  flex: 1 1 468px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-2xs);
  min-width: 0;
}

.cc-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 100%;
  max-width: 450px;
}

/* 48px / leading 1 / -1.44px tracking in the design - which is exactly
   what --h1 and --tracking-heading already resolve to at 1440. Marked
   up as h2 so the homepage keeps a single h1 (the welcome message in
   default.aspx); the type scale is the h1 one regardless. */
.cc-hero__title {
  font-size: var(--h1);
  font-weight: var(--weight-demibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--foreground);
  margin: 0;
  overflow-wrap: break-word;
}

/* Duplicates .body-md / .text-muted from typography.css on purpose, so
   the hero still renders correctly if those utility classes are ever
   dropped from the markup. */
.cc-hero__desc {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
  color: var(--text-muted);
  margin: 0;
  overflow-wrap: break-word;
}

/* .cc-btn supplies the pill itself - 18/38 padding, 20px label, radius
   100, white on black - which matches the design exactly. Nothing to
   restate here beyond keeping it from stretching in the flex column. */
.cc-hero__cta {
  flex: 0 0 auto;
}

/* stretch, not height:100%: the card is align-items:flex-end, so the
   image has to opt back in to filling the full card height. */
.cc-hero__img {
  flex: 1 1 691px;
  align-self: stretch;
  display: block;
  position: relative;
  min-width: 0;
  border-radius: var(--radius2);
  overflow: hidden;
}

.cc-hero__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius2);
}

/* Nav pill ------------------------------------------------------------ */

/* The black pill under the carousel lives in global/carousel-nav.css as
   .cc-carousel-nav - the design draws the same 141x31 pill here, under
   Best Sellers (21:883) and under the Our Work gallery (21:906), so it
   is shared rather than owned by the hero.

   All that is hero-specific is how far below the card it sits: 40px =
   --space-sm (740 - 700 in the comp). */
.cc-hero .cc-carousel-nav {
  margin: var(--space-sm) auto 0;
}

/* Responsive ---------------------------------------------------------- */

/* Below 768 the two columns cannot both survive: stack them, image
   first, and let the card height come from its content. The 4/3 image
   is ours - the comp has no mobile frame. */
@media (max-width: 767px) {
  .cc-hero__card {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: var(--space-2xs);
    padding: var(--space-3xs);
  }

  .cc-hero__img {
    order: -1;
    flex: 0 0 auto;
    align-self: auto;
    aspect-ratio: 4 / 3;
  }

  .cc-hero__body {
    flex: 0 0 auto;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs) var(--space-2xs);
  }
}