/**
 * DWK – Home styling (Warm Italiaans kelder gevoel, premium)
 * Bestand: assets/css/dwk-home.css
 * Wordt geladen via functions.php op de voorpagina.
 */

/* =========================================================
   TOKENS (palette + type)
   ========================================================= */
:root{
  /* Warm palette */
  --dwk-cream: #f6f1e6;        /* page background */
  --dwk-parch: #fbf8f2;        /* card background */
  --dwk-ink:   #111111;        /* text */
  --dwk-olive: #28371c;        /* headings/accents */
  --dwk-wine:  #5a1f2b;        /* deep wine */
  --dwk-gold:  #c8a46a;        /* cellar gold */
  --dwk-line:  rgba(17,17,17,.12);

  /* Typography */
  --dwk-font-title: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "EB Garamond", Georgia, serif;
  --dwk-font-body:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;

  /* Layout */
  --dwk-content-width: 1100px;
  --dwk-content-pad: 24px;

  /* Radius & shadow */
  --dwk-radius-xl: 26px;
  --dwk-radius-lg: 20px;
  --dwk-shadow-soft: 0 16px 50px rgba(0,0,0,.10);
}

/* =========================================================
   HOME BASE / Kadence wrappers neutraliseren
   ========================================================= */
body.home{
  background: var(--dwk-cream);
  color: var(--dwk-ink);
  font-family: var(--dwk-font-body);
}

