/* Den Bonten Os – site styles.
   Most layout lives in inline styles on the pages (taken 1:1 from the design).
   This file holds the base, hover states and the responsive rules. */

/* ---------- base ---------- */
html, body { margin: 0; padding: 0; background: #FAFAFA; font-family: Montserrat, sans-serif; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: #1C1917; text-decoration: none; }
a:hover { color: #C5A059; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #C9B87C; outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #C9B87C; color: #0C0B0A; padding: 10px 16px; font-size: 13px; font-weight: 600; }
.skip-link:focus { left: 8px; }
[hidden] { display: none !important; }

/* Buttons: the little icon nudges right on hover. */
[data-btn-icon] { display: flex; transition: transform .3s cubic-bezier(.2,.6,.2,1); }
[data-btn]:hover [data-btn-icon] { transform: translateX(4px) scale(1.12); }

/* ---------- hover states (from the design's style-hover) ---------- */
.hv1:hover{background:#F5F1EA!important;border-color:#F5F1EA!important;color:#0C0B0A!important}
.hv2:hover{border-color:#F5F1EA!important;color:#F5F1EA!important}
.hv3:hover{color:#C9B87C!important}
.hv4:hover{color:#C5A059!important}
.hv5:hover{background:#1C1917!important;color:#C9B87C!important}
.hv6:hover{background:#C9B87C!important;border-color:#C9B87C!important;color:#1C1917!important}
.hv7:hover{color:#FFFFFF!important}
.hv8:hover{opacity:1!important}
.hv9:hover{color:#1C1917!important}
.hv10:hover{background:#B8A86B!important;color:#1C1917!important}
.hv11:hover{background:#1E1B18!important;color:#FFFFFF!important}
.hv13:hover{opacity:.85!important}
.hv15:hover{border-color:#1C1917!important;color:#1C1917!important}
.hv16:hover{background:#1C1917!important;border-color:#1C1917!important;color:#FFFFFF!important}
.hv17:hover{background:#C9B87C!important;border-color:#C9B87C!important;color:#0C0B0A!important}
.hv19:hover{border-color:#C9B87C!important;color:#C9B87C!important}
.hv20:hover{background:#F5F1EA!important;border-color:#F5F1EA!important}
.hv21:hover{border-color:#F5F1EA!important}
.hv22:hover{color:#F5F1EA!important}
.hv23:hover{color:#B09E4D!important}
.hv24:hover{color:#8A7A3E!important}
.hv25:hover{background:#C9B87C!important;color:#1C1917!important}
.hv26:hover{background:#FFFFFF!important;color:#1C1917!important}
.hv28:hover{background:#1C1917!important;color:#FFFFFF!important}
.hv29:hover{color:#8A7A3E!important;border-color:#8A7A3E!important}
.hv27:hover{background:#FFFFFF!important;border-color:#FFFFFF!important;color:#1C1917!important}
/* Image zooms trigger when the surrounding card is hovered (an overlay often covers the image). */
:hover > .hv12, .gal-item:hover img { transform: scale(1.04) !important; }
:hover > .hv14 { transform: scale(1.05) !important; }
:hover > .hv18, .ig-tile:hover img { transform: scale(1.06) !important; }

/* ---------- header ---------- */
.site-header.is-scrolled { background: rgba(12,11,10,.92) !important; }
.site-header__grid { grid-template-columns: auto 1fr auto; }
.hdr-desk { display: flex; }
.hdr-mob { display: none; }
@media (max-width: 1140px) {
  .site-header__grid { grid-template-columns: auto 1fr; }
  .hdr-desk { display: none; }
  .hdr-mob { display: flex; }
}
@media (max-width: 1399px) { .hdr-phone { display: none; } }
@media (min-width: 1141px) { .mobile-menu { display: none !important; } }

/* ---------- footer, tab bar, floating button ---------- */
.footer-bar { flex-direction: row; text-align: left; padding: 22px 0 30px; }
.footer-bar__text { flex-direction: row; gap: 0 10px; }
.tabbar { display: none; }
.float-cta { opacity: 0; transform: translateY(40px) scale(.98); filter: blur(12px); pointer-events: none;
  transition: opacity 1.2s cubic-bezier(.2,.6,.2,1), transform 1.2s cubic-bezier(.2,.6,.2,1), filter 1.2s cubic-bezier(.2,.6,.2,1); }
.float-cta.is-visible { opacity: 1; transform: none; filter: none; pointer-events: auto; }
@media (max-width: 767px) {
  body { padding-bottom: 68px; }
  .footer-bar { flex-direction: column; text-align: center; padding: 24px 0 32px; }
  .footer-bar__text { flex-direction: column; gap: 2px; }
  .tabbar { display: flex; }
  .float-cta { display: none; }
}

/* ---------- CTA band ---------- */
.cta-info { display: grid; }
@media (max-width: 639px) { .cta-info { display: none; } }

/* Phones: every section gets the same compact vertical spacing. */
@media (max-width: 639px) {
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* ---------- home: hero ---------- */
.if-heroMob, .if-heroDesk, .if-kDesk, .if-kMob { display: contents; }
@media (min-width: 768px) { .if-heroMob { display: none; } }
@media (max-width: 767px) { .if-heroDesk { display: none; } }
.kicker { font-size: 11px; letter-spacing: 3px; }
@media (max-width: 639px) { .kicker { font-size: 10px; letter-spacing: 2px; } .only-640 { display: none; } }
.hero-mob-img { aspect-ratio: 3 / 2; }
@media (min-width: 1000px) { .hero-mob-img { aspect-ratio: 16 / 9; } }

/* ---------- home: instagram carousel ---------- */
[data-ig] { --v: 4; }
@media (max-width: 999px) { [data-ig] { --v: 2; } }
@media (max-width: 639px) { [data-ig] { --v: 1; } }
.ig-card { flex: 0 0 calc((100% - (var(--v) - 1) * 16px) / var(--v)); }
[data-ig-prev][disabled], [data-ig-next][disabled] { opacity: .35; cursor: default; }

/* ---------- home: over ons ---------- */
.ob-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 14px; }
.ob-main { aspect-ratio: 3 / 4; }
.ob-sub { grid-template-columns: 1fr; gap: 14px; padding-top: 56px; }
.ob-box { padding: 20px 22px; justify-content: flex-start; }
.year { font-size: 40px; }
.ob-quote { padding: 26px 28px; }
@media (max-width: 639px) {
  .ob-grid { grid-template-columns: 1fr; gap: 10px; }
  .ob-main { aspect-ratio: 4 / 5; grid-column: 1 / -1; }
  .ob-sub { grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 0; grid-column: 1 / -1; }
  .ob-box { padding: 18px 16px; justify-content: flex-end; }
  .year { font-size: 34px; }
  .ob-quote { padding: 22px 20px; }
}
.year-digit { transform: translateY(calc(var(--start) * -1em)); }
.year.is-on .year-digit { transform: translateY(calc(var(--target) * -1em)); transition: transform var(--dur) cubic-bezier(.2,.7,.2,1) var(--delay); }

/* ---------- home: onze keuken ---------- */
@media (max-width: 999px) { .if-kDesk { display: none; } }
@media (min-width: 1000px) { .if-kMob { display: none; } }
.k-num { color: #A8A29E; }
.k-title { color: #78716C; }
.k-arrow { border-color: #D6D3D1; background: transparent; color: #1C1917; }
.k-arrow-on { display: none; }
.k-item.is-on .k-num { color: #C5A059; }
.k-item.is-on .k-title { color: #1C1917; }
.k-item.is-on .k-arrow { border-color: #1C1917; background: #1C1917; color: #FFFFFF; }
.k-item.is-on .k-arrow-on { display: block; }
.k-item.is-on .k-arrow-off { display: none; }
.k-img { opacity: 0; transform: scale(1.06); }
.k-img.is-on { opacity: 1; transform: scale(1); }

/* ---------- home: ervaring ---------- */
.erv-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.erv-pad { padding: 32px 36px; }
.erv-big { grid-column: span 2; grid-row: span 2; min-height: 420px; }
.erv-wide { grid-column: span 2; }
.chip-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.chip { flex-direction: row; align-items: center; gap: 16px; padding: 24px 22px; }
.chip-label { font-size: 14px; }
@media (max-width: 999px) {
  .erv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .erv-big { grid-row: auto; }
}
@media (max-width: 639px) {
  .erv-grid { grid-template-columns: 1fr; }
  .erv-pad { padding: 24px 22px; }
  .erv-big { grid-column: auto; min-height: 340px; }
  .erv-wide { grid-column: auto; }
  .chip-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chip { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 16px; }
  .chip-label { font-size: 13px; }
}

/* ---------- home: reviews ---------- */
.rev-track::-webkit-scrollbar { display: none; }
.rev-card { flex: 0 0 calc((100% - 40px) / 3); }
@media (max-width: 999px) { .rev-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 639px) { .rev-card { flex-basis: 86%; } }
[data-rev-prev][disabled], [data-rev-next][disabled] { opacity: .3; cursor: default; }

/* ---------- home: gallery + lightbox ---------- */
.gal { column-count: 4; }
.gal.is-collapsed .gal-item:nth-child(n+13) { display: none; }
@media (max-width: 999px) { .gal { column-count: 3; } }
@media (max-width: 639px) { .gal { column-count: 2; } .gal.is-collapsed .gal-item:nth-child(n+7) { display: none; } }
.lightbox { display: flex; }

/* ---------- home: partners ---------- */
.partner-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 639px) { .partner-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- reserveren ---------- */
.res-grid { grid-template-columns: 1fr; }
.res-aside { position: static; }
@media (min-width: 1000px) {
  .res-grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
  .res-aside { position: sticky; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- wijnen: live wine list ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wine-controls { grid-template-columns: 1fr; }
@media (min-width: 800px) { .wine-controls { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; } }
.wine-controls select option { color: #1C1917; }
.wine-controls input[type="search"]::placeholder { color: #78716C; }
.wine-cat { margin: 56px 0 4px; font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 400; color: #F5F1EA; }
.wine-cat:first-child { margin-top: 0; }
.wine-path { margin: 28px 0 4px; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #C9B87C; }
.wine-path i { font-style: normal; color: #78716C; padding: 0 6px; }
.wine-row { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(245,241,234,.08); }
.wine-year { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums lining-nums; color: #A8A29E; }
.wine-name { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 400; line-height: 1.35; color: #F5F1EA; }
.wine-name em { font-style: italic; color: #D6D3D1; }
.wine-grapes { display: block; margin-top: 3px; font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 300; color: #78716C; }
.wine-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid rgba(201,184,124,.45); font-family: Montserrat, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #C9B87C; vertical-align: 2px; }
.wine-price { font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums lining-nums; color: #F5F1EA; white-space: nowrap; }
.wine-empty { padding: 40px 0; text-align: center; font-size: 15px; font-weight: 300; color: #A8A29E; }
@media (max-width: 639px) { .wine-row { grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; } .wine-name { font-size: 16px; } }