/* ——— Strona główna ——— */

/* hero */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; background: var(--ink-deep);
}
.hero__media { position: absolute; inset: -8% 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; will-change: transform; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,20,4,0.93) 0 40%, rgba(28,20,4,0.34) 70%, rgba(28,20,4,0.56) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(4rem, 10vh, 7rem); }
.hero__copy { max-width: 640px; color: var(--cream); }
.hero__copy .eyebrow { color: var(--amber); }
.hero h1 .accent { color: var(--amber); display: block; }
.hero__lead { font-size: var(--step-1); max-width: 44ch; margin-top: var(--space-3); color: #F2E4C8; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-4); }
/* Wejście do /buzz-picks z pierwszego ekranu — link, nie trzeci przycisk. */
.hero__picks { margin-top: var(--space-3); }
.hero__picks a { color: var(--cream); text-decoration: none; font-size: 0.98rem; }
.hero__picks b { color: var(--amber); border-bottom: 2px solid var(--amber); }
.hero__picks a:hover b, .hero__picks a:focus-visible b { color: var(--cream); border-color: var(--cream); }

/* Niski ekran (np. iPhone SE, 667 px): treść hero jest wyśrodkowana w pionie
   i przy tej wysokości pierwsza linijka wchodziła pod pasek-wyspę.
   Zmierzone przed poprawką: pasek kończył się na 70 px, nadlinia zaczynała na 67. */
@media (max-width: 900px) and (max-height: 720px) {
  .hero { align-items: flex-start; padding-top: 96px; padding-bottom: var(--space-3); }
  /* Zapas u góry daje już samo .hero — odstęp z .wrap dokładałby drugie tyle
     i spychał przyciski pod baner cookies. */
  .hero .wrap { padding-block: 0; }
  .hero__lead { margin-top: var(--space-2); }
  .hero__cta { margin-top: var(--space-3); }
}
/* Telefon w poziomie: hero miało 481 px przy ekranie 391 px, więc oba przyciski
   były pod zgięciem. Rezygnujemy z pełnej wysokości ekranu. */
@media (orientation: landscape) and (max-height: 480px) {
  .hero { min-height: auto; align-items: flex-start; padding-block: 96px var(--space-4); }
  .hero .wrap { padding-block: 0; }
  .hero__lead { margin-top: var(--space-2); }
  .hero__cta { margin-top: var(--space-3); }
}


/* tło drugiej sekcji: miękkie plamy koloru + ledwie widoczna siatka */
.counter { position: relative; overflow: hidden; }
.counter > .wrap { position: relative; z-index: 1; }
.counter__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.counter__bg > * { position: absolute; will-change: transform; }
.counter__grid {
  inset: 0; width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(46, 33, 6, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 33, 6, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(130% 95% at 50% 40%, #000 35%, transparent 100%);
}
.blob { border-radius: 50%; filter: blur(60px); }
.blob--amber { width: 420px; height: 420px; left: -80px; top: -60px; background: rgba(246, 179, 31, 0.34); }
.blob--rose { width: 360px; height: 360px; right: -60px; top: 20%; background: rgba(152, 108, 106, 0.28); }
.blob--plum { width: 300px; height: 300px; left: 35%; bottom: -110px; background: rgba(62, 47, 91, 0.2); }

/* who's behind the counter — dwa portrety, tekst obok */
.counter { padding-top: var(--space-5); }
.counter .wrap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
.counter__portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px); align-items: start; }
.portrait { position: relative; margin: 0; }
.portrait img { border: 3px solid var(--ink); width: 100%; }
.portrait figcaption { position: absolute; left: -8px; bottom: 16px; background: var(--amber); color: var(--ink); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 0.95rem; padding: 7px 14px; border: var(--border); }
.portrait--monika { margin-top: clamp(32px, 8vw, 96px); }
.portrait picture { display: block; overflow: hidden; border: 3px solid var(--ink); }
.portrait img { border: 0; will-change: transform; }
.counter h2 { max-width: 14ch; margin-bottom: var(--space-3); }
.counter p { max-width: 52ch; }
.counter__pull { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); line-height: 1.05; text-transform: uppercase; border-left: 6px solid var(--amber); padding-left: 18px; margin-top: var(--space-3); }
.counter__cta { margin-top: var(--space-4); }

/* zdjęcie w tle sekcji specjałów — rozmyte, mocno przyciemnione */
.specials { background: var(--ink); }
.specials__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.specials__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(0.85); transform: scale(1.08); opacity: 0.55; }
.specials__bg::after { content: ""; position: absolute; inset: 0; background: rgba(28, 20, 4, 0.55); }

