/*

SAVSKI IZLOG — osnovni sistem

---01 TIPOGRAFIJA
Naslovi: "Fraunces" (meki serif, topao)
Telo:    "Nunito" (zaobljen sans-serif)

SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

Font weights: 300 / 400 / 500 / 600 / 700
Line heights: 1 / 1.2 / 1.5 / 1.7

---02 BOJE
Nezne, tople, prirodne — reka, nebo u suton, pesak, drvo.
Bez neonskih tonova i bez tamne "nocne" palete.

Voda (primarna):   #3F5D6E  #6E8FA3  #A8C0CE
Mint (zelenkasta): #7FA391  #8FB3A0  #DCE9E1
Kajsija / breskva: #E0A278  #E8B48C  #F7E3D3
Terakota (akcent): #C4785A  #B26847
Pesak (pozadine):  #FDFAF6  #F6EFE6  #EDE1D3
Tekst:             #48403A  #7A6E64

---05 SHADOWS
Meke, niskog kontrasta, uvek u toplom tonu (nikad cisto crne)

---06 BORDER-RADIUS
Podrazumevano 1.2rem, kartice 2rem, "meki" oblici do 4rem

---07 WHITESPACE
Velikodusan — sajt treba da "dise"

*/

/************************************/
/* VARIJABLE */
/************************************/

:root {
  --boja-voda-tamna: #3f5d6e;
  --boja-voda: #6e8fa3;
  --boja-voda-svetla: #a8c0ce;

  --boja-mint-tamni: #7fa391;
  --boja-mint: #8fb3a0;
  --boja-mint-svetli: #dce9e1;

  --boja-kajsija-tamna: #e0a278;
  --boja-kajsija: #e8b48c;
  --boja-kajsija-svetla: #f7e3d3;

  --boja-terakota: #c4785a;
  --boja-terakota-tamna: #b26847;

  /* topla crvena — samo za ono što gost mora da primeti (kapara) */
  --boja-vazno: #b5442f;
  --boja-vazno-podloga: #fbe9e3;

  --boja-pesak: #fdfaf6;
  --boja-pesak-topli: #f6efe6;
  --boja-pesak-tamni: #ede1d3;

  --boja-tekst: #48403a;
  --boja-tekst-blaga: #7a6e64;

  /* --boja-bela je uvek svetla: to je tekst PREKO boje (dugmad, hero,
     CTA). Površine kartica idu kroz --boja-povrsina, jer se ona u
     tamnoj temi obrće u tamnu. Ne mešati to dvoje. */
  --boja-bela: #fffdfb;
  --boja-povrsina: #fffdfb;

  /* providne trake koje se oslanjaju na pozadinu iza sebe */
  --sloj-providan: rgba(253, 250, 246, 0.9);
  --sloj-providan-jak: rgba(253, 250, 246, 0.98);

  --senka-meka: 0 1.2rem 3.2rem rgba(72, 64, 58, 0.07);
  --senka-podignuta: 0 2rem 4.8rem rgba(72, 64, 58, 0.11);

  --radius: 1.2rem;
  --radius-kartica: 2rem;
  --radius-meki: 4rem;

  /* sve tranzicije su spore i mekane — nikad nagle */
  --lako: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tranzicija: 600ms var(--lako);

  /* da browser sam oboji trake za skrolovanje i sistemske kontrole */
  color-scheme: light;
}

/************************************/
/* RESET */
/************************************/

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

html {
  font-size: 62.5%;
  /* zbog mobilne navigacije koja ulazi sa desne strane */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* kad je Lenis aktivan, njegov smooth scroll preuzima posao */
html.lenis {
  scroll-behavior: auto;
}

body {
  font-family: "Nunito", sans-serif;
  font-size: 1.8rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--boja-tekst);
  background-color: var(--boja-pesak);
  overflow-x: hidden;
}

/* `hidden` mora da nadjača display iz komponenti (npr. .rez-polje je flex,
   pa bi se bez ovoga video i kad je skriven) */
[hidden] {
  display: none !important;
}

/* Ko koristi "smanji animacije" u sistemu — dobija sajt bez pokreta */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/************************************/
/* TIPOGRAFIJA */
/************************************/

.heading-primary,
.heading-secondary,
.heading-tertiary {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  color: var(--boja-voda-tamna);
  letter-spacing: -0.02em;
}

.heading-primary {
  font-size: 6.2rem;
  line-height: 1.08;
  margin-bottom: 2.4rem;
}

.heading-secondary {
  font-size: 4.4rem;
  line-height: 1.15;
  margin-bottom: 3.2rem;
}

