/* ---------------------------------------------------------------
   cut(e) — dark luxe
   --------------------------------------------------------------- */

:root {
  --ink:        #0B0B0C;
  --ink-panel:  #131315;
  --ink-line:   rgba(231, 195, 132, .20);
  --cream:      #F2EFE9;
  --muted:      #ABA69C;   /* 7.6:1 on --ink */
  --gold:       #E7C384;   /* 11:1 on --ink */
  --gold-soft:  rgba(231, 195, 132, .55);

  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --pad: clamp(1.375rem, 6vw, 4rem);

  /* --- SLIKA / HERO ---------------------------------------------
     Zamenjava slike: shrani jo pod NOVIM imenom (npr. hero-2026-11.jpg)
     in popravi poti v index.html — zaradi Cloudflare predpomnilnika.
     Velikost in razmerje stranic sta poljubna — CSS sliko vedno obreže
     na pravo višino.
     Po zamenjavi po potrebi nastavi še spodnji dve vrednosti:

     --hero-focus   kateri del slike ostane viden pri obrezovanju
                    (npr. center / 50% 30% / 70% center)
     --hero-filter  koliko se slika potemni, da je zlato besedilo
                    še berljivo. Svetlejša slika = nižji brightness.
     -------------------------------------------------------------- */
  --hero-focus:      50% 42%;      /* telefon / ozki zasloni */
  --hero-focus-wide: 68% center;  /* desktop (visok, ozek izrez) */
  --hero-filter:     saturate(.9) contrast(1.02) brightness(.92);

  /* --media-w      = sirina slikovnega panela (SAMO ozadje)
     --content-inset = koliko prostora na desni pusti vsebina
     Namenoma locena: sirina ozadja NE sme vplivati na sirino vsebine. */
  --media-w:      75vw;
  --content-inset: 34vw;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, p, dl, dd, ul { margin: 0; }
ul { list-style: none; padding: 0; }

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

/* ---------------------------------------------------------------
   Stage — photo dissolving into black, wordmark rising out of it
   --------------------------------------------------------------- */

.stage__media {
  position: relative;
  isolation: isolate;
}

.stage__media img {
  width: 100%;
  height: clamp(150px, 26svh, 250px);
  object-fit: cover;
  object-position: var(--hero-focus);
  filter: var(--hero-filter);
}

.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 72% 26%, rgba(231, 195, 132, .13), transparent 62%),
    linear-gradient(to bottom,
      rgba(11, 11, 12, .55) 0%,
      rgba(11, 11, 12, .22) 26%,
      rgba(11, 11, 12, .62) 66%,
      rgba(11, 11, 12, .94) 88%,
      var(--ink) 100%);
}

.stage__intro {
  position: relative;
  z-index: 1;
  margin-top: -2rem;
  padding: 0 var(--pad) clamp(1.25rem, 4vw, 2rem);
  text-align: center;
}

.eyebrow {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--gold);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.25rem, 19vw, 6rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin: .1em 0 .06em;
  color: var(--cream);
}

.wordmark span { color: var(--gold); }

.lede {
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: .06em;
}

.lede i {
  font-style: normal;
  color: var(--gold-soft);
  padding: 0 .18em;
}

/* Call to action ------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  padding: .85rem 1.9rem .85rem 1.5rem;
  min-height: 60px;
  background: linear-gradient(160deg, #F0D4A0, var(--gold) 55%, #D4A85F);
  color: #15100A;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 14px 34px -18px rgba(231, 195, 132, .85);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(231, 195, 132, .95); }
.cta:active { transform: translateY(0); }

.cta__icon { width: 1.35rem; height: 1.35rem; display: block; }
.cta__icon svg { width: 100%; height: 100%; fill: currentColor; }

.cta__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }

.cta__label {
  font-size: .65rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .82;
}

.cta__number {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Details
   --------------------------------------------------------------- */

.details {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  padding: 0 var(--pad) clamp(1.5rem, 5vw, 2.5rem);
  max-width: 62rem;
  margin-inline: auto;
}

.card {
  position: relative;
  background: var(--ink-panel);
  border: 1px solid var(--ink-line);
  padding: clamp(1.5rem, 5vw, 2.25rem);
}

.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.5rem, 5vw, 2.25rem);
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
}

.card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: .01em;
  margin-bottom: 1.1rem;
  color: var(--cream);
}

.list li + li { border-top: 1px solid rgba(242, 239, 233, .09); }

