/* ==========================================================================
   Offline delavnice — style.css
   Smer »Kolaž«: papir, roza/zelena/sončna iz izdelkov, polaroidi, nalepke.
   Ena datoteka za vse strani.
   ========================================================================== */

:root {
  /* barve */
  --paper: #FAF7F0;
  --paper-2: #F2EDE1;
  --ink: #22211C;
  --muted: #6E6A5C;
  --line: #E3DDCC;
  --pink: #E4A6B0;
  --pink-soft: #F7E7E6;
  --pink-ink: #40252B;
  --green: #567148;
  --green-deep: #3F5536;
  --green-soft: #E9EDDE;
  --sun: #F3D375;
  --sun-soft: #FAEFD2;
  --white: #FFFFFF;

  /* tipografija */
  --font-display: "Young Serif", "Georgia", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  /* ritem */
  --container: 1140px;
  --gutter: clamp(18px, 4vw, 32px);
  --section: clamp(64px, 10vw, 120px);
  --radius: 14px;

  --shadow-hard: 4px 4px 0 rgba(34, 33, 28, 0.14);
  --shadow-press: 3px 3px 0 var(--ink);
}

/* ---------- osnova ---------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sun); color: var(--ink); }

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

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 8px; }

/* poudarek z markerjem */
mark, .mark {
  background: linear-gradient(104deg, transparent 1.5%, var(--sun) 5%, var(--sun) 95%, transparent 98.5%);
  color: inherit;
  padding: 0.05em 0.12em;
  margin-inline: -0.06em;
  border-radius: 2px;
}

/* ročno pripisana opomba */
.hand {
  font-family: var(--font-hand);
  font-size: 1.45em;
  line-height: 1.15;
  color: var(--muted);
  font-weight: 500;
}

