/* Coajă — brutărie de cartier, Brașov. Două lumini din poze: rumenul crustei (noaptea, cuptorul) și făina (ziua).
   Referințe: Ride Out (prima pagină: numele uriaș + ora lângă el), Union Boulangerie (paginile interioare),
   Muse (registrul cald-întunecat, persoana I semnată). Un singur font: Schibsted Grotesk. */
:root {
  --rumen: #6B3712;       /* crusta; fondul nopții (ΔE ≥ 23,6 față de fondurile ultimelor 5) */
  --faina: #EFE9D4;       /* fondul zilei (ΔE ≥ 10,6) */
  --funingine: #2B1D15;   /* text pe făină; subsolul */
  --crem: #F4EBDD;        /* text pe rumen */
  --chihlimbar: #F2B36B;  /* ora; tăvile din grafic */
  --lemn: #6C5A4B;        /* text secundar pe făină */
  --g: clamp(16px, 4vw, 56px);
  --max: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--faina); color: var(--funingine); font: 400 17px/1.55 "Schibsted Grotesk", system-ui, sans-serif; }
img, video { max-width: 100%; display: block; }
figure { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 .5em; }
h2 { font-size: clamp(30px, 4.2vw, 52px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: transparent; border: none; appearance: none; cursor: pointer; padding: 0; }
.vizual-ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sari { position: absolute; left: var(--g); top: 8px; z-index: 50; background: var(--crem); color: var(--funingine); padding: 10px 16px; border-radius: 999px; clip-path: inset(50%); }
.sari:focus { clip-path: none; }

/* butonul: pastilă, ca la Ride Out */
.btn { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 12px 26px; border-radius: 999px;
  background: var(--funingine); color: var(--crem); font-weight: 500; font-size: 16px; text-decoration: none; }
.btn:hover { background: #000; }
.erou .btn, .noaptea .btn, .loc .btn { background: var(--crem); color: var(--funingine); }
.erou .btn:hover, .loc .btn:hover { background: #fff; }

/* antetul: bară rumenă, lipicioasă */
.antet { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px var(--g);
  background: var(--rumen); color: var(--crem); }
.marca { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.marca-nume { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.marca-loc { font-size: 14px; }
.meniu { display: flex; gap: 22px; margin-left: auto; min-width: 0; }
.meniu a { text-decoration: none; font-size: 16px; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.meniu a:hover { border-bottom-color: var(--crem); }
.meniu a[aria-current="page"] { border-bottom-color: var(--chihlimbar); }
.antet-tel { white-space: nowrap; font-weight: 500; text-decoration: none; }
@media (max-width: 1080px) {
  .antet { flex-wrap: wrap; row-gap: 6px; padding-bottom: 0; }
  .antet-tel { margin-left: auto; }
  .meniu { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--g)); padding: 2px var(--g) 8px; overflow-x: auto; scrollbar-width: none; }
  .meniu::-webkit-scrollbar { display: none; }
}
@media (max-width: 420px) { .marca-loc { display: none; } }

/* ---- prima pagină ---- */
.erou { background: var(--rumen); color: var(--crem); padding-top: clamp(28px, 4vw, 48px); }
.erou-cap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; padding: 0 var(--g); }
.nume { font-size: clamp(100px, 30vw, 330px); font-weight: 400; letter-spacing: -0.06em; line-height: .8; margin: 0; }
.nume-sub { display: block; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: 0; line-height: 1.3; margin: clamp(26px, 3.6vw, 54px) 0 0; }   /* sub coada lui „j” */
.erou-stare { max-width: 30ch; padding-bottom: 6px; }
.stare { margin: 0 0 .4em; }
.erou-tava { color: var(--chihlimbar); font-size: 19px; line-height: 1.35; margin: 0; }
.erou-text { padding: 26px var(--g) 30px; max-width: calc(44ch + 2 * var(--g)); font-size: clamp(18px, 1.5vw, 21px); margin: 0; }
.banda { position: relative; }
.banda-poza { width: 100%; height: clamp(260px, 46vw, 660px); object-fit: cover; }
.pe-poza { position: absolute; left: var(--g); bottom: clamp(16px, 2.5vw, 32px); }
@media (max-width: 760px) {
  .erou-cap { grid-template-columns: 1fr; }
  .erou-stare { max-width: none; }
}

/* ---- noaptea în cuptor (semnătura) ---- */
.noaptea { background: var(--rumen); color: var(--crem); padding: clamp(56px, 7vw, 96px) var(--g); }
.noaptea-cap { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 64px; max-width: var(--max); margin-bottom: 28px; }
.noaptea-cap p { max-width: 52ch; margin: 0; }
@media (max-width: 860px) { .noaptea-cap { grid-template-columns: 1fr; } }
.zile { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.zi-buton { min-width: 48px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--crem); }
@media (max-width: 420px) { .zile { gap: 6px; } .zi-buton { min-width: 44px; padding: 8px 10px; } }
.grafic-indiciu { display: none; font-size: 15px; margin: 0 0 6px; }
@media (max-width: 860px) { .grafic-indiciu { display: block; } }
.zi-buton[aria-selected="true"] { background: var(--crem); color: var(--rumen); font-weight: 500; }
.grafic-derulare { overflow-x: auto; padding-bottom: 8px; }
.grafic { min-width: 1040px; max-width: var(--max); }   /* tava de 18 minute: ~52 px, cât să încapă „Chifle” */
.panou { margin: 8px 0 40px; }
.panou-titlu { color: var(--chihlimbar); margin: 0 0 34px; font-weight: 500; }
.panou-corp { position: relative; margin: 0 28px 0 142px; }
.ora-linie { position: absolute; top: -8px; bottom: -8px; border-left: 1px solid rgba(244, 235, 221, .28); }
.ora-linie span { position: absolute; top: -26px; transform: translateX(-50%); font-size: 14px; }
.vatra { position: relative; height: 58px; margin: 0 0 8px; }
.vatra-nume { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); font-size: 14px; white-space: nowrap; }
.vatra-pista { position: relative; height: 100%; background: rgba(43, 29, 21, .38); border-radius: 6px; }
.tava { position: absolute; top: 5px; bottom: 5px; background: var(--chihlimbar); color: var(--funingine); border-radius: 4px;
  padding: 5px 4px 5px 6px; font-size: 13px; line-height: 1.2; overflow: hidden; white-space: nowrap; z-index: 2; }
.tava b { display: block; font-weight: 500; }
.semn { position: absolute; top: -14px; bottom: -14px; z-index: 1; }
.semn span { position: absolute; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: 14px; padding-top: 4px; }
.semn-dreapta span { transform: translateX(-100%); }
.semn-stanga span { transform: none; }
.semn-rasarit { border-left: 2px dashed var(--crem); }
.semn-acum { border-left: 2px solid #fff; }
.semn-acum span { font-weight: 700; }
.cuptor-gol { font-size: 20px; }
.iesiri-tot { margin-top: 28px; max-width: 720px; }
.iesiri-tot summary { cursor: pointer; font-weight: 500; padding: 8px 0; }
.iesiri { list-style: none; padding: 0; margin: 10px 0 0; }
.iesiri li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 9px 0; border-top: 1px solid rgba(244, 235, 221, .25); }
.iesiri time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--chihlimbar); }
.noaptea-mai { margin: 28px 0 0; }

