/* ══════════════════════════════════════════════════════════
   ZIMOVANJE NASSFELD
   Informativna stranica (nassfeld.html) i prijavnica
   (prijava-nassfeld.html). Nadovezuje se na tokene iz style.css,
   ne uvodi nove boje.
   ══════════════════════════════════════════════════════════ */

.vizualno-skriveno {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-hero--tight { padding-bottom: clamp(2rem, 4vw, 3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }

/* ── kartice "kako izgleda tjedan" ── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.info-card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.info-card i { font-size: 26px; color: var(--green-ink); display: block; margin-bottom: 1rem; }
.info-card h3 {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--blue-dark); margin-bottom: .5rem;
}
.info-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }

/* ── termini ── */
.termin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.termin-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .625rem;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.termin-oznaka {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green-ink);
}
.termin-datum {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--blue-dark);
}
.termin-mjesta { font-size: var(--fs-sm); color: var(--text-muted); }
.termin-cta {
  margin-top: auto; padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--blue);
  transition: gap .4s var(--ease);
}
.termin-cta:hover { gap: .875rem; }

.cijena-traka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--grad-card);
}
.cijena-label {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-soft);
  margin-bottom: .25rem;
}
.cijena-glava { flex: 1 1 20rem; }
.cijena-uz { flex: 1 1 16rem; display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }

/* Cijena ovisi o godistu, pa ih stoji vise jedna ispod druge.
   Godiste i iznos se razvlace na suprotne krajeve retka da se
   iznosi daju citati odozgo prema dolje. */
.cijena-stavke { display: grid; gap: .375rem; }
.cijena-stavka {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1.25rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.cijena-stavka:last-child { border-bottom: 0; }
.cijena-godiste { font-size: var(--fs-sm); color: var(--text-muted); }
.cijena-iznos {
  font-family: var(--font-display); font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--blue-dark);
  white-space: nowrap;
}
.cijena-nota { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
/* Obiteljski popust je ponuda za sebe, a ne fusnota uz cijenu, pa
   stoji u vlastitom okviru umjesto kao jos jedan zeleni redak. */
.cijena-popust {
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .9375rem;
  border: 1px solid color-mix(in srgb, var(--green) 38%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--green-ink); font-weight: 600;
}
.cijena-popust .ti { font-size: 1.125rem; line-height: 1.35; flex-shrink: 0; }
.cijena-popust:empty { display: none; }

/* ── popis razina na informativnoj stranici ── */
.razina-lista { border-top: 1px solid var(--line); }
.razina-red {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .5rem 2rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}
.razina-red strong {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700;
  color: var(--blue-dark); letter-spacing: -.015em;
}
.razina-red span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.7; }
@media (max-width: 620px) { .razina-red { grid-template-columns: 1fr; } }

/* ── što ponijeti ── */
.pakiranje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pakiranje-col h3 {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
  color: var(--blue-dark); letter-spacing: -.02em;
  padding-bottom: .75rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.pakiranje-col ul { list-style: none; }
.pakiranje-col li {
  position: relative; padding-left: 1.5rem; margin-bottom: .625rem;
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6;
}
.pakiranje-col li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}

/* ══════════════════════════════════════════════════════════
   PRIJAVNICA
   ══════════════════════════════════════════════════════════ */

.form-podnaslov {
  font-size: var(--fs-sm); color: var(--on-dark-dim);
  line-height: 1.7; margin: -.5rem 0 1.5rem;
}
.form-greska {
  margin-top: 1.25rem; padding: .875rem 1.125rem;
  border: 1px solid rgba(255,107,107,.4); border-radius: var(--radius);
  background: rgba(255,107,107,.1); color: #ffb4b4; font-size: var(--fs-sm);
}

/* Razine kao kockice: skrivamo nativni radio i crtamo vlastiti
   kvadratic, da se cijela kartica ponasa kao jedno veliko polje. */
