/* Hallmark · macrostructure: Photographic · tone: warm-editorial · anchor hue: warm (red 28°)
 * genre: editorial · theme: Almanac · nav: N9 edge-aligned · footer: Ft5 statement
 * enrichment: none — the client's own photographs carry the page
 * pre-emit critique: P5 H4 E4 S5 R4 V4
 */

@import url("tokens.css");

/* ============================================================
   Base
   ============================================================ */

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

html,
body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
}

img,
video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
  transition: none;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow { max-width: var(--measure); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -4rem;
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-md); }

/* ============================================================
   Nav · N9 edge-aligned minimal
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-mid) var(--ease-out);
}

.nav[data-scrolled="true"] { border-bottom-color: var(--color-rule); }

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
}

.nav__mark img {
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  object-position: 50% 28%;
}

/* the CTA label shortens before anything is allowed to overflow */
.cta-short { display: none; }

@media (max-width: 26rem) {
  .nav { gap: var(--space-xs); padding-inline: var(--space-sm); }
  .nav__mark { font-size: var(--text-base); }
  .nav__mark img { width: 28px; height: 28px; }
  .nav__cta { padding-inline: var(--space-md); }
  .cta-full { display: none; }
  .cta-short { display: inline; }
}

.nav__links {
  display: none;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: lowercase;
}

.nav__links a {
  text-decoration: none;
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-block: var(--space-sm);
  border-bottom: var(--rule-bold) solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.nav__links a:active { color: var(--color-accent-hover); }

@media (min-width: 56rem) {
  .nav__links { display: flex; }
}

/* ============================================================
   Buttons · all eight states
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  border: var(--rule-bold) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn.is-hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn:active,
.btn.is-active { transform: translateY(1px); }
.btn[disabled],
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { opacity: 0.7; cursor: progress; }
.btn[data-state="error"] { background: var(--color-ink); border-color: var(--color-ink); }
.btn[data-state="success"] { background: var(--color-accent-2); border-color: var(--color-accent-2); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--ghost:hover,
.btn--ghost.is-hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* Typographic link · C3 */
.tlink {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  color: var(--color-accent);
  border-bottom: var(--rule-hair) solid currentColor;
  padding-block-end: 2px;
  min-height: 44px;
  line-height: 44px;
  transition: color var(--dur-fast) var(--ease-out);
}
.tlink:hover { color: var(--color-ink); }
.tlink::after { content: " \2192"; }

/* ============================================================
   Photo folds — the macrostructure
   ============================================================ */

.fold {
  position: relative;
  width: 100%;
}

.fold__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-paper-3);
}

.fold__media img { width: 100%; object-fit: cover; }

.fold--hero .fold__media {
  height: min(86svh, 46rem);
}
.fold--hero .fold__media img { height: 100%; object-position: 50% 32%; }

.fold--band .fold__media { height: min(74svh, 40rem); }
.fold--band .fold__media img { height: 100%; object-position: 50% 50%; }

/* kadar po slici: portretne fotografije u sirokoj traci traze svoj fokus */
.fold__media img.focus-right  { object-position: 50% 45%; }
.fold__media img.focus-low    { object-position: 50% 55%; }
.fold__media img.focus-center { object-position: 50% 50%; }

/* caption sits at a corner of the image, per the macrostructure */
.fold__caption {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-md);
  margin: 0;
  max-width: min(32ch, 76vw);
  color: var(--color-on-deep);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-shadow: 0 1px 14px var(--color-scrim);
}

.fold__caption b { font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--text-xs); display: block; margin-bottom: 2px; }

/* hero overlay */
.hero__plate {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4xl) var(--gutter) var(--space-xl);
  background: linear-gradient(to top, var(--color-scrim) 28%, color-mix(in oklch, var(--color-scrim) 55%, transparent) 62%, transparent);
}

.hero__title {
  max-width: 18ch;
  margin-inline: 0;   /* poravnat levo, u ravni sa tekstom i dugmadima ispod */
  color: var(--color-on-deep);
  font-size: var(--text-display-s);
  font-weight: 600;
}

