/* Dočasná stránka „web sa pripravuje" — sesterský vzhľad k reneagroup.com
   (rovnaké tokeny, Playfair Display + Barlow, self-hosted). */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/playfair-display-400.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/playfair-display-400-italic.woff2') format('woff2'); }
/* Playfairov & je príliš ozdobný — ako na reneagroup.com ho nahrádza Cormorant Garamond */
@font-face { font-family: 'Renea Amp'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/cormorant-garamond-500-amp.woff2') format('woff2'); unicode-range: U+0026; size-adjust: 112%; }
@font-face { font-family: 'Renea Amp'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/cormorant-garamond-500-amp.woff2') format('woff2'); unicode-range: U+0026; size-adjust: 112%; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/barlow-regular.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/fonts/barlow-medium.woff2') format('woff2'); }

/* ── Tokens ── */
:root {
    --paper: #F4F1E9;           /* papier ako reneagroup.com (zámerne, sesterský web) */
    --ink: #15160F;
    --ink-soft: #55574A;
    --accent: #6B7050;          /* olivová z reneagroup.com — len plochy a linky */
    --accent-ink: #5E6345;      /* akcent pre text (5,6:1 na papieri) */
    --rule: rgba(21, 22, 15, .12);
    --photo-focus: 50% 15%;     /* ohnisko fotky (object-position) */

    --font-heading: 'Renea Amp', 'Playfair Display', Georgia, serif;
    --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-display: clamp(2.6rem, 1.6rem + 4vw, 4.75rem);
    --fs-lead: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
    --fs-body: 1.0625rem;
    --fs-small: .875rem;

    --pad-x: clamp(1.5rem, 1rem + 3vw, 4.5rem);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--fs-body)/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--ink); }
a {
    color: inherit;
    text-decoration-color: var(--accent);
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color .2s, color .2s;
}
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }

/* ── Rozloženie: text vľavo, fotka vpravo (mobil: fotka hore) ── */
.page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;
}
.page__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(2rem, 5vh, 3.5rem) var(--pad-x);
}
.page__media { position: relative; margin: 0; overflow: hidden; background: var(--accent); }
.page__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--photo-focus);
}

/* ── Hlavička: doména + oznam, že web sa pripravuje (na prvej obrazovke všade) ── */
.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}
.brand {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: .02em;
}
.brand__dot {
    display: inline-block;
    width: .5rem; height: .5rem;
    margin-right: .55rem;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: .08em;
}

/* ── Obsah ── */
.intro { max-width: 34rem; }
.title {
    margin: 0;
    font: 400 var(--fs-display)/1.04 var(--font-heading);
    letter-spacing: -.01em;
    text-wrap: balance;
}
.subtitle {
    margin: .9rem 0 0;
    color: var(--ink-soft);
    text-wrap: balance;
}
.rule {
    width: 4rem; height: 1px;
    margin: 2rem 0 1.75rem;
    border: 0;
    background: var(--accent);
}
.lead {
    margin: 0 0 .75rem;
    font: italic 400 var(--fs-lead)/1.35 var(--font-heading);
    text-wrap: pretty;
}
.text { margin: 0; color: var(--ink-soft); text-wrap: pretty; }

.status {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}
.notice {
    margin: 0;
    padding: .3rem .85rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent-ink);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.4;
}
.status p { margin: 0; text-wrap: pretty; }

/* ── Pätička ── */
.foot {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-small);
}

/* ── Jeden moment pri načítaní: fotka sa odhalí od švu (len bez reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
    .page__media { animation: unveil 1.6s var(--ease-out) .1s both; }
    .page__media img { animation: settle 2.4s var(--ease-out) .1s both; }
}
@keyframes unveil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes settle { from { scale: 1.08; } }

/* ── Mobil: fotka hore, odhalí sa zhora ── */
@media (max-width: 860px) {
    .page { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .page__media { order: -1; height: 32vh; height: 32svh; min-height: 200px; animation-name: unveil-down; }
    .page__text { gap: 2.5rem; padding-top: 1.75rem; padding-bottom: 2rem; }
}
@keyframes unveil-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }