/* ==========================================================================
   alestrcek.com — v2.0 "THE STUDY"
   Single shared stylesheet for the 3 main pages and the 3 /hvala/ pages.

   Concept: one continuous dark interior. The visitor steps into the study and
   never leaves it — /hvala/ and the booking moment are dark too. No dark->light
   journey. Warm black, aged leather, mahogany, candle-warm parchment text.
   Type: one classical family (EB Garamond) doing display, body and interface.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground + the barely-there section steps (black stays dominant) */
  --study-0: #0D0A08;
  --study-1: #131009;
  --study-2: #181310;
  --study-0-t: rgba(13, 10, 8, 0);   /* same hue at zero alpha, for clean gradients */

  /* Panels + rules */
  --mahogany: #2A1B12;
  --hairline: #3A2C21;

  /* The red, used sparingly */
  --leather: #722520;                /* CTA + pill background, favicon */
  --leather-deep: #571A17;           /* hover */
  --leather-bright: #A6473C;         /* red as text/ring on the study steps */
  --leather-bright-panel: #B14C40;   /* same hue, one step lighter, for use on
                                        --mahogany panels: 3.15:1 vs 2.84:1 */

  /* Text */
  --parchment: #EAE0CE;
  --muted: #B0A088;

  /* Per-surface accent, overridden inside mahogany panels */
  --accent-text: var(--leather-bright);

  /* Measure + rhythm */
  --wrap: 62rem;
  --prose: 33rem;
  --panel: 44rem;
  --section-y: clamp(4.5rem, 11vh, 8rem);
  --gutter: clamp(1.15rem, 5vw, 2.5rem);

  /* One family, three voices */
  --font: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--study-0);
  color: var(--parchment);
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, dl, dt, dd, ul, li, figure {
  margin: 0;
  padding: 0;
}

ul { list-style: none; }

a { color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives — everything sits on one centred classical axis
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.section { padding-block: var(--section-y); }

.prose {
  max-width: var(--prose);
  margin-inline: auto;
}

.prose p + p { margin-top: 1.15rem; }

/* --------------------------------------------------------------------------
   4. The three voices
   -------------------------------------------------------------------------- */

/* Interface voice — engraved label */
.label,
.hero__eyebrow,
.hero__micro,
.price,
.note-line,
.footer__line,
.lang,
.back-link,
.btn,
.sticky-cta,
.stack__row,
.booking-embed__note,
.rows dt {
  font-family: var(--font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Section label: the word between two short rules (classic book device) */
.label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: clamp(1.2rem, 3vh, 1.9rem);
}

.label::before,
.label::after {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--hairline);
}

/* Display voice */
.section__title {
  font-weight: 600;
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: 0;
  color: inherit;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.12rem, 2.2vw, 1.3rem);
  line-height: 1.65;
  max-width: var(--prose);
  margin-inline: auto;
  margin-top: clamp(1.1rem, 2.8vh, 1.6rem);
}

.btn {
  display: inline-block;
  background: var(--leather);
  color: var(--parchment);
  font-size: 0.8rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 1.15rem 2.4rem;
  border: 1px solid var(--leather);
  border-radius: 1px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn:hover {
  background: var(--leather-deep);
  border-color: var(--leather-deep);
}

/* --------------------------------------------------------------------------
   5. Hero — full-bleed library portrait, text on the lower third
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--study-0);
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(5rem, 14vh, 9rem) clamp(2rem, 5vh, 3.25rem);
}

/* Reserved portrait band: guarantees a floor of clear image above the text at
   every aspect ratio, so no glyph ever lands on his face. The hero grows past
   88vh only if the text genuinely needs more room. */
.hero::before {
  content: "";
  flex: 1 1 auto;
  min-height: 34vh;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* keeps his eyes in frame on wide crops */
}

/* Defaults to fully visible; the fade only exists when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: hero-fade 1.6s ease-out both; }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__veil {
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(to bottom, var(--study-0-t) 0%, var(--study-0) 92%);
  pointer-events: none;
}

.hero__text {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.hero__eyebrow {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.hero__title {
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.7rem);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--parchment);
  max-width: 20ch;
  margin-inline: auto;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
  text-wrap: balance;
}

.hero__sub {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.12rem, 2.2vw, 1.32rem);
  line-height: 1.6;
  color: var(--parchment);                                      /* fallback */
  color: color-mix(in srgb, var(--parchment) 90%, transparent); /* brief: 90% */
  max-width: var(--prose);
  margin-inline: auto;
  margin-top: clamp(1.2rem, 3vh, 1.8rem);
}

.hero__cta { margin-top: clamp(2rem, 4.5vh, 2.8rem); }

.hero__micro {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: clamp(1.1rem, 2.5vh, 1.5rem);
}

/* Mobile: photo as a 4:3 block up top, text below on the ground colour.
   His face is never behind text at any width. */
@media (max-width: 45rem) {
  .hero {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(2.75rem, 8vh, 4rem);
  }

  .hero__media {
    position: static;
    aspect-ratio: 4 / 3;
  }

  .hero__img { object-position: center 20%; }

  .hero__veil {
    inset: auto 0 0 0;
    height: 38%;
  }

  .hero__text { padding-top: clamp(1.75rem, 5vh, 2.5rem); }
}

/* --------------------------------------------------------------------------
   6. Obvestila — the ledger panels
   -------------------------------------------------------------------------- */
.section--recognition { background: var(--study-1); }

.intro-line {
  font-style: italic;
  font-size: clamp(1.12rem, 2.2vw, 1.3rem);
  line-height: 1.65;
  max-width: var(--prose);
  margin-inline: auto;
}