/* nalepka */
.sticker {
  display: inline-block;
  background: var(--pink);
  color: var(--pink-ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(34, 33, 28, 0.14);
}
.sticker.sun { background: var(--sun); color: var(--ink); }
.sticker.green { background: var(--green); color: var(--paper); }

.section-title { font-size: clamp(30px, 4.6vw, 44px); }
.section-head { display: grid; gap: 14px; max-width: 40ch; margin-bottom: clamp(30px, 5vw, 48px); }
.section-head p { color: var(--muted); }

/* ---------- gumbi ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn-primary {
  background: var(--green);
  border-color: var(--green-deep);
  color: #FDFCF6;
  box-shadow: var(--shadow-press);
}
.btn-primary:hover { background: var(--green-deep); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
}
.btn-secondary:hover { background: var(--sun-soft); }
.btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn-secondary { box-shadow: var(--shadow-press); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
}
.link-more:hover { border-bottom-color: var(--green); }
.link-more::after { content: "→"; transition: transform 0.15s ease; }
.link-more:hover::after { transform: translateX(3px); }

/* ---------- glava ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--ink);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 46px; height: 46px; border-radius: 999px; }
.brand span {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.01em;
}
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px); }
.site-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  padding-block: 6px;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--sun); }
.site-nav a[aria-current] { border-bottom-color: var(--pink); font-weight: 600; }
.nav-cta {
  border: 2px solid var(--ink) !important; /* sicer spodnji rob povozi .site-nav a */
  border-radius: 10px;
  padding: 9px 18px !important;
  background: var(--sun);
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--pink); }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}
.nav-toggle span { width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    padding: 10px var(--gutter) 18px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 12px; text-align: center; border-radius: 12px; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- fotografije: polaroidi, izrezki, trak ---------- */

.polaroid {
  background: var(--white);
  padding: 10px 10px 40px;
  box-shadow: var(--shadow-hard);
  transform: rotate(var(--tilt, -3deg));
  position: relative;
}
.polaroid img { width: 100%; object-fit: cover; }
/* živi polaroid — kratek nemi posnetek v zanki namesto fotografije */
.polaroid video { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: var(--paper-2); cursor: pointer; }
.polaroid figcaption,
.polaroid .polaroid-napis {
  position: absolute;
  left: 12px; right: 12px; bottom: 7px;
  font-family: var(--font-hand);
  font-size: 21px;
  color: #55503F;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tape {
  position: absolute;
  width: 92px; height: 26px;
  background: color-mix(in srgb, var(--sun) 68%, #fff);
  opacity: 0.85;
  top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}
.tape.corner { left: -26px; top: 10px; transform: rotate(-45deg); }
.tape.corner-r { left: auto; right: -26px; top: 10px; transform: rotate(45deg); }

.cutout { filter: drop-shadow(5px 5px 0 rgba(34, 33, 28, 0.16)); }

/* ---------- hero ---------- */

.hero {
  overflow: hidden;
  background: var(--sun-soft);
  border-bottom: 1.5px solid var(--ink);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  padding-block: clamp(44px, 7vw, 96px);
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 36px 56px; }
}
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-title {
  font-size: clamp(34px, 6.6vw, 68px);
  line-height: 1.06;
}
.hero-lede {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--muted);
  max-width: 46ch;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note { font-size: 15.5px; color: var(--muted); }
.hero-note a { font-weight: 600; color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.hero-collage {
  position: relative;
  min-height: 400px;
}
.hero-collage .polaroid { position: absolute; }
.hero-collage .p1 { width: min(72%, 340px); left: 0; top: 6%; --tilt: -4deg; z-index: 1; }
.hero-collage .p2 { width: min(52%, 240px); right: 0; top: 30%; --tilt: 5deg; z-index: 2; }
@media (max-width: 860px) {
  .hero-collage { min-height: 0; height: auto; display: flex; gap: 16px; align-items: flex-start; }
  .hero-collage .polaroid { position: static; }
  .hero-collage .p1 { width: 56%; }
  .hero-collage .p2 { width: 40%; margin-top: 34px; }
}

/* ---------- obljube (poskrbimo za) ---------- */

.band-pink { background: var(--pink-soft); border-block: 1.5px solid var(--ink); }
.band-green { background: var(--green-soft); border-block: 1.5px solid var(--ink); }
.band-sun { background: var(--sun-soft); border-block: 1.5px solid var(--ink); }
/* sosednja pasova delita eno samo črto */
[class*="band-"] + [class*="band-"] { border-top: 0; }

.promises { padding-block: clamp(52px, 8vw, 92px); }
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4.5vw, 52px);
}
@media (max-width: 820px) { .promise-grid { grid-template-columns: 1fr; gap: 26px; } }
.promise { display: grid; gap: 8px; align-content: start; }
.promise h3 { font-size: 21px; }
.promise p { color: var(--muted); font-size: 16px; }

/* ---------- teme delavnic ---------- */

.themes { padding-block: clamp(56px, 8.5vw, 100px); }
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 940px) { .theme-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.theme-card {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow-hard);
}
.theme-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 6px 6px 0 rgba(34, 33, 28, 0.14); }

.theme-media {
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.theme-media img.photo { width: 100%; height: 100%; object-fit: cover; }
.theme-media img.izrezek { max-width: 78%; max-height: 84%; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(34, 33, 28, 0.14)); }
.theme-card .novo {
  position: absolute;
  top: 12px; right: 12px;
  width: 66px;
  transform: rotate(8deg);
  filter: drop-shadow(3px 3px 0 rgba(34, 33, 28, 0.2));
}
.theme-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.theme-body h3 { font-size: 23px; }
.theme-body p { color: var(--muted); font-size: 15.5px; }
.theme-body .link-more { margin-top: auto; align-self: flex-start; }

/* ---------- termini (vrstice »program«) ---------- */
/* Ena oblika za vse strani: domačo, /termini/ in tri podstrani tem.
   Datum je glavni junak, barva datumskega bloka pove temo delavnice.
   Fotografije v terminih NI — zanjo skrbijo hero, teme in galerije. */

