/* Home page (index.html): the Lierwerf one-pager. Layout after the website
   mockup in the untold pitch deck (p. 9), structure after the client's
   reference layers-development.nl (headline, availability badge, size
   line, two actions, a trust bar), on a light ground with the pale blue
   accent. Parts with their own stylesheet: fold, gallery, unit-plan. */

.home {
  /* Above the footer, which sits behind the page and is uncovered at
     the end (footer.css). */
  position: relative;
  z-index: 1;
  overflow-x: clip;
  background: var(--theme-color-background);
  font-size: var(--theme-text-md);
  line-height: 1.6;
}

/* The shadow the page casts on the footer, only below its bottom edge (a
   shadow on main itself also showed above its top, under the header). */
.home::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  box-shadow: 0 0 60px 12px color-mix(in srgb, var(--theme-color-primary) 30%, transparent);
  clip-path: inset(0 0 -120px 0);
  pointer-events: none;
}

.home:focus,
.home [tabindex='-1']:focus {
  outline: none;
}

.heading {
  margin: 0 0 var(--theme-space-xs);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--theme-color-heading);
  text-wrap: balance;
}

.heading--xl {
  font-size: var(--theme-text-xl);
}

.heading--lg {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

/* Buttons. The label rolls up and a copy rolls in from below on hover,
   as on the reference site; the copy comes from data-label. */
.button {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: 3rem;
  padding: 0 1.5rem;
  overflow: hidden;
  border-radius: var(--theme-radius-pill);
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.button--dark {
  background: var(--theme-color-primary);
  color: var(--theme-color-inverse-text);
  transition:
    background-color 0.45s var(--theme-ease-signature),
    color 0.45s var(--theme-ease-signature);
}

/* On hover the dark button turns to the accent, with dark text. */
.button--dark:hover {
  background: var(--theme-color-highlight);
  color: var(--theme-color-heading);
}

/* The label fills the button's full height, so moving it up by 100%
   clears it whatever the button's size. The transform is the magnetic
   pull towards a nearby pointer (main.js sets the two variables); only
   the label moves, the button and its click area stay put. */
.button > span,
.button::after {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(var(--theme-magnet-x, 0), var(--theme-magnet-y, 0));
  transition:
    translate 0.45s var(--theme-ease-signature),
    transform 0.5s var(--theme-ease-signature);
}

.button[data-magnet-near] > span,
.button[data-magnet-near]::after {
  transition:
    translate 0.45s var(--theme-ease-signature),
    transform 0.15s ease-out;
}

.button::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  translate: 0 100%;
}

.button:hover > span {
  translate: 0 -100%;
}

.button:hover::after {
  translate: 0 0;
}

.button--link {
  align-items: center;
  padding-inline: 0.25rem;
  color: var(--theme-color-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.button--link::after {
  content: none;
}

.button--link:hover {
  text-decoration-thickness: 2px;
}

.button:focus-visible {
  outline: 2px solid var(--theme-color-heading);
  outline-offset: 3px;
}

/* Hero: text on the light ground on the left, the photo on the right
   with its left edge cut along the fold's diagonal and a band of the
   accent along that edge. Tags on the photo as in the mockup. */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);

  /* Exactly the screen under the header, whatever its height, so the
     trust bar below only comes into view on scroll. The photo is laid over
     its cell (absolute), so a tall photo never sets the height. */
  height: max(34rem, calc(100svh - var(--theme-header-height)));
}

.hero__by {
  position: absolute;
  bottom: var(--theme-space-md);
  left: calc(var(--theme-gutter) / 2 - 0.6em);
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-weight-medium);
  color: var(--theme-color-text-muted);
  writing-mode: vertical-rl;
  rotate: 180deg;
}

/* The text column runs the full height of the hero: room at the top for
   the availability label (fixed under the logo), the headline in the
   middle. The small facts are tags on the photo. */
.hero__text {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--theme-space-md);
  padding: calc(var(--theme-space-sm) + 2.5rem) var(--theme-space-lg) var(--theme-space-md)
    var(--theme-bleed);
}

.hero__main {
  margin-block: auto;
}

/* Availability label: fixed under the logo, so it stays in view while
   the page scrolls. */
.availability {
  position: fixed;
  top: calc(var(--theme-header-height) + 12px);
  left: var(--theme-gutter);
  z-index: 9;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
  padding: 0.35em 0.85em;
  border-radius: var(--theme-radius-sm);
  background: var(--theme-color-highlight);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--theme-color-primary) 45%, transparent);
  font-size: 0.8125rem;
  font-weight: var(--theme-font-weight-medium);
  color: var(--theme-color-heading);
}

.availability__count {
  font-weight: var(--theme-font-weight-bold);
}

.hero__title {
  font-size: var(--theme-text-2xl);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--theme-color-heading);
  text-wrap: balance;
}

.hero__lead {
  max-width: 30rem;
  margin-top: var(--theme-space-xs);
  font-size: var(--theme-text-lg);
  line-height: 1.4;
}

