/* wijnhandel-hero 1.0.0 · block-port van ReactBitsPro Blocks/hero-11 met het ongewijzigd gecompileerde component
   ReactBitsPro Components/ring-field (three uit _shared/vendor) als achtergrond. Tailwind-maten uit hero-11: sectie
   py-16/20/24 px-4/6/8, inhoud max-w 1400, kop links uitgelijnd en vanaf sm gecentreerd, mb-12/16/20; pill inline-flex
   gap-2 pl-1.5 pr-3 py-1.5 rounded-full text-sm font-medium mb-8 met een klein gevuld label px-2.5 py-1 text-xs
   font-semibold; h1 4xl/5xl/6xl/7xl font-medium tracking -0,02em leading 1,1 max-w-4xl; intro mt-6 lg/xl max-w-2xl;
   knoppen mt-8 gap-3/4 px-6 py-3 rounded-lg text-base font-medium; beeldvlak max-w-5xl px-6/8/12 met vier
   draadmodel-hoeken (lijnen van 0,5 px, 8 bij 8 px en vanaf sm 32 bij 24 px, buiten de hoek) en een omrand kader met
   diepe schaduw. Entree van boven (motion easeOut): pill 20 px 0,5 s, kop 30 px 0,6 s na 0,1 s, intro 20 px 0,5 s na
   0,2 s, knoppen 20 px 0,5 s na 0,3 s, kader 40 px 0,7 s na 0,4 s. Fonts levert de site via assets/fonts.css. */
