/* /lokacije pages (seo_pages.render_layout): /lokacije, /lokacije/{city}, venue pages.
   Restyled in redesign Stage 2 to match zapletrakija.rs (spec §4.2; execution-rules §3 correction 8).
   Load order: tokens.css → brand.css → this file, so rules here win ties with brand.css.
   Cascade contract (brand.css header): for the brand primitives on these pages (.nav-map-btn,
   .action-link outline tickets; .btn-primary filled ticket; .chip-link notched chip; .map-cta,
   .info-block framed cards) this file keeps LAYOUT ONLY. brand.css never declares `display`, so
   their display lives here. Their visual tuning (the compact nav ticket on phones, the city chips'
   category-tab typography, the framed cards' 12px scoop) lives in brand.css since Stage 3.
   Served by: app.mount("/css", StaticFiles(directory="html/css"), name="css") */

*, *::before, *::after { box-sizing: border-box; }

/* Keyboard focus and in-page jumps land below the sticky nav (WCAG 2.4.11). */
html { scroll-padding-top: 7rem; }

/* brand.css owns the body font, weight and colour. The page owns the surface and the layout:
   a flex column, so the charcoal footer always reaches the bottom of short pages. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--z-surface-page);
  background-image: var(--z-surface-page-image);
  font-size: var(--z-text-base);
  line-height: var(--z-leading-body);
}

a { color: inherit; text-decoration: none; }
/* Hover underline for PLAIN links only: every <a class="…"> here is a primitive or a styled link
   with its own hover (brand.css resets the underline on primitives only inside the hover query). */
@media (hover: hover) and (pointer: fine) {
  .page-shell a:not([class]):hover { text-decoration: underline; text-decoration-thickness: 1px; }
}

/* ── Nav: paper bar, centred logo, uppercase links, "Otvori mapu" outline ticket ─────────── */
/* DOM order is logo → links → ticket (the baseline link order). The grid shows links | logo | ticket,
   like the site header; below 768px the logo sits on its own row above links and ticket. */
.brand-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "links brand cta";
  align-items: center;
  column-gap: var(--z-space-6);
  padding: var(--z-space-3) var(--z-gutter);
  background-color: var(--z-surface-page);
  background-image: var(--z-surface-page-image);
  border-bottom: var(--z-rule-width) solid var(--z-rule-soft);
}
.nav-brand {
  grid-area: brand;
  display: block;
  line-height: 0;
}
.nav-brand img {
  display: block;
  width: auto;
  height: 64px;
}
.nav-links {
  grid-area: links;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--z-space-2) var(--z-space-8);
}
.nav-link {
  display: inline-block;
  padding: var(--z-space-2) 0;
  font-size: var(--z-text-lg);
  line-height: 22px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--z-text);
}
@media (hover: hover) and (pointer: fine) {
  /* Stage 4 adds the site's bracket hover; until then a hairline underline. */
  .nav-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}
.nav-map-btn {
  grid-area: cta;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .nav-link { font-size: var(--z-text-base); line-height: 20px; }
  .nav-links { column-gap: var(--z-space-6); }
}
@media (max-width: 767px) {
  .brand-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand brand"
      "links cta";
    row-gap: 6px;
    column-gap: var(--z-space-3);
    padding: 10px var(--z-gutter);
  }
  .nav-brand { justify-self: center; }
  .nav-brand img { height: 40px; }
  .nav-links { justify-self: start; column-gap: var(--z-space-5); row-gap: 0; }
  .nav-link { font-size: var(--z-text-sm); line-height: 18px; letter-spacing: var(--z-tracking-tab); }
  .nav-map-btn { justify-self: end; padding: 10px 16px; }
}
@media (max-width: 359px) {
  /* Too narrow for both links beside the ticket: stack them tightly (targets stay >= 24px). */
  .nav-links { flex-direction: column; align-items: flex-start; }
  .nav-link { padding: 3px 0; }
}
/* Short viewports (phones in landscape, 200%+ zoom): the bar scrolls away instead of
   covering a large share of the screen (WCAG 1.4.10). */
@media (max-height: 599px) {
  .brand-nav { position: relative; }
  html { scroll-padding-top: 0; }
}

/* ── Page shell: 72rem container on the site's gutters ───────────────────────────────── */
/* A flex column, so the h1 and its intro can lead the page like the site's page titles while
   .map-cta stays first in the DOM. Only non-focusable elements move, so the tab order and the
   visual order of links stay the same. */
.page-shell {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--z-container) + 2 * var(--z-gutter));
  margin: 0 auto;
  padding: var(--z-space-10) var(--z-gutter) var(--z-space-16);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .page-shell { padding-top: var(--z-space-16); }
}
.page-shell > h1,
.page-shell > h1 + .intro { order: -1; }