/* Tags: a small label over a value. */
.tag {
  display: grid;
  padding: 10px 14px;
  border: 1px solid var(--theme-color-border);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-color-surface);
  font-size: var(--theme-text-lg);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1.1;
  color: var(--theme-color-heading);
}

.tag__label {
  font-size: 0.75rem;
  font-weight: var(--theme-font-weight-medium);
  color: var(--theme-color-text);
}

/* On a photo: frosted glass. */
.tag--glass {
  border-color: transparent;
  background: color-mix(in srgb, var(--theme-color-surface) 55%, transparent);
  backdrop-filter: blur(10px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  margin-top: var(--theme-space-sm);
}

.hero__media {
  position: relative;
  grid-area: 1 / 2;
  margin: 0;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* The accent band, parallel to the photo's cut edge, spanning the whole
   hero so it runs on unbroken to the bottom edge. In hero widths: the
   photo column starts at 5/11 (45.45%) and its edge runs from 22% of that
   column (57.45%) at the top to 45.45% at the bottom; the band shows 14%
   of the column (7.64%) left of it. The layer runs on behind the photo to
   the right edge, so the accent is already there when the photo wipes in
   on load. */
.hero::after {
  content: '';
  grid-area: 1 / 1 / 2 / 3;
  z-index: -1;
  background: var(--theme-color-highlight);
  clip-path: polygon(49.81% 0, 100% 0, 100% 100%, 37.81% 100%);
}

/* The tags sit in their own layer over the photo's cell (not inside the
   clipped photo), in an even staircase down the cut edge: each tag's
   middle sits on the edge, which runs from 22% of the cell at the top to
   0 at the bottom, so every tag crosses the accent band. They lean
   towards the pointer (--theme-magnet-*) and can be dragged anywhere in
   the hero (--theme-drag-*), both set by main.js. */
.hero__tags {
  --theme-tag-half: 3.75rem;

  position: relative;
  grid-area: 1 / 2;
  pointer-events: none;
}

.hero__tag {
  position: absolute;
  left: calc(var(--theme-tag-edge) - var(--theme-tag-half));
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform: translate(
    calc(var(--theme-drag-x, 0px) + var(--theme-magnet-x, 0px)),
    calc(var(--theme-drag-y, 0px) + var(--theme-magnet-y, 0px))
  );
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--theme-color-primary) 40%, transparent);
  transition:
    transform 0.6s var(--theme-ease-signature),
    box-shadow 0.35s var(--theme-ease-signature);
}

.hero__tag[data-magnet-near] {
  transition:
    transform 0.2s ease-out,
    box-shadow 0.35s var(--theme-ease-signature);
}

/* Picked up: it follows the pointer directly, the shadow grows. */
.hero__tag[data-dragging] {
  box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--theme-color-primary) 55%, transparent);
  transition: box-shadow 0.35s var(--theme-ease-signature);
}

/* Edge position at each tag's top: 22% x (1 - top). */
.hero__tag--start {
  --theme-tag-edge: 16.7%;

  top: 24%;
}

.hero__tag--floors {
  --theme-tag-edge: 14.3%;

  top: 35%;
}

.hero__tag--price {
  --theme-tag-edge: 11.9%;

  top: 46%;
}

.hero__tag--door {
  --theme-tag-edge: 9.5%;

  top: 57%;
}

.hero__tag--size {
  --theme-tag-edge: 7%;

  top: 68%;
}

@media (width <= 800px) {
  .hero {
    grid-template-columns: 1fr;
    height: auto;
  }

  .hero__by,
  .hero::after {
    display: none;
  }

  .hero__text {
    grid-area: 1 / 1;
    padding: var(--theme-space-lg) var(--theme-gutter);
  }

  .hero__media {
    grid-area: 2 / 1;
    height: 70svh;
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }

  .hero__tags {
    grid-area: 2 / 1;
  }

  .hero__tag--start {
    top: 16%;
    left: var(--theme-gutter);
  }

  .hero__tag--price {
    top: 30%;
    left: 34%;
  }

  .hero__tag--size {
    top: 44%;
    left: var(--theme-gutter);
  }

  .hero__tag--floors,
  .hero__tag--door {
    display: none;
  }
}

/* Trust bar under the hero, as on the reference site. */

.usps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-block: 1px solid var(--theme-color-border);
  list-style: none;
  font-size: var(--theme-text-sm);
}

.usps__item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 18px var(--theme-gutter);
}

.usps__item + .usps__item {
  border-left: 1px solid var(--theme-color-border);
}

.usps__item strong {
  font-weight: var(--theme-font-weight-bold);
  color: var(--theme-color-heading);
}

.usps__mark {
  flex: none;
  width: 14px;
  height: 14px;
  fill: var(--theme-color-heading);
}

/* Intro: the statement on the left, the copy on the right. */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--theme-space-lg);
  align-items: end;
  min-height: 70svh;
  padding: var(--theme-section-space) var(--theme-bleed);
}

.intro .heading {
  margin: 0;
}

.intro__text > p + p {
  margin-top: 1em;
}

.intro__lead {
  font-size: var(--theme-text-lg);
  font-weight: var(--theme-font-weight-medium);
  line-height: 1.45;
  color: var(--theme-color-heading);
}

