/* ============================================================
   ARECH News Carousel block — block-32 view.css
   Horizontal slide carousel with arrows + dots + keyboard + swipe.
   All values reference tokens from themes/arech/css/main.css :root.
   ============================================================ */

.arech-nc {
    padding-block: var(--space-8);
    padding-inline: var(--container-px);
    background-color: var(--paper-1);
    color: var(--ink-1);
    container-type: inline-size;
}
@media (min-width: 768px) { .arech-nc { padding-block: var(--space-9); } }

.arech-nc__inner {
    /* S69 — single container; gutter comes from the outer .arech-nc band. */
    max-width: var(--container);
    margin-inline: auto;
}

/* ---- Header ---- */
.arech-nc__head {
    margin-bottom: var(--space-6);
    max-width: 64ch;
}
.arech-nc__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    margin: 0 0 var(--space-3);
}
.arech-nc__h2 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink-1);
    margin: 0;
}

/* ---- Viewport / track ---- */
.arech-nc__viewport {
    overflow: hidden;
    width: 100%;
    margin-top: var(--space-4);
}
.arech-nc__track {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform var(--motion-slow) var(--ease-decelerate);
    will-change: transform;
}
.arech-nc__slide {
    flex: 0 0 calc((100% - 0 * var(--space-4)) / 1);
    min-width: 0;
}

/* slides-visible — xs default 1 */
.arech-nc[data-arech-nc-slides-xs="1"] .arech-nc__slide { flex-basis: 100%; }
.arech-nc[data-arech-nc-slides-xs="2"] .arech-nc__slide {
    flex-basis: calc((100% - var(--space-4)) / 2);
}

@container (min-width: 768px) {
    .arech-nc[data-arech-nc-slides-md="1"] .arech-nc__slide { flex-basis: 100%; }
    .arech-nc[data-arech-nc-slides-md="2"] .arech-nc__slide {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
    .arech-nc[data-arech-nc-slides-md="3"] .arech-nc__slide {
        flex-basis: calc((100% - 2 * var(--space-4)) / 3);
    }
    .arech-nc[data-arech-nc-slides-md="4"] .arech-nc__slide {
        flex-basis: calc((100% - 3 * var(--space-4)) / 4);
    }
}

@container (min-width: 1024px) {
    .arech-nc[data-arech-nc-slides-lg="1"] .arech-nc__slide { flex-basis: 100%; }
    .arech-nc[data-arech-nc-slides-lg="2"] .arech-nc__slide {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
    .arech-nc[data-arech-nc-slides-lg="3"] .arech-nc__slide {
        flex-basis: calc((100% - 2 * var(--space-4)) / 3);
    }
    .arech-nc[data-arech-nc-slides-lg="4"] .arech-nc__slide {
        flex-basis: calc((100% - 3 * var(--space-4)) / 4);
    }
    .arech-nc[data-arech-nc-slides-lg="5"] .arech-nc__slide {
        flex-basis: calc((100% - 4 * var(--space-4)) / 5);
    }
}

/* ---- Card ---- */
.arech-nc__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--paper-0);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--motion-normal) var(--ease-standard),
        border-color var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard);
}
.arech-nc__card:hover,
.arech-nc__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--ink-1) 8%, transparent);
}
.arech-nc__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.arech-nc__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--paper-3);
}
.arech-nc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow) var(--ease-standard);
}
.arech-nc__card:hover .arech-nc__media img {
    transform: scale(1.04);
}

.arech-nc__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.arech-nc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.arech-nc__cat { color: var(--orange-text); font-weight: 600; }
.arech-nc__date { opacity: 0.8; }

.arech-nc__h4 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
    color: var(--ink-1);
}
.arech-nc__excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
}

/* ---- Controls ---- */
.arech-nc__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.arech-nc__arrow {
    background-color: var(--paper-0);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-1);
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
}
.arech-nc__arrow:hover,
.arech-nc__arrow:focus-visible {
    background-color: var(--orange);
    color: var(--white);
    border-color: var(--orange);
}
.arech-nc__arrow:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-nc__arrow[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.arech-nc__dots {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
/* Visual pip stays 8px; ::before extender pushes touch-target to 44x44
   per WCAG 2.5.5 Target Size (Enhanced). Fix from S52 css-architect gate B1. */
.arech-nc__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklch, var(--ink-1) 18%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}
.arech-nc__dot::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
}
.arech-nc__dot:hover { background-color: color-mix(in oklch, var(--ink-1) 40%, transparent); }
.arech-nc__dot.is-active {
    background-color: var(--orange);
    transform: scale(1.25);
}
.arech-nc__dot:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* ---- Live region (visually hidden) ---- */
.arech-nc__live {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Tail CTA ---- */
.arech-nc__tail {
    margin: var(--space-6) 0 0;
    text-align: center;
}
.arech-nc__tail-link {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--orange-text);
    padding-bottom: 2px;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-nc__tail-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* ---- Reveal fade on container enter ---- */
.arech-nc__viewport,
.arech-nc__controls,
.arech-nc__tail {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-nc.is-in .arech-nc__viewport { transition-delay: var(--stagger-1); opacity: 1; transform: translateY(0); }
.arech-nc.is-in .arech-nc__controls { transition-delay: var(--stagger-2); opacity: 1; transform: translateY(0); }
.arech-nc.is-in .arech-nc__tail { transition-delay: var(--stagger-3); opacity: 1; transform: translateY(0); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-nc__track { transition: none; }
    .arech-nc__media img { transition: none; }
    .arech-nc__card { transition: none; }
    .arech-nc__card:hover { transform: none; }
    .arech-nc__card:hover .arech-nc__media img { transform: none; }
    .arech-nc__viewport,
    .arech-nc__controls,
    .arech-nc__tail {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-nc {
    padding-block: var(--space-5);
}
.ccm-edit-mode .arech-nc__viewport,
.ccm-edit-mode .arech-nc__controls,
.ccm-edit-mode .arech-nc__tail {
    opacity: 1;
    transform: none;
}
.ccm-edit-mode .arech-nc__track { transform: none !important; }
.ccm-edit-mode .arech-nc__viewport { overflow: visible; }

/* ============================================================
   AUTO-NEWS variant (.arech-nc--related) — the "Continue reading"
   / "More from the factory" carousel ported from news-post-v2's
   .related-news section. The base carousel chrome above already
   matches the prototype's .related-card (paper card, 16:9 media,
   hover lift, orange category chip), so this modifier only adds:
   the slightly darker band the prototype uses (.related-news =
   --paper-2), the meta separator dot, and the per-card "Read
   article" CTA row that the prototype cards carry.
   ============================================================ */
.arech-nc--related {
    background-color: var(--paper-2);
    border-top: 1px solid var(--hairline);
}
.arech-nc--related .arech-nc__sep {
    color: var(--orange);
}
/* Per-card CTA row (prototype .related-card-cta). */
.arech-nc--related .arech-nc__cta {
    margin-top: auto;
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--motion-fast) var(--ease-standard);
}
.arech-nc--related .arech-nc__card:hover .arech-nc__cta,
.arech-nc--related .arech-nc__card:focus-visible .arech-nc__cta {
    gap: var(--space-3);
    color: var(--orange);
}
@media (prefers-reduced-motion: reduce) {
    .arech-nc--related .arech-nc__cta { transition: none; }
}

/* ---- Print ---- */
@media print {
    .arech-nc { background: #fff !important; color: #000 !important; }
    .arech-nc__controls { display: none !important; }
    .arech-nc__viewport { overflow: visible !important; }
    .arech-nc__track { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--space-4); transform: none !important; }
}