/* =============================================================================
   HOME — SPECIFIEKE STIJLEN
   Importeert globale design tokens via de hoofd style.css.
   ============================================================================= */

/* Gedeelde hulpklassen zijn verplaatst naar style.css */

/* ── HERO ── */
.hero {
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  background: linear-gradient(135deg, #1c1610 0%, #2a2118 60%, #3a2e22 100%);
  overflow:hidden;
}

.hero__bg {
  position:absolute;
  inset:0;
  /* background-image wordt via inline style gezet vanuit front-page.php (ACF) */
  background-size:cover;
  background-position:center;
}

.hero__overlay {
  position:absolute;
  inset:0;
  background: linear-gradient(
    to right,
    rgba(28,22,16,.85) 0%,
    rgba(28,22,16,.65) 50%,
    rgba(28,22,16,.2)  100%
  );
}

.hero__content {
  position:relative;
  z-index:1;
  max-width:680px;
  padding-block:var(--space-12);
}

.hero__eyebrow {
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-gold);
  margin-bottom:var(--space-3);
  border:1px solid rgba(196,163,90,.4);
  padding:4px 12px;
  border-radius:100px;
}

.hero__title {
  font-family:var(--font-garamond);
  font-size:var(--text-display-size);
  line-height:1.08;
  color:#fff;
  white-space:pre-line;
  margin-bottom:var(--space-3);
}

.hero__subtitle {
  font-size:var(--text-body-lg-size);
  color:rgba(255,255,255,.75);
  line-height:1.6;
  max-width:520px;
  margin-bottom:var(--space-5);
}

.hero__actions {
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}

.hero__scroll {
  position:absolute;
  bottom:var(--space-4);
  left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,.5);
  animation:heroScroll 2s ease-in-out infinite;
}
.hero__scroll .material-symbols-outlined { font-size:32px; }

@keyframes heroScroll {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

/* ── USP BALK ── */
.usp-bar {
  background:var(--color-deep-earth);
  padding-block:var(--space-4);
}

.usp-bar__list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-4);
  list-style:none;
}

.usp-bar__item {
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  color:#fff;
}

.usp-bar__item .material-symbols-outlined {
  font-size:28px;
  color:var(--color-gold);
  flex-shrink:0;
  margin-top:2px;
}

.usp-bar__item strong {
  display:block;
  font-size:.875rem;
  font-weight:600;
  margin-bottom:2px;
}

.usp-bar__item span {
  display:block;
  font-size:.75rem;
  opacity:.7;
}

/* ── INTRODUCTIE ── */
.intro__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-8);
  align-items:center;
}

.intro__text p {
  margin-top:var(--space-2);
  color:var(--color-on-surface-variant);
  line-height:1.7;
}

.intro__text .section-title { margin-bottom:var(--space-3); }

.intro__images {
  position:relative;
  height:520px;
}

.intro__img-main {
  position:absolute;
  inset:0 80px 80px 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.intro__img-accent {
  position:absolute;
  bottom:0;
  right:0;
  width:180px;
  height:220px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(28,22,16,.15);
}

.image-placeholder--sm .material-symbols-outlined { font-size:32px; }

.intro__img-main img,
.intro__img-accent img { width:100%; height:100%; object-fit:cover; }

/* ── DIVISIE SHOWCASE ── */
.divisions-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.divisions-showcase__division {
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Subtiele onderscheiding voor divisie 2 */
.divisions-showcase__division--alt {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.divisions-showcase__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.divisions-showcase__title {
  font-family: var(--font-garamond);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 var(--space-1);
}

.divisions-showcase__desc {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
  margin: 0;
}

.divisions-showcase__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.divisions-showcase__cta {
  width: 100%;
  justify-content: center;
}

.divisions-showcase__empty {
  text-align: center;
  color: var(--color-on-surface-variant);
  font-size: 0.875rem;
  padding: var(--space-4) 0;
}

/* Compacte product-card variant voor de homepage showcase */
.product-card--compact .product-card__body {
  padding: var(--space-2);
}

.product-card--compact .product-card__name {
  font-size: 0.8rem;
  margin-bottom: 0;
  /* Begrens lange namen */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card--compact .product-card__meta {
  font-size: 0.7rem;
  margin-bottom: 0;
}

/* Oud grid — wordt niet meer gebruikt maar de klasse bestaat nog in breakpoints */
.products-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.product-card {
  background:#fff;
  border:1px solid var(--color-outline-variant);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:box-shadow var(--transition-normal), transform var(--transition-normal);
}

.product-card:hover {
  box-shadow:0 12px 40px rgba(28,22,16,.1);
  transform:translateY(-3px);
}

.product-card__img-wrap {
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--color-surface-container-low);
}

.product-card__img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--transition-slow);
}

.product-card:hover .product-card__img-wrap img {
  transform:scale(1.03);
}

.product-card__placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  color:var(--color-on-surface-variant);
}
.product-card__placeholder .material-symbols-outlined { font-size:64px; opacity:.3; }