/* Feature: the overhead door photo and the facts. */

.feature {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--theme-space-lg);
  align-items: center;
  min-height: 90svh;
  padding: var(--theme-section-space) var(--theme-bleed);
  background: var(--theme-color-surface);
}

.feature__media {
  margin: 0;
}

/* Blueprint grid behind the section, drawn in CSS so the lines are
   crisp: a 40px grid with a stronger line every 200px, anchored on the
   photo's top-left corner so the photo's edges sit on grid lines. It
   fades out from the photo's corner and is gone before the text column,
   so it never crosses the facts table. */
.feature::before {
  --theme-grid-line: color-mix(in srgb, var(--theme-color-secondary) 22%, transparent);
  --theme-grid-major: color-mix(in srgb, var(--theme-color-secondary) 40%, transparent);

  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;

  /* Absolutely placed in a grid, it spans the whole grid and, through the
     negative margin, the padding too: the full section. */
  grid-area: 1 / 1 / -1 / -1;
  margin: calc(-1 * var(--theme-section-space)) calc(-1 * var(--theme-bleed));
  background-image:
    linear-gradient(to right, var(--theme-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--theme-grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--theme-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--theme-grid-line) 1px, transparent 1px);
  background-position: var(--theme-bleed) var(--theme-section-space);
  background-size:
    200px 200px,
    200px 200px,
    40px 40px,
    40px 40px;
  mask-image: radial-gradient(
    ellipse 55% 75% at var(--theme-bleed) 60%,
    #000 0%,
    rgb(0 0 0 / 60%) 45%,
    transparent 100%
  );
  pointer-events: none;
}

.feature__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.facts {
  margin-top: var(--theme-space-sm);
}

.facts__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 24px;
  padding-block: 14px;
  border-top: 1px solid var(--theme-color-border);
}

.facts__row:last-child {
  border-bottom: 1px solid var(--theme-color-border);
}

.facts dt {
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-weight-semibold);
  color: var(--theme-color-heading);
}

/* Call to action: one screen, the title centered, photos scattered
   around it at the edges. Each photo has its own drift (the direction
   it comes in from), read by motion.css. */

.cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--theme-section-space) var(--theme-bleed);
  overflow: clip;
  background: var(--theme-color-surface);
  text-align: center;
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  max-width: 56rem;
}

.cta__badge {
  margin-bottom: var(--theme-space-xs);
  padding: 0.3em 0.9em;
  border-radius: var(--theme-radius-sm);
  background: var(--theme-color-highlight);
  font-size: 0.8125rem;
  font-weight: var(--theme-font-weight-medium);
  color: var(--theme-color-heading);
}

.cta__title {
  font-size: clamp(2.75rem, 1.4rem + 6vw, 7rem);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--theme-color-heading);
  text-wrap: balance;
}

.cta__text {
  max-width: 34rem;
  margin: var(--theme-space-sm) 0;
  font-size: var(--theme-text-lg);
  line-height: 1.45;
}

.button--large {
  min-height: 3.5rem;
  padding-inline: 2rem;
  font-size: var(--theme-text-md);
}

.cta__images {
  position: absolute;
  inset: 0;
  list-style: none;
  pointer-events: none;
}

.cta__image {
  position: absolute;
  width: var(--theme-cta-size);
}

.cta__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--theme-cta-ratio, 4 / 5);
  object-fit: cover;
}

.cta__image--left {
  --theme-cta-size: clamp(5rem, 9vw, 9rem);
  --theme-cta-dx: -60%;
  --theme-cta-dy: -30%;

  top: 10%;
  left: -1%;
}

.cta__image--top {
  --theme-cta-size: clamp(5rem, 8vw, 8rem);
  --theme-cta-dx: 60%;
  --theme-cta-dy: -40%;
  --theme-cta-ratio: 3 / 4;

  top: 4%;
  right: 3%;
}

.cta__image--bottom {
  --theme-cta-size: clamp(7rem, 14vw, 15rem);
  --theme-cta-dx: -40%;
  --theme-cta-dy: 50%;
  --theme-cta-ratio: 4 / 3;

  bottom: 6%;
  left: 7%;
}

.cta__image--right {
  --theme-cta-size: clamp(6rem, 10vw, 11rem);
  --theme-cta-dx: 50%;
  --theme-cta-dy: 30%;
  --theme-cta-ratio: 1;

  right: 9%;
  bottom: 18%;
}

/* Black and white, as the architecture photo in the brand deck. */
.cta__image--top img {
  filter: grayscale(1);
}

.cta__image--centre {
  --theme-cta-size: clamp(4rem, 6vw, 6.5rem);
  --theme-cta-dx: 0%;
  --theme-cta-dy: -60%;
  --theme-cta-ratio: 1;

  top: 9%;
  left: 30%;
}

@media (width <= 800px) {
  .cta__image--centre {
    display: none;
  }

  .cta__image--left {
    top: 4%;
  }

  .cta__image--right {
    bottom: 4%;
  }
}

@media (width <= 800px) {
  .intro,
  .feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .facts__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button > span,
  .button::after {
    transform: none;
    transition: none;
  }
}