/* Ichigo Garage — shared styles. Most layout lives inline in each page. */
body{margin:0;background:#111111}
a{color:#111}
.wide{display:none}
@media (min-width:720px){.wide{display:inline}}
.field{background-image:url(../img/strawberry-field.svg);background-size:64px 64px}
button:disabled{cursor:default}

/* keyboard focus: black ring on light surfaces, pink on black ones */
:focus-visible{outline:3px solid #111;outline-offset:2px}
footer :focus-visible,.on-dark :focus-visible{outline-color:#FFA3CF}
.lang:focus-visible{outline-offset:-3px}

.chip-btn{width:100%;min-height:44px;padding:0 4px;white-space:nowrap;border:2px solid #111;border-radius:10px;background:#FFF;color:#111;font:700 13px Rubik,sans-serif;cursor:pointer}
.chip-btn:disabled{opacity:.4;cursor:default;transform:none}
/* pop-up openers that are links look exactly like the buttons */
a.chip-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none}

dialog.modal{position:fixed;border:3px solid #111;border-radius:18px;padding:0;width:min(520px,calc(100vw - 24px));max-height:min(86vh,720px);overflow:auto;overscroll-behavior:contain;background:#FFA3CF;color:#111;font-family:Rubik,system-ui,sans-serif;box-shadow:none}
dialog.modal::backdrop{background:rgba(17,17,17,.6)}
@keyframes pop{from{transform:translateY(12px) rotate(-1deg);opacity:0}to{transform:none;opacity:1}}

.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}

/* tap targets: footer links and phone numbers are 44px tall (same look) */
footer nav a,a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}

/* ---------- hover: only on devices that really hover (on phones a tapped button would stay coloured) ---------- */
@media (hover:hover){
a:hover{color:#C8102E}
.btn:hover{background-color:#FF4F2B !important;color:#111 !important}
.tab:hover{background-color:#FFFFFF}
.chip-btn:not(:disabled):hover{background:#FFA3CF}
.lang:hover{background:#FFA3CF !important}
.dm-pill:hover{background:#FFFFFF}
}

/* ---------- movement: tilts, lifts and the pop-up animation, off for people who ask for less motion ---------- */
@media (prefers-reduced-motion:no-preference){
.btn,.opt,.chip-btn,.dm-pill{transition:transform .12s ease}
.path{transition:transform .2s ease}
.peek{transition:transform .3s ease}
.ig{transition:transform .15s ease}
.pin{transition:transform .25s ease}
.ticket{transition:transform .2s ease}
dialog.modal[open]{animation:pop .18s ease-out}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.btn:hover{transform:rotate(-2deg) scale(1.04)}
.path:hover{transform:rotate(0deg) translateY(-4px) !important}
.peek:hover{transform:rotate(-10deg) scale(1.1)}
.ig:hover{transform:rotate(-1.5deg) scale(1.02)}
.pin:hover{transform:rotate(0deg) scale(1.02) !important}
.opt:hover{transform:rotate(-2deg)}
.ticket:hover{transform:translateY(-3px)}
.chip-btn:not(:disabled):hover{transform:rotate(-2deg)}
.dm-pill:hover{transform:rotate(-2deg)}
}

/* Photos on wide screens: frames closer to the photo's own shape (phone stays as designed) */
@media (min-width:720px){
.ph-sq{height:auto !important;aspect-ratio:1/1;max-width:600px}
.ph-port{height:auto !important;aspect-ratio:4/5;max-height:640px}
.ph-door{height:auto !important;aspect-ratio:1360/754;max-width:760px}
.ph-card{height:auto !important;aspect-ratio:1/1}
}

/* in-page links land below the sticky header (119px) */
#stiluri,#program,#ajutor,#pe-scurt,#roger,#vino{scroll-margin-top:130px}

/* ---------- Laptop, tablet and phone-landscape (800px+): text on the left, photo on the right, every photo in its own proportions.
   From the canvas "Ichigo Desktop Layouts" (21 Oct 2026). Phones keep the approved stacked layout. ---------- */
@media (min-width:800px){
.split{flex-direction:row !important;align-items:center;gap:56px !important}
.split > *{flex:1 1 0 !important;min-width:0}
.split figure{height:auto !important;max-width:none !important;max-height:none !important;margin:0 !important}
.split .r-4-5{aspect-ratio:4/5 !important}
.split .r-entrance{aspect-ratio:944/1053 !important}
.split-row{flex-direction:row !important;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 56px !important}
.split-row > :last-child{flex:1 1 340px;max-width:420px;padding-bottom:18px}
.dans-big{font-size:min(15.5vw,220px) !important}
.despre-h1{font-size:min(9.8vw,140px) !important}
.even-h1{font-size:min(9vw,128px) !important}
.even-lead{font-size:22px !important;max-width:32ch !important}
/* Despre: mural and Velo photo side by side at the same height, the story underneath */
.story{display:grid !important;grid-template-columns:883fr 750fr;gap:28px 32px;align-items:start}
.story > section{display:contents !important}
.story figure{max-width:none !important;margin:0 !important}
.story .r-velo{height:auto !important;max-height:none !important;aspect-ratio:1126/1500 !important}
.story-text{grid-column:1 / -1;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 48px;align-items:start}
.story-text h2{grid-row:1 / span 3;font-size:72px !important}
.story-text p{grid-column:2;max-width:66ch}
/* "Găsește ușa": map and door side by side, details underneath */
.find{display:grid !important;grid-template-columns:1fr 1fr;gap:20px 28px;align-items:start}
.find > .find-head{grid-column:1 / -1;grid-row:1}
.find > .map-wrap{grid-column:1;grid-row:2}
.find > figure{grid-column:2;grid-row:2;height:auto !important;max-width:none !important;aspect-ratio:1360/754 !important}
.find > .find-info{grid-column:1 / -1;grid-row:3}
.find .map{height:auto !important;aspect-ratio:1360/754}
}

/* footer: the pink box holds Instagram and the phone; its focus ring is dark so it shows on pink */
footer .ig-box :focus-visible{outline-color:#111}
/* home: Roger Rabbit teaser, text left and photo right on wide screens */
@media (min-width:800px){
.teaser{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr repeat(4,auto) 1fr;column-gap:56px;row-gap:14px !important}
.teaser > *{grid-column:1;justify-self:start}
.teaser > span{grid-row:2}
.teaser > p:nth-of-type(1){grid-row:3}
.teaser > p:nth-of-type(2){grid-row:4}
.teaser > a{grid-row:5}
.teaser > img{grid-column:2;grid-row:1 / -1;justify-self:stretch;align-self:center;max-width:none !important;aspect-ratio:1200/863 !important}
}

/* ---------- One design language: everything you can click tilts a little on hover, like the buttons and stickers ---------- */
a[href]:not([class]){width:fit-content}                                   /* a link tilts as itself, not as a full-width strip */
p a[href]:not([class]):not([href^="tel:"]),li a[href]:not([class]){display:inline-block}   /* links inside text can turn */
@media (prefers-reduced-motion:no-preference){
:where(a[href],button,summary),header nav:has(> .lang){transition:transform .12s ease}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
:where(a[href],button:not(:disabled),summary):hover{transform:rotate(-2deg)}
.lang:hover{transform:none}                                               /* the RO/EN switch turns as one piece */
header nav:has(> .lang):hover{transform:rotate(-2deg)}
}

/* Despre "Ce se întâmplă în garaj": six cards as 3 + 3 on wide screens */
@media (min-width:800px){
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:22px !important}
}

/* header tabs: the strip can still be swiped sideways on small phones, but never shows a scrollbar
   (a tilted tab's corners used to make one appear next to "Evenimente") */
header nav:has(> .tab){overflow-y:hidden;scrollbar-width:none}
header nav:has(> .tab)::-webkit-scrollbar{display:none}

/* "De unde vine numele" card (Home + Despre): name on the left, the story on the right on wide screens */
@media (min-width:800px){
.name-card{display:grid !important;grid-template-columns:auto minmax(0,1fr);column-gap:56px !important;row-gap:10px !important;padding:26px 28px !important}
.name-card > :nth-child(1){grid-column:1;grid-row:1;align-self:end}
.name-card > :nth-child(2){grid-column:1;grid-row:2;align-self:start;white-space:nowrap;font-size:min(4.2vw,56px) !important}
.name-card > :nth-child(3){grid-column:2;grid-row:1;align-self:end;max-width:62ch !important}
.name-card > :nth-child(3):last-child{grid-row:1 / span 2;align-self:center}
.name-card > :nth-child(4){grid-column:2;grid-row:2;align-self:start;justify-self:start}
}


/* ---------- 22 Oct feedback ---------- */
/* Header: on wide screens the page names are bigger and the "CURSURI DE" label sits next to "Dans" (before it in
   Romanian, after "Dance" in English), not above it. Phones keep the label above. */
.tab-kicker-after{left:auto !important;right:-12px;transform:rotate(4deg) !important}
@media (min-width:800px){
header nav:has(> .tab) > a{font-size:19px !important;padding:0 14px !important}
header nav:has(> .tab) > a svg{width:26px;height:26px}
header nav:has(> .tab) .tab-kicker{position:static !important;transform:rotate(-4deg) !important;margin-right:8px;font-size:15px !important;padding:3px 6px 2px !important}
header nav:has(> .tab) .tab-kicker-after{margin:0 0 0 8px;transform:rotate(4deg) !important}
header nav:has(> .tab) > a[aria-current] .tab-kicker{border-color:#FFFFFF}
}
/* Evenimente photo pop-up */
dialog.foto-modal{width:min(1000px,calc(100vw - 24px));max-height:94vh;overflow:hidden}

/* ---------- Even rows: never 3 + 1 ---------- */
/* groups of four (Încotro, Roger Rabbit cards and posters, "În garaj, în weekend"): 2 + 2 up to 1000px, then one row of 4 */
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (min-width:1000px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}}
/* three facts under "Găsește ușa": stacked on phones, one row of 3 from 600px */
.find-info{display:grid !important;grid-template-columns:minmax(0,1fr);gap:18px 32px !important}
@media (min-width:600px){.find-info{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* rental card buttons: one under another, same width */
.btn-stack{display:grid !important;grid-template-columns:minmax(0,max-content)}
.btn-stack > a{justify-content:center}
/* door strip (Dans, Evenimente): photo | address | buttons stacked, from 700px */
@media (min-width:700px){
.door-strip{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto}
.door-btns{flex-direction:column}
.door-btns > a{justify-content:center}
}