.msm-wijnhandel-hero {
  --kh-ease: cubic-bezier(0, 0, .58, 1);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 64px 16px;
  overflow: hidden;
  background: var(--m-bg, #211718);
  color: var(--m-ink, #f3ece4);
  font-family: var(--m-font-body, 'Instrument Sans', ui-sans-serif, system-ui, sans-serif);
}
.msm-wijnhandel-hero *,
.msm-wijnhandel-hero *::before,
.msm-wijnhandel-hero *::after { box-sizing: border-box; }
.msm-wijnhandel-hero p { margin: 0; }
.msm-wijnhandel-hero a { color: inherit; text-decoration: none; }
.msm-wijnhandel-hero a:focus-visible { outline: 2px solid var(--m-primary, #c06945); outline-offset: 3px; }
.msm-wijnhandel-hero svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ring-field (origineel) als achtergrond van de hele hero, achter tekst en kader. */
.msm-wijnhandel-hero .kh-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Originele component-CSS van ring-field, gescoped. */
.msm-wijnhandel-hero .ring-field { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 240px; overflow: hidden; }
.msm-wijnhandel-hero .ring-field__content { position: relative; z-index: 10; width: 100%; height: 100%; }

.msm-wijnhandel-hero .kh-inner { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; }
.msm-wijnhandel-hero .kh-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 48px;
}

/* Pill bovenaan: klein gevuld label met de kicker ernaast en een pijl. */
.msm-wijnhandel-hero .kh-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 6px 12px 6px 6px;
  border-radius: 9999px;
  background: var(--m-surface, #2b1d1f);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--m-muted, #b4a398);
  transition: background-color .2s var(--kh-ease), color .2s var(--kh-ease);
}
.msm-wijnhandel-hero .kh-pill:hover { background: color-mix(in srgb, var(--m-surface, #2b1d1f) 70%, var(--m-ink, #f3ece4)); color: var(--m-ink, #f3ece4); }
.msm-wijnhandel-hero .kh-pill-tag {
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--m-primary, #c06945);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--m-bg, #211718);
}
.msm-wijnhandel-hero .kh-pill-arrow { width: 16px; height: 16px; }

.msm-wijnhandel-hero .kh-title {
  margin: 0;
  max-width: 896px;
  font-family: var(--m-font-display, 'Fraunces', ui-serif, Georgia, serif);
  font-size: 36px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--m-ink, #f3ece4);
  text-wrap: balance;
}
.msm-wijnhandel-hero .kh-intro {
  margin-top: 24px;
  max-width: 672px;
  font-size: 18px;
  line-height: 28px;
  color: var(--m-muted, #b4a398);
}
.msm-wijnhandel-hero .kh-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
}
.msm-wijnhandel-hero .kh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s var(--kh-ease), border-color .2s var(--kh-ease), color .2s var(--kh-ease);
}
.msm-wijnhandel-hero .kh-btn-fill { background: var(--m-primary, #c06945); border-color: var(--m-primary, #c06945); color: var(--m-bg, #211718); }
.msm-wijnhandel-hero .kh-btn-fill:hover { background: color-mix(in srgb, var(--m-primary, #c06945) 86%, var(--m-ink, #f3ece4)); border-color: color-mix(in srgb, var(--m-primary, #c06945) 86%, var(--m-ink, #f3ece4)); }
.msm-wijnhandel-hero .kh-btn-outline { background: var(--m-bg, #211718); border-color: var(--m-line, #3d2d2f); color: var(--m-ink, #f3ece4); }
.msm-wijnhandel-hero .kh-btn-outline:hover { background: var(--m-surface, #2b1d1f); border-color: var(--m-muted, #b4a398); }

/* Beeldvlak: max-w-5xl met vier draadmodel-hoeken en een omrand kader met diepe schaduw. */
.msm-wijnhandel-hero .kh-frame-wrap { position: relative; max-width: 1024px; margin: 0 auto; padding: 0 24px; }
.msm-wijnhandel-hero .kh-frame { position: relative; cursor: pointer; }
.msm-wijnhandel-hero .kh-corner { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; }
.msm-wijnhandel-hero .kh-corner::before,
.msm-wijnhandel-hero .kh-corner::after { content: ""; position: absolute; background: var(--m-line, #3d2d2f); }
.msm-wijnhandel-hero .kh-corner::before { width: 8px; height: .5px; }
.msm-wijnhandel-hero .kh-corner::after { width: .5px; height: 8px; }
.msm-wijnhandel-hero .kh-corner-tl { top: 0; left: 0; }
.msm-wijnhandel-hero .kh-corner-tl::before { top: 0; right: 0; transform: translateY(-50%); }
.msm-wijnhandel-hero .kh-corner-tl::after { bottom: 0; left: 0; transform: translateX(-50%); }
.msm-wijnhandel-hero .kh-corner-tr { top: 0; right: 0; }
.msm-wijnhandel-hero .kh-corner-tr::before { top: 0; left: 0; transform: translateY(-50%); }
.msm-wijnhandel-hero .kh-corner-tr::after { bottom: 0; right: 0; transform: translateX(50%); }
.msm-wijnhandel-hero .kh-corner-bl { bottom: 0; left: 0; }
.msm-wijnhandel-hero .kh-corner-bl::before { bottom: 0; right: 0; transform: translateY(50%); }
.msm-wijnhandel-hero .kh-corner-bl::after { top: 0; left: 0; transform: translateX(-50%); }
.msm-wijnhandel-hero .kh-corner-br { bottom: 0; right: 0; }
.msm-wijnhandel-hero .kh-corner-br::before { bottom: 0; left: 0; transform: translateY(50%); }
.msm-wijnhandel-hero .kh-corner-br::after { top: 0; right: 0; transform: translateX(50%); }
.msm-wijnhandel-hero .kh-media {
  overflow: hidden;
  border: 1px solid var(--m-line, #3d2d2f);
  background: var(--m-surface, #2b1d1f);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .45), 0 8px 10px -6px rgb(0 0 0 / .45);
}
.msm-wijnhandel-hero .kh-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Gestaffelde entree van hero-11. */
.msm-wijnhandel-hero .kh-step { animation: kh-up .5s var(--kh-ease) both; }
.msm-wijnhandel-hero .kh-pill { --kh-y: 20px; }
.msm-wijnhandel-hero .kh-title { --kh-y: 30px; animation-duration: .6s; animation-delay: .1s; }
.msm-wijnhandel-hero .kh-intro { --kh-y: 20px; animation-delay: .2s; }
.msm-wijnhandel-hero .kh-actions { --kh-y: 20px; animation-delay: .3s; }
.msm-wijnhandel-hero .kh-frame-wrap { --kh-y: 40px; animation-duration: .7s; animation-delay: .4s; }
@keyframes kh-up {
  from { opacity: 0; transform: translateY(var(--kh-y, 20px)); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .msm-wijnhandel-hero { padding: 80px 24px; }
  .msm-wijnhandel-hero .kh-head { align-items: center; text-align: center; margin-bottom: 64px; }
  .msm-wijnhandel-hero .kh-title { font-size: 48px; }
  .msm-wijnhandel-hero .kh-intro { font-size: 20px; }
  .msm-wijnhandel-hero .kh-actions { flex-direction: row; align-items: center; width: auto; gap: 16px; }
  .msm-wijnhandel-hero .kh-btn { width: auto; }
  .msm-wijnhandel-hero .kh-frame-wrap { padding: 0 32px; }
  .msm-wijnhandel-hero .kh-corner::before { width: 32px; }
  .msm-wijnhandel-hero .kh-corner::after { height: 24px; }
}
@media (min-width: 641px) {
  .msm-wijnhandel-hero .kh-media img { aspect-ratio: 16 / 9; }
}
@media (min-width: 768px) {
  .msm-wijnhandel-hero .kh-title { font-size: 60px; }
}
@media (min-width: 1024px) {
  .msm-wijnhandel-hero { padding: 96px 32px; }
  .msm-wijnhandel-hero .kh-head { margin-bottom: 80px; }
  .msm-wijnhandel-hero .kh-title { font-size: 72px; }
  .msm-wijnhandel-hero .kh-frame-wrap { padding: 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-wijnhandel-hero .kh-step { animation: none; }
  .msm-wijnhandel-hero .kh-pill,
  .msm-wijnhandel-hero .kh-btn { transition: none; }
}