/* ---- eu, persoana I ---- */
.eu { display: grid; grid-template-columns: 5fr 7fr; gap: 40px clamp(32px, 5vw, 80px); align-items: center; padding: clamp(64px, 8vw, 120px) var(--g); max-width: calc(var(--max) + 2 * var(--g)); }
.eu-poza img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.eu-text p { max-width: 50ch; font-size: 19px; }
.semnatura { font-weight: 500; }
@media (max-width: 900px) { .eu { grid-template-columns: 1fr; } .eu-poza img { aspect-ratio: 3 / 2; } }

/* ---- ce scoatem din cuptor ---- */
.azi { padding: 0 var(--g) clamp(64px, 8vw, 110px); max-width: calc(var(--max) + 2 * var(--g)); }
.produse { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.produs figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 14px; }
.produs h3 { margin-bottom: 4px; }
.produs p { margin: 0 0 2px; }
.produs-kg { color: var(--lemn); font-size: 15px; margin-left: 6px; }
.produs-cald b { font-variant-numeric: tabular-nums; }
.azi-mai { margin-top: 32px; }
@media (max-width: 960px) { .produse { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .produse { grid-template-columns: 1fr; } }

/* ---- întrebări: rânduri cu „+”, ca la Ride Out ---- */
.intrebari { padding: 0 var(--g) clamp(64px, 8vw, 110px); max-width: calc(900px + 2 * var(--g)); }
.intrebari details { border-top: 1px solid rgba(43, 29, 21, .3); }
.intrebari details:last-child { border-bottom: 1px solid rgba(43, 29, 21, .3); }
.intrebari summary { position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; }
.intrebari summary::-webkit-details-marker { display: none; }
.intrebari summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 400; }
.intrebari details[open] summary::after { content: "–"; }
.intrebari details p { max-width: 62ch; padding-bottom: 12px; }

