/* ==========================================================================
   Početna "KAM IDEŠ?" — split entry screen

   Mjereno iz klijentovih mockupa: desktop 1920x1035 (1x),
   mobile 750x1622 (= 375x811 @2x). Natpisi su izjednačeni.

   Dva pravila drže dizajn ispravnim na SVIM rezolucijama:

   1. Naslov je vezan na ŠAV, ne na postotak visine. "KAM" sjeda odozgo
      na šav, "IDEŠ?" odozdo, s razmakom u `em` — pa razmak skalira
      zajedno s fontom. Tako KAM uvijek ostaje na bordo podlozi,
      a IDEŠ? uvijek na zlatnoj.

   2. Sve veličine idu kroz min(vw, svh). Na omjeru dizajna obje
      vrijednosti daju isto, pa mockup ostaje pogođen u piksel; na
      niskim i širokim ekranima (tableti, landscape) visina preuzima
      i sprječava da sadržaj preraste polovicu.
   ========================================================================== */

:root {
  --kc-red:        #82151B;
  --kc-red-dark:   #6E1117;
  --kc-gold:       #C59F58;
  --kc-gold-dark:  #B08744;
  --kc-cream:      #E5CFAB;
  --kc-ink:        #272727;

  --kc-display: "Arial Black", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --kc-text:    "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* Metrike Arial Blacka uz line-height:1 — lijepljenje naslova na šav.
     cap-top je 0.1305em ispod vrha kutije, baseline 0.1535em iznad dna. */
  --kc-seam-above: .066em;   /* KAM: dno kutije iznad šava */
  --kc-seam-below: .095em;   /* IDEŠ?: vrh kutije ispod šava.
                                Bira se tako da vidljivi razmak bude jednak
                                onome iznad: KAM baseline je .2195em iznad
                                šava, IDEŠ? cap-top .2255em ispod. Kvačica na
                                Š ostaje .0515em ispod šava na svakoj veličini. */
}

html.kc-page,
html.kc-page body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: var(--kc-red);
}
/* Salient postavlja body na flex column; ovdje to ne treba. */
html.kc-page body { display: block; -webkit-font-smoothing: antialiased; }

.kc-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;

  /* --- desktop skala (baza 1920x1035) --- */
  --kc-title:  clamp(38px,  5.2083vw, 130px);
  --kc-cap:    clamp(24px,  3.5938vw,  88px);
  --kc-cap-r:  clamp(18px,  2.7080vw,  66px);   /* "U VARAŽDINU" je u dizajnu manji */
  --kc-sub:    clamp(15px,  2.2800vw,  56px);
  --kc-logo-k: clamp(200px, 23.646vw, 560px);
  --kc-logo-c: clamp(199px, 23.542vw, 556px);
  --kc-gap-1:  clamp(14px,  1.875vw,   46px);
  --kc-gap-2:  clamp(8px,   1.042vw,   26px);
}
@supports (height: 1svh) {
  .kc-split {
    --kc-title:  clamp(38px,  min(5.2083vw, 9.662svh), 130px);
    --kc-cap:    clamp(24px,  min(3.5938vw, 6.667svh),  88px);
    --kc-cap-r:  clamp(18px,  min(2.7080vw, 5.024svh),  66px);
    --kc-sub:    clamp(15px,  min(2.2800vw, 4.230svh),  56px);
    --kc-logo-k: clamp(200px, min(23.646vw, 43.86svh), 560px);
    --kc-logo-c: clamp(199px, min(23.542vw, 43.67svh), 556px);
    --kc-gap-1:  clamp(14px,  min(1.875vw,  3.478svh),  46px);
    --kc-gap-2:  clamp(8px,   min(1.042vw,  1.932svh),  26px);
  }
}

/* --------------------------------------------------------- polovice ---- */
.kc-half {
  position: relative; display: block;
  text-decoration: none; overflow: hidden;
  transition: background-color .5s ease;
}
.kc-half--left  { background: var(--kc-red); }
.kc-half--right { background: var(--kc-gold); }