/* Kadence kan wrappers beperken/inkleuren */
body.home .content-wrap,
body.home .content-container,
body.home .entry-content-wrap,
body.home .entry-content{
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Soms extra padding op Kadence shells */
body.home .site-main,
body.home .site-content,
body.home .content-area{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   HOME TYPOGRAFIE (headings/basics)
   ========================================================= */
body.home h1,
body.home h2,
body.home h3{
  font-family: var(--dwk-font-title);
  color: var(--dwk-olive);
  letter-spacing: -0.02em;
}

body.home a{
  color: rgba(90,31,43,.96);
}
body.home a:hover{
  color: rgba(90,31,43,1);
}

/* =========================================================
   HOME WRAPPER
   ========================================================= */
body.home .dwk-home{
  max-width: var(--dwk-content-width);
  margin: 0 auto;
  padding: 28px var(--dwk-content-pad);
}

/* =========================================================
   HERO (dwk-hero-page) — zoals andere pagina headers
   Markup in front-page.php:
   <section class="dwk-hero dwk-hero--page">
     <div class="dwk-hero__inner">
       <div class="dwk-hero-page">
         <div class="dwk-hero-page__left">...</div>
         <h1 class="dwk-hero-page__title">...</h1>
         <div class="dwk-hero-page__right"><a class="dwk-hero-page__btn">...</a></div>
       </div>
     </div>
   </section>
   ========================================================= */
body.home .dwk-hero{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 28px 0 0 !important;
}

body.home .dwk-hero__inner{
  max-width: var(--dwk-content-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--dwk-content-pad) !important;
}

body.home .dwk-hero-page{
  width: 100% !important;
  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: 320px minmax(520px, 1fr) 220px !important;
  align-items: center !important;
  gap: 18px !important;

  padding: 34px 26px !important;
  border-radius: var(--dwk-radius-xl) !important;

  background:
    radial-gradient(1200px 280px at 30% -20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #0e0e0e, #070707) !important;

  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.24) !important;
}

/* Left meta */
body.home .dwk-hero-page__left{
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

body.home .dwk-hero-page__logo{
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: block !important;
}

body.home .dwk-hero-page__kicker{
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  color: rgba(244,227,184,.92) !important;
}

body.home .dwk-hero-page__tagline{
  margin-top: 4px !important;
  font-size: 11px !important;
  letter-spacing: .10em !important;
  color: rgba(255,255,255,.62) !important;
}

/* Title — voorkom woord-per-regel */
body.home .dwk-hero-page__title{
  margin: 0 !important;
  text-align: center !important;
  justify-self: center !important;

  max-width: 720px !important;
  width: 100% !important;

  line-height: 1.05 !important;
  font-family: var(--dwk-font-title) !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  letter-spacing: -0.02em !important;
  color: rgba(244,227,184,.95) !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Right button */
body.home .dwk-hero-page__right{
  justify-self: end !important;
}

body.home .dwk-hero-page__btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;

  background: rgba(244,227,184,.95) !important;
  color: #111 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

body.home .dwk-hero-page__btn:hover{
  filter: brightness(1.05);
}

/* Mobile */
@media (max-width: 900px){
  body.home .dwk-hero-page{
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }
  body.home .dwk-hero-page__title{
    text-align: left !important;
    max-width: none !important;
    width: auto !important;
  }
  body.home .dwk-hero-page__right{
    justify-self: start !important;
  }
}

/* =========================================================
   HERO MEDIA (afbeelding onder hero header)
   Markup:
   <section class="dwk-hero-media"><div class="dwk-hero-media__inner"><img .../></div></section>
   ========================================================= */
body.home .dwk-hero-media{
  padding: 18px 0 0;
}

body.home .dwk-hero-media__inner{
  max-width: var(--dwk-content-width);
  margin: 0 auto;
  padding: 0 var(--dwk-content-pad);

  border-radius: var(--dwk-radius-xl);
  overflow: hidden;
}

body.home .dwk-hero-media__inner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--dwk-radius-xl);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

/* =========================================================
   SEARCH blok onder hero-media (optioneel)
   ========================================================= */
body.home .dwk-home-search{
  margin-top: -18px;
  padding: 0 var(--dwk-content-pad) 10px;
}

body.home .dwk-home-search__inner{
  max-width: var(--dwk-content-width);
  margin: 0 auto;

  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 45px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

body.home .dwk-search__form{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

body.home .dwk-search__input{
  flex: 1 1 320px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.16);
  padding: 0 14px;
  background: rgba(255,255,255,.85);
}

body.home .dwk-search__btn{
  height: 44px;
  border-radius: 14px;
  padding: 0 16px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(90,31,43,.92);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
}

body.home .dwk-search__btn:hover{
  filter: brightness(1.05);
}

/* =========================================================
   INTRO SECTIE (met frontpage_image.png)
   ========================================================= */
body.home .dwk-home-intro{
  max-width: var(--dwk-content-width);
  margin: 18px auto 0;
  padding: 0 var(--dwk-content-pad);
}

body.home .dwk-home-intro__inner{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: center;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--dwk-radius-xl);
  padding: 26px;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

body.home .dwk-home-intro__kicker{
  display:inline-flex;
  align-items:center;
  padding:.35rem .7rem;
  border-radius: 999px;

  background: rgba(90,31,43,.08);
  border: 1px solid rgba(90,31,43,.18);

  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(90,31,43,.95);
}

body.home .dwk-home-intro__title{
  margin: 10px 0 10px;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--dwk-ink);
  font-family: var(--dwk-font-title);
}

body.home .dwk-home-intro__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(0,0,0,.72);
  max-width: 60ch;
}

body.home .dwk-home-intro__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 16px;
}

body.home .dwk-home-intro__media{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  min-height: 220px;
}

body.home .dwk-home-intro__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

@media (max-width: 920px){
  body.home .dwk-home-intro__inner{ grid-template-columns: 1fr; }
  body.home .dwk-home-intro__media{ min-height: 180px; }
}

/* =========================================================
   HOME SECTIES / CARDS
   (sluit aan op jouw bestaande dwk-card markup)
   ========================================================= */
body.home .dwk-section--toprated,
body.home .dwk-section--wineries{
  margin-top: 34px;
}

/* "Meer" CTA onder grids */
body.home .dwk-section__more{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}

/* Cards: warm, premium */
body.home .dwk-card{
  background: var(--dwk-parch);
  border: 1px solid var(--dwk-line);
  border-radius: var(--dwk-radius-lg);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.home .dwk-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--dwk-shadow-soft);
}

/* Card title */
body.home .dwk-card h3{
  font-family: var(--dwk-font-title);
  color: var(--dwk-ink);
}

/* Badges */
body.home .dwk-badge{
  background: rgba(200,164,106,.14);
  border: 1px solid rgba(200,164,106,.28);
  color: rgba(40,55,28,.95);
  font-weight: 900;
  border-radius: 999px;
}

/* Score pill (als je .dwk-score gebruikt) */
body.home .dwk-score{
  background: rgba(90,31,43,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* Grid helper (als jouw front-page dit gebruikt) */
body.home .dwk-cards--grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px){
  body.home .dwk-cards--grid{
    grid-template-columns: 1fr;
  }
}

/* Media hoogte fix voor home cards */
body.home .dwk-card__media{
  height: 200px;
  overflow: hidden;
  border-radius: 18px;
}
body.home .dwk-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.home .dwk-card__placeholder{
  height: 100%;
}