.product-card__badge {
  position:absolute;
  top:12px;
  left:12px;
  background:var(--color-deep-earth);
  color:#fff;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:100px;
}

.product-card__body {
  padding:var(--space-3);
}

.product-card__name {
  font-family:var(--font-garamond);
  font-size:1.1rem;
  margin-bottom:var(--space-1);
}

.product-card__meta {
  font-size:.75rem;
  color:var(--color-on-surface-variant);
  margin-bottom:var(--space-2);
}

.product-card__cta { width:100%; justify-content:center; }

.products-showcase__empty {
  text-align:center;
  color:var(--color-on-surface-variant);
  padding:var(--space-8) 0;
}

/* ── SERVICES ── */
.services-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}

.service-card {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr;
  gap:var(--space-2) var(--space-3);
  background:var(--color-surface-container-low);
  border:1px solid var(--color-outline-variant);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  transition:box-shadow var(--transition-normal), border-color var(--transition-normal);
  color:inherit;
}

.service-card:hover {
  box-shadow:0 8px 32px rgba(28,22,16,.1);
  border-color:var(--color-primary);
}

.service-card__icon {
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  background:var(--color-primary);
  color:#fff;
  border-radius:var(--radius-md);
}

.service-card__icon .material-symbols-outlined { font-size:28px; }

.service-card__body {
  grid-column:1;
  grid-row:2;
}

.service-card__body h3 {
  font-family:var(--font-garamond);
  font-size:1.5rem;
  margin-bottom:var(--space-2);
}

.service-card__body p {
  color:var(--color-on-surface-variant);
  line-height:1.6;
  margin-bottom:var(--space-3);
}

.service-card__link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.875rem;
  font-weight:600;
  color:var(--color-primary);
}
.service-card__link .material-symbols-outlined { font-size:18px; }

.service-card__img {
  grid-column:2;
  grid-row:1 / 3;
  width:140px;
  height:100%;
  min-height:160px;
  border-radius:var(--radius-md);
}
.service-card__img .material-symbols-outlined { font-size:40px; }

/* ── MAATWERK SECTIE ── */
.maatwerk-section__intro {
  max-width:640px;
  color:var(--color-on-surface-variant);
  line-height:1.7;
  margin-bottom:var(--space-6);
}

.maatwerk-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
}

.maatwerk-card {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  background:#fff;
  border:1px solid var(--color-outline-variant);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  transition:box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.maatwerk-card:hover {
  box-shadow:0 8px 32px rgba(28,22,16,.1);
  border-color:var(--color-primary);
}

.maatwerk-card__icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  background:var(--color-surface-container-low);
  border:1px solid var(--color-outline-variant);
  border-radius:var(--radius-md);
  color:var(--color-primary);
  flex-shrink:0;
}

.maatwerk-card__icon .material-symbols-outlined { font-size:28px; }

.maatwerk-card__body { flex:1; }

.maatwerk-card__title {
  font-family:var(--font-garamond);
  font-size:1.35rem;
  margin-bottom:var(--space-2);
}

.maatwerk-card__desc {
  color:var(--color-on-surface-variant);
  font-size:.9rem;
  line-height:1.65;
  margin-bottom:var(--space-3);
}

.maatwerk-card__features {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.maatwerk-card__features li {
  font-size:.825rem;
  color:var(--color-on-surface-variant);
  padding-left:1.25rem;
  position:relative;
}

.maatwerk-card__features li::before {
  content:'';
  position:absolute;
  left:0;
  top:.45em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-gold);
}

.maatwerk-card__actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  padding-top:var(--space-3);
  border-top:1px solid var(--color-outline-variant);
}

.maatwerk-card__actions .btn {
  flex:1;
  justify-content:center;
  white-space:nowrap;
}

/* ── CONFIGURATOR CTA ── */
.conf-cta {
  background:var(--color-deep-earth);
}

.conf-cta__inner {
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--space-8);
  align-items:center;
}

.conf-cta__eyebrow { color:var(--color-gold); }