.razine { display: grid; gap: .625rem; border: 0; padding: 0; margin: 0; }
.razina-kocka { position: relative; display: block; cursor: pointer; }
.razina-kocka input { position: absolute; opacity: 0; width: 0; height: 0; }
.razina-tijelo {
  display: block; padding: 1rem 1.125rem 1rem 3rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.razina-tijelo::before {
  content: ""; position: absolute; left: 1.125rem; top: 1.125rem;
  width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid var(--on-dark-faint);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.razina-tijelo::after {
  content: ""; position: absolute; left: 1.52rem; top: 1.4rem;
  width: 5px; height: 9px; border: solid #06230a;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
  opacity: 0; transition: opacity .2s var(--ease);
}
.razina-kocka:hover .razina-tijelo { border-color: var(--line-dark-2); }
.razina-kocka input:checked + .razina-tijelo {
  border-color: var(--green); background: rgba(91,196,34,.08);
}
.razina-kocka input:checked + .razina-tijelo::before {
  background: var(--green); border-color: var(--green);
}
.razina-kocka input:checked + .razina-tijelo::after { opacity: 1; }
.razina-kocka input:focus-visible + .razina-tijelo {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.razina-tijelo strong {
  display: block; font-family: var(--font-display); font-size: 1rem;
  font-weight: 700; color: #fff; margin-bottom: .2rem;
}
.razina-tijelo span { font-size: var(--fs-sm); color: var(--on-dark); line-height: 1.6; }

/* Suglasnosti: vidi se samo boldani naslov, cijeli tekst se
   otvara klikom na njega. Kvacica je zasebna, da klik na tekst
   ne znaci i pristanak. */
.suglasnosti { display: grid; }
.suglasnost {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .875rem; align-items: start;
  padding: .875rem 0; border-bottom: 1px solid var(--line-dark);
}
.suglasnost:last-child { border-bottom: 0; }
.suglasnost > input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: .15rem;
  accent-color: var(--green); cursor: pointer;
}
.suglasnost details summary {
  cursor: pointer; list-style: none;
  font-weight: 600; color: #fff; line-height: 1.5;
  display: flex; align-items: baseline; gap: .75rem;
}
.suglasnost details summary::-webkit-details-marker { display: none; }
.suglasnost details summary::after {
  content: "+"; font-size: 19px; line-height: 1;
  color: var(--on-dark-faint); font-weight: 400;
  margin-left: auto; flex-shrink: 0;
}
.suglasnost details[open] summary::after { content: "\2013"; }
.suglasnost details summary:hover { color: var(--green); }
.suglasnost details p {
  margin-top: .75rem; font-size: var(--fs-sm);
  color: var(--on-dark); line-height: 1.8;
}
.suglasnost details p a { color: var(--blue-light); text-decoration: underline; }

/* Suglasnost za sigurnost nosi sest zasebnih izjava. Kao jedan
   blok teksta se ne bi citala, pa stoji kao popis. */
.suglasnost-popis {
  margin-top: .75rem; padding-left: 1.125rem;
  display: grid; gap: .5rem;
  font-size: var(--fs-sm); color: var(--on-dark); line-height: 1.7;
}
.suglasnost-popis li::marker { color: var(--green); }

.obavezno { color: var(--green); }

/* ── stupac sa strane ── */
.form-aside { display: grid; gap: 1.25rem; align-content: start; }
.aside-koraci { list-style: none; counter-reset: ak; }
.aside-koraci li {
  counter-increment: ak; position: relative; padding-left: 2.25rem;
  margin-bottom: .875rem; font-size: var(--fs-sm); color: var(--on-dark);
}
.aside-koraci li::before {
  content: counter(ak); position: absolute; left: 0; top: -.1rem;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  color: var(--green); border: 1px solid var(--line-dark-2);
}
@media (max-width: 900px) { .form-aside .aside-card { position: static; } }

/* ── datum rođenja: tri izbornika u redu ──
   Nativni input[type=date] crta operacijski sustav, pa je bijel usred
   tamne forme i nudi mm/dd/yyyy. Tri izbornika preuzima isti skript
   koji stilizira ostale, i brže je od listanja kalendara unatrag. */
.datum-red {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .9fr);
  gap: .625rem;
}
.datum-red .form-group { margin: 0; }
@media (max-width: 560px) {
  .datum-red { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   TRAKA ZA ZIMOVANJE NA NASLOVNICI
   ══════════════════════════════════════════════════════════ */
.zimovanje-traka {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--radius-xl);
  background: var(--grad-deep);
  color: #fff;
}
.zimovanje-tekst { position: relative; z-index: 1; }
.zimovanje-tekst .eyebrow { color: var(--green); }
.zimovanje-tekst h2 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: 1.25rem;
}
.zimovanje-tekst p {
  color: var(--on-dark);
  line-height: 1.8;
  max-width: 46ch;
  margin-bottom: 2rem;
}
.zimovanje-akcije { display: flex; flex-wrap: wrap; gap: .875rem; }

.zimovanje-crtice {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  gap: .875rem;
}
.zimovanje-crtice li {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.125rem;
  font-size: var(--fs-sm);
  color: var(--on-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.03);
}
.zimovanje-crtice i { font-size: 19px; color: var(--green); flex-shrink: 0; }

/* Fotografija nosi desnu stranu trake. Lijeva, gdje stoji tekst,
   ostaje puna podloga, pa se preljev gasi prije naslova. Crtice
   dobivaju vlastitu tamnu podlogu da ostanu citljive nad slikom. */
/* Slika drzi samo desnu polovicu trake. Da je razvucemo preko cijele
   sirine, kadar bi na desnu stranu doveo rub fotografije umjesto
   ekipe, jer se pri "cover" po sirini nema sto rezati vodoravno. */
.traka-foto {
  position: absolute;
  top: 0; right: 0;
  /* Visina mora biti izricita: atribut height na <img> inace gazi
     razvlacenje po top/bottom i slika ispadne iz trake. */
  width: 52%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
  opacity: .5;
  --preljev: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.3) 22%,
    rgba(0,0,0,.72) 48%,
    #000 78%);
  -webkit-mask-image: var(--preljev);
  mask-image: var(--preljev);
}
.traka--foto .zimovanje-crtice li {
  background: rgba(7,21,42,.62);
  border-color: rgba(255,255,255,.14);
}

