/* ==========================================================================
   Hero
   ==========================================================================
   Ported from web/components/site/hero.tsx and hero-polish.module.css.

   Layout: one column on mobile and tablet, two from 1024px up, with the
   photo pair pinned to a fixed 360px track so the headline measure does not
   stretch on wide screens.
   ========================================================================== */

.hero {
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  align-items: start;
  gap: 2.5rem;
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .hero__inner { padding-block: 5rem; }
}

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) 360px; }
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

/* --------------------------------------------------------------------------
   Proof chips. Real numbers only: 4.9/5 is the review score, 350+ is the
   vetted brand count and 8 is years trading. See
   project/research/kpis-and-clients.md before changing any of them.
   -------------------------------------------------------------------------- */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  background-color: var(--background-subtle);
  padding: 0.25rem 0.75rem;
}

.hero__chip-value {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: var(--text-h4-tracking);
  font-weight: 500;
  color: var(--foreground);
}

.hero__chip-label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--muted-foreground);
}

.hero__stars {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* The review star gold is a fixed brand-external colour: it belongs to the
   review platform, not to our palette, which is why it is not a token. */
.hero__stars svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: #fac917;
  color: #fac917;
}

/* --------------------------------------------------------------------------
   Promise
   -------------------------------------------------------------------------- */
.hero__promise {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* The headline sits between --text-h1 and --text-display-lg and steps through
   three sizes, so it carries its own metrics rather than a scale token. This
   is the one deliberate exception on the page. Everything else uses the scale. */
.hero__title {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .hero__title { font-size: 48px; }
}

@media (min-width: 1024px) {
  .hero__title { font-size: 52px; line-height: 1.06; }
}

/* Two phrases carry the accent. One colour on the page, used twice.
   A span rather than <em>, because this is colour, not emphasis: a screen
   reader should read the headline flat. */
.hero__accent {
  color: var(--brand);
}

.hero__lede {
  max-width: 36rem;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Client logos. Every file is exactly 29px tall, so setting one height keeps
   the row optically even with no per-logo tuning. Widths vary a lot: AXA is
   29px, Air France is 249px.

   The React source carries a max-w-36 (144px) cap that does not take effect
   in the shipped build, so Air France renders at its full 206px. This port
   matches what shipped and was reviewed, not what the class intended. If the
   cap was the real intent, add max-width: 9rem here and expect the logo row
   to rewrap.
   -------------------------------------------------------------------------- */
.hero__clients {
  display: flex;
  max-width: 36rem;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.75rem;
  row-gap: 1rem;
}

.hero__client-logo {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Calls to action. One primary, one quiet. Both go somewhere real.
   -------------------------------------------------------------------------- */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Photo pair. Desktop only: at narrow widths the two overlapping portraits
   would either shrink past legibility or push the headline below the fold.
   -------------------------------------------------------------------------- */
.hero__media {
  position: relative;
  display: none;
  height: 500px;
  width: 360px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .hero__media { display: block; }
}

.hero__portrait {
  position: absolute;
  width: 250px;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero__portrait--back {
  right: 0;
  top: 0;
  height: 300px;
}

/* The front portrait carries a background-coloured ring so it reads as a
   separate card where it overlaps the one behind it. */
.hero__portrait--front {
  bottom: 0;
  left: 0;
  height: 290px;
  box-shadow: 0 0 0 4px var(--background), var(--shadow-lg);
}

@media (hover: hover) and (pointer: fine) {
  .hero__portrait:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__portrait { transition: none; }
  .hero__portrait:hover { transform: none; }
}