/* ==========================================================================
   ALBI HOME — HERO
   --------------------------------------------------------------------------
   Figma: 1440x900 photo band directly under the 130px header.
     badge   y228   54px pill
     h1      y294   60px, middle clause in --gold-400, 780px measure
     body    y539   18px, 747px measure
     actions y692   two 56px buttons
     strip   y816   1296x116 glass panel, five feature items
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-hero);
  overflow: hidden;
}

/* --- Photography ---------------------------------------------------------
   object-position leans right so the glazing — the thing being sold — stays
   in frame when the crop tightens on narrow screens. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

/* Left-weighted scrim so the copy always has ground under it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hero-scrim);
}

/* Fades the photo into the page colour instead of cutting it off. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(80px, 14vw, 190px);
  z-index: -1;
  background: var(--grad-hero-foot);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding-block: clamp(2.5rem, 6vw, 6.125rem) clamp(2.5rem, 6vw, 6.125rem);
}

/* 13.2em of the h1's own size = 792px at 60px. Greedy wrapping at that width
   reproduces the design's three lines exactly:
     Moderne Fenster- &
     Türlösungen aus Aluminium
     und Kunststoff.
   text-wrap:balance would redistribute them, so it is switched off here only.
   Every other heading on the site keeps balance. */
.hero__title {
  max-width: 13.2em;
  margin-top: var(--space-1);
  text-wrap: wrap;      /* i.e. greedy — NOT "normal", which is invalid here */
}
.hero__title em {
  color: var(--gold-400);
  font-style: normal;
}

.hero__lead {
  max-width: 748px;                   /* 747px as drawn */
  margin-bottom: var(--space-2);
  color: var(--text-on-media);
}

.hero .actions { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   FEATURE STRIP
   -------------------------------------------------------------------------- */
/* Measured off the export: 116px tall panel, 60px discs inset 30px from the
   panel edge and 28px from top and bottom, 17px between disc and label.
   Items size to their own label and are distributed across the panel — five
   equal columns would squeeze the longest label onto three lines. */
.hero__features {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin-top: clamp(2rem, 4vw, 4.25rem);
  padding: 28px 30px;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* flex-shrink lets the five items squeeze to fit the 1296 panel; the labels
   then wrap to two lines, which is how the design sets them. */
.hero__feature {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 60px;
}

.hero__feature-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border: 1px solid var(--a-white-08);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, .06);
}
/* No sizing here on purpose — the brand SVGs come in at their own dimensions
   (20x20, 18x20, 30x14) exactly as the design places them. */

.hero__feature-label {
  max-width: 21ch;               /* keeps every label to two lines at most */
  font-size: 0.9375rem;          /* 15px — measured off the export */
  line-height: 1.45;
  color: var(--text-primary);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
/* --- Tablet: a grid, not wrapped flex. The five labels are all different
       lengths, so centred wrapping leaves ragged rows with the discs at
       different x positions. Columns line the discs up. 3-up at ~1024,
       2-up at ~768; the short last row simply sits left. ------------------- */
@media (max-width: 1199.98px) {
  .hero__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px 28px;
    padding: 26px 28px;
  }
  .hero__feature { min-height: 0; }
  .hero__feature-label { max-width: 24ch; }
}

/* --- Phone: a divided list. Even rhythm, full-width tap rows, and the labels
       get the whole width instead of wrapping inside a narrow column. ------- */