/* Fotografija koja ilustrira, a ne nosi sekciju: drzi se sirine
   teksta i ne razvlaci se preko cijelog ekrana. */
.foto-mala {
  max-width: 560px;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  line-height: 0;
}
.foto-mala img { width: 100%; height: auto; display: block; }

/* Ista zamisao na vrhu podstranice: fotografija drzi desnu stranu,
   tekst lijevu. Kontejner hero sekcije vec je position: relative, a
   .container u njemu stoji na z-index 1. */
.hero-foto {
  position: absolute;
  top: 0; right: 0;
  width: 54%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Iznad aurore, koja takoder stoji na nuli i inace bi je prigusila,
     ali ispod .container koji je na jedinici. */
  z-index: 0;
  isolation: isolate;
  opacity: .62;
  --preljev: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.3) 24%,
    rgba(0,0,0,.72) 50%,
    #000 80%);
  -webkit-mask-image: var(--preljev);
  mask-image: var(--preljev);
}

@media (max-width: 860px) {
  .hero-foto {
    left: 0; width: 100%; height: 100%;
    opacity: .3;
    --preljev: linear-gradient(to bottom,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.28) 50%,
      #000 100%);
  }
}

@media (max-width: 860px) {
  .zimovanje-traka { grid-template-columns: 1fr; }
  /* Uspravan kadar: tekst i crtice stoje jedno ispod drugoga, pa
     slika pokriva cijelu traku i jace se gasi. */
  .traka-foto {
    left: 0; width: 100%; height: 100%;
    opacity: .28;
    object-position: center 45%;
    --preljev: linear-gradient(to bottom,
      rgba(0,0,0,.5) 0%,
      rgba(0,0,0,.28) 45%,
      #000 100%);
  }
}

/* ══════════════════════════════════════════════════════════
   FOTOGRAFIJE NA STRANICI ZIMOVANJA
   ══════════════════════════════════════════════════════════ */

/* panorama preko cijele sirine, odmah ispod naslova */
.nf-panorama {
  line-height: 0;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.nf-panorama img {
  width: 100%;
  height: clamp(220px, 34vw, 460px);
  object-fit: cover;
  display: block;
}

/* pojedinacna fotografija s potpisom */
.nf-slika { margin: 0; }
.nf-slika img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.nf-slika figcaption {
  margin-top: .875rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.nf-slika--usko {
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

/* mozaik: cetiri kadra iz tjedna.
   Raspored prati proporcije samih fotografija: soba je siroka pa ide
   kao traka gore, vecer je uspravna pa drzi cijeli desni stupac, a
   dvorana i druzenje su priblizno kvadratne pa stoje jedna uz drugu. */
.nf-mozaik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 18vw, 230px);
  gap: clamp(.625rem, 1.4vw, 1rem);
}
.nf-mozaik figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.nf-mozaik img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.nf-mozaik figure:hover img { transform: scale(1.05); }
.nf-mozaik figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.75rem .875rem .75rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(7,21,42,.8), transparent);
}
.nf-m1 { grid-column: 1 / 3; grid-row: 1 / 2; }  /* soba, siroka */
.nf-m2 { grid-column: 1 / 2; grid-row: 2 / 3; }  /* dvorana */
.nf-m3 { grid-column: 2 / 3; grid-row: 2 / 3; }  /* druzenje */
.nf-m4 { grid-column: 3 / 4; grid-row: 1 / 3; }  /* vecer, uspravna */