.stack {
  max-width: var(--panel);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.stack__row {
  background: var(--mahogany);
  border: 1px solid var(--hairline);
  padding: clamp(1.15rem, 3.2vw, 1.5rem) clamp(1rem, 4vw, 1.75rem);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--parchment);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* rows share their borders instead of doubling them */
.stack__row + .stack__row { margin-top: -1px; }

.stack__row.is-in {
  opacity: 1;
  transform: none;
}

.closing {
  max-width: var(--prose);
  margin-inline: auto;
  margin-top: clamp(2.2rem, 5.5vh, 3.2rem);
}

.closing p {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.6;
  color: var(--parchment);
}

.closing p + p {
  margin-top: 1rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   7. Kot
   -------------------------------------------------------------------------- */
.section--frame {
  background: var(--study-2);
  padding-bottom: calc(var(--section-y) * 0.6);
}

.frame__lead {
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  color: var(--parchment);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

.frame__body {
  max-width: var(--prose);
  margin-inline: auto;
  margin-top: clamp(1.3rem, 3.2vh, 1.9rem);
}

.frame__body p + p { margin-top: 1.15rem; }

.frame__q {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.9vw, 1.85rem);
  line-height: 1.35;
  color: var(--parchment);
  margin-top: clamp(1.8rem, 4vh, 2.5rem);
}

/* --------------------------------------------------------------------------
   8. Uvodni klic — the private card (the one classical flourish)
   -------------------------------------------------------------------------- */
.section--product { background: var(--study-2); }

.card {
  position: relative;
  max-width: var(--panel);
  margin-inline: auto;
  background: var(--mahogany);
  border: 1px solid var(--hairline);
  padding: clamp(2.25rem, 6vw, 3.75rem) clamp(1.35rem, 5vw, 3rem);
  /* the price + any ring inside the panel need the lighter step */
  --accent-text: var(--leather-bright-panel);
}

/* second rule, inset 6px — double-rule frame */
.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.card > * { position: relative; }

.rows {
  max-width: 32rem;
  margin-inline: auto;
  margin-top: clamp(1.8rem, 4.5vh, 2.6rem);
}

.rows__row {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(1.05rem, 3vw, 1.4rem);
}

.rows__row:last-child { border-bottom: 1px solid var(--hairline); }

.rows dt {
  display: inline;
  font-size: 0.82rem;
  color: var(--parchment);
}

.rows dd {
  display: inline;
  font-weight: 400;
  line-height: 1.7;
  color: inherit;
}

.filter-line {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: var(--prose);
  margin-inline: auto;
  margin-top: clamp(1.6rem, 3.8vh, 2.2rem);
}

.price {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: clamp(1.4rem, 3.2vh, 2rem);
}

/* 1.2rem @600 = 19.2px semibold, clearing the WCAG large-text threshold
   (18.66px bold), so --leather-bright-panel on --mahogany (3.15:1) passes 3:1. */
.price__amount {
  color: var(--accent-text);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   9. Kdo sem — centred prose, no panel
   -------------------------------------------------------------------------- */
.section--about { background: var(--study-1); }

/* --------------------------------------------------------------------------
   10. Kako poteka — steps, second CTA
   -------------------------------------------------------------------------- */
.section--booking { background: var(--study-0); }

.steps {
  max-width: var(--panel);
  margin-inline: auto;
  margin-top: clamp(1.9rem, 4.5vh, 2.8rem);
}

.section-cta { margin-top: clamp(2rem, 5vh, 3rem); }

.note-line {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: clamp(1.2rem, 3vh, 1.7rem);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--study-0);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 6vh, 3.5rem);
}

.footer__line {
  font-size: 0.72rem;
  line-height: 2;
  color: var(--muted);
}

.footer__line a,
.lang a,
.back-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.footer__line a:hover,
.lang a:hover,
.back-link:hover {
  color: var(--parchment);
  border-bottom-color: currentColor;
}

.lang {
  margin-top: clamp(1.2rem, 3.5vh, 1.8rem);
  font-size: 0.72rem;
  color: var(--muted);
}

.lang a[aria-current] { color: var(--parchment); }

/* --------------------------------------------------------------------------
   12. /hvala/ — same study, you simply sat down
   -------------------------------------------------------------------------- */
.page-thanks {
  background: var(--study-0);
  color: var(--parchment);
}

.thanks { padding-block: clamp(4rem, 12vh, 7rem) clamp(3.5rem, 10vh, 6rem); }

.thanks__title {
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

.booking-embed {
  position: relative;
  min-height: 420px;
  max-width: var(--panel);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: 2.5rem;
  background: var(--mahogany);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  --accent-text: var(--leather-bright-panel);
}

.booking-embed::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.booking-embed__note {
  position: relative;
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--muted);
  text-align: center;
}

.back-link {
  display: inline-block;
  margin-top: clamp(2rem, 5.5vh, 3rem);
  font-size: 0.72rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   13. Sticky mini-CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.6rem);
  bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 50;
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: 1px;
  background: var(--leather);
  border: 1px solid var(--leather);
  color: var(--parchment);
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
              background-color 0.25s ease;
}

.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sticky-cta:hover {
  background: var(--leather-deep);
  border-color: var(--leather-deep);
}

/* --------------------------------------------------------------------------
   14. Small screens (down to 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .label::before,
  .label::after { width: 1.5rem; }

  .label { gap: 0.7rem; }

  .card { padding-inline: 1.15rem; }

  .stack__row { padding-inline: 1rem; }
}

/* --------------------------------------------------------------------------
   15. Reduced motion — no animation at all
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .stack__row {
    opacity: 1;
    transform: none;
  }

  .sticky-cta { transform: none; }
}