@media (max-width: 767.98px) {
  .hero__features {
    grid-template-columns: 1fr;     /* single column — the rule above is a grid */
    align-items: stretch;
    gap: 0;
    padding: 6px 20px;
    border-radius: var(--radius-lg);
  }
  .hero__feature {
    width: 100%;
    gap: 16px;
    min-height: 0;
    padding-block: 15px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .hero__feature:last-child { border-bottom: 0; }
  .hero__feature-icon { width: 48px; height: 48px; }
  .hero__feature-label { max-width: none; }
}

@media (max-width: 479.98px) {
  .hero__features { padding: 4px 16px; }
  .hero__feature { gap: 14px; padding-block: 13px; }
  .hero__feature-icon { width: 44px; height: 44px; }
  .hero__title { max-width: none; }
}

/* --------------------------------------------------------------------------
   MOBILE HERO
   Full-bleed behind a tall stack of copy crops the photo to a sliver and then
   buries it under the scrim needed to keep text legible. Below 768 the section
   becomes a column instead: the message leads, and the photo closes it.

     .hero__inner   order 1 — badge, headline, copy, CTAs, features
     .hero__media   order 2 — the image band
     .hero::before  the gradient, re-pinned to the bottom so it stays over
                    the band once the band moves below the copy

   The band's top fades out of the hero's own ground and its bottom fades into
   the page colour, so it reads as one continuous surface with no hard seams
   at either end.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero__inner {
    order: 1;
    z-index: 2;
    padding-block: var(--space-7) var(--space-7);
  }

  /* Portrait photograph behind the copy block, full-bleed across the whole
     .hero__inner box including its gutters.
     It is a painted layer, not an <img>, so it needs no alt text and cannot
     be mistaken for content — it is atmosphere.
     The scrim is deliberately heavy. Measured against the brightest parts of
     the photo (the sunlit floor and the sky through the glazing), it keeps
     white headings above 11:1 and the 84%-white body copy above 6:1, so the
     picture reads as texture without ever competing with the words.
     The last stop lands on --bg-hero, which is exactly what the image band
     below opens with, so the two photographs meet without a seam. */
  .hero__inner::before {
    /* Held in a custom property so the fallback and the image-set() rule
       below cannot drift apart. */
    /* Alpha is tuned, not guessed. At .63 the brightest point of the photo
       measured 4.15:1 against the 84%-white body copy — under AA. .68 puts it
       back over 4.5:1 while still letting the glazing read through. */
    --hero-scrim: linear-gradient(
      180deg,
      rgba(12, 10, 8, .78) 0%,
      rgba(12, 10, 8, .68) 34%,
      rgba(12, 10, 8, .74) 68%,
      rgba(16, 13, 10, .93) 92%,
      var(--bg-hero) 100%
    );

    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: var(--hero-scrim), url("../img/hero-mobile-540.jpg");
  }

  /* Modern browsers take the WebP and the 2x source from here. */
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .hero__inner::before {
      background-image:
        var(--hero-scrim),
        image-set(
          url("../img/hero-mobile-540.webp") type("image/webp") 1x,
          url("../img/hero-mobile-941.webp") type("image/webp") 2x
        );
    }
  }

  /* Taller than the visible middle needs to be, because both ends are spent
     on the fades. ~60% of the band still reads at full strength. */
  .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(300px, 76vw, 440px);
    display: none;
  }
  .hero__media img { object-position: 50% 46%; }

  /* Bottom-pinned, matching the band exactly. The first stop is the hero's
     ground and the last is the page's, so the photo dissolves into whatever
     sits on either side of it instead of butting against a hard edge. */
  .hero::before {
    inset: auto 0 0;
    height: clamp(300px, 76vw, 440px);
    z-index: 1;
    background: linear-gradient(
      180deg,
      var(--bg-hero) 0%,
      rgba(16, 13, 10, .56) 14%,
      rgba(16, 13, 10, .03) 40%,
      rgba(23, 26, 31, .06) 62%,
      rgba(23, 26, 31, .58) 86%,
      var(--bg-page) 100%
    );
  }
  .hero::after { display: none; }

  /* The badge now sits on solid ground rather than over photography, so it
     takes the same gold wash as every other eyebrow on the page. */
  .eyebrow--on-media {
    background-color: var(--a-gold-12);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) var(--space-6);
  background-color: var(--bg-page);
  overflow: hidden;
}

/* The oversized wordmark behind the card, as drawn in the design. */
.site-footer__watermark {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(4rem, 15vw, 15rem);
  font-weight: var(--fw-bold);
  letter-spacing: -.03em;
  line-height: .8;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 78%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}

.site-footer__card {
  position: relative;
  display: grid;
  gap: var(--space-7) var(--space-6);
  padding: clamp(1.75rem, 3.4vw, 3.125rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
}
@media (min-width: 768px) {
  .site-footer__card { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.site-footer__brand img { width: 100px; height: auto; }
.site-footer__brand p {
  max-width: 34ch;
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.site-footer h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}

.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__list li {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
/* inline-flex + min-height gives each link a 44px tap target without
   spreading the list out visually. */
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.site-footer__list a:hover { color: var(--gold-400); }

.site-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--text-primary);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.site-footer__phone:hover { color: var(--gold-400); }

.site-footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer__legal a:hover { color: var(--gold-400); }
.site-footer__legal p { display: flex; align-items: center; flex-wrap: wrap; }