@media (max-width: 760px) {
  .nf-mozaik {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(110px, 26vw, 150px);
  }
  .nf-m1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .nf-m2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .nf-m3 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .nf-m4 { grid-column: 1 / 2; grid-row: 2 / 4; }
}


/* ============================================================
   ODJELJCI ZIMOVANJA: brojke, smjestaj, vecernji program, ponuda
   ============================================================ */

/* -- 01 zasto bas tamo: cetiri brojke ----------------------- */
.nf-brojke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.nf-brojka {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--grad-card);
}
.nf-broj {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 800; letter-spacing: -.05em; line-height: .95;
  color: var(--blue);
}
.nf-posto { font-size: .5em; vertical-align: super; letter-spacing: 0; }
.nf-brojka--ikona i {
  display: block; font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: .95; color: var(--blue);
}
.nf-jedinica {
  display: block; margin-top: .5rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
}
.nf-brojka p {
  margin: .625rem 0 0; font-size: var(--fs-sm);
  color: var(--text-muted); line-height: 1.6;
}

/* -- 02 smjestaj: tekst uz fotografiju ---------------------- */
.nf-smjestaj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.nf-sobe-popis {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: .75rem;
}
.nf-sobe-popis li {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.nf-sobe-popis i { font-size: 20px; color: var(--green); flex-shrink: 0; }
.nf-smjestaj-slika { margin: 0; }
.nf-smjestaj-slika img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.nf-smjestaj-slika figcaption {
  margin-top: .75rem; font-size: var(--fs-sm); color: var(--text-muted);
}
@media (max-width: 820px) {
  .nf-smjestaj { grid-template-columns: 1fr; }
}

/* -- 03 vecernje aktivnosti --------------------------------- */
.nf-vecer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.125rem);
}
.nf-vecer-kocka {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; text-align: center;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.nf-vecer-kocka:hover { transform: translateY(-4px); border-color: var(--green); }
.nf-vecer-kocka i { font-size: 32px; color: var(--blue); }
.nf-vecer-kocka h3 {
  margin: 0; font-size: 1rem; font-weight: 700;
  color: var(--blue-dark); letter-spacing: -.01em;
}

/* Mobiteli stoje sa strane dok traje program, pa to i pise. */
.nf-bez-mobitela {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  padding: clamp(1rem, 2vw, 1.375rem) clamp(1.125rem, 2.4vw, 1.75rem);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
}
.nf-bez-mobitela i { font-size: 30px; color: var(--blue); flex-shrink: 0; }
.nf-bez-mobitela p {
  margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text);
}
.nf-bez-mobitela strong { color: var(--blue-dark); }

