/* ============================================================
   ЛОКАЛ — страница-инструмент «Закат над Волгой» (/zakat).
   Палитра и переменные — из index.css. Мобайл-фёрст: турист на телефоне.
   Веб-шрифты не добавляем; serif — системный (как в журнале), no deps.
   ============================================================ */

.zk {
    --font-serif: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Cambria', Georgia, serif;
    --ink: #211f1c;
    --ink-soft: #4a463f;
    --rule: rgba(33, 31, 28, 0.13);
    display: block;
    background: var(--color-beige-light);
}

/* ---------- Герой-ответ ---------- */
.zk-hero {
    position: relative;
    overflow: hidden;
    padding: 132px 0 var(--space-xl);
    /* мягкое закатное небо в палитре бренда, без китча */
    background:
        radial-gradient(120% 90% at 50% 118%, rgba(218, 41, 28, 0.16) 0%, rgba(218, 41, 28, 0) 60%),
        linear-gradient(180deg, var(--color-beige) 0%, var(--color-beige-light) 70%);
}
.zk-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 44rem;
}

.zk-readout { position: relative; }

/* Дуга суточного пути солнца — отдельная полоса ПОД ответом (после пилюль,
   перед управлением): солнце всегда на видимой дуге, цифры не перекрывает. */
.zk-arc {
    display: block;
    width: min(560px, 100%);
    height: auto;
    margin: var(--space-sm) auto 0;
    overflow: visible;
    pointer-events: none;
    opacity: 0.9;
}
.zk-arc-track {
    stroke: var(--color-beige-dark);
    stroke-width: 2;
    stroke-dasharray: 2 9;
    stroke-linecap: round;
}
.zk-arc-horizon { stroke: var(--color-beige-dark); stroke-width: 1.2; }
.zk-sun { transition: transform 1.1s var(--ease-out); }
.zk-sun-core { fill: var(--color-red); }
.zk-hero[data-state="now"] .zk-sun-glow,
.zk-hero[data-state="soon"] .zk-sun-glow { animation: zk-breathe 4s var(--ease-in-out) infinite; }
@keyframes zk-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.zk-eyebrow {
    display: inline-block;
    color: var(--color-red);
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    margin-bottom: var(--space-sm);
}
.zk-day {
    color: var(--color-gray);
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    margin: 0 0 0.2rem;
}
.zk-time {
    font-family: var(--font-display);
    font-size: clamp(5rem, 22vw, 11rem);
    line-height: 0.82;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin: 0;
}
.zk-count {
    margin: 0.5rem 0 0;
    color: var(--color-gray);
    letter-spacing: 0.04em;
    font-size: 0.92rem;
}
.zk-hero[data-state="soon"] .zk-count,
.zk-hero[data-state="now"] .zk-count { color: var(--color-red); }

/* Золотой / синий час */
.zk-windows {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}
.zk-window {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(250, 250, 248, 0.7);
}
.zk-window-label { font-size: 0.56rem; letter-spacing: 0.08em; }
.zk-window--gold .zk-window-label { color: #b8861b; }
.zk-window--blue .zk-window-label { color: #3a6ea5; }
.zk-window-val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); }

/* Скруббер + действия */
.zk-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    position: relative;
    z-index: 1;
}
.zk-controls[hidden] { display: none; }
.zk-date {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.zk-step {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ink);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.zk-step:hover, .zk-step:focus-visible { border-color: var(--color-red); outline: none; }
.zk-date-field { display: inline-flex; flex-direction: column; gap: 0.2rem; }
.zk-date-cap { font-size: 0.6rem; letter-spacing: 0.1em; text-align: left; }
.zk-date-input {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--ink);
}
.zk-date-input:focus-visible { border-color: var(--color-red); outline: none; }
.zk-today {
    align-self: flex-end;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-red);
    border-radius: var(--radius-sm);
    color: var(--color-red);
    font-size: 0.66rem;
    background: transparent;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.zk-today:hover, .zk-today:focus-visible { background: var(--color-red); color: var(--color-white); outline: none; }
.zk-today[hidden] { display: none; }

.zk-actions { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.zk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.zk-btn:hover, .zk-btn:focus-visible { background: var(--ink); color: var(--color-beige-light); outline: none; }
.zk-btn svg { flex-shrink: 0; }

/* Меню «Напомнить»: Google Календарь / .ics */
.zk-remind { position: relative; }
.zk-remind-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.35rem;
    background: var(--color-beige-light);
    border: 1px solid var(--color-beige-dark);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 36px rgba(26, 26, 26, 0.18);
}
.zk-remind-menu[hidden] { display: none; }
.zk-remind-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.zk-remind-item:hover, .zk-remind-item:focus-visible { background: rgba(218, 41, 28, 0.08); color: var(--color-red); outline: none; }

/* ---------- Тело ---------- */
.zk-body { max-width: 52rem; }
.zk-section {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--rule);
}
.zk-section:first-child { border-top: none; }
.zk-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-red);
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    margin-bottom: var(--space-sm);
}
.zk-kicker::before { content: ""; width: 1.6rem; height: 1px; background: var(--color-red); opacity: 0.7; }
.zk-h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 var(--space-sm);
}

/* Видовая точка + карта */
.zk-spot-hint {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 var(--space-md);
    max-width: 38rem;
}

/* Три видовые точки по удалённости — выбор основной точки/карты */
.zk-spots3 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-md); }
.zk-spot-card {
    flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px;
    text-align: left; padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--color-beige-dark); border-radius: var(--radius-md);
    background: var(--color-white); color: var(--color-black); cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.zk-spot-card:hover { border-color: var(--color-black); }
