/*
 * assets/css/pages/examples.css — /examples/
 *
 * Переключатель между 6 кейсами — чистый CSS (radio + общий соседний селектор), без своего
 * JS-файла: см. докблок examples.php. Компаратор «до/после» — статичные две колонки, без
 * drag-слайдера (в макете его и не было, DESIGN_SYSTEM.md §2.21). Только var(--am-*).
 */

.am-examples__hero-inner {
    max-width: var(--am-container-text);
}

.am-examples__hero-inner h1 {
    text-wrap: balance;
}

.am-examples__disclaimer {
    margin-top: var(--am-s-4);
    max-width: 62ch;
}

/* -------------------------------------------------------------------------------------
 * Переключатель — радио визуально скрыты (am-visually-hidden из base.css), чипы кликаются
 * через <label for>. Панели показываются через общий соседний селектор от отмеченного radio.
 * ----------------------------------------------------------------------------------- */

.am-examples__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-s-2);
    margin-top: var(--am-s-5);
}

.am-examples__chip {
    cursor: pointer;
}

.am-examples__panels {
    margin-top: var(--am-s-6);
}

.am-examples__panel {
    display: none;
}

/* Соответствие radio → панель/чип. Контент фиксирован (5 курируемых marketplace-кейсов — до
 * 29.07 было 6, кейс инструмента 'quality' убран при снятии инструмента с продажи, Решение 2
 * REDESIGN_2026_07_29), поэтому перечисление явных пар id проще и понятнее генерации
 * селекторов в цикле. */
#am-ex-0:checked ~ .am-examples__panels [data-panel="0"],
#am-ex-1:checked ~ .am-examples__panels [data-panel="1"],
#am-ex-2:checked ~ .am-examples__panels [data-panel="2"],
#am-ex-3:checked ~ .am-examples__panels [data-panel="3"],
#am-ex-4:checked ~ .am-examples__panels [data-panel="4"] {
    display: block;
    animation: am-examples-panel-in var(--am-dur-base) var(--am-ease-out);
}

#am-ex-0:checked ~ .am-examples__chips label[for="am-ex-0"],
#am-ex-1:checked ~ .am-examples__chips label[for="am-ex-1"],
#am-ex-2:checked ~ .am-examples__chips label[for="am-ex-2"],
#am-ex-3:checked ~ .am-examples__chips label[for="am-ex-3"],
#am-ex-4:checked ~ .am-examples__chips label[for="am-ex-4"] {
    background: var(--am-navy-600);
    color: var(--am-white);
    border-color: var(--am-navy-600);
}

/* Радио визуально скрыт, но фокус обязан остаться видимым на связанном чипе (PRODUCT.md,
 * «фокус видим всегда»): переносим :focus-visible со скрытого input на его label. */
#am-ex-0:focus-visible ~ .am-examples__chips label[for="am-ex-0"],
#am-ex-1:focus-visible ~ .am-examples__chips label[for="am-ex-1"],
#am-ex-2:focus-visible ~ .am-examples__chips label[for="am-ex-2"],
#am-ex-3:focus-visible ~ .am-examples__chips label[for="am-ex-3"],
#am-ex-4:focus-visible ~ .am-examples__chips label[for="am-ex-4"] {
    outline: 2px solid var(--am-focus);
    outline-offset: 2px;
}

@keyframes am-examples-panel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -------------------------------------------------------------------------------------
 * Компаратор «до/после»
 * ----------------------------------------------------------------------------------- */

.am-examples__compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--am-s-4);
}

.am-examples__side {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-3);
    padding: var(--am-s-5);
    border-radius: var(--am-r-xl);
}

.am-examples__side--before {
    background: var(--am-surface-sunken);
    border: 1px solid var(--am-border-soft);
}

.am-examples__side--after {
    background: var(--am-grad-panel);
    color: var(--am-text-on-dark);
}

.am-examples__side-label {
    font-weight: var(--am-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--am-ls-eyebrow);
    color: var(--am-text-subtle);
}

.am-examples__side--after .am-examples__side-label {
    color: var(--am-action);
}

.am-examples__photo {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: var(--am-r-lg);
    background: var(--am-grad-nophoto);
    object-fit: cover;
}

.am-examples__photo--after {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--am-action) 55%, transparent);
}

.am-examples__side-text {
    flex: 1;
}

.am-examples__side-text--after {
    color: var(--am-text-on-dark);
}

.am-examples__side-count {
    color: var(--am-text-subtle);
}

.am-examples__side-count--after {
    color: var(--am-text-on-dark-subtle);
}

/* -------------------------------------------------------------------------------------
 * Метрики и CTA
 * ----------------------------------------------------------------------------------- */

.am-examples__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--am-s-3);
    margin-top: var(--am-s-5);
}

.am-examples__metric {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-1);
    padding: var(--am-s-3) var(--am-s-4);
    border-radius: var(--am-r-lg);
    background: var(--am-surface);
    border: 1px solid var(--am-border-soft);
}

.am-examples__metric-label {
    color: var(--am-text-subtle);
}

.am-examples__metric-value {
    font-weight: var(--am-fw-bold);
    font-size: var(--am-fs-h4);
    color: var(--am-text);
}

.am-examples__cta {
    margin-top: var(--am-s-5);
}

/* -------------------------------------------------------------------------------------
 * Сетка компактных карточек — все 6 кейсов сразу
 * ----------------------------------------------------------------------------------- */

.am-examples__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--am-s-4);
    margin-top: var(--am-s-6);
}

.am-examples__card {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-2);
}

.am-examples__card-line {
    color: var(--am-text-muted);
}

.am-examples__card-line--after {
    color: var(--am-text);
    font-weight: var(--am-fw-semi);
}

.am-examples__card-metric {
    margin-top: var(--am-s-2);
    color: var(--am-link-hover);
    font-weight: var(--am-fw-bold);
}

.am-examples__card-cta {
    margin-top: auto;
    align-self: flex-start;
}

/* -------------------------------------------------------------------------------------
 * Витрина фото/видео/аудио (НОВОЕ 29.07) — не «до/после», просто галерея стиля.
 * ----------------------------------------------------------------------------------- */

.am-examples__samples {
    border-top: 1px solid var(--am-border-soft);
}

.am-examples__samples-grid {
    margin-top: var(--am-s-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--am-gap-grid);
}

.am-examples__samples-col {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-3);
}

.am-examples__samples-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--am-s-2);
}

.am-examples__samples-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--am-r-md);
    border: 1px solid var(--am-border-soft);
}

.am-examples__samples-link {
    align-self: flex-start;
}

@media (max-width: 520px) {
    .am-examples__samples-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .am-examples__panel {
        animation: none;
    }
}