.hero__plate .shell { display: flex; flex-direction: column; gap: var(--space-md); }

.hero__sub {
  color: var(--color-on-deep-mute);
  font-size: var(--text-base);
  max-width: var(--measure-tight);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__cta .btn--ghost { color: var(--color-on-deep); border-color: var(--color-on-deep); }
.hero__cta .btn--ghost:hover { background: var(--color-on-deep); color: var(--color-deep); }

/* ============================================================
   Text bands
   ============================================================ */

.band {
  padding-block: var(--space-3xl);
}

.band--tight { padding-block: var(--space-2xl); }

.band--deep {
  background: var(--color-deep);
  color: var(--color-on-deep);
}
.band--deep h2, .band--deep h3 { color: var(--color-on-deep); }
.band--deep .muted { color: var(--color-on-deep-mute); }

.band--paper2 { background: var(--color-paper-2); }

.lede {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 30ch;
}

.lede--xl {
  font-size: var(--text-4xl);
  max-width: 16ch;
  font-weight: 600;
}

.section-note {
  margin-top: var(--space-md);
  max-width: 38ch;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.prose p { font-size: var(--text-lg); line-height: 1.55; }

.dates__head { margin-bottom: var(--space-lg); }
.dates__note { margin-top: var(--space-md); font-size: var(--text-sm); }

.muted { color: var(--color-muted); }

.prose p + p { margin-top: var(--space-md); }

.clients__head {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}

/* ============================================================
   Two tracks — cutout Santas on colour fields
   ============================================================ */

.tracks {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
}

@media (min-width: 72rem) {
  /* cetiri kartice u redu: uzi okvir i manji naslov, da "Deda Mrazovo pojačanje" stane u dva reda */
  .tracks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tracks .track { padding: var(--space-lg); }
  .tracks .track h3 { font-size: var(--text-xl); }
  .tracks .track__body { max-width: none; }
  .track .track__cut--pojacanje { top: 3.25rem; }
}

.track {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 31rem;
  padding: var(--space-xl);
  overflow: hidden;
  background: var(--track-bg);
  text-decoration: none;
  color: var(--track-ink);
  transition: transform var(--dur-mid) var(--ease-out);
}

.track:nth-child(1) { --track-bg: var(--color-deep);     --track-ink: var(--color-on-deep); }
.track:nth-child(2) { --track-bg: var(--color-accent);   --track-ink: var(--color-accent-ink); }
.track:nth-child(3) { --track-bg: var(--color-paper-3);  --track-ink: var(--color-ink); }
.track:nth-child(4) { --track-bg: var(--color-deep);     --track-ink: var(--color-on-deep); }

/* nacrtani ukrasi: kugle na koncu i pahulje, u boji teksta kartice */
.track__orn {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  color: var(--track-ink);
  opacity: 0.34;
  pointer-events: none;
}
.track__orn line { stroke: currentColor; stroke-width: 1.6; }
.track__orn rect { fill: currentColor; }
.track__orn circle { fill: none; stroke: currentColor; stroke-width: 2.4; }
.track__orn .flake {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* lampice u gornjim coskovima, pale se naizmenicno na 3 sekunde */
.track__lampice {
  position: absolute;
  z-index: 3;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.track__lampice .zica {
  fill: none;
  stroke: color-mix(in oklch, var(--track-ink) 45%, transparent);
  stroke-width: 1.4;
}
.track__lampice .grlo { fill: color-mix(in oklch, var(--track-ink) 55%, transparent); }
.lampa { opacity: 0.32; animation: lampa 6s var(--ease-in-out) infinite; }
.lampa--b { animation-delay: -3s; }
.lampa .sjaj { filter: blur(4px); opacity: 0.75; }
.lampa--plava  { fill: var(--lamp-plava); }
.lampa--zelena { fill: var(--lamp-zelena); }
.lampa--zuta   { fill: var(--lamp-zuta); }
.lampa--crvena { fill: var(--lamp-crvena); }

@keyframes lampa {
  0%, 42%   { opacity: 1; }
  50%, 92%  { opacity: 0.28; }
  100%      { opacity: 1; }
}

/* fotografija pokriva gornji deo kartice od ivice do ivice */
.track__cut {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 100%;
  height: 82%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  will-change: transform;

  /* donja ivica fotografije se rastapa u karticu.
     Crna i providna ovde nisu boje nego sablon prozirnosti. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 56%, transparent 94%);
          mask-image: linear-gradient(to bottom, black 0%, black 56%, transparent 94%);
}

/* svaka fotografija ima svoje najbolje parce kadra */
.track__cut--firme    { object-position: 50% 6%; }
.track__cut--porodice { object-position: 50% 52%; }
.track__cut--ljubimci {
  object-position: 50% 24%;
  /* bliski kadar: jedna eliptična maska gasi i bočne i donju ivicu,
     da se ne vidi rez na ruci. Jedan sloj radi na svim telefonima. */
  -webkit-mask-image: radial-gradient(ellipse 64% 80% at 50% 30%, black 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 64% 80% at 50% 30%, black 60%, transparent 100%);
}

/* vilenjak i Deda Mrazica: siroka slika staje cela u sirinu kartice.
   Rez ispod tunike i prelaz na dnu su vec u samoj slici, pa maska nije potrebna. */
.track .track__cut--pojacanje {
  top: 1.25rem;
  height: auto;
  aspect-ratio: 1000 / 899;
  object-fit: contain;
  -webkit-mask-image: none;
          mask-image: none;
}

/* citljivost naslova ispod fotografije */
.track::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, var(--track-bg) 52%, transparent);
  pointer-events: none;
}

.track__body { position: relative; z-index: 4; max-width: 20ch; }
.track h3 { font-size: var(--text-2xl); margin-bottom: var(--space-xs); }
.track p { font-size: var(--text-sm); opacity: 0.86; }

.track__go {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  border-bottom: var(--rule-hair) solid currentColor;
  display: inline-block;
  padding-bottom: 2px;
}

.track:hover { transform: translateY(-3px); }
.track:active { transform: translateY(0); }

@media (max-width: 56rem) {
  .track { min-height: 30rem; }
  .track__cut { height: 84%; }
}

@media (prefers-reduced-motion: reduce) {
  .lampa { animation: none; opacity: 1; }
}

/* ============================================================
   Service lists
   ============================================================ */

.split {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); }
  .split--lede { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.slist { list-style: none; margin: 0; padding: 0; }

.slist li {
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: grid;
  gap: var(--space-2xs);
}
.band--deep .slist li { border-top-color: color-mix(in oklch, var(--color-on-deep) 22%, transparent); }

.slist li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.band--deep .slist li:last-child { border-bottom-color: color-mix(in oklch, var(--color-on-deep) 22%, transparent); }

.slist b { font-size: var(--text-xl); font-weight: 600; font-family: var(--font-display); }
.slist span { font-size: var(--text-base); color: var(--color-muted); }
.band--deep .slist span { color: var(--color-on-deep-mute); }

/* ============================================================
   Video čestitka
   ============================================================ */

.cestitka__cta { margin-top: var(--space-lg); }

.cestitka__desno {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 56rem) {
  /* video se razvuce do visine liste pored njega */
  .cestitka__desno {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: stretch;
  }
  .cestitka__desno .cestitka__video {
    max-width: none;
    aspect-ratio: auto;
    height: 100%;
    min-height: 18rem;
  }
}

.cestitka__video {
  margin: 0;
  max-width: 20rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-gold) 45%, transparent);
  background: var(--color-deep-2);
}

.cestitka__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Gallery
   ============================================================ */

.gal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.filters button {
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  color: var(--color-ink-2);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.filters button:hover { border-color: var(--color-ink); }
.filters button:active { transform: translateY(1px); }
.filters button[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  grid-auto-flow: dense;
  gap: var(--space-xs);
}

.cell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-paper-3);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.cell[data-ratio="landscape"] { aspect-ratio: 4 / 3; }

@media (min-width: 56rem) {
  .cell[data-ratio="landscape"] { grid-column: span 2; }
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cell:hover img { transform: scale(1.03); }
.cell:active img { transform: scale(1.01); }

.cell__tag {
  position: absolute;
  left: var(--space-xs);
  top: var(--space-xs);
  padding: 2px var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: var(--color-scrim);
  color: var(--color-on-deep);
}

.cell__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cell__play span {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-scrim);
  color: var(--color-on-deep);
  font-size: var(--text-lg);
  padding-left: 4px;
}

.gal__more { margin-top: var(--space-lg); display: flex; justify-content: center; }

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--gutter);
  border: 0;
  background: var(--color-scrim);
  color: var(--color-on-deep);
}
.lb[open] { display: grid; }
/* podloga mora da prekrije i navigaciju iznad koje stoji pregled */
.lb::backdrop { background: var(--color-scrim); }