.zk-spot-card.is-active { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.zk-spot-card-band { font-size: 0.7rem; color: var(--color-gray); }
.zk-spot-card.is-active .zk-spot-card-band { color: var(--color-beige-dark); }
.zk-spot-card-name { font-weight: 600; font-size: 0.95rem; }
.zk-spot-card:focus-visible { outline: 2.5px solid var(--color-red); outline-offset: 2px; }
.zk-map-frame {
    position: relative;
    width: 100%;
    min-height: 220px;            /* fallback, если aspect-ratio не поддержан (старый Safari) */
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--color-beige-dark);
}
.zk-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Плейсхолдер карты (click-to-load) */
.zk-map-load {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, var(--color-beige) 0%, var(--color-beige-dark) 100%);
    color: var(--ink-soft);
    border: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}
.zk-map-load:hover, .zk-map-load:focus-visible { color: var(--color-red); outline: none; }
.zk-map-load .mono { font-size: 0.72rem; letter-spacing: 0.08em; }
.zk-map-link {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--color-red);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.zk-map-link:hover, .zk-map-link:focus-visible { border-color: var(--color-red); outline: none; }

/* Золотой / синий час — объяснение */
.zk-explain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}
.zk-explain-card {
    padding: var(--space-md);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.45);
}
.zk-explain-tag {
    display: inline-block;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}
.zk-explain-card:nth-child(1) .zk-explain-tag { color: #b8861b; }
.zk-explain-card:nth-child(2) .zk-explain-tag { color: #3a6ea5; }
.zk-explain-card p {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.62;
    color: var(--ink-soft);
    margin: 0;
}

/* Прогноз на 7 дней */
.zk-table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); }
.zk-table thead th {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray);
    text-align: left;
    font-weight: 400;
    padding: 0 0 0.6rem;
    border-bottom: 1px solid var(--rule);
}
.zk-table thead th:not(:first-child) { text-align: right; }
.zk-table tbody td { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.zk-table tbody td:not(:first-child) { text-align: right; }
.zk-table tr.is-today td { background: rgba(218, 41, 28, 0.05); }
.zk-table-day { display: flex; align-items: baseline; gap: 0.55rem; }
.zk-table-wd { color: var(--color-gray); font-size: 0.72rem; min-width: 1.8rem; }
.zk-table-date { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); }
.zk-table-badge {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: var(--color-red);
    border: 1px solid var(--color-red);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}
.zk-table-golden { color: var(--ink-soft); font-size: 0.9rem; }
.zk-table-set { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); font-weight: 600; }

.zk-weather {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 2px solid var(--color-gray-light);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.zk-empty { color: var(--color-gray); padding: var(--space-md) 0; }

/* Брендовый блок */
.zk-brand-lead {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 var(--space-lg);
    max-width: 36rem;
}
.zk-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.zk-product {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--ink);
}
.zk-product-media {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-beige-dark);
}
.zk-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.zk-product:hover .zk-product-media img, .zk-product:focus-visible .zk-product-media img { transform: scale(1.04); }
.zk-product-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.zk-product-price { color: var(--color-gray); font-size: 0.78rem; }

.zk-brand-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.zk-brand-links .btn-primary { font-family: var(--font-mono); }
.zk-link {
    color: var(--color-red);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.zk-link:hover, .zk-link:focus-visible { border-color: var(--color-red); outline: none; }

/* Тост (share-фолбэк) */
.zk-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
    transform: translateX(-50%) translateY(0.6rem);
    z-index: 1100;
    padding: 0.7rem 1.2rem;
    background: var(--color-black);
    color: var(--color-beige-light);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    box-shadow: 0 10px 32px rgba(26, 26, 26, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.zk-toast[hidden] { display: none; }
.zk-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Десктоп ---------- */
@media (min-width: 720px) {
    .zk-hero { padding: 168px 0 var(--space-2xl); }
    .zk-explain-grid { grid-template-columns: 1fr 1fr; }
    .zk-brand-links { flex-direction: row; align-items: center; }
}

@media (max-width: 480px) {
    .zk-products { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .zk-product-name { font-size: 0.9rem; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .zk-sun { transition: none; }
    .zk-hero[data-state="now"] .zk-sun-glow,
    .zk-hero[data-state="soon"] .zk-sun-glow { animation: none; }
    .zk-product-media img { transition: none; }
    .zk-toast { transition: opacity 0.2s linear; }
}


/* ---------- SEO-секция «где встречать» + FAQ ---------- */
.zk-seo h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; color: var(--color-black); margin: var(--space-md) 0 0.4rem; }
.zk-seo p { line-height: 1.72; color: var(--color-black-soft); margin-bottom: var(--space-sm); }
.zk-seo ul { list-style: none; padding: 0; margin: 0 0 var(--space-sm); }
.zk-seo li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; line-height: 1.6; color: var(--color-black-soft); }
.zk-seo li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 1px; background: var(--color-red); }
.zk-seo a, .zk-faq a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }
.zk-seo strong { color: var(--color-black); font-weight: 600; }
.zk-faq details { border-top: 1px solid rgba(26,26,26,0.12); padding: 0.85rem 0; }
.zk-faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--color-black); list-style: none; }
.zk-faq summary::-webkit-details-marker { display: none; }
.zk-faq summary::after { content: "+"; float: right; color: var(--color-red); font-family: var(--font-mono); margin-left: 1rem; }
.zk-faq details[open] summary::after { content: "\2212"; }
.zk-faq details p { margin: 0.6rem 0 0; color: var(--color-black-soft); line-height: 1.72; }