﻿/* Leather page styles */
.leather-page main{margin-top:var(--nav-height)}
@media (max-width: 980px){.leather-page main{margin-top:calc(var(--nav-height) - 20px)}}

.leather-hero{
  position:relative;
  padding:160px 0 90px;
  background:linear-gradient(120deg, rgba(8,8,8,.88), rgba(8,8,8,.6)), url('https://leerinbouw.nl/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-22-at-11.13.21-1024x682.jpeg') center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.leather-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,179,1,.12), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(255,206,69,.14), transparent 32%);
  pointer-events:none;
}
.leather-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:2.5rem;
  align-items:center;
  z-index:1;
}
.leather-lead{color:var(--sub);font-size:1.05rem;max-width:760px;margin:1rem 0 1.4rem}
.leather-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1rem}
.leather-points{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:14px}
.leather-points li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:12px 14px;border-radius:12px;line-height:1.4;color:var(--sub)}
.leather-hero-card{background:rgba(20,20,20,.82);border:1px solid rgba(255,255,255,.08);border-left:4px solid var(--gold);box-shadow:0 24px 50px rgba(0,0,0,.4);padding:20px;border-radius:var(--radius)}
.leather-hero-card h2{margin:0 0 .35rem;font-size:1.2rem}
.leather-hero-card p{color:var(--sub);margin-bottom:1rem}
.leather-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.leather-meta-item{background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.1);padding:12px;border-radius:12px}
.leather-meta-label{display:block;font-size:.82rem;color:var(--sub);letter-spacing:.04em;text-transform:uppercase}
.leather-meta-value{font-weight:700;color:var(--text);margin-top:4px;display:block}

.leather-section{padding:80px 0}
.section-header.centered{text-align:center}
.section-header.centered .section-title::after{left:50%;transform:translateX(-50%)}
.section-header.centered .section-sub{margin:0 auto}

.leather-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:32px}
.leather-feature-card{padding:18px;background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.leather-feature-card h3{margin-bottom:.5rem;font-size:1.05rem}
.leather-feature-card p{color:var(--sub);font-size:.98rem}

.leather-gallery{padding:30px 0 90px}
.leather-gallery-category{margin-bottom:40px}
.leather-category-header{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.leather-category-header h3{font-size:1.2rem;margin:0;color:var(--text)}
.leather-category-header .eyebrow{margin-bottom:2px}
.leather-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:26px}
.leather-gallery-item{position:relative;border-radius:14px;overflow:hidden;background:var(--muted);border:1px solid rgba(255,255,255,.06);box-shadow:0 16px 32px rgba(0,0,0,.32)}
.leather-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease, opacity .3s ease}
.leather-gallery-item:hover img{transform:scale(1.04);opacity:.95}

.leather-cta{padding:40px 0 100px}
.leather-cta-card{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:linear-gradient(120deg, rgba(255,206,69,.12), rgba(8,8,8,.9));box-shadow:0 22px 42px rgba(0,0,0,.35)}
.leather-cta-text{max-width:620px}
.leather-cta-actions{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width: 1024px){
  .leather-hero{padding:130px 0 70px}
  .leather-hero-grid{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .leather-hero{padding:120px 0 60px}
  .leather-hero-actions{width:100%}
  .leather-points{grid-template-columns:1fr}
  .leather-cta-card{flex-direction:column;align-items:flex-start}
  .section-header.centered .section-title::after{left:50%;transform:translateX(-50%)}
}