.heading-tertiary {
  font-size: 2.4rem;
  line-height: 1.3;
  margin-bottom: 1.6rem;
}

.nadnaslov {
  display: block;
  font-family: "Nunito", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--boja-terakota);
  margin-bottom: 1.6rem;
}

.tekst {
  font-size: 1.8rem;
  line-height: 1.8;
  color: var(--boja-tekst-blaga);
}

.tekst--veliki {
  font-size: 2rem;
  line-height: 1.8;
}

.tekst:not(:last-child) {
  margin-bottom: 2rem;
}

strong {
  font-weight: 600;
  color: var(--boja-tekst);
}

/************************************/
/* LAYOUT */
/************************************/

.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.container--usko {
  max-width: 82rem;
}

.sekcija {
  padding: 12.8rem 0;
}

.sekcija--topla {
  background-color: var(--boja-pesak-topli);
}

.grid {
  display: grid;
  row-gap: 6.4rem;
  column-gap: 6.4rem;
}

.grid:not(:last-child) {
  margin-bottom: 6.4rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--centrirano {
  align-items: center;
}

.text-center {
  text-align: center;
}

.zaglavlje-sekcije {
  max-width: 68rem;
  margin: 0 auto 8rem auto;
  text-align: center;
}

.zaglavlje-sekcije .heading-secondary {
  margin-bottom: 2rem;
}

/************************************/
/* DUGMAD */
/************************************/

.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 1.6rem 3.2rem;
  border: none;
  border-radius: 10rem;
  cursor: pointer;
  transition: background-color 400ms var(--lako), color 400ms var(--lako),
    box-shadow 400ms var(--lako), transform 400ms var(--lako);
}

/* Svaka varijanta se navodi i bez pseudo-klase — ista dugmad postoje
   i kao <a> (linkovi) i kao <button> (popup, kalendar, hero), a
   :link/:visited ne važe za <button>. */
.btn--puno,
.btn--puno:link,
.btn--puno:visited {
  background-color: var(--boja-terakota);
  color: var(--boja-bela);
  box-shadow: 0 0.8rem 2rem rgba(196, 120, 90, 0.25);
}

.btn--puno:hover,
.btn--puno:active {
  background-color: var(--boja-terakota-tamna);
  transform: translateY(-2px);
  box-shadow: 0 1.2rem 2.8rem rgba(196, 120, 90, 0.3);
}

.btn--obris,
.btn--obris:link,
.btn--obris:visited {
  background-color: transparent;
  color: var(--boja-voda-tamna);
  box-shadow: inset 0 0 0 1.5px var(--boja-voda-svetla);
}

.btn--obris:hover,
.btn--obris:active {
  background-color: var(--boja-povrsina);
  box-shadow: inset 0 0 0 1.5px var(--boja-voda);
  transform: translateY(-2px);
}

.btn--tiho,
.btn--tiho:link,
.btn--tiho:visited {
  background-color: var(--boja-mint-svetli);
  color: var(--boja-voda-tamna);
}

.btn--tiho:hover,
.btn--tiho:active {
  background-color: var(--boja-mint);
  color: var(--boja-bela);
}

.btn--malo {
  font-size: 1.5rem;
  padding: 1.2rem 2.4rem;
}

.margin-desno-malo {
  margin-right: 1.6rem !important;
}

.margin-dole-srednje {
  margin-bottom: 4.8rem !important;
}

/************************************/
/* LINKOVI */
/************************************/

.link:link,
.link:visited {
  display: inline-block;
  color: var(--boja-terakota);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 400ms var(--lako), border-color 400ms var(--lako);
}

.link:hover,
.link:active {
  color: var(--boja-terakota-tamna);
  border-color: transparent;
}

/************************************/
/* FOKUS — vidljiv, ali mek */
/************************************/

*:focus {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.4rem rgba(110, 143, 163, 0.4);
  border-radius: 0.4rem;
}

/************************************/
/* SCROLL REVEAL */
/************************************/

/* Klasa se navodi dvaput da bi nadjačala `transition` koju kartice imaju
   zbog hover efekta (.kartica, .prilika, .cena-kartica, .utisak). One
   animiraju samo transform i box-shadow, pa bi bez ovoga opacity skakao
   sa 0 na 1 bez prelaza — element bi se pojavio odjednom. */
.scroll-reveal,
.scroll-reveal.scroll-reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 1000ms var(--lako), transform 1000ms var(--lako);
  will-change: opacity, transform;
}

.scroll-reveal.je-otkriven {
  opacity: 1;
  transform: translateY(0);
}