/* Hallmark · macrostructure: Long Document opening + Photographic gallery · tone: utilitarian · anchor hue: logo red (27°) on navy ink
 * nav: N9 edge-aligned minimal · footer: Ft1 minimal line · enrichment: none (real photography)
 * pre-emit critique: P4 H4 E4 S5 R5 V4
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* N9 · wordmark hard-left, one link hard-right */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-sm) var(--gutter);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.bar .mark img { height: 64px; width: auto; }
.bar nav { display: flex; gap: var(--space-xl); }
.bar nav a {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
  padding: var(--space-xs) 0; border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bar nav a:hover, .bar nav a[aria-current="page"] { border-color: var(--color-accent); }
.bar nav a:active { color: var(--color-accent-ink); }
.bar nav svg, .bar nav .phone-only { display: none; }

/* Photo folds: the image edge is the divider */
.fold { position: relative; margin: 0; }
.fold img { width: 100%; height: min(88svh, 62vw); min-height: 420px; object-fit: cover; }
.fold.tall img { height: min(92svh, 75vw); }
/* Blagajna closes the page narrower than the grid: its edges sit halfway across the outer grid photos,
 * with the grid's own 4 px gap above */
.fold.framed { width: calc(100% - (100% - 8px) / 3); margin: 4px auto var(--space-2xl); }
.fold.framed img, .fold.framed.tall img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.fold figcaption, .fold .caption {
  position: absolute; left: var(--gutter); bottom: var(--space-xl);
  max-width: min(36rem, calc(100% - 2 * var(--gutter)));
  color: var(--color-on-photo);
  text-shadow: 0 1px 12px var(--color-scrim);
}
.fold::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, var(--color-scrim), transparent);
}
.fold .caption { z-index: 1; }
.fold h1 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  letter-spacing: -0.01em; line-height: 1.2;
}
.fold p { margin: 0; font-size: var(--text-sm); }
.fold .link { display: inline-block; margin-top: var(--space-sm); font-weight: 700; white-space: nowrap; }

.label { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.fold .label { color: var(--color-on-photo); opacity: 0.85; }

/* Text-led opening: what we wash, before any photograph */
.intro { padding: var(--space-3xl) var(--gutter) var(--space-2xl); }
.intro .inner {
  max-width: 72rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl);
}
/* H2 split diptych: the words left, one real photo right at the height of the words; the list runs full width below */
.intro-text { align-self: center; }
.intro-photo { position: relative; margin: 0; min-height: 26rem; }
.intro-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro .spec { grid-column: 1 / -1; }
.intro h1 {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); max-width: 22ch;
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere; min-width: 0;
}
#usluge { scroll-margin-top: var(--space-lg); }
.open-now { font-weight: 700; color: var(--color-ink); }
.open-now[data-state="open"]::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em;
  border-radius: 50%; background: var(--color-open); vertical-align: 0.1em;
}
.contact .open-now { display: block; margin-bottom: var(--space-xs); font-size: var(--text-md); }
.gallery-head {
  margin: 0; padding: var(--space-2xl) var(--gutter) var(--space-lg);
  max-width: calc(72rem + 2 * var(--gutter)); margin-inline: auto;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
}
.lede {
  margin: 0; max-width: 46ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); line-height: 1.35; letter-spacing: -0.01em;
  overflow-wrap: anywhere; min-width: 0;
}
.lede strong { color: var(--color-accent); font-weight: 800; }

/* Variant 1 · spec sheet: group name left, what we do right, one hairline per group (Apple Tech Specs) */
.spec { margin-top: var(--space-2xl); border-top: 2px solid var(--color-ink); }
.spec-group {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-xl);
  padding: var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
}
.spec-group h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-xl); letter-spacing: -0.015em; line-height: 1.2;
}
.spec-group .note { margin: var(--space-2xs) 0 0; color: var(--color-muted); }
.spec-group ul {
  list-style: none; margin: 0; padding: 0; font-size: var(--text-lg);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); column-gap: var(--space-xl);
}
.spec-group li { padding: 0.15rem 0; white-space: nowrap; }
/* CIP is the high-value service: the one dark row in the list, only what a tanker dispatcher scans for:
 * CIP, the certificate, the number. Full bleed by box-shadow + clip-path, so no 100vw */