/* elementy tła reagujące na paralaksę */
.bg-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-layer > * { position: absolute; will-change: transform; }
.specials > .wrap { position: relative; z-index: 1; }
.ring { border: 3px solid var(--amber); border-radius: 50%; opacity: 0.2; }
.ring--a { width: 320px; height: 320px; left: -90px; top: 10%; }
.ring--b { width: 200px; height: 200px; right: 6%; top: 6%; opacity: 0.15; }
.ring--c { width: 460px; height: 460px; right: -150px; bottom: -130px; opacity: 0.11; }
.bean { width: 120px; height: 76px; border-radius: 50%; background: rgba(246, 179, 31, 0.13); rotate: -25deg; }
.bean--a { left: 12%; bottom: 12%; }
.bean--b { right: 24%; top: 20%; rotate: 15deg; }
.bg-word { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(5rem, 15vw, 12rem); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px rgba(246, 179, 31, 0.16); left: 50%; translate: -50% 0; top: 14%; white-space: nowrap; }

/* E4 — ciemna sekcja cięta skosem */
.specials {
  --slant: clamp(26px, 4vw, 60px);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
  margin-block: calc(var(--slant) * -1);
  padding-block: calc(var(--space-6) + var(--slant));
  position: relative; z-index: 2;
}

/* E3 — nagłówki wjeżdżają literami: styl przeniesiony do site.css (używa go
   też /about i każda kolejna podstrona z [data-letters]). */

/* E7 — cytat zapala się słowami */
.counter__pull .w { color: rgba(46, 33, 6, 0.22); transition: color 0.25s var(--ease); }
.counter__pull .w.is-on { color: var(--ink); }
.counter__pull .w.is-hot { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .counter__pull .w { color: var(--ink); }
}

/* specials */
.specials__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.specials__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); list-style: none; margin: 0; padding: 0; }
.card { background: var(--cream); color: var(--ink); border: 3px solid var(--amber); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.card picture { display: block; overflow: hidden; }
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); box-shadow: 10px 12px 0 var(--amber); }
  .card:hover img { transform: scale(1.07); }
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
.card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card p { font-size: 0.95rem; }
.card__price { margin-top: auto; align-self: flex-start; font-family: var(--font-mono); font-weight: 500; font-size: 1.1rem; background: var(--amber); padding: 6px 12px; border: var(--border); }

/* .placeholder — przeniesiony do site.css, używa go też /about */

/* functions teaser */
.functions h2 { margin-bottom: var(--space-3); }
.functions .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; }


/* reviews — kremowy panel na rozmytym zdjęciu */
.reviews { position: relative; overflow: hidden; }
.reviews__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.reviews__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px) saturate(0.9); transform: scale(1.06); }
.reviews__bg::after { content: ""; position: absolute; inset: 0; background: rgba(28, 20, 4, 0.62); }
.reviews > .wrap { position: relative; z-index: 1; }

.reviews__panel {
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--amber);
  padding: clamp(22px, 3.5vw, 40px); max-width: 860px; margin-inline: auto;
}
.reviews__panel .eyebrow { color: var(--rose); }
.reviews__panel h2 { color: var(--ink); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid var(--ink); }
.reviews__score { margin: 0; font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.04em; white-space: nowrap; }
.reviews__score b { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.02em; }

.review__stars { color: var(--amber); -webkit-text-stroke: 0.6px var(--ink); font-size: 1.02rem; letter-spacing: 0.12em; margin: 0; }
.review blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; }
.review__by { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }

/* wyróżniona opinia */
.review--featured {
  margin: var(--space-3) 0 0; background: var(--amber); border: 3px solid var(--ink);
  padding: clamp(18px, 2.6vw, 28px); display: grid; gap: 12px;
}
.review--featured blockquote {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.08;
}
.review--featured .review__by { color: rgba(46, 33, 6, 0.72); }
.review--featured .review__stars { -webkit-text-stroke: 0; color: var(--ink); }

/* przewijana lista reszty */
.reviews__list {
  list-style: none; margin: var(--space-3) 0 0; padding: 0 10px 0 0;
  max-height: 380px; overflow-y: auto; scrollbar-color: var(--amber) transparent;
  display: grid; gap: 0;
}
.reviews__list .review { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid rgba(46, 33, 6, 0.18); }
.reviews__list .review:first-child { padding-top: 0; }
.reviews__list .review:last-child { border-bottom: 0; }

.reviews__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.reviews__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: var(--space-2); }

@media (max-width: 860px) {
  /* Ciemniej niż dawne 0.45 — tak jak lewa strona hero na desktopie.
     Zdjęcie ma być tłem, nie konkurencją dla tekstu. */
  .hero::after { background: linear-gradient(180deg, rgba(28,20,4,0.88) 0 45%, rgba(28,20,4,0.95) 100%); }
  .counter .wrap,
  .functions .wrap { grid-template-columns: 1fr; }
}

/* Sekcja kateringu: styl przeniesiony z atrybutów style w HTML.
   CSP `style-src 'self'` inline blokuje, więc ramka i kadr zdjęcia
   po prostu nie działały. */
.catering__cta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.catering__more { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--amber); }
.catering__more:hover, .catering__more:focus-visible { border-color: var(--ink); }
.catering__side { position: relative; }
.catering__frame { position: relative; margin: 0; border: var(--border); box-shadow: var(--shadow-hard); overflow: hidden; }
.catering__frame figcaption {
  position: absolute; left: 12px; top: 12px; background: var(--amber); border: 2px solid var(--ink); padding: 6px 10px;
  font-family: var(--font-display); font-weight: 900; font-size: 0.85rem; line-height: 1; text-transform: uppercase;
}
/* Cennik jako karta menu nachodząca na zdjęcie; kropki prowadzą wzrok do ceny. */
.catering__card {
  position: relative; margin: -40px 18px 0 auto; width: min(360px, 90%);
  background: var(--cream-hi); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--amber); padding: 16px 18px;
}
.catering__cardhead { margin: 0 0 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.catering__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.3; }
.catering__card li { display: flex; gap: 8px; align-items: baseline; }
.catering__card li span { flex: 1; display: flex; gap: 8px; }
.catering__card li span::after { content: ""; flex: 1; border-bottom: 2px dotted rgba(46, 33, 6, 0.35); translate: 0 -4px; }
.catering__card b { font-weight: 500; }
@media (max-width: 860px) {
  .catering__card { margin: -28px 12px 0 auto; width: calc(100% - 24px); }
}
.catering__img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Telefony: paralaksa jest wyłączona w js/ui.js, więc `will-change: transform`
   nie ma już czego przyspieszać — zostawiałoby tylko wielkie warstwy
   kompozytora, które na iOS Safari kosztują pamięć i szarpią scroll. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .hero__media img,
  .portrait img,
  .counter__bg > *,
  .bg-layer > * { will-change: auto; }
}

/* ——— Telefony: mniej pracy dla kompozytora przy przewijaniu ———
   Rozmyte zdjęcia w tle sekcji specjałów i opinii Safari rasteruje na nowo
   przy szybkim scrollu — sekcje „doganiały" ekran. Zostaje samo ciemnobrązowe
   tło. `display: none` zabiera przy okazji dwa pobrania: zdjęcie leniwe
   w ukrytym pojemniku nigdy nie wchodzi w kadr, więc się nie ściąga. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .specials__bg,
  .reviews__bg { display: none; }
  .specials { background: var(--ink-deep); }
  /* Opinie na białym — kremowy panel z ramką i amberowym cieniem czyta się
     na nim jak kartka położona na stole. */
  .reviews { background: #fff; }

  /* Plamy koloru: `filter: blur(60px)` na trzech warstwach po ~400 px to na
     iOS najdroższa rzecz w tej sekcji. Ten sam miękki kształt daje gradient,
     który nic nie kosztuje. */
  .blob { filter: none; background: none; }
  .blob--amber { background: radial-gradient(circle, rgba(246,179,31,0.34) 0%, rgba(246,179,31,0) 68%); }
  .blob--rose  { background: radial-gradient(circle, rgba(152,108,106,0.28) 0%, rgba(152,108,106,0) 68%); }
  .blob--plum  { background: radial-gradient(circle, rgba(62,47,91,0.2) 0%, rgba(62,47,91,0) 68%); }

  /* Lista opinii miała własne przewijanie w środku strony — palcem trafiało
     się w nią zamiast w stronę i przewijanie „zacinało się" w miejscu. */
  .reviews__list { max-height: none; overflow-y: visible; padding-right: 0; }
}

/* Wiersz oceny nie mieści się w panelu na wąskim ekranie: `nowrap` wypychał
   „…946 reviews on Google" 15 px poza kremową kartę, na ciemne tło. */
@media (max-width: 620px) {
  .reviews__score { white-space: normal; }
}

/* Wejście do /buzz-picks pod specjałami: jasna ramka z twardym cieniem.
   Sekcja specjałów ma ujemny margines (skos), stąd większy odstęp u góry. */
.picks-cta { padding-top: calc(var(--space-5) + 40px); padding-bottom: 0; }
.picks-cta__box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--cream-hi); border: 3px solid var(--ink); box-shadow: var(--shadow-hard);
  padding: clamp(20px, 3vw, 36px);
}
.picks-cta__box h2 { margin: 0 0 8px; font-size: var(--step-3); }
.picks-cta__box p:not(.eyebrow) { margin: 0; max-width: 52ch; }