/* public/stylesheets/pages/home.css — home page (P1).
   Tokens and design-system components only (DESIGN-SYSTEM §9.1); mobile
   first; breakpoints 560 / 820 / 1100 as in the design system. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero-home__title em {
  font-style: normal;
  color: var(--ctx-accent, var(--text-accent));
}
.home-brandline {
  margin-top: var(--sp-16);
  max-width: 29.5rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}
.hero-home .home-brandline + .btn-group {
  margin-top: var(--sp-24);
}
@media (min-width: 820px) {
  .hero-home .lead {
    max-width: 34rem;
  }
}
/* Four sourced numbers: 2 × 2 on phones, one row from 560 px. */
.home-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--sp-16);
}
.home-stats > div:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}
@media (min-width: 560px) and (max-width: 819.98px), (min-width: 1100px) {
  .home-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-stats > div:nth-child(odd) {
    padding-left: var(--sp-16);
  }
  .home-stats > div:first-child {
    padding-left: 0;
  }
  .home-stats > div + div {
    border-left: 1px solid var(--divider);
  }
}
.hero-home .hero-media > img {
  background: var(--brand-ice-light);
}
@media (max-width: 819.98px) {
  .hero-home .hero-media {
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 34rem;
  }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
/* A long page: a slightly tighter rhythm than the default section space on
   desktop keeps the home page within its height budget (≤ 7,800 px). */
@media (min-width: 820px) {
  .home-section {
    padding-top: var(--sp-40);
  }
  .home-section.section--pad {
    padding-bottom: var(--sp-56);
  }
  .home-section .section-head {
    margin-bottom: var(--sp-20);
  }
  .hero-home .hero-home__title {
    margin-top: var(--sp-20);
  }
  .hero-home .home-brandline {
    margin-top: var(--sp-12);
  }
  .hero-home .hero-home__text {
    gap: var(--sp-24);
  }
  .hero-home .home-brandline + .btn-group {
    margin-top: var(--sp-20);
  }
}
/* 01 · New series mosaic: list items are the grid cells. */
.home-mosaic {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-mosaic > li {
  display: grid;
  min-width: 0;
}
.home-mosaic .tile-card {
  height: 100%;
}
.home-mosaic .tile-card > .media-fallback {
  height: 100%;
}
.home-mosaic__line {
  max-width: 100%;
  white-space: normal;
  text-align: start;
}

/* 02 · Colour module (DE2505) */
.home-colours {
  display: grid;
  gap: var(--sp-24);
  margin-top: var(--grid-gap);
}
.home-colours__intro .eyebrow {
  margin-bottom: var(--sp-8);
}
.home-colours__text {
  margin-top: var(--sp-8);
  max-width: 30rem;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.home-colours__selected {
  margin-top: var(--sp-12);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}
.home-colours__actions {
  margin-top: var(--sp-20);
}
@media (min-width: 820px) {
  .home-mosaic {
    grid-template-rows: repeat(2, 10.5rem);
  }
}
@media (min-width: 1100px) {
  .home-colours {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--sp-40);
    align-items: center;
  }
  .home-swatches {
    grid-template-columns: repeat(12, minmax(0, 2.75rem));
    justify-content: space-between;
  }
}

/* 03 · Collections (list of cards; square on desktop to keep the page short) */
.home-collections {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-collections > li {
  min-width: 0;
}
@media (min-width: 820px) {
  .home-collections .collection-card {
    aspect-ratio: 1;
  }
}

/* 05 · Latest news: two lines of summary on the home page. */
.home-news .news-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 04 · Trade fairs: between 820 and 1099 px the module stacks (the rows
   are too narrow beside the card). */
@media (min-width: 820px) and (max-width: 1099.98px) {
  .home-fairs .fair-module.grid--5-7 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* On wide screens the next-fair card takes half the row,
   so its title, facts and buttons need fewer lines (P4's module markup). */
@media (min-width: 1100px) {
  .home-fairs .fair-module.grid--5-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-fairs .fair-feature {
    gap: var(--sp-16);
  }
  .home-fairs .fair-feature__facts {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  }
}

/* 06 · How we work */
.home-how .section-head {
  margin-bottom: var(--sp-32);
}

/* 07 · Services: title links inherit the tile colour. */
.home-tile-link {
  color: inherit;
  text-decoration: none;
}
.home-tile-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.service-tile .code-tiles {
  margin-top: calc(var(--sp-4) * -1);
}

/* 07 · Services: slightly shorter rows than the default bento. */
@media (min-width: 820px) {
  .home-services .service-grid {
    grid-auto-rows: minmax(13rem, auto);
  }
  .home-services .service-tile--photo:not(.span-rows-2) {
    min-height: 13rem;
  }
}

/* 08 · Company */
.home-company {
  align-items: stretch;
}
.home-company__media {
  min-height: 20rem;
}
.home-company .history li {
  padding-block: var(--sp-12);
}
.home-offices {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Contact band form */
.home-form .form-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-20);
}
.home-form__count.is-empty {
  display: none;
}
.home-form__items {
  margin-bottom: var(--sp-20);
}
.home-form__more {
  margin-top: var(--sp-16);
}
.home-company__foot {
  display: grid;
  gap: var(--sp-16);
}
@media (min-width: 1200px) {
  .home-company__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .home-contact .cta-band__grid {
    padding-block: var(--sp-56);
  }
}
@media (min-width: 820px) {
  .home-series .band__head {
    margin-bottom: var(--sp-32);
  }
}

/* The floating DE2505 card needs room beside the logo badge: wide screens only. */
@media (max-width: 1099.98px) {
  .hero-home .hero-media > .hero-media__card {
    display: none;
  }
}