/* =============================================================================
   Home page (index.html) — layout glue only.

   Type comes from the .h1–.h5 / .kicker / .tagline / .body-* classes in
   globals.css, colour and spacing from the tokens in variables.css, and every
   badge, button, card, grid, section header, timeline, banner, carousel and
   hero from css/components/*. What is left in this file is the Chamely
   case-study framing and the Team contact band.

   Docs: components/hero.md, components/sections.md, components/carousel.md,
   components/contact-section.md, design-system/page-guidelines.md, motion.md,
   colors.md, typography.md, spacing-and-layout.md.

   Background rhythm — page-guidelines.md item 1, no two adjacent sections
   share a ground and dark is reserved for the hero and the CTA bands:

     .hero             hero.css      --color-primary           (dark)
     #solutions        .bg-primary   --color-primary-light
     #results          .bg-white     --color-white
     .cta-banner       banner.css    --color-primary           (dark)
     #chamely-preview  .bg-primary   --color-primary-light
     #process          .bg-white     --color-white
     #conferences      carousel.css  --color-division-card-bg
     .team             here          photo over --color-primary-darkest (dark)
     .footer           footer.css    --color-primary-dark
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CHAMELY CASE STUDY — sections.md § About (content section, image left).
   Visual and copy side by side, stacking below 900px with the copy first.
   --------------------------------------------------------------------------- */
.product-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-two-column);
  align-items: center;
}

/* sections.md § About: 560 x 600 visual, rounded, with the division tint the
   demo puts over it. The image is oversized like the hero media so the
   parallax has travel. */
.product-showcase__visual {
  position: relative;
  order: 1;
  height: 600px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-tile);
}

.product-showcase__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: color-mix(in srgb, var(--color-division-brand) 15%, transparent);
  mix-blend-mode: color;
}

/* The demo's rounded About visual uses `contain`, not `cover` — this is a
   product montage rather than a photograph, so cropping it would cut the
   screens off. Same treatment as the demo's .about__visual--rounded img. */
.product-showcase__image {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: contain;
  will-change: transform;
}

.product-showcase__content {
  order: 2;
}

/* sections.md § About closes with a text_link. The documented variant is
   corporate cyan; on a division page the link takes the division brand, which
   is what page-guidelines.md § Division Colors asks for and what the demo
   shows. */
.product-showcase__link {
  color: var(--color-division-brand);
}

.product-showcase__link:hover {
  color: var(--color-division-brand-pressed);
}

/* The pill itself is the Badge component (.badge.badge--division); only its
   placement in the column belongs to the page. */
.product-badge {
  margin-bottom: var(--space-4);
}

/* The <h2> and <h4> keep their own scale from globals.css (page-guidelines.md
   § Visual Consistency); only the rhythm between them is set here. */
.product-showcase__title {
  margin-bottom: var(--space-2);
}

.product-showcase__subtitle {
  margin-bottom: var(--space-4);
  color: var(--color-division-brand);
}

.product-showcase__description {
  margin-bottom: var(--gap-content-block);
  color: var(--color-text-gray);
}

.product-showcase__capabilities-title {
  margin-bottom: var(--space-4);
}

.product-showcase__capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--gap-content-block);
}

.capability-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-gray);
}

.capability-item .icon {
  margin-top: 0.125em;
  color: var(--color-division-brand);
}

.product-showcase__highlight {
  margin-bottom: var(--gap-content-block);
  padding: var(--card-padding);
  background-color: var(--color-division-card-bg);
  border-left: var(--space-1) solid var(--color-division-brand);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  color: var(--color-primary);
}

.product-showcase__highlight strong {
  color: var(--color-primary-darkest);
}

/* ---------------------------------------------------------------------------
   PROCESS NOTE — the closing slogan under the timeline. The blockquote carries
   .tagline, so only its placement is here.
   --------------------------------------------------------------------------- */
.process-note {
  margin-top: var(--gap-section-lg);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   TEAM / CONTACT BAND — sections.md § Team, contact-section.md.

   Three layers under the content: the photo (parallax 0.08), a horizontal
   primary-darkest scrim at 40 -> 80% that creates the dark tone, and a cyan
   wash blended with `lighten`. The photo is the canonical asset named in
   contact-section.md — the sailboat, shared with danubius-it-solutions, which
   ties the band to the brand's sailing imagery. The scrim is what makes the
   section dark, so the source is deliberately bright and low-detail. The cards themselves are the Contact Box
   treatment already in css/components/contact-card.css, selected by the
   section's data-tone="dark".
   --------------------------------------------------------------------------- */
.team {
  position: relative;
  isolation: isolate;
  background-color: var(--color-primary-darkest);
  padding-block: var(--section-padding-y);
  overflow: hidden;
}

/* Three negative layers under the content, in paint order: photo (-2, with
   its own scrim), then the cyan wash (-1). The ::before would otherwise paint
   under the photo, both being -1 and the pseudo-element coming first. */
.team__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.team__bg img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

.team__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-darkest) 40%, transparent),
    color-mix(in srgb, var(--color-primary-darkest) 80%, transparent)
  );
}

.team::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--color-accent-cyan-mid) 20%, transparent);
  mix-blend-mode: lighten;
  pointer-events: none;
}

.team__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--card-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* contact-section.md: one Figma grid column per box. */
.team__card {
  display: flex;
  flex: 1 1 0;
  min-width: min(357px, 100%);
  max-width: 357px;
}

.team__card .contact-card {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE — desktop-first, contracts.md §2. The semantic spacing tokens are
   already redefined per breakpoint in variables.css, so only layout changes
   (column counts, stacking, alignment) need a query.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .product-showcase__visual {
    height: 420px;
  }
}

@media (max-width: 900px) {
  .product-showcase {
    grid-template-columns: 1fr;
  }

  /* Copy first, visual under it, once the columns stack. */
  .product-showcase__visual {
    order: 2;
  }

  .product-showcase__content {
    order: 1;
  }
}

@media (max-width: 600px) {
  .product-showcase__visual {
    height: 280px;
  }

  .product-showcase__capabilities {
    grid-template-columns: 1fr;
  }

  .team__card {
    max-width: none;
  }
}