/* ---- locul ---- */
.loc { display: grid; grid-template-columns: 7fr 5fr; gap: 40px 64px; background: var(--rumen); color: var(--crem); padding: clamp(56px, 7vw, 96px) var(--g); }
.loc-tel { font-size: clamp(34px, 4.6vw, 60px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.loc-tel a { text-decoration: none; }
.program { list-style: none; padding: 0; margin: 0; align-self: end; }
.program li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.program li.azi-zi { font-weight: 700; }
.program li.azi-zi span:first-child::after { content: " · azi"; font-weight: 400; }
@media (max-width: 860px) { .loc { grid-template-columns: 1fr; } }

/* ---- subsol ---- */
.subsol { background: var(--funingine); color: var(--crem); padding: 64px var(--g) 28px; font-size: 15px; }
.subsol-grila { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr 1.4fr; gap: 32px; }
.subsol ul { list-style: none; padding: 0; margin: 0; }
.subsol li { margin-bottom: 6px; }
.subsol-marca { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
.subsol-titlu { font-weight: 700; margin-bottom: 10px; }
.sal { display: inline-block; margin-top: 8px; }
.sal img { width: 250px; height: auto; }
.subsol-jos { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid rgba(244, 235, 221, .25); }
@media (max-width: 900px) { .subsol-grila { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .subsol-grila { grid-template-columns: 1fr; } }

/* ---- paginile interioare (fond de făină, ca la Union) ---- */
.cuptor-cap, .paine-cap, .lucram-cap, .comenzi-cap, .contact-cap, .text { padding: clamp(48px, 7vw, 96px) var(--g) clamp(28px, 4vw, 48px); max-width: calc(860px + 2 * var(--g)); }
.cuptor-cap h1, .paine-cap h1, .lucram-cap h1, .comenzi-cap h1, .contact-cap h1, .text h1 { font-size: clamp(42px, 6.4vw, 92px); letter-spacing: -0.04em; font-weight: 400; }
.cuptor-cap p, .paine-cap p, .lucram-cap p, .comenzi-cap p { font-size: 19px; max-width: 58ch; }
.cuptor-fraza { font-weight: 500; }
.noaptea-plina .grafic-loc { margin-bottom: 8px; }
.cuptor-lista .iesiri { columns: 2; column-gap: 48px; max-width: var(--max); }
.cuptor-lista .iesiri li { break-inside: avoid; }
@media (max-width: 760px) { .cuptor-lista .iesiri { columns: 1; } }
.cuptor-note { padding: clamp(48px, 6vw, 80px) var(--g); max-width: calc(860px + 2 * var(--g)); }
.cuptor-note ul { padding-left: 1.1em; }
.cuptor-note li { margin-bottom: .6em; }

.paine-lista { padding: 0 var(--g); max-width: calc(var(--max) + 2 * var(--g)); }
.paine { display: grid; grid-template-columns: 5fr 7fr; gap: 28px clamp(28px, 4vw, 64px); padding: 44px 0; border-top: 1px solid rgba(43, 29, 21, .3); }
.paine figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.paine h2 { font-size: clamp(28px, 3.2vw, 40px); }
.paine-scurt { font-size: 19px; }
.paine dl { margin: 0; }
.paine dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 8px 0; }
.paine dt { color: var(--lemn); }
.paine dd { margin: 0; }
.paine dd span { color: var(--lemn); }
@media (max-width: 860px) { .paine { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .paine dl div { grid-template-columns: 1fr; gap: 0; } }
.paine-nota { padding: 32px var(--g) clamp(64px, 8vw, 110px); max-width: calc(760px + 2 * var(--g)); }

.lucram-foto { color: var(--lemn); font-size: 16px !important; }
.etape { list-style: none; padding: 0 var(--g); margin: 0 0 40px; }
.etapa { display: grid; grid-template-columns: 4fr 8fr; gap: 24px clamp(28px, 4vw, 64px); padding: 48px 0; border-top: 1px solid rgba(43, 29, 21, .3); max-width: var(--max); }
.etapa-ora { font-size: 15px; color: var(--lemn); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.etapa h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 400; letter-spacing: -0.03em; }
.etapa-text p:last-child { max-width: 42ch; font-size: 18px; }
.etapa-poze { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.etapa-3 .etapa-poze { grid-template-columns: repeat(3, 1fr); }
.etapa-poze img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
@media (max-width: 900px) { .etapa { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .etapa-poze, .etapa-3 .etapa-poze { grid-template-columns: 1fr; } }
.lucram-sfarsit { padding: 0 var(--g) clamp(64px, 8vw, 110px); font-size: 19px; }

/* ---- formularul ---- */
.formular { padding: 0 var(--g) clamp(64px, 8vw, 110px); max-width: calc(760px + 2 * var(--g)); }
.formular fieldset { border: 0; padding: 0; margin: 0 0 40px; }
.formular legend { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 14px; padding: 0; }
.f-rand { display: grid; grid-template-columns: 1fr 96px; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(43, 29, 21, .3); }
.f-rand label > span { display: block; }
.f-detaliu { color: var(--lemn); font-size: 15px; }
.formular input[type="number"], .formular input[type="text"], .formular input[type="tel"], .formular select {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--funingine); background: #FBF7EC;
  border: 1.5px solid var(--funingine); border-radius: 12px; }
.formular input[type="number"] { text-align: center; font-variant-numeric: tabular-nums; }
.f-total { font-size: 21px; font-weight: 500; margin: 14px 0 0; min-height: 1.6em; }
.f-cand, .f-cine { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.f-cand legend, .f-cine legend { grid-column: 1 / -1; }
.f-camp label { display: block; margin-bottom: 6px; }
.f-nota { grid-column: 1 / -1; min-height: 3.2em; margin: 0; color: var(--lemn); }
.f-capcana { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.f-acord { grid-column: 1 / -1; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.f-acord input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--rumen); }
.f-erori { min-height: 3.4em; margin-bottom: 14px; color: #8A1C0C; font-weight: 500; }
.f-erori ul { margin: 0; padding-left: 1.1em; }
.f-erori.f-bine { color: var(--funingine); }
.f-sau { margin-top: 18px; }
.camp-gresit { border-color: #8A1C0C !important; box-shadow: 0 0 0 1px #8A1C0C; }
@media (max-width: 560px) { .f-cand, .f-cine { grid-template-columns: 1fr; } }
.fara-js { padding: 0 var(--g); }

.contact-grila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 var(--g) clamp(64px, 8vw, 110px); max-width: calc(var(--max) + 2 * var(--g)); }
.contact-grila h2 { font-size: 26px; }
.contact-grila .loc-tel { font-size: clamp(30px, 3vw, 40px); }
.contact-grila .program li { border-bottom-color: rgba(43, 29, 21, .3); }
@media (max-width: 900px) { .contact-grila { grid-template-columns: 1fr; } }
.text h2 { font-size: 24px; margin-top: 1.4em; }
.text p { max-width: 64ch; }