/* /lokacije. Chrome, tokens and the shared primitives (.vb-cols, .vb-rows, .vb-scroll,
   .vb-tlink) come from vb-site.css.

   Two-column composition, like /veleprodaja and /kontakt. Content that fits gives one screen;
   content that does not grows the page (vb-site.css, .page-flow). Nothing is clipped, so a
   sixth pekarnica lengthens the page rather than disappearing. */

.loc-cols { grid-template-columns: 1.02fr .98fr; }

/* ---- left column: copy and the map ----
   The map row is capped, not 1fr: open-ended it swallowed every extra pixel of a tall window
   and turned a landscape inset into a near-square slab. 340px is what the row resolves to at
   1440x900, so the comp is untouched there and only stops growing above it.
   The cap is vh-aware because a flat 340px is 71% of the height available on a 660px-tall
   laptop, which forced the fit script down to a .76 scale; 34vh gives ~116px back there and
   still reaches 340px above 1000px. */
.loc-left {
  display: grid;
  grid-template-rows: auto auto minmax(140px, clamp(180px, 34vh, 340px));
  align-content: center; min-height: 0;
}
.loc-left h1 { max-width: 20ch; }

/* ---- right column: the five pekarnice ----
   Hairline rows on the board, numbered — the chalk map pins carry the same numbers, and
   without them a pin marked "3" means nothing. */
.loc-right { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.loc-list { margin: 0; padding-right: 6px; counter-reset: loc; }
.loc-item { counter-increment: loc; transition: opacity .18s ease; }
.loc-item__name::before {
  content: counter(loc);
  display: inline-block; min-width: 1.4em;
  color: var(--vb-gold-link); font-size: .8em; letter-spacing: .06em;
}
/* pointing at a pin dims the other rows, and vice versa (odra-map.js) */
.loc-list:has(.loc-item.is-lit) .loc-item:not(.is-lit) { opacity: .45; }
.loc-item {
  display: grid; grid-template-columns: 1fr auto; column-gap: clamp(16px, 2vw, 28px); row-gap: 2px;
  align-items: baseline; padding-block: 11px;
}
.loc-item__name {
  grid-column: 1; grid-row: 1; margin: 0;
  font-family: 'Anton', var(--font-display); font-weight: 400; font-size: var(--t-dsp-s);
  line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--vb-gold);
}
.loc-item__meta { grid-column: 1; grid-row: 2; margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--vb-flour-dim); text-wrap: pretty; }
.loc-item__meta .is-note { color: var(--vb-muted); }
.loc-item__map { grid-column: 2; grid-row: 2; justify-self: end; font-size: var(--t-micro); letter-spacing: .2em; }

/* status is a dot + micro-caps, never a filled pill: berry is the action colour and nothing
   else, and a shop that has not opened yet is not an action */
.loc-state {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.loc-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.loc-state.is-open { color: var(--vb-gold); }
.loc-state.is-open .loc-dot { background: var(--vb-gold); box-shadow: 0 0 0 3px rgba(245, 185, 134, .16); }
/* --vb-flour-dim, not --vb-muted: at 2560x1000 the first row's "Closed" (EN, shorter than
   "Zatvoreno") lands on a flour patch and muted read 4.47 vs the 4.5 floor — the same
   muted-over-flour failure the step pips had. flour-dim keeps closed the dimmest state. */
.loc-state.is-closed { color: var(--vb-flour-dim); }
.loc-state.is-closed .loc-dot { background: var(--vb-flour-dim); }
.loc-state.is-soon { color: var(--vb-gold-link); }
.loc-state.is-soon .loc-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vb-gold-link); }

/* ---- the map, drawn in chalk, sunk into the worktop ----
   Feathered on all four edges like every other image here, not framed: a bordered, shadowed
   rectangle is the one thing on the site that reads as a floating UI panel. */
.lt-map {
  position: relative; height: 100%; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---- relax into one column when NARROW only (thresholds in vb-site.css). Short-but-wide
   keeps its columns: stacking the map under the list doubles the page height on a laptop. --- */
@media (max-width: 980px) {
  .loc-cols { grid-template-columns: 1fr; }
  .loc-left { display: block; }
  .loc-left h1 { max-width: 18ch; }
  .loc-right { display: block; }
  .loc-list { padding-right: 0; }
  .lt-map { height: clamp(300px, 46vw, 440px); }
}

/* ---- tablet portrait: one column for the copy, two for the list ----
   Stretched to the full 691px track the lead ran 56 characters and every pekarnica claimed a
   row to itself. The prose narrows to one list column so the two align down the left edge. */
@media (min-width: 720px) and (max-width: 979.98px) {
  .loc-left .vb-lead { max-width: 35ch; }
  .loc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 40px); }
  /* .vb-rows opens the list on its first child; side by side the second row-one item needs it too */
  .loc-list > :nth-child(2) { border-top: 1px solid var(--vb-hair-soft); }
}

/* Stacked rows, for both narrow cases: a phone, and a tablet column that is phone-width.
   Side by side with the status the name track is ~190px and every second name wrapped. */
@media (max-width: 560px), (min-width: 720px) and (max-width: 979.98px) {
  .loc-item { grid-template-columns: 1fr; }
  .loc-state, .loc-item__map { grid-column: 1; justify-self: start; }
  .loc-state { grid-row: 2; }
  .loc-item__meta { grid-row: 3; }
  .loc-item__map { grid-row: 4; }
}

/* ---- touch: 'Karta' is 68x19 of ink and was the smallest target on the page ----
   Padding grows the press box, an equal negative margin hands the space back, so the rows keep
   their rhythm and the page does not get longer. Weighted downward: upward it would swallow the
   open/closed line sitting directly above it in the two-column rows. */
@media (max-width: 979.98px) {
  .loc-item__map { padding-block: 6px 19px; margin-block: -6px -19px; }
}
/* stacked, the link starts its own row: the 6px that separated it from the address now rides
   inside the hit padding */
@media (max-width: 560px), (min-width: 720px) and (max-width: 979.98px) {
  .loc-item__map { padding-top: 12px; }
}