.spec-group.cip {
  background: var(--color-ink); color: var(--color-on-photo); border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--color-ink); clip-path: inset(0 -100vmax);
}
.spec-group.cip h2 { color: var(--color-paper-3); }
.spec-group.cip .lead {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-display-s); line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
}
.spec-group.cip .cert { margin: var(--space-xs) 0 var(--space-lg); font-size: var(--text-lg); font-weight: 600; }
.spec-group.cip .cert a { white-space: nowrap; }
.spec-group.cip ul { display: flex; flex-wrap: wrap; column-gap: var(--space-xl); color: var(--color-paper-3); }
@media (max-width: 760px) {
  .spec-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-lg) 0; }
  .spec-group ul { grid-template-columns: minmax(0, 1fr); font-size: var(--text-md); }
  .spec-group li { white-space: normal; }
  .spec-group.cip ul { display: block; }
  .spec-group.cip .lead { font-size: 2rem; }
  .spec-group.cip .cert { font-size: var(--text-md); }
}
/* Opening hours: today's status on its own line, the week below, as on the Kontakt page */
.when { margin-top: var(--space-lg); color: var(--color-muted); }
.when .open-now { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-lg); }
/* Flex gaps instead of middots, so a wrapped line never starts with a stray dot */
.when .hours-line { margin: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.when .hours-line span { white-space: nowrap; }
.when .reach { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-lg); margin: var(--space-sm) 0 0; }
.when a { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.when .tel { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.01em; }
@media (max-width: 760px) {
  .when .hours-line { display: block; }
  .when .hours-line span { display: block; }
}

/* Gallery opening: two wide photos and two portraits in one tight mosaic, then the photo grid */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mosaic figure { margin: 0; position: relative; aspect-ratio: 3 / 4; }
.mosaic .wide { grid-column: span 2; aspect-ratio: auto; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.grid figure { margin: 0; position: relative; }
.grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Five photos in three columns: one landscape spans two, cropped to the row's height */
.grid .wide { grid-column: span 2; }
.grid .wide img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.grid figcaption, .mosaic figcaption {
  position: absolute; left: var(--space-md); bottom: var(--space-sm);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-on-photo); text-shadow: 0 1px 10px var(--color-scrim);
}

/* Kontakt page */
.contact { padding: var(--space-2xl) var(--gutter) var(--space-3xl); max-width: 72rem; margin-inline: auto; }
.contact h1 {
  margin: 0 0 var(--space-2xl);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-display);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
}
.contact dl { margin: 0; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); border-top: var(--rule-hair) solid var(--color-ink); }
.contact dt, .contact dd { padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); margin: 0; }
.contact dt { padding-top: calc(var(--space-lg) + 0.5rem); }
.contact dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
.contact dd a { text-decoration: none; border-bottom: 2px solid var(--color-accent); transition: color var(--dur-fast) var(--ease-out); }
.contact dd a:hover { color: var(--color-accent-ink); }
.contact dd small { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
.contact dd small a { border-bottom-width: 1px; }
.hours { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours td { padding: 0 var(--space-xl) var(--space-2xs) 0; vertical-align: top; }
.hours td:last-child { white-space: nowrap; padding-right: 0; }
.contact .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.contact .actions small { margin: 0; }
.contact dd a.btn {
  display: inline-block; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-on-photo);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.contact dd a.btn:hover { background: var(--color-ink-2); color: var(--color-on-photo); }
.contact dd a.btn:active { background: var(--color-accent-ink); }
.map { margin-top: var(--space-2xl); height: min(70vh, 640px); background: var(--color-paper-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Call and directions, on phones only: drivers arrive standing next to a truck */
.callbar { display: none; }

/* Ft1 · one quiet line */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) var(--gutter);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-muted);
}
.foot a { white-space: nowrap; }

@media (max-width: 760px) {
  .intro { padding-top: var(--space-xl); }
  .intro .inner { grid-template-columns: minmax(0, 1fr); }
  .intro-photo { min-height: 0; margin-top: var(--space-xl); }
  .intro-photo img { position: static; aspect-ratio: 4 / 3; }
  .intro h1 { margin-bottom: var(--space-md); }
  .lede { font-size: var(--text-lg); }
  .callbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    position: fixed; inset: auto 0 0 0; z-index: 10;
    background: var(--color-ink-2); padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px;
    background: var(--color-ink); color: var(--color-on-photo); text-decoration: none;
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); white-space: nowrap;
  }
  .callbar svg { flex: none; }
  .callbar a:first-child { background: var(--color-accent); }
  .callbar a:active { opacity: 0.85; }
  body:has(.callbar) .foot { padding-bottom: calc(44px + var(--space-lg) + env(safe-area-inset-bottom)); }
  .bar .mark img { height: 40px; }
  /* Phones: Početna, Galerija, Kontakt as icons, the names kept for screen readers */
  .bar nav { gap: var(--space-2xs); }
  .bar nav .desk-only { display: none; }
  .bar nav a, .bar nav .phone-only { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
  .bar nav svg { display: block; }
  .bar nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar nav a[aria-current="page"] { color: var(--color-accent); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid .wide { grid-column: auto; }
  .grid .wide img { position: static; height: auto; aspect-ratio: 4 / 3; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic .wide { aspect-ratio: 4 / 3; }
  .fold img, .fold.tall img { height: 78svh; min-height: 360px; }
  .fold.framed { width: calc(100% - 2 * var(--gutter)); margin: 4px auto var(--space-xl); }
  .fold.framed img { height: auto; min-height: 0; aspect-ratio: 3 / 5; }
  .contact dl { grid-template-columns: minmax(0, 1fr); }
  .contact dt { padding-bottom: 0; border-bottom: 0; }
  .contact dd { padding-top: var(--space-2xs); font-size: var(--text-lg); }
  .map { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}