.conf-cta .section-title { color:#fff; margin-bottom:var(--space-3); }

.conf-cta p { color:rgba(255,255,255,.7); max-width:480px; line-height:1.7; }

.conf-cta__preview { display:flex; align-items:center; justify-content:center; }

.conf-cta__device {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  width:220px;
  height:280px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);
  color:rgba(255,255,255,.5);
}

.conf-cta__device .material-symbols-outlined { font-size:56px; }
.conf-cta__device-label { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }

/* ── IMPRESSIE ── */
.impressie__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;
  gap:var(--space-2);
}

.impressie__item {
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:3/2;
}

.impressie__item:first-child {
  grid-column:span 2;
  aspect-ratio:16/9;
}

.impressie__item img { width:100%; height:100%; object-fit:cover; }

/* ── CONTACT CTA ── */
.contact-cta {
  background:var(--color-surface-container-low);
}

.contact-cta__inner {
  text-align:center;
  max-width:600px;
  margin-inline:auto;
}

.contact-cta__inner h2 {
  font-family:var(--font-garamond);
  font-size:var(--text-headline-md-size);
  margin-bottom:var(--space-2);
}

.contact-cta__inner p {
  color:var(--color-on-surface-variant);
  margin-bottom:var(--space-4);
}

.contact-cta__actions {
  display:flex;
  gap:var(--space-2);
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:var(--space-5);
}

/* ── Contactmethoden ── */
.contact-methods {
  display:flex;
  gap:var(--space-3);
  justify-content:center;
  flex-wrap:wrap;
  border-top:1px solid var(--color-outline-variant);
  padding-top:var(--space-4);
}

.contact-method {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  background:#fff;
  border:1px solid var(--color-outline-variant);
  border-radius:var(--radius-lg);
  color:var(--color-on-surface);
  font-size:.8125rem;
  font-weight:500;
  min-width:110px;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.contact-method:hover {
  border-color:var(--color-primary);
  box-shadow:0 4px 16px rgba(28,22,16,.08);
  color:var(--color-primary);
}

.contact-method__icon {
  font-size:24px;
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-method__label {
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .usp-bar__list             { grid-template-columns:repeat(2,1fr); }
  .intro__grid               { grid-template-columns:1fr; }
  .intro__images             { height:300px; }
  .products-showcase__grid   { grid-template-columns:repeat(2,1fr); }
  .divisions-showcase__grid  { grid-template-columns:1fr; gap:var(--space-4); }
  .services-grid             { grid-template-columns:1fr; }
  .maatwerk-grid             { grid-template-columns:1fr 1fr; }
  .conf-cta__inner           { grid-template-columns:1fr; }
  .conf-cta__preview         { display:none; }
  .impressie__grid           { grid-template-columns:repeat(2,1fr); }
  .impressie__item:first-child { grid-column:span 2; }
}

@media (max-width: 800px) {
  .maatwerk-grid { grid-template-columns:1fr; }
  .maatwerk-card__actions .btn { flex:none; }
}

@media (max-width: 767px) {
  .hero                      { min-height: 85svh; }
  .hero__content             { padding-block: var(--space-8); }
  .hero__subtitle            { font-size: 1rem; }

  /* USP balk: horizontaal scroll op kleine schermen.
     overflow: hidden op de section voorkomt dat de interne scroll
     lekt naar paginaniveau. */
  .usp-bar                   { overflow: hidden; }
  .usp-bar__list {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .usp-bar__list::-webkit-scrollbar { display: none; }
  .usp-bar__item { scroll-snap-align: start; }

  .service-card__img         { display: none; }
  .service-card              { grid-template-columns: 1fr; }
  .service-card__body        { grid-column: 1; }
  .service-card__icon        { grid-row: 1; }
}

@media (max-width: 600px) {
  .hero__title               { font-size:clamp(2.2rem,9vw,3rem); }
  .hero__actions             { flex-direction:column; width:100%; }
  .hero__actions .btn        { width:100%; }
  .usp-bar__list             { grid-template-columns:1fr 1fr; overflow-x:visible; }
  .products-showcase__grid        { grid-template-columns:1fr 1fr; }
  .divisions-showcase__products   { grid-template-columns:repeat(2,1fr); }
  .impressie__grid           { grid-template-columns:1fr; }
  .impressie__item:first-child { grid-column:span 1; aspect-ratio:3/2; }
  .contact-cta__actions      { flex-direction:column; align-items:stretch; width:100%; }
  .contact-cta__actions .btn { width:100%; }
}

@media (max-width: 400px) {
  .products-showcase__grid        { grid-template-columns:1fr; }
  .divisions-showcase__products   { grid-template-columns:1fr 1fr; }
  .divisions-showcase__division   { padding: var(--space-4); }
}