.lb__frame {
  max-width: min(100%, 64rem);
  max-height: 86svh;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lb__frame img,
.lb__frame video {
  max-height: 76svh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.lb__cap {
  color: var(--color-on-deep);
  font-size: var(--text-sm);
  text-align: center;
}

.lb__close,
.lb__nav {
  position: absolute;
  z-index: 2;
  min-width: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  background: var(--color-scrim);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-on-deep) 45%, transparent);
  border-radius: var(--radius-pill);
  color: var(--color-on-deep);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lb__close:hover,
.lb__nav:hover { background: color-mix(in oklch, var(--color-on-deep) 18%, transparent); }

.lb__close { top: var(--gutter); right: var(--gutter); }
.lb__nav[data-dir="prev"] { left: var(--gutter); top: 50%; bottom: auto; height: 46px; transform: translateY(-50%); }
.lb__nav[data-dir="next"] { right: var(--gutter); top: 50%; bottom: auto; height: 46px; transform: translateY(-50%); }

/* Telefon: ugradjeni plejer drzi svoje dugmice u uglovima videa,
   pa nase kontrole selimo iznad i ispod, da se ne preklapaju. */
@media (max-width: 48rem) {
  .lb {
    padding-top: 68px;
    padding-bottom: 84px;
  }

  .lb__close { top: 12px; right: 12px; }

  /* top i bottom se ne smeju postaviti zajedno, dugme se razvuce */
  .lb__nav[data-dir="prev"] {
    left: 50%; right: auto;
    top: auto; bottom: 18px;
    height: 46px;
    transform: translateX(calc(-50% - 44px));
  }
  .lb__nav[data-dir="next"] {
    left: 50%; right: auto;
    top: auto; bottom: 18px;
    height: 46px;
    transform: translateX(calc(-50% + 44px));
  }

  .lb__frame { max-height: calc(100svh - 160px); }
  .lb__frame img,
  .lb__frame video { max-height: calc(100svh - 196px); }
  .lb__cap { font-size: var(--text-sm); }
}

/* ============================================================
   Clients · testimonials · dates
   ============================================================ */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg) var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clients li { display: flex; align-items: center; }