.kc-half__inner {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: 0.952fr auto 1fr;
  justify-items: center;
  padding: 0 4vw;
  box-sizing: border-box;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------- logotipi ---- */
.kc-logo {
  grid-row: 2; align-self: center; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.kc-logo--kerekesh {
  width: var(--kc-logo-k);
  aspect-ratio: 1052 / 482;
  background: var(--kc-cream);
  -webkit-mask-image: url("kerekesh-logo.png");
          mask-image: url("kerekesh-logo.png");
}
.kc-logo--kc {
  width: var(--kc-logo-c);
  aspect-ratio: 671 / 491;
  background: var(--kc-ink);
  -webkit-mask-image: url("kc-logo.svg");
          mask-image: url("kc-logo.svg");
}

/* --------------------------------------------------------- natpisi ----- */
.kc-caps {
  grid-row: 3; align-self: start;
  padding-top: var(--kc-gap-1);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.kc-cap {
  font-family: var(--kc-text); font-weight: 500;
  font-size: var(--kc-cap);
  line-height: 1; letter-spacing: 0; white-space: nowrap;
}
.kc-sub {
  font-family: var(--kc-text); font-weight: 600;
  font-size: var(--kc-sub);
  line-height: 1; letter-spacing: 0;
  margin-top: var(--kc-gap-2); white-space: nowrap;
}
.kc-half--left  .kc-cap,
.kc-half--left  .kc-sub { color: var(--kc-cream); }
.kc-half--right .kc-cap,
.kc-half--right .kc-sub { color: var(--kc-ink); }
/* U dizajnu je desni natpis manji od lijevog (cap 38 : 49 = 0,776). */
.kc-half--right .kc-cap { font-size: var(--kc-cap-r); }

/* --------------------------------------------------------- naslov ------ */
.kc-title {
  position: absolute;
  top: 8.208%;
  left: 0; right: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  font-family: var(--kc-display);
  font-weight: 400;
  font-size: var(--kc-title);
  line-height: 1; letter-spacing: 0;
  pointer-events: none; z-index: 2;
}
.kc-title span { display: block; }
/* .37em / .30em kompenziraju side-bearing -> ink razmak 44px / 38px */
.kc-title__kam  { text-align: right; padding-right: .37em; color: var(--kc-gold); }
.kc-title__ides { text-align: left;  padding-left:  .30em; color: var(--kc-red); }

/* --------------------------------------------------------- stanja ------ */
@media (hover: hover) {
  .kc-half--left:hover  { background: var(--kc-red-dark); }
  .kc-half--right:hover { background: var(--kc-gold-dark); }
  .kc-half:hover .kc-half__inner { transform: scale(1.025); }
}
.kc-half:focus-visible { outline: none; }
.kc-half:focus-visible .kc-half__inner { outline: 2px solid; outline-offset: -6px; }
.kc-half--left:focus-visible  .kc-half__inner { outline-color: var(--kc-cream); }
.kc-half--right:focus-visible .kc-half__inner { outline-color: var(--kc-ink); }
.kc-half--left:active  { background: var(--kc-red-dark); }
.kc-half--right:active { background: var(--kc-gold-dark); }

/* ========================================================== mobile ====== */
@media (max-width: 899px) {
  .kc-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;

    --kc-title:  clamp(32px,  16.71vw, 110px);
    --kc-cap:    clamp(17px,  7.790vw,  53px);
    --kc-cap-r:  clamp(13px,  6.050vw,  41px);
    --kc-sub:    clamp(11px,  4.960vw,  34px);
    --kc-logo-k: clamp(126px, 50.14vw, 356px);
    --kc-logo-c: clamp(126px, 49.99vw, 355px);
    --kc-gap-1:  clamp(6px,   3.990vw,  28px);
    --kc-gap-2:  clamp(3px,   2.300vw,  16px);
  }

  .kc-half__inner {
    grid-template-rows: none;
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 7vw;
  }
  /* Obje polovice centrirane simetrično. Donja nema pomak prema dolje:
     "IDEŠ?" sam drži vizualnu težinu vrha, pa centriranje daje ravnotežu
     na svakoj visini ekrana (na tabletu je nudge iz mockupa bio prenizak). */

  /* u flex-columnu se os okreće: align-self:start značilo bi LIJEVO */
  .kc-caps { align-self: center; }

  /* Naslov se lijepi na šav umjesto da visi na postotku visine. */
  .kc-title { top: 0; bottom: 0; display: block; }
  .kc-title__kam,
  .kc-title__ides {
    position: absolute; left: 0; right: 0;
    text-align: center; padding: 0;
  }
  .kc-title__kam  { bottom: 50%; margin-bottom: var(--kc-seam-above); }
  .kc-title__ides { top: 50%;    margin-top:    var(--kc-seam-below); }

  @media (hover: hover) {
    .kc-half:hover .kc-half__inner { transform: none; }
  }
}
@supports (height: 1svh) {
  @media (max-width: 899px) {
    /* svh koeficijenti su 20% veci od omjera dizajna. Na 375x811 i dalje
       pobjeduje vw (dizajn ostaje netaknut), a na niskim ekranima visina i
       dalje stiti od preljeva — ali na tabletima, koji su proporcionalno
       mnogo siri, sadrzaj sada smije narasti umjesto da pluta u praznini. */
    .kc-split {
      --kc-title:  clamp(32px,  min(16.71vw, 9.274svh), 110px);
      --kc-cap:    clamp(17px,  min(7.790vw, 4.322svh),  53px);
      --kc-cap-r:  clamp(13px,  min(6.050vw, 3.357svh),  41px);
      --kc-sub:    clamp(11px,  min(4.960vw, 2.752svh),  34px);
      --kc-logo-k: clamp(126px, min(50.14vw, 27.821svh), 356px);
      --kc-logo-c: clamp(126px, min(49.99vw, 27.738svh), 355px);
      --kc-gap-1:  clamp(6px,   min(3.990vw, 2.213svh),  28px);
      --kc-gap-2:  clamp(3px,   min(2.300vw, 1.277svh),  16px);
    }
  }
}

/* Landscape i niski prozori: polovica je plitka, pa "IDEŠ?" i logotip nemaju
   mjesta u punoj velicini. Snizavamo svh koeficijente; vw vrijednosti ostaju
   iste pa se portret telefoni i tableti ne mijenjaju. */
@media (max-width: 899px) and (max-height: 700px) {
  .kc-split {
    --kc-title:  clamp(24px, min(16.71vw, 7.260svh), 110px);
    --kc-cap:    clamp(13px, min(7.790vw, 3.380svh),  53px);
    --kc-cap-r:  clamp(11px, min(6.050vw, 2.810svh),  41px);
    --kc-sub:    clamp(9px,  min(4.960vw, 2.250svh),  34px);
    --kc-logo-k: clamp(90px, min(50.14vw, 21.770svh), 356px);
    --kc-logo-c: clamp(90px, min(49.99vw, 21.710svh), 355px);
    --kc-gap-1:  clamp(4px,  min(3.990vw, 1.730svh),  28px);
    --kc-gap-2:  clamp(2px,  min(2.300vw, 1.000svh),  16px);
  }
}

/* --------------------------------------------------------- ulaz --------- */
@keyframes kcWipeL { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes kcWipeR { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes kcRise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kcSeamL { from { opacity: 0; transform: translateX(38px); }  to { opacity: 1; transform: none; } }
@keyframes kcSeamR { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }

.kc-half--left  { animation: kcWipeL .9s cubic-bezier(.7,0,.2,1) both; }
.kc-half--right { animation: kcWipeR .9s cubic-bezier(.7,0,.2,1) both; }
.kc-logo        { animation: kcRise .9s cubic-bezier(.2,.7,.2,1) .50s both; }
.kc-caps        { animation: kcRise .9s cubic-bezier(.2,.7,.2,1) .68s both; }
.kc-title__kam  { animation: kcSeamL 1s cubic-bezier(.2,.7,.2,1) .75s both; }
.kc-title__ides { animation: kcSeamR 1s cubic-bezier(.2,.7,.2,1) .75s both; }

@media (max-width: 899px) {
  @keyframes kcWipeT { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes kcWipeB { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  .kc-half--left  { animation-name: kcWipeT; }
  .kc-half--right { animation-name: kcWipeB; }
  .kc-title__kam  { animation: kcRise .9s cubic-bezier(.2,.7,.2,1) .80s both; }
  .kc-title__ides { animation: kcRise .9s cubic-bezier(.2,.7,.2,1) .80s both; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-half, .kc-logo, .kc-caps, .kc-title__kam, .kc-title__ides { animation: none !important; }
  .kc-half__inner { transition: none; }
}