.termini { padding-block: clamp(56px, 8.5vw, 100px); }
.termini-list { display: grid; gap: 14px; }

.termin-vrstica {
  --tema: var(--sun-soft);
  --tema-ink: var(--ink);
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: stretch;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}
.termin-vrstica[data-tema-barva="vlivanje"] { --tema: var(--sun); --tema-ink: var(--ink); }
.termin-vrstica[data-tema-barva="risanje"] { --tema: var(--pink); --tema-ink: var(--pink-ink); }
.termin-vrstica[data-tema-barva="punch"] { --tema: var(--green); --tema-ink: #FDFCF6; }

.termin-datum {
  background: var(--tema);
  color: var(--tema-ink);
  border-right: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  text-align: center;
}
.termin-datum .d { font-family: var(--font-display); font-size: 56px; line-height: 0.92; }
.termin-datum .m {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.termin-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.termin-body h3 { font-size: 22px; }
/* podčrtaj mora zdržati prelom v dve vrstici — zato text-decoration, ne border */
.termin-body h3 a {
  text-decoration: underline;
  text-decoration-color: var(--tema);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.termin-body h3 a:hover { text-decoration-color: var(--ink); }
.termin-body p { color: var(--muted); font-size: 15px; }
.termin-akcija {
  padding: 14px 20px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  white-space: nowrap;
}
.termin-akcija .btn { padding: 12px 20px; font-size: 15px; }
.termin-spots { font-size: 14.5px; font-weight: 700; color: var(--green-deep); }
.termin-spots.full { color: var(--muted); font-weight: 600; }

/* Neobvezen opis termina (kaj bomo ustvarjali) je zaprt pod gumbom
   »Več o delavnici« (v jeziku .link-more: krepko, podčrtano v barvi teme,
   puščica navzdol). Odprt je besedilo brez okvirja: na računalniku v srednjem
   stolpcu (datumski blok sega čez obe vrstici, gumb za prijavo ostane ob
   naslovu), na telefonu čez vso širino — pod datumom, nad gumbom za prijavo. */
.termin-opis-gumb {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--tema);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.termin-opis-gumb:hover { border-bottom-color: var(--ink); }
.termin-opis-gumb::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.termin-opis-gumb[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

/* Opis ima lahko odstavke, prelome, alineje in krepko (main.js, opisHtml).
   Ponastavitev na vrhu vzame vse robove in zamike, zato so tu zapisani izrecno.
   Dolga povezava brez presledka se prelomi, namesto da bi razširila vrstico. */
.termin-opis { font-size: 15px; padding: 0 20px 16px; max-width: 72ch; min-width: 0; overflow-wrap: anywhere; }
.termin-opis > * + * { margin-top: 0.6em; }
.termin-opis ul { padding-left: 1.35em; }
.termin-opis li + li { margin-top: 0.2em; }
.termin-opis li::marker { color: var(--tema); }
.termin-opis strong { font-weight: 700; }
/* Odprt dolg opis naredi vrstico visoko: datum ostane zgoraj, gumb za prijavo
   ostane v prvi vrsti ob naslovu (ne zdrsne na sredino visoke vrstice). */
.termin-vrstica.z-opisom .termin-datum { grid-row: 1 / span 2; }
.termin-vrstica.opis-odprt .termin-datum { justify-content: flex-start; }
.termin-vrstica.z-opisom .termin-body { grid-column: 2; grid-row: 1; }
.termin-vrstica.opis-odprt .termin-body { padding-bottom: 8px; }
.termin-vrstica.z-opisom .termin-opis { grid-column: 2; grid-row: 2; }
.termin-vrstica.z-opisom .termin-akcija { grid-column: 3; grid-row: 1; }

@media (max-width: 760px) {
  .termin-vrstica { grid-template-columns: 100px 1fr; }
  .termin-datum { border-bottom: 1.5px solid var(--ink); }
  .termin-datum .d { font-size: 44px; }
  .termin-datum .m { font-size: 11.5px; letter-spacing: 0.05em; white-space: nowrap; }
  .termin-body { padding: 14px 16px 10px; }
  .termin-body h3 { font-size: 20px; }
  .termin-vrstica.z-opisom .termin-datum { grid-row: 1; }
  .termin-vrstica.opis-odprt .termin-datum { justify-content: center; }
  .termin-vrstica.opis-odprt .termin-body { padding-bottom: 10px; }
  .termin-vrstica.z-opisom .termin-opis { grid-column: 1 / -1; grid-row: 2; max-width: none; padding: 12px 16px 14px; }
  .termin-vrstica.z-opisom .termin-akcija { grid-column: 1 / -1; grid-row: 3; }
  .termin-akcija {
    grid-column: 1 / -1;
    border-top: 1.5px solid var(--line);
    justify-content: space-between;
    padding: 12px 16px;
  }
}

.termini-empty,
.izdelki-empty {
  grid-column: 1 / -1;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 50%, transparent);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
}
.termini-foot { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Jana ---------- */

.jana { padding-block: var(--section); }
.jana-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(30px, 6vw, 70px);
  align-items: center;
}
@media (max-width: 820px) { .jana-inner { grid-template-columns: 1fr; } }
.jana-media { position: relative; max-width: 380px; }
.jana-media .hand-note {
  position: absolute;
  right: -6px; bottom: -14px;
  transform: rotate(-5deg);
  color: var(--green-deep);
}
.jana-quote { display: grid; gap: 20px; justify-items: start; }
.jana-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.42;
}
.jana-quote cite { font-style: normal; color: var(--muted); font-size: 16px; }

/* ---------- izdelki trak ---------- */

.izdelki-strip { padding-block: clamp(44px, 7vw, 80px); }
.izdelki-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
}
@media (max-width: 860px) { .izdelki-inner { grid-template-columns: 1fr; } }
.izdelki-copy { display: grid; gap: 16px; justify-items: start; }
.izdelki-copy h2 { font-size: clamp(26px, 3.6vw, 36px); }
.izdelki-copy p { color: var(--muted); max-width: 52ch; }
.izdelki-thumbs { display: flex; }
.izdelki-thumbs .polaroid { width: 150px; padding-bottom: 12px; }
.izdelki-thumbs .polaroid img { aspect-ratio: 1; }
.izdelki-thumbs .polaroid:nth-child(1) { --tilt: -5deg; }
.izdelki-thumbs .polaroid:nth-child(2) { --tilt: 4deg; margin-left: -24px; margin-top: 22px; }
@media (max-width: 860px) { .izdelki-thumbs { justify-content: flex-start; } }

/* ---------- galerija ---------- */

.gallery { padding-block: var(--section); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.4vw, 26px);
}
@media (max-width: 940px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-grid .polaroid { padding-bottom: 14px; cursor: zoom-in; border: 0; width: 100%; transition: transform 0.18s ease; }
.gallery-grid .polaroid:nth-child(4n+1) { --tilt: -3deg; }
.gallery-grid .polaroid:nth-child(4n+2) { --tilt: 2.5deg; margin-top: 18px; }
.gallery-grid .polaroid:nth-child(4n+3) { --tilt: -1.5deg; }
.gallery-grid .polaroid:nth-child(4n+4) { --tilt: 3.5deg; margin-top: 12px; }
.gallery-grid .polaroid:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.gallery-grid .polaroid img { aspect-ratio: 1; }
/* polaroid kot gumb (odpre povečavo) — brez privzetega videza gumba */
.gallery-grid button.polaroid { display: block; font: inherit; color: inherit; border-radius: 0; appearance: none; -webkit-appearance: none; }
/* galerija z ročno pripisanimi napisi pod fotografijami */
.gallery-grid.z-napisi .polaroid { padding-bottom: 40px; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(24, 22, 16, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 4vmin;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  background: var(--white);
  padding: 10px;
}
.lightbox button {
  position: absolute;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  width: 46px; height: 46px;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- CTA ---------- */

.cta { padding-block: var(--section); text-align: center; }
.cta-inner { display: grid; gap: 22px; justify-items: center; }
.cta h2 { font-size: clamp(30px, 4.6vw, 46px); }
.cta p { color: var(--muted); max-width: 52ch; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-contact { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; font-size: 16.5px; }
.cta-contact a { font-weight: 600; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- noga ---------- */

.site-footer {
  background: var(--ink);
  color: #D8D4C6;
  padding-block: 48px 34px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px 64px;
  align-items: start;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: grid; gap: 12px; justify-items: start; }
.footer-brand img { width: 44px; height: 44px; border-radius: 999px; background: var(--paper); padding: 4px; }
.footer-brand p { max-width: 40ch; }
.site-footer h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #A39F8E; margin-bottom: 12px; }
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.site-footer a { color: #F0EDE1; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 3px; }
.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid #43413A;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  color: #A39F8E;
  font-size: 13.5px;
}
.social { display: flex; gap: 12px; }
.social a {
  width: 38px; height: 38px;
  border: 1.5px solid #6B6858;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.social a:hover { border-color: var(--sun); }
.social svg { width: 17px; height: 17px; fill: #F0EDE1; }

/* ---------- podstrani: mala glava ---------- */

.page-hero {
  background: var(--sun-soft);
  border-bottom: 1.5px solid var(--ink);
}
.page-hero-inner {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-block: clamp(40px, 6vw, 76px);
}
.page-hero h1 { font-size: clamp(32px, 5.6vw, 58px); line-height: 1.06; }

/* ---------- prijavnica ---------- */

.prijava { padding-block: clamp(56px, 8.5vw, 100px); scroll-margin-top: 84px; }
.prijava-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .prijava-inner { grid-template-columns: 1fr; } }
.prijava-copy { display: grid; gap: 14px; justify-items: start; }
.prijava-copy p { color: var(--muted); max-width: 44ch; }
.prijava-copy a { font-weight: 600; color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* trije koraki prijave — ozek, enostolpčni prijem promise-grida ob obrazcu */
.koraki-ob-obrazcu { grid-template-columns: 1fr; gap: 16px; margin-block: 4px; }
.koraki-ob-obrazcu .promise { gap: 4px; }
.koraki-ob-obrazcu .promise h3 { font-size: 18px; }
.koraki-ob-obrazcu .promise p { font-size: 15px; max-width: 42ch; }

.form-card {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: clamp(22px, 3.5vw, 34px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: grid; gap: 7px; align-content: start; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 15px; }
.form-field .opt { color: var(--muted); font-weight: 500; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 110px; }

.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.form-check input { width: 19px; height: 19px; flex: none; margin-top: 3px; accent-color: var(--green); }
.form-check a { font-weight: 600; }
.form-opomba { color: var(--muted); font-size: 14.5px; margin-top: -4px; }

.form-actions { display: grid; gap: 10px; justify-items: start; }

.form-error {
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--sun-soft);
  padding: 13px 16px;
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 20px;
}

.form-success { display: grid; gap: 12px; justify-items: start; }
.form-success h3 { font-size: clamp(24px, 3vw, 30px); }
.form-success p { color: var(--muted); }

/* skrito polje proti robotom */
.hp-polje { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

[hidden] { display: none !important; }

/* ---------- podstrani: delavnice ---------- */

.hero-green, .page-hero-green { background: var(--green-soft); }
.hero-pink, .page-hero-pink { background: var(--pink-soft); }
/* pas takoj za glavo strani deli z njo eno samo črto */
.hero + [class*="band-"], .page-hero + [class*="band-"] { border-top: 0; }

.crumb {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
}
.crumb:hover { color: var(--ink); }

/* izrezek kot samostojni kolaž v glavi podstrani */
.hero-collage.solo {
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.hero-collage .cut {
  position: relative;
  margin: 0 0 40px;
}
.hero-collage .cut img { width: 100%; filter: drop-shadow(5px 5px 0 rgba(34, 33, 28, 0.16)); }
.hero-collage .cut .hand-note {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%) rotate(-4deg);
  white-space: nowrap;
  color: var(--green-deep);
}
.hero-collage.solo .cut { width: min(78%, 340px); }
@media (max-width: 860px) {
  .hero-collage.solo { justify-content: flex-start; }
  .hero-collage.solo .cut { width: min(72%, 320px); }
}

/* podrobnosti delavnice — golo besedilo na pasu, brez škatel */
.podrobnosti { padding-block: clamp(48px, 7vw, 84px); }
.podrobnosti .section-title { margin-bottom: clamp(24px, 4vw, 38px); }
.podrobnosti-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 4vw, 48px);
}
@media (max-width: 940px) { .podrobnosti-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 520px) { .podrobnosti-grid { grid-template-columns: 1fr; gap: 18px; } }
.podrobnost { display: grid; gap: 6px; align-content: start; }
.podrobnost h3 { font-size: 19px; }
.podrobnost p { color: var(--muted); font-size: 16px; }

#termini, #darilni-boni { scroll-margin-top: 84px; }

/* stolpci s polaroidom nad besedilom (tehnike risanja, postopek vlivanja) —
   golo besedilo na pasu kot pri obljubah; škatla je samo fotografija */
.foto-stolpci { padding-block: clamp(52px, 8vw, 92px); }
.foto-stolpci .polaroid { width: min(100%, 240px); padding-bottom: 12px; margin-bottom: 14px; justify-self: start; }
.foto-stolpci .polaroid img { aspect-ratio: 1; }
.foto-stolpci .promise:nth-child(1) .polaroid { --tilt: -3deg; }
.foto-stolpci .promise:nth-child(2) .polaroid { --tilt: 2deg; }
.foto-stolpci .promise:nth-child(3) .polaroid { --tilt: -1.5deg; }

/* razlaga tehnike — besedilo ob živem polaroidu */
.razlaga { padding-block: clamp(52px, 8vw, 92px); }
.razlaga-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .razlaga-inner { grid-template-columns: 1fr; } }
.razlaga-copy { display: grid; gap: 16px; justify-items: start; }
.razlaga-copy p { color: var(--muted); max-width: 52ch; }
.razlaga-media { display: flex; justify-content: center; }
.razlaga-media .polaroid { width: min(100%, 300px); --tilt: 3deg; }
@media (max-width: 860px) { .razlaga-media { justify-content: flex-start; } }

/* ---------- podstran: za skupine ---------- */

.formati { padding-block: clamp(56px, 8.5vw, 100px); }

/* oštevilčeni koraki — golo besedilo na pasu (prijavnica na strani Termini) */
.koraki { padding-block: clamp(48px, 7vw, 84px); }
.koraki .section-title { margin-bottom: clamp(24px, 4vw, 38px); }

/* ---------- podstran: izdelki (katalog) ---------- */

.izdelki-katalog { padding-block: clamp(56px, 8.5vw, 100px); }
.izdelki-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 940px) { .izdelki-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .izdelki-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.izdelek-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}
.izdelek-media {
  display: block;                     /* v katalogu je to povezava na podstran */
  position: relative;
  aspect-ratio: 1;
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--ink);
}
.izdelek-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.izdelek-foto.izrezek {
  object-fit: contain;
  padding: 22px;
  filter: drop-shadow(3px 3px 0 rgba(34, 33, 28, 0.14));
}
.izdelek-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.izdelek-body h3 { font-size: 21px; }
.izdelek-body h3 a { text-decoration: none; border-bottom: 2px solid transparent; }
.izdelek-body h3 a:hover { border-bottom-color: var(--green); }
/* cela kartica je klikljiva: povezava iz naslova se razpne čez kartico,
   fotografija pa ostane povezava za tiste brez JS in za odpiranje v novem zavihku */
.izdelek-card { position: relative; }
.izdelek-body h3 a::after { content: ""; position: absolute; inset: 0; }
.izdelek-foot .link-more { position: relative; }
.izdelek-body p { color: var(--muted); font-size: 15.5px; }
.izdelek-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.izdelek-cena { font-weight: 700; font-size: 17px; white-space: nowrap; }
.izdelek-foot .link-more { font-size: 15.5px; }

/* ---------- podstran: en izdelek (/izdelki/<oznaka>/) ---------- */

.izdelek-vrh { overflow: visible; }          /* mini polaroidi smejo čez rob */
.izdelek-vrh-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-block: clamp(40px, 6vw, 80px);
}
@media (max-width: 900px) {
  .izdelek-vrh-inner { grid-template-columns: 1fr; padding-block: 32px 52px; }
}

.izdelek-slike { display: grid; gap: clamp(18px, 3vw, 28px); }
.izdelek-slike .polaroid {
  padding-bottom: 14px;
  cursor: zoom-in;
  border: 0;
  width: 100%;
  display: block;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.18s ease;
}
.izdelek-slike .polaroid img { aspect-ratio: 1; }
.izdelek-slike .polaroid:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.izdelek-glavna { --tilt: -2deg; }
.izdelek-glavna.je-izrezek img { object-fit: contain; background: var(--paper-2); }
.izdelek-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.izdelek-mini .polaroid { padding: 6px 6px 10px; }
/* 3n+…: izdelek ima lahko do 6 dodatnih fotografij (nadzorna plošča) — druga vrsta ponovi nagibe prve */
.izdelek-mini .polaroid:nth-child(3n+1) { --tilt: 2.5deg; }
.izdelek-mini .polaroid:nth-child(3n+2) { --tilt: -3deg; margin-top: 10px; }
.izdelek-mini .polaroid:nth-child(3n+3) { --tilt: 1.5deg; }
@media (max-width: 420px) { .izdelek-mini { gap: 8px; } }

.izdelek-podatki { display: grid; gap: 16px; justify-items: start; }
.izdelek-podatki h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; }
.izdelek-cena-velika { font-weight: 700; font-size: 19px; }
.izdelek-podatki .hero-lede { max-width: 48ch; }
.izdelek-opis { display: grid; gap: 12px; }
.izdelek-opis p { color: var(--muted); max-width: 58ch; }
.izdelek-prodano { display: grid; gap: 10px; justify-items: start; }
.izdelek-prodano p { color: var(--muted); max-width: 48ch; }

/* ---------- podstran: o meni ---------- */

.zgodba { padding-block: clamp(56px, 8.5vw, 100px); }
.zgodba-tekst { max-width: 62ch; display: grid; gap: 16px; }

/* Janina misel — citat kot samostojen pas */
.izjava { padding-block: clamp(52px, 8vw, 92px); }
.izjava-inner { display: grid; gap: 18px; justify-items: center; text-align: center; }
.izjava blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.42;
  max-width: 27ch;
}
.izjava cite { font-style: normal; color: var(--muted); font-size: 16px; }

/* ---------- podstran: pogoji ---------- */

.pravno { padding-block: clamp(48px, 7vw, 88px); }
.pravno-inner { max-width: 700px; }
.pravno h2 {
  font-size: 23px;
  margin: clamp(30px, 5vw, 42px) 0 12px;
  scroll-margin-top: 84px;
}
.pravno p { margin-bottom: 12px; }
.pravno ul { margin: 0 0 12px; padding-left: 24px; display: grid; gap: 6px; }
.pravno a { text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.pravno .organizator { margin-bottom: 6px; }
.pravno-datum { color: var(--muted); font-size: 15px; }
.pravno-vprasanja { margin-top: clamp(26px, 4vw, 38px); color: var(--muted); }

/* ---------- razkrivanje ob drsenju ---------- */

.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}