.clients img {
  height: 54px;
  width: auto;
}

.clients img.clients__tile {
  height: 54px;
  border-radius: var(--radius-sm);
}

/* a 4.5:1 wordmark at full height would out-shout the rest of the row */
.clients img.clients__wide { height: 44px; }

@media (max-width: 40rem) {
  .clients { gap: var(--space-md) var(--space-xl); }
  .clients img { height: 40px; }
  .clients img.clients__tile { height: 40px; }
  .clients img.clients__wide { height: 32px; }
}

.quotes {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.quote {
  padding: var(--space-lg);
  border: var(--rule-hair) dashed var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 11rem;
}

.quote p { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); }
.quote cite { font-style: normal; font-size: var(--text-sm); color: var(--color-muted); margin-top: auto; }

/* ---- adventni kalendar: polje po danu ---- */

.advent { position: relative; overflow: hidden; padding-bottom: calc(var(--space-3xl) + 5rem); }
@media (max-width: 48rem) { .advent { padding-bottom: calc(var(--space-3xl) + 7rem); } }
/* sadrzaj uvek iznad ukrasa */
.advent .shell { position: relative; z-index: 1; }

.dates {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 58rem;
  display: grid;
  gap: clamp(6px, 0.9vw, 12px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 34rem) { .dates { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .dates { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.adv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  padding: var(--space-xs) 4px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-on-deep) 17%, transparent);
  background: color-mix(in oklch, var(--color-on-deep) 6%, transparent);
  transition: transform var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}

/* poklopac kutije, kao na poklonu */
.adv::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--color-gold);
  transition: height var(--dur-mid) var(--ease-out);
}