/* Mozaik s tri kadra: uspravni drzi desni stupac, dva polozena
   stoje jedan ispod drugog lijevo. */
.nf-mozaik--tri { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(140px, 17vw, 240px); }
.nf-t1 { grid-column: 1 / 3; grid-row: 1 / 2; }
.nf-t2 { grid-column: 1 / 3; grid-row: 2 / 3; }
.nf-t3 { grid-column: 3 / 4; grid-row: 1 / 3; }
@media (max-width: 760px) {
  .nf-mozaik--tri { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 26vw, 150px); }
  .nf-t1 { grid-column: 1 / 2; grid-row: 1 / 2; }
  .nf-t2 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .nf-t3 { grid-column: 2 / 3; grid-row: 1 / 3; }
}

/* -- 04 ponuda: ono zbog cega se stranica i otvara ---------- */
.nf-ponuda {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.125rem);
}
.nf-stavka {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.375rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--grad-card);
}
.nf-stavka i {
  font-size: 24px; color: var(--green); flex-shrink: 0;
  margin-top: .125rem;
}
.nf-stavka div { display: grid; gap: .25rem; }
.nf-stavka strong {
  font-family: var(--font-display); font-size: 1.0625rem;
  font-weight: 700; color: var(--blue-dark); letter-spacing: -.015em;
}
.nf-stavka span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   NASA PRICA
   ============================================================ */

/* Geslo stoji sa strane, veliko i tiskano, i drzi se uz tekst dok
   se prica cita. Na uskom ekranu sjeda iznad teksta. */
.geslo {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.375rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--blue-dark);
  padding-left: 1.125rem;
  border-left: 3px solid var(--green);
}

.prica p {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.prica p:last-child { margin-bottom: 0; }

/* Godine razbijaju dugi tekst, da se vidi kako prica tece. */
.prica-godina {
  display: flex; align-items: baseline; gap: .875rem;
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blue-dark);
}
.prica-godina span {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--green-dark);
  line-height: 1;
}

@media (max-width: 900px) {
  .geslo { margin-bottom: 2rem; }
}

/* ============================================================
   PROGRAMI NA PLATKU
   ============================================================ */

/* Program uključuje: traka s ikonom u krugu, namjerno drugacija
   od kartica na zimovanju, da se dvije ponude ne stapaju. */
.pv-program {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(.625rem, 1.4vw, 1rem);
  counter-reset: pv;
}
.pv-program li {
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem 1.125rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--grad-card);
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
}
.pv-program i {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green-ink);
  font-size: 21px;
}

/* Satnica: vrijeme lijevo, dogadjaj desno, povezani crtom. */
.pv-satnica {
  list-style: none; margin: 0; padding: 0;
  border-left: 2px solid var(--line);
  margin-left: .5rem;
}
.pv-satnica li {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem;
  padding: .875rem 0 .875rem 1.75rem;
}
.pv-satnica li::before {
  content: '';
  position: absolute; left: -7px; top: 1.375rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff;
}
.pv-satnica strong {
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 700;
  color: var(--blue-dark); letter-spacing: -.02em;
  min-width: 4.5rem;
}
.pv-satnica span { font-size: var(--fs-sm); color: var(--text-muted); }

.pv-sitno {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 54rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-muted);
}

/* Popis za pakiranje s kvacicama. */
.pv-popis {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .25rem 2rem;
}
.pv-popis li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pv-popis li::before {
  content: "\2713";
  color: var(--green-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
}