.row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
  padding: .7rem 0;
  text-decoration: none;
  color: var(--cream);
  transition: color .2s ease;
}

.row:hover { color: var(--gold); }

.row__text {
  font-size: 1.15rem;
  letter-spacing: .03em;
  line-height: 1.35;
}

/* Telefonska je glavni podatek, zato v zlati barvi in vecja od naslova. */
.list li:first-child .row__text {
  font-size: 1.45rem;
  letter-spacing: .05em;
  color: var(--gold);
}

.icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  color: var(--gold);
}

.icon svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* Hours --------------------------------------------------------- */

.hours { display: block; }

.hours > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
}

.hours > div + div { border-top: 1px solid rgba(242, 239, 233, .09); }

.hours dt {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hours dd {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.note {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-line);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  padding: 1.25rem var(--pad) 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(242, 239, 233, .07);
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .1em;
}

.foot__mark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--cream);
}

.foot__mark span { color: var(--gold); }

/* ---------------------------------------------------------------
   Desktop
   --------------------------------------------------------------- */

@media (min-width: 880px) {

  /* Slika je samo ozadje: pritrjen panel na desni, cez celo visino zaslona.
     Vsa vsebina (znamka, telefon, kontakt, delovni cas) je levo in mora biti
     vidna brez drsenja. */

  main {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: var(--content-inset);
  }

  .stage__media {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--media-w);
    height: 100svh;
    z-index: 0;
  }

  .stage__media img {
    height: 100%;
    object-position: var(--hero-focus-wide);
  }

  .stage__scrim {
    background:
      radial-gradient(75% 55% at 60% 28%, rgba(231, 195, 132, .12), transparent 68%),
      linear-gradient(to right,
        var(--ink) 0%,
        rgba(11, 11, 12, .78) 6%,
        rgba(11, 11, 12, .24) 18%,
        rgba(11, 11, 12, .04) 38%,
        rgba(11, 11, 12, 0) 62%,
        rgba(11, 11, 12, .18) 100%),
      linear-gradient(to bottom, rgba(11, 11, 12, .40), transparent 28%, rgba(11, 11, 12, .40));
  }

  .stage__intro {
    margin-top: 0;
    padding: clamp(1.5rem, 4vh, 2.75rem) clamp(2rem, 4vw, 3.5rem)
             clamp(1.25rem, 3vh, 2rem) clamp(3rem, 6vw, 6rem);
    text-align: left;
  }

  /* brass hairline running down the left of the brand block */
  .stage__intro::before {
    content: "";
    position: absolute;
    left: clamp(1.5rem, 3vw, 3rem);
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--gold-soft) 28%, var(--gold-soft) 72%, transparent);
  }

  .wordmark { font-size: clamp(4.5rem, 7.5vw, 7.5rem); }

  .lede { font-size: 1.05rem; }

  /* Kartici imata neprosojno ozadje, zato lahko segata cez rob slike
     in tako pridobimo sirino za podatke. */
  .details {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 0 0 0 clamp(3rem, 6vw, 6rem);
    /* na zelo sirokih zaslonih se kartici ne razlezeta cez vso sirino */
    max-width: 70rem;
    margin-inline: 0 calc(var(--content-inset) * -0.5);
  }

  .card { padding: clamp(1.25rem, 2.6vh, 1.9rem) clamp(1.5rem, 2vw, 2rem); }

  .foot {
    padding: clamp(1rem, 2.5vh, 1.6rem) clamp(2rem, 4vw, 3.5rem)
             clamp(1rem, 2vh, 1.4rem) clamp(3rem, 6vw, 6rem);
    text-align: left;
    border-top: none;
  }
}

/* Zelo nizki zasloni (npr. 1280x720): se malo stisnemo, da vse ostane vidno. */
@media (min-width: 880px) and (max-height: 760px) {
  .wordmark { font-size: clamp(3.5rem, 5.5vw, 5rem); }
  .cta { transform: scale(.94); transform-origin: left center; }
}

/* ---------------------------------------------------------------
   Motion
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cta, .row { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .stage__intro > * {
    animation: rise .8s cubic-bezier(.22, .68, .32, 1) backwards;
  }
  .eyebrow   { animation-delay: .05s; }
  .wordmark  { animation-delay: .12s; }
  .lede      { animation-delay: .22s; }
  .cta       { animation-delay: .32s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}