/* vertikalna traka, vidi se tek pri prelasku misem */
.adv::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  background: color-mix(in oklch, var(--color-gold) 55%, transparent);
  transition: transform var(--dur-mid) var(--ease-out);
}

/* dugme popunjava celo polje, da se dan otvara klikom bilo gde */
.adv__dugme {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: var(--space-xs) 4px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.adv__dugme:focus-visible {
  outline: var(--rule-bold) solid var(--color-gold);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}

.adv__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1;
  color: var(--color-on-deep);
}

.adv__info {
  position: relative;
  z-index: 1;
  font-size: clamp(0.62rem, 1.4vw, 0.8rem);
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-deep-mute);
  overflow-wrap: anywhere;
}

/* slobodan dan */
.adv[data-stanje="slobodno"]:hover {
  transform: translateY(-3px);
  background: color-mix(in oklch, var(--color-on-deep) 11%, transparent);
  border-color: color-mix(in oklch, var(--color-gold) 55%, transparent);
}
.adv[data-stanje="slobodno"]:hover::before { height: 9px; }
.adv[data-stanje="slobodno"]:hover::after  { transform: translateX(-50%) scaleY(1); }

/* popunjen dan */
.adv[data-stanje="popunjeno"] { opacity: 0.44; }
.adv[data-stanje="popunjeno"]::before { background: color-mix(in oklch, var(--color-on-deep) 40%, transparent); }
.adv[data-stanje="popunjeno"] .adv__info { color: var(--color-on-deep); }

/* dan koji je prosao */
.adv[data-stanje="proslo"] { opacity: 0.22; }
.adv[data-stanje="proslo"]::before { background: color-mix(in oklch, var(--color-on-deep) 30%, transparent); }

.dates__head { margin-bottom: var(--space-sm); }
.dates__legend { max-width: 46rem; margin-bottom: var(--space-lg); }
.dates__uputstvo { margin-top: var(--space-md); font-size: var(--text-sm); }

/* ---- panel sa satnicama za izabrani dan ---- */

.adv[data-otvoren="true"] {
  border-color: var(--color-gold);
  background: color-mix(in oklch, var(--color-on-deep) 14%, transparent);
}
.adv[data-otvoren="true"]::before { height: 10px; }

.termini-panel {
  position: relative;
  z-index: 1;
  margin-top: var(--space-lg);
  max-width: 58rem;
  padding: var(--space-lg);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-gold) 48%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-on-deep) 8%, transparent);
}
.termini-panel[hidden] { display: none; }

.termini-panel__vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.termini-panel__naslov {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-on-deep);
}

.termini-panel__zatvori {
  min-width: 40px;
  min-height: 40px;
  font-size: var(--text-lg);
  color: var(--color-on-deep);
  background: transparent;
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-on-deep) 35%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.termini-panel__zatvori:hover { background: color-mix(in oklch, var(--color-on-deep) 14%, transparent); }

.termini-panel__uvod {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-on-deep-mute);
}

.termini-panel__satnice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.satnica {
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-deep);
  background: transparent;
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-on-deep) 34%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.satnica:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-deep);
}
.satnica:active { transform: translateY(1px); }
.satnica:focus-visible { outline: var(--rule-bold) solid var(--color-gold); outline-offset: 2px; }
.dates__note { margin-top: var(--space-lg); font-size: var(--text-sm); }

