/* Home hero only. Inherits the site's tokens, Assistant font and button system.
   No :root, body, header, generic button, dialog or h1 resets. */
.db-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--white);background:var(--night);font-family:inherit}
.db-hero .db-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px);align-items:center;padding-block:44px 64px}
.db-hero .db-hero__content{min-width:0;position:relative;z-index:2;padding:8px 0}
/* The line above the title says what the day is. The partner asked for it much
   larger (5.10.2026): 13.5px read as a caption. It stays one line wherever it can,
   a little closer to the title it introduces, and a shade whiter over the film. */
.db-hero .db-hero__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 18px;font-size:22px;letter-spacing:0;line-height:1.35;color:rgba(255,255,255,.92)}
.db-hero .db-hero__title{font-size:clamp(78px,8.2vw,120px);line-height:.96;letter-spacing:0;margin:0 0 24px;max-width:none;color:var(--white)}
.db-hero .db-hero__title>span{display:block}
.db-hero .db-hero__guide{display:inline-flex;align-items:center;gap:11px;color:var(--white);line-height:1.3;font-size:clamp(21px,2vw,27px);font-weight:500;min-height:48px}
.db-hero .db-hero__guide img{width:44px;height:44px;flex:none;border-radius:var(--r-sm);object-fit:cover}
.db-hero .db-hero__guide>svg{width:17px;height:17px;color:var(--brass);margin-inline-start:3px;transition:transform .2s ease}
.db-hero .db-hero__description{font-size:clamp(17px,1.5vw,19px);font-weight:400;line-height:1.7;color:rgba(255,255,255,.8);margin:24px 0 30px;max-width:35ch}
.db-hero .db-hero__actions{gap:12px;flex-wrap:wrap}
.db-hero .db-hero__actions .btn{min-height:54px;min-width:170px;padding-inline:22px;border-radius:var(--r-pill);font-size:16px;font-weight:700}
.db-hero .db-hero__actions .btn--solid{gap:19px}
.db-hero .db-hero__media{min-width:0;position:relative;isolation:isolate;overflow:hidden;height:clamp(510px,62svh,640px);border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--night-2);box-shadow:var(--shadow)}
.db-hero .db-hero__poster,.db-hero .db-hero__poster img,.db-hero .db-hero__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.db-hero .db-hero__poster{margin:0;pointer-events:none}
.db-hero .db-hero__video{opacity:0;visibility:hidden;transition:none;pointer-events:none}
/* The poster is the film's first frame, so the swap to video is invisible. */
.db-hero .db-hero__media.is-ready .db-hero__video{visibility:visible;opacity:1}
.db-hero .db-hero__shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(10,26,34,.18),transparent 26%,transparent 72%,rgba(10,26,34,.25))}
.db-hero svg{display:block;flex:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.db-hero a:focus-visible,.db-hero button:focus-visible,.db-hero input:focus-visible{outline:2px solid var(--brass);outline-offset:5px}
.db-hero .db-hero__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){
 .db-hero .db-hero__guide:hover>svg{transform:translateX(-3px)}
}
@media(min-width:921px) and (max-width:1100px){
 .db-hero .db-hero__grid{gap:30px;padding-top:36px;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
 .db-hero .db-hero__title{font-size:92px}
 .db-hero .db-hero__eyebrow{font-size:19px;gap:7px}
 .db-hero .db-hero__actions .btn{min-width:150px;padding-inline:17px;font-size:15px}
}
@media(max-width:920px){
 .db-hero .db-hero__grid{display:block;width:100%;height:clamp(620px,calc(100svh - var(--header-h)),900px);padding:0;margin:0}
 .db-hero .db-hero__media{position:absolute;inset:0;border:0;border-radius:0;height:100%;box-shadow:none}
 .db-hero .db-hero__shade{background:linear-gradient(180deg,rgba(10,26,34,.88) 0%,rgba(10,26,34,.58) 28%,rgba(10,26,34,.08) 48%,rgba(10,26,34,.12) 62%,rgba(10,26,34,.88) 85%,var(--night) 100%)}
 .db-hero .db-hero__content{position:absolute;inset:0;padding:32px 16px;pointer-events:none}
 .db-hero .db-hero__content a{pointer-events:auto}
 .db-hero .db-hero__eyebrow{font-size:clamp(16px,4.9vw,20px);gap:8px;margin-bottom:14px}
 .db-hero .db-hero__title{font-size:clamp(70px,20vw,118px);line-height:.96;margin-bottom:18px}
 .db-hero .db-hero__guide{font-size:22px;min-height:40px;gap:10px}
 .db-hero .db-hero__guide img{width:36px;height:36px;border-radius:var(--r-sm)}
 .db-hero .db-hero__guide>svg{width:15px;height:15px}
 .db-hero .db-hero__description{display:none}
 /* Above the chat button, which sits bottom-right from the first paint
    (14px from the edge, 54px tall on a phone), so it never covers בחירת מועד. */
 .db-hero .db-hero__actions{position:absolute;inset-inline:16px;bottom:84px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .db-hero .db-hero__actions .btn{min-width:0;width:100%;min-height:52px;font-size:16px;padding-inline:14px;gap:10px}

}
@media(min-width:580px) and (max-width:920px){
 .db-hero .db-hero__content{padding-inline:32px;padding-top:44px}
 .db-hero .db-hero__eyebrow{font-size:22px}
 .db-hero .db-hero__guide{font-size:27px}
 .db-hero .db-hero__actions{inset-inline:32px;max-width:540px}
}
@media(min-width:821px) and (max-width:920px){
 .db-hero .db-hero__actions{bottom:92px}
}
@media(max-width:380px){
 .db-hero .db-hero__eyebrow{gap:6px}
 .db-hero .db-hero__actions .btn{font-size:14.5px;padding-inline:11px;gap:8px}
}
@media(max-width:920px) and (max-height:720px) and (orientation:portrait){
 .db-hero .db-hero__grid{height:calc(100svh - var(--header-h));min-height:500px}
 .db-hero .db-hero__content{padding-top:22px}
 .db-hero .db-hero__eyebrow{margin-bottom:12px}
 .db-hero .db-hero__title{font-size:clamp(60px,17vw,78px);margin-bottom:15px}
 .db-hero .db-hero__guide{font-size:20px}
 .db-hero .db-hero__guide img{width:32px;height:32px}
 .db-hero .db-hero__actions{bottom:80px}
}
@media(max-width:920px) and (orientation:landscape){
 .db-hero .db-hero__grid{height:640px}
 .db-hero .db-hero__poster img,.db-hero .db-hero__video{object-position:center 42%}
 .db-hero .db-hero__title{font-size:84px}
}
@media(prefers-reduced-motion:reduce){
 .db-hero,.db-hero *,.db-hero *::before,.db-hero *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