h1 {
  margin: 0 auto var(--z-space-4);
  max-width: 100%;
  font-size: var(--z-text-4xl);
  font-weight: var(--z-weight-book);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--z-text);
}
h2 {
  margin: var(--z-space-10) auto var(--z-space-5);
  max-width: 100%;
  font-size: var(--z-text-2xl);
  font-weight: var(--z-weight-book);
  line-height: 1.15;
  letter-spacing: var(--z-tracking-heading);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--z-heading-accent);
}
@media (min-width: 1024px) {
  h1 { font-size: var(--z-text-5xl); }
  h2 { font-size: var(--z-text-3xl); }
}
@media (max-width: 359px) {
  h1 { font-size: var(--z-text-3xl); }
}

.intro {
  max-width: var(--z-measure);
  margin: 0 auto var(--z-space-10);
  font-size: var(--z-text-base);
  line-height: var(--z-leading-body);
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  color: var(--z-text);
}

/* ── Map CTA: framed card (brand.css §8) with a filled ticket ───────────────────────────── */
.map-cta {
  width: 100%;
  max-width: var(--z-measure);
  margin: 0 auto var(--z-space-8);
  padding: var(--z-space-6) var(--z-space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-4) var(--z-space-8);
}
.map-cta-text {
  flex: 1 1 18rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.map-cta-text strong {
  display: block;
  margin-bottom: var(--z-space-1);
  font-size: var(--z-text-lg);
  font-weight: var(--z-weight-book);
  line-height: 1.3;
  letter-spacing: var(--z-tracking-button);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--z-text);
}
.map-cta-text span {
  display: block;
  font-size: var(--z-text-sm);
  line-height: 1.5;
  color: var(--z-text-muted);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 10.25rem;
  padding: 14px 28px;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .map-cta {
    flex-direction: column;
    text-align: center;
    padding: var(--z-space-6) var(--z-space-5);
  }
  .map-cta-text { flex: 0 1 auto; }
}

/* ── City chips: notched chips with the site's category-tab typography (brand.css §3) ─── */
.city-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--z-space-3);
  max-width: 60rem;
  margin: 0 auto var(--z-space-2);
}
.chip-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  white-space: nowrap;
}

/* ── Location ledger: dense hairline grid (gap:1px over a --z-rule-soft background) ─────── */
.location-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 0 var(--z-space-8);
  background-color: var(--z-rule-soft);
  background-clip: padding-box;          /* the tint stays out of the border: no doubled outer rule */
  border: var(--z-rule-width) solid var(--z-rule-soft);
}
@media (min-width: 640px) {
  .location-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .location-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.location-item {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-1);
  min-width: 0;
  padding: var(--z-space-4) var(--z-space-5) 18px;
  background-color: var(--z-surface-page);
  background-image: var(--z-surface-page-image);
  transition: background-color var(--z-dur-fast) var(--z-ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .location-item:hover { background-color: var(--z-surface-hover); }
  .location-name:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}
.location-name {
  font-size: var(--z-text-lg);
  line-height: 1.35;
  overflow-wrap: break-word;
  color: var(--z-text);
}
.location-meta {
  order: -1;                              /* eyebrow above the name; DOM order unchanged */
  font-size: var(--z-text-xs);
  line-height: 1.4;
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  color: var(--z-text-accent);
}
/* Trailing empty cells take the paper colour, not the rule tint: one filler cell spans the
   rest of the last row. Without :has() support they keep the tint (the old look). */
.location-list::after {
  background-color: var(--z-surface-page);
  background-image: var(--z-surface-page-image);
}
@media (640px <= width < 1024px) {          /* exactly the 2-column range, fractional widths included */
  .location-list:has(> .location-item:last-child:nth-child(2n+1))::after { content: ""; grid-column: span 1; }
}
@media (min-width: 1024px) {
  .location-list:has(> .location-item:last-child:nth-child(3n+1))::after { content: ""; grid-column: span 2; }
  .location-list:has(> .location-item:last-child:nth-child(3n+2))::after { content: ""; grid-column: span 1; }
}

/* ── Venue page ───────────────────────────────────────────────────────────────────────── */
/* Product chips: labels with a rule, like the map popup's carried-product chips. */
.product-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--z-space-2);
  max-width: 60rem;
  margin: 0 auto var(--z-space-2);
}
.product-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 12px 5px;
  font-size: var(--z-text-xs);
  line-height: 1.4;
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  color: var(--z-text);
  background-color: var(--z-accent-tint-40);
  border: var(--z-rule-width) solid var(--z-rule);
}