.dates__novembar {
  max-width: 46rem;
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-on-deep);
  border-left: 3px solid var(--color-gold);
  background: color-mix(in oklch, var(--color-on-deep) 6%, transparent);
}
.dates__novembar a {
  color: var(--color-on-deep);
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;
}
.dates__novembar a:hover { color: var(--color-gold); }

/* ---- poklončići koji lebde oko kalendara ---- */

.poklon {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  animation: lebdi 6s var(--ease-in-out) infinite;
}

.poklon--1 { top: 6%;    right: 3%;  width: clamp(118px, 14vw, 250px); animation-delay: 0s;    rotate: -7deg; opacity: 0.95; }
.poklon--2 { bottom: -3%; right: 4%; width: clamp(170px, 21vw, 370px); animation-delay: -1.9s; rotate: 4deg;  opacity: 0.92; }
.poklon--3 { bottom: -4%; left: -2%; width: clamp(110px, 13vw, 235px); animation-delay: -3.4s; rotate: 6deg;  opacity: 0.85; }

@keyframes lebdi {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -13px; }
}

@media (max-width: 48rem) {
  .poklon--1 { top: 2%; right: 1%; width: 27vw; }
  .poklon--2 { bottom: -2%; right: 1%; width: 36vw; }
  .poklon--3 { bottom: -3%; left: -5%; width: 27vw; }
}

@media (prefers-reduced-motion: reduce) {
  .poklon { animation: none; }
  .adv[data-stanje="slobodno"]:hover { transform: none; }
}

/* duh-dugme na tamnoj traci mora da bude svetlo */
.band--deep .btn--ghost { color: var(--color-on-deep); border-color: var(--color-on-deep); }
.band--deep .btn--ghost:hover { background: var(--color-on-deep); color: var(--color-deep); }

/* ============================================================
   Form
   ============================================================ */

.form {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .wide { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--space-2xs); }

.field label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--color-ink-2); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--color-accent); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--color-accent); }

.field .err { font-size: var(--text-sm); color: var(--color-accent); min-height: 1.2em; }

.form__note { font-size: var(--text-sm); color: var(--color-muted); }

.form__status { font-size: var(--text-sm); min-height: 1.4em; }
.form__status[data-kind="error"] { color: var(--color-accent); }
.form__status[data-kind="success"] { color: var(--color-accent-2); }

/* ============================================================
   Footer · Ft5 statement
   ============================================================ */

.foot {
  background: var(--color-deep);
  color: var(--color-on-deep);
  padding-block: var(--space-3xl) var(--space-xl);
}

.foot__say {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin-bottom: var(--space-xl);
}

.foot__linkovi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: var(--text-sm);
}
.foot__linkovi a {
  color: var(--color-on-deep-mute);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.foot__linkovi a:hover { color: var(--color-on-deep); text-decoration: underline; text-underline-offset: 3px; }

.foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-on-deep-mute);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-on-deep) 22%, transparent);
}

.foot__meta a { color: var(--color-on-deep); text-decoration: none; border-bottom: var(--rule-hair) solid currentColor; min-height: 44px; display: inline-flex; align-items: center; }
.foot__meta a:hover { color: var(--color-accent-ink); border-bottom-color: var(--color-accent); }

/* potpis autora stoji tise od ostalih podataka */
.foot__autor {
  margin-left: auto;
  color: var(--color-on-deep-mute);
  border-bottom-color: color-mix(in oklch, var(--color-on-deep) 35%, transparent);
}
.foot__autor:hover { color: var(--color-on-deep); }

@media (max-width: 48rem) {
  .foot__autor { margin-left: 0; }
}

/* ============================================================
   Motion: two primitives only
   ============================================================ */

/* Two primitives only. The photographs are not animated in: the Photographic
   macrostructure lets them land as-is, and nothing on the page depends on JS
   to become visible. */

/* 1 · drift, cut-out Santas only — applied by app.js via transform */
/* 2 · lightbox open, handled by [open] */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 140ms !important;
  }
  .cell:hover img { transform: none; }
  .track:hover { transform: none; }
  .track__cut { transform: translateX(-50%) !important; }
}

@media (max-width: 40rem) {
  .track__cut { transform: translateX(-50%) !important; }
}