/* =========================================================
   Prototype layer: loads ON TOP of css/style.css.
   Adds the About editorial carousel and the Poppins (soft)
   typography used by the design_update page. Body carries
   the .design-soft class.
   ========================================================= */

/* ---------- Typography per design ---------- */
body { --ui: "Poppins", var(--sans); }

/* A — Quiet Editorial: Poppins only on UI accents; keep Cormorant + Inter. */
/* B — Soft Modern: Poppins for headings/display + UI; Inter body. */
body.design-soft { --serif: "Poppins"; }
/* C — Bold Cinematic: Poppins everywhere. */
body.design-bold { --serif: "Poppins"; --sans: "Poppins"; }

/* Heavier display weight reads better when Poppins replaces the serif. */
body.design-soft .section__title,
body.design-bold .section__title,
body.design-soft .slide__title,
body.design-bold .slide__title { font-weight: 600; letter-spacing: -0.01em; }
body.design-soft .hero__lead,
body.design-bold .hero__lead { font-style: normal; font-weight: 400; }

/* UI accents in Poppins across all three. */
.nav a,
.hero__kicker,
.lang-switch button,
.price__label,
.slide__kicker,
.slide__toggle,
.carousel__arrow,
.carousel__dot { font-family: var(--ui); }

/* ---------- Hero shader frame ---------- */
/* Let the hero span the full page width so the shader is visible all around
   the (opaque, centered) logo; the text/image stay centered via the rules
   below. */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    max-width: none;
}
.hero__kicker,
.hero__heading,
.hero__lead { position: relative; }
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    display: block;
}
/* Translucent wash so the kicker / lead stay legible over the shader. */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, var(--hero-veil, 0.5));
}
.design-quiet { --hero-veil: 0.28; }
.design-soft  { --hero-veil: 0.26; }
.design-bold  { --hero-veil: 0.38; }
.design-bold .hero__lead { color: #0d0d0d; }

/* ---------- Carousel: shared structure ---------- */
.about-carousel { overflow: hidden; }
.carousel {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
}
.carousel__viewport {
    position: relative;
    overflow: hidden;
}
.carousel__track {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.carousel__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.carousel__slide.is-active {
    position: relative;
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s;
}
.carousel__slide.is-prev,
.carousel__slide.is-next {
    visibility: visible;
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s;
}
.carousel__slide.is-far { opacity: 0; visibility: hidden; }

/* Slide internals (shared) */
.slide__media { overflow: hidden; }
.slide__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.slide__kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0 0 0.8rem;
}
.slide__title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}
.slide__body {
    position: relative;
    overflow: hidden;
    max-height: 10.5rem;
    transition: max-height 0.5s ease;
}
.slide__body p { margin: 0 0 1rem; }
.slide__body p:last-child { margin-bottom: 0; }
.slide__body .prose__sign {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.2rem;
}
.slide__body::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.5rem;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--paper));
    pointer-events: none;
    opacity: 0; /* shown only when the body overflows (JS adds .is-clampable) */
    transition: opacity 0.25s ease;
}
.carousel__slide.is-clampable .slide__body::after { opacity: 1; }
.carousel.is-expanded .is-active .slide__body::after { opacity: 0; }

.slide__sub {
    margin: 1.3rem 0 0;
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.slide__sub img {
    width: 116px;
    height: 70px;
    flex: none;
    object-fit: cover;
    border-radius: 6px;
}
.slide__sub figcaption {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin: 0;
}

.slide__toggle {
    margin-top: 1.1rem;
    padding: 0 0 0.15rem;
    border: none;
    border-bottom: 1px solid var(--line);
    background: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.slide__toggle:hover { color: var(--ink); border-bottom-color: var(--ink); }
.slide__toggle::after { content: attr(data-more-en); }
.lang-sk .slide__toggle::after { content: attr(data-more-sk); }
.slide__toggle[aria-expanded="true"]::after { content: attr(data-less-en); }
.lang-sk .slide__toggle[aria-expanded="true"]::after { content: attr(data-less-sk); }

/* Arrows + dots (shared) */
.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.carousel__arrow:hover { background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.carousel__arrow--prev { left: 8px; }
.carousel__arrow--next { right: 8px; }

.carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.8rem;
}
.carousel__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--muted);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.carousel__dot.is-active { background: var(--ink); border-color: var(--ink); transform: scale(1.2); }

/* =========================================================
   SKIN A — Editorial slide (photo + text side by side)
   ========================================================= */
.carousel--editorial .carousel__slide {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    transform: translateX(40px);
}
.carousel--editorial .carousel__slide.is-active { transform: none; }
.carousel--editorial .carousel__slide.is-prev { transform: translateX(-60px); }
.carousel--editorial .carousel__slide.is-next { transform: translateX(60px); }
.carousel--editorial .carousel__slide:nth-child(even) .slide__media { order: 2; }
.carousel--editorial .slide__media { aspect-ratio: 4 / 3; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .carousel--editorial .carousel__slide { grid-template-columns: 1fr; gap: 1.3rem; }
    .carousel--editorial .carousel__slide:nth-child(even) .slide__media { order: 0; }
    .carousel--editorial .slide__media { aspect-ratio: 16 / 10; }
    .carousel__arrow { width: 40px; height: 40px; font-size: 1.3rem; }
}

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