/* Specialties / note: framed cards (brand.css §8). */
.info-block {
  width: 100%;
  max-width: var(--z-measure);
  margin: 0 auto var(--z-space-2);
  padding: var(--z-space-6) var(--z-space-8);
  font-size: var(--z-text-base);
  line-height: var(--z-leading-body);
  text-align: center;
  overflow-wrap: anywhere;                /* notes can hold bare URLs */
}
.info-block p { margin: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--z-space-3) var(--z-space-4);
  margin-top: var(--z-space-12);
}
.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10.25rem;
  padding: 14px 24px;
  white-space: nowrap;
}
@media (max-width: 639px) {
  /* Stacked on phones: one column of equal-width tickets. */
  .actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
  }
}

/* ── Footer: charcoal inverse band, beige uppercase links, gold line Instagram icon ──────── */
/* brand.css flips the focus ring to beige inside .page-footer. */
.page-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--z-space-6);
  padding: var(--z-space-12) var(--z-gutter) var(--z-space-10);
  background-color: var(--z-surface-inverse);
  color: var(--z-text-inverse);
  font-size: var(--z-text-sm);
  line-height: 1.5;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--z-space-2) var(--z-space-8);
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-2);
  padding: var(--z-space-2) 0;
  font-size: var(--z-text-sm);
  line-height: 1;
  letter-spacing: var(--z-tracking-nav);
  text-transform: uppercase;
  color: var(--z-text-inverse);
  transition: opacity var(--z-dur-fast) var(--z-ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover { opacity: var(--z-hover-dim); }
}
.footer-ig {
  flex-shrink: 0;
  color: var(--z-gold-bright);
}
.footer-mark {
  display: block;
  width: 56px;
  height: auto;
}

/* ── Forced colours ───────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  /* Keep the ledger's hairlines (they are the container background showing through the gaps). */
  .location-list { background-color: CanvasText; }
  .location-item,
  .location-list::after { background-color: Canvas; }
}
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .footer-mark { display: none; }          /* decorative beige art on a light system surface */
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .nav-brand img {                          /* the charcoal logo keeps its paper plate on a dark theme */
    forced-color-adjust: none;
    background-color: var(--z-surface-page);
  }
}

/* ═════ ORNAMENTS (Stage 4) — delete this section to roll back ═════ */
/* The SEO header and footer ornaments. The rest of the decorative layer
   (texture alignment, h1 flourish, outer frames on .map-cta and .info-block)
   lives in brand.css's ORNAMENTS section; roll the two back together (see
   there). Notes: docs/redesign/notes/ornaments.md.                           */

/* Header, desktop (≥1024): the site's two braided bands flanking the logo
   (reference/site-header-1440.jpg). The nav's own ::before/::after become grid
   items in a band row above the links and the ticket; the logo spans both
   rows. The bands are 28px, the site's weight, and sit at the bottom of
   their row, level with the upper half of the logo, with the links under
   them (design review DR-19). scroll-padding-top (7rem) still covers the
   taller bar. Hidden at ≤1023px, where the header stays as it was. */
@media (min-width: 1024px) {
  .brand-nav {
    grid-template-areas:
      "band-l brand band-r"
      "links  brand cta";
    row-gap: 6px;
  }
  .brand-nav::before,
  .brand-nav::after {
    content: "";
    grid-area: band-l;
    align-self: end;
    height: 28px;
    background: url(/multimedia/brand/braided-band.png) center / contain no-repeat;
    pointer-events: none;
  }
  .brand-nav::after {
    grid-area: band-r;
  }
}

/* Nav links: the site's hover, nav-bracket.svg around the label at 50%
   opacity, sized as on the site (label + 26px wide, 36px tall). It replaces
   the interim underline above; pointer hover only. */
.nav-link {
  position: relative;
}
.nav-link::before {
  content: "";
  position: absolute;
  inset: 1px -13px;
  background: url(/multimedia/brand/nav-bracket.svg) center / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--z-dur-fast) var(--z-ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    text-decoration: none;
  }
  .nav-link:hover::before {
    opacity: .5;
  }
}

/* Footer: a gold flourish above the links, as on the site's charcoal menu
   (reference/site-menu-390.jpg). A flex item of the footer column. */
.page-footer::before {
  content: "";
  width: 74px;
  height: 20px;
  margin-bottom: -8px;
  background-color: var(--z-ornament-ink-inverse);
  -webkit-mask: url(/multimedia/brand/ornament-flourish.svg) center / contain no-repeat;
  mask: url(/multimedia/brand/ornament-flourish.svg) center / contain no-repeat;
  pointer-events: none;
}

/* Forced colours: decorative only, all of it goes. */
@media (forced-colors: active) {
  .brand-nav::before,
  .brand-nav::after,
  .nav-link::before,
  .page-footer::before {
    content: none;
  }
}
/* ═════ END ORNAMENTS ═════ */