/* /ponuda — the crawlable price list. h1, .vb-lead, .vb-pill, h2 base type all come from
   vb-site.css; this file holds only the rows and the page's own rhythm.

   This page is deliberately the QUIET sibling of the landing catalog: hairline rows straight
   on the board with a small photo per row, no reel — so when a searcher lands here from
   "burek Sisak" they are unmistakably in the same bakery. (Removed 2026-09-17 with the
   prices, back 2026-09-18 on the owner's word.) */

/* This route scrolls as a document, and the chrome carries no scrim, so a fixed wordmark
   would ride on top of the price rows. Absolute, not static: still out of flow, so
   .page-flow main's padding-top keeps reserving its room. */
.page-ponuda .vb-head { position: absolute; }

/* The flow stage centres one-screen compositions; a scrolling list must start at the top. */
.page-ponuda main { align-items: start; }

.pn {
  width: 100%; max-width: 860px; margin-inline: auto;
  padding-inline: clamp(22px, 5vw, 72px);
}
/* Wide screens: the document does not stay a 860px column of fine print on a 2560px canvas
   (owner, 2026-09-18: "too little"). A wider measure and one step up on everything that is
   set small - the rows, the meta, the filenames - while the display type keeps its clamp.
   Shared by /ponuda, /cjenik and /privatnost, which all wear this grammar. */
@media (min-width: 1800px) {
  .pn { max-width: 1120px; }
  .pn-lead { max-width: 60ch; }
  .pn-note { font-size: 15px; max-width: 70ch; }
  .pn-name { font-size: 18px; }
  .pn-desc { font-size: 15px; max-width: 60ch; }
  .pn-price { font-size: 18px; }
  .pn-sidrena { font-size: 14px; }
  .pn-cat-n { font-size: 14px; }
  .pn-jump a, .pn-reel { font-size: 14px; }
  .pn-name--file { font-size: 16px; }
  .pn-thumb { width: 72px; height: 72px; }
  .pn-row--img { grid-template-columns: 72px 1fr auto; }
  .pn-row { padding-block: 14px; }
  .pv-p { font-size: 17px; max-width: 70ch; }
}
/* Below 980 the chrome reserve collapses to the 64px bar and the title sat DIRECTLY on it
   (h1 top = 64 = the reserve, zero air), while /lokacije breathes: .vb-cols adds
   `padding-block: clamp(20px, 4vh, 40px) 0` in its own ≤980 rule. This page doesn't use
   .vb-cols, so it takes the same clamp itself — the flow pages share one top rhythm. */
@media (max-width: 980px) {
  .pn { padding-top: clamp(20px, 4vh, 40px); }
}
.pn h1 { max-width: 14ch; }
.pn-lead { max-width: 52ch; }
/* the anchor explained once, under the lead (Odluka NN 101/2026; every row carries one) */
.pn-note { font-size: 13px; line-height: 1.55; color: var(--vb-flour-dim); max-width: 60ch; margin: -6px 0 clamp(14px, 2.4vh, 26px); }

/* category jump row: the same caps-link voice as .vb-tlink, one hop per category */
.pn-jump {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 0 0 clamp(18px, 3vh, 34px); padding-bottom: 14px;
  border-bottom: 1px solid var(--vb-hair);
}
.pn-jump a {
  font-size: var(--t-fine); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vb-flour-dim); padding-block: 8px; transition: color .15s ease;
}
.pn-jump a:hover { color: var(--vb-gold); }
/* the way back to the reel: last in the row, pushed right, gold-link because it leaves the page */
.pn-reel {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: var(--t-fine); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vb-gold-link); padding-block: 8px; transition: color .15s ease;
}
.pn-reel:hover { color: var(--vb-gold); }

.pn-cat { margin-bottom: clamp(22px, 3.6vh, 40px); }
/* Anchor jumps: the header is absolute (scrolled away), but give targets air so a category
   never lands glued to the viewport edge. */
.pn-cat, .pn-row { scroll-margin-top: 18px; }

.pn-cat-h { display: flex; align-items: baseline; gap: 10px; }
.pn-cat-n {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--vb-flour-dim);
}

.pn-rows { list-style: none; margin: 0; padding: 0; }
.pn-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 18px;
  padding-block: 11px; border-bottom: 1px solid var(--vb-hair-soft);
}
.pn-row:last-child { border-bottom: 0; }
/* a row with a photo: a 54px slot before the name; the cutout sits on the board like on the
   reel cards (alpha silhouette, no frame), just small */
.pn-row--img { grid-template-columns: 54px 1fr auto; align-items: center; }
.pn-thumb {
  width: 54px; height: 54px; object-fit: contain; display: block;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.pn-cell { min-width: 0; }
.pn-name { display: block; font-size: 15px; color: var(--vb-flour); }
.pn-desc { display: block; font-size: 13px; line-height: 1.55; color: var(--vb-flour-dim); margin-top: 2px; max-width: 52ch; }
.pn-price {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--vb-gold); white-space: nowrap;
}
/* price over its anchor, right-aligned as one cell of the row (Odluka NN 101/2026, from
   2026-10-01). The anchor is .vb-sidrena from vb-site.css, sized to the row's meta. */
.pn-price-stack { display: grid; justify-items: end; gap: 2px; }
.pn-sidrena { font-size: 12px; }
/* /cjenik's file rows reuse this list; a filename is 70+ characters with no spaces and must be
   allowed to break anywhere or it runs off a phone */
.pn-name--file { overflow-wrap: anywhere; word-break: break-all; font-size: 13.5px; }

.pn-cta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: clamp(26px, 4vh, 46px) 0 clamp(10px, 2vh, 26px);
  padding-top: clamp(18px, 2.6vh, 28px); border-top: 1px solid var(--vb-hair);
}
/* (.pn-cta-note went 2026-09-18 with the "nazovi nas dan ranije" note it dressed.) */

@media (max-width: 560px) {
  .pn-row { gap: 12px; }
  .pn-cta { gap: 12px; }
  /* ---- phones: the prices drop UNDER the name, on one line ----
     Three columns (thumb | name | price stack) left the name ~60px on a 320 screen once the
     stack carried the anchor and the €/kg. Two rows instead: thumb spans both, name + desc
     on the first, then price · anchor · €/kg as one wrapping line, left-aligned. */
  .pn-row { grid-template-columns: 1fr; row-gap: 4px; }
  .pn-row--img { grid-template-columns: 54px 1fr; align-items: start; }
  .pn-row--img .pn-thumb { grid-row: 1 / span 2; }
  .pn-price-stack {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-items: start;
    gap: 2px 14px;
  }
  .pn-row--img .pn-price-stack { grid-column: 2; }
}