/* ==========================================================================
   ALBI HOME — ÜBER ALBI HOME
   Text column left, an angled photograph right with a gold plate behind it.
   Reuses .container, .eyebrow, .section-head__title, .prose and .btn.
   Depends on tokens.css + base.css + components.css.

   Measured from ALBI-HOME-final.fig (node 42:2185) / the 1440x9649 export.
   ========================================================================== */

.about-section {
  background-color: var(--bg-page);
  background-image: var(--about-scrim), url("../img/about-bg-1440.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  --about-scrim: linear-gradient(rgba(16, 18, 23, .88), rgba(16, 18, 23, .88));
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .about-section {
    background-image: var(--about-scrim), image-set(
      url("../img/about-bg-1440.webp") type("image/webp") 1x,
      url("../img/about-bg-1440.jpg")  type("image/jpeg") 1x);
  }
}
@media (max-width: 1023.98px) {
  .about-section { background-image: var(--about-scrim), url("../img/about-bg-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .about-section {
      background-image: var(--about-scrim), image-set(
        url("../img/about-bg-1024.webp") type("image/webp") 1x,
        url("../img/about-bg-1024.jpg")  type("image/jpeg") 1x);
    }
  }
}
@media (max-width: 719.98px) {
  .about-section { background-image: var(--about-scrim), url("../img/about-bg-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .about-section {
      background-image: var(--about-scrim), image-set(
        url("../img/about-bg-720.webp") type("image/webp") 1x,
        url("../img/about-bg-720.jpg")  type("image/jpeg") 1x);
    }
  }
}

/* --------------------------------------------------------------------------
   LAYOUT
   1296 = 585 (copy) + 16 + 695 (the media, including the gold overhang).
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 585fr) minmax(0, 695fr);
  gap: 16px;
  align-items: center;
}

/* 547px as drawn, which breaks it "Ihr Partner für Fenster & Türen / in
   Duisburg". Anything tighter pushes "Fenster & Türen" onto its own line and
   the heading runs to three. */
.about__title {
  margin-top: var(--space-5);
  max-width: 547px;
  /* Greedy, not balanced. base.css balances every heading, which here splits
     it "Ihr Partner für Fenster / & Türen in Duisburg"; the design fills the
     first line and breaks "…Fenster & Türen / in Duisburg". */
  text-wrap: wrap;
}

.about__text {
  margin-top: var(--space-6);
  max-width: 585px;                 /* as drawn */
  line-height: var(--lh-normal);    /* 27px at 18px, as measured */
}

/* The gold strap line. --gold-500, 24px, as measured. */
.about__claim {
  margin-top: var(--space-6);
  max-width: 585px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.2;                 /* 29px at 24px, as measured */
}

.about .btn { margin-top: var(--space-7); }

/* --------------------------------------------------------------------------
   THE ANGLED MEDIA
   Both plates are the same trapezoid: the left edge leans 68px across a
   668x548 box and the right edge stays vertical. Expressed as a percentage so
   the lean scales with the box instead of snapping back to square as the
   column narrows.

   The gold plate is the same shape translated up and left, so it reads as a
   printed offset rather than as a border — a border would have to hug all
   four sides and the design only shows it on two.
   -------------------------------------------------------------------------- */
.about__media {
  --about-clip: polygon(10.17% 0, 100% 0, 100% 100%, 0 100%);
  --about-offset: clamp(10px, 1.74vw, 25px);

  /* The plate's displacement, as two variables rather than two literals.
     A CSS animation overrides every declarative transform, so motion.css's
     gold-plate-drift keyframes would otherwise pin this to one direction and
     silently defeat any block that wants the offset mirrored. Both the static
     rule below and those keyframes read THESE, so a mirrored block sets them
     once and both agree. */
  --about-plate-x: calc(var(--about-offset) * -1);
  --about-plate-y: calc(var(--about-offset) * -0.8);

  position: relative;
  aspect-ratio: 669 / 548;          /* as drawn */
}

.about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(var(--about-plate-x), var(--about-plate-y));
  background-color: var(--gold-500);
  clip-path: var(--about-clip);
}

/* position:relative lifts the photograph above the ::before, which is
   generated first and would otherwise paint over it. */
.about__media picture { display: contents; }
.about__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: var(--about-clip);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */

/* The copy needs a comfortable measure long before the photograph needs to
   go; below 900 the two columns start fighting, so the media drops under. */
@media (max-width: 899.98px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  /* Order is set here rather than in the markup so the reading order stays
     heading -> copy -> image for anyone not seeing the layout. */
  .about__media { order: 2; max-width: 560px; }
  .about__copy  { order: 1; }
  .about__title { max-width: none; }
}

@media (max-width: 767.98px) {
  .about__text { font-size: var(--fs-body); }
  .about__claim { font-size: var(--fs-h4); }
  .about .btn { width: 100%; }
}