/* ============================================================
   ARECH Subpage Hero — Product LED (block-06) view.css
   Port of /prototypes/subpage-header-explore-2026-05-20/header-2-product-led.html
   BEM-renamed `.arech-sphpl__*`. All tokens from design-system-v1.md.
   ============================================================ */

.arech-sphpl {
    position: relative;
    background-color: var(--dark);
    color: var(--off-white);
    overflow: hidden;
    padding-block: var(--space-10) var(--space-9);
    container-type: inline-size;
}

/* ---------- Background layers (ambient grid drift + radial glow) ---------- */
.arech-sphpl__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.arech-sphpl__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, color-mix(in oklch, var(--orange) 6%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in oklch, var(--orange) 6%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 100% 80% at 30% 40%, var(--dark) 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 30% 40%, var(--dark) 0%, transparent 85%);
    animation: arechSphplGrid 22s linear infinite;
}

@keyframes arechSphplGrid {
    0%   { transform: translateY(0); }
    100% { transform: translateY(60px); }
}

.arech-sphpl__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 60% at 70% 30%,
        color-mix(in oklch, var(--orange) 14%, transparent) 0%,
        transparent 60%
    );
}

/* ---------- Inner content grid ---------- */
.arech-sphpl__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-px);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: center;
}

@container (min-width: 900px) {
    .arech-sphpl--image-right .arech-sphpl__inner {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* ---------- Copy column ---------- */
.arech-sphpl__copy {
    max-width: 60ch;
}

.arech-sphpl__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0 0 var(--space-4);
}

.arech-sphpl__h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 5.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-5);
}

.arech-sphpl__h1-line {
    display: block;
}

.arech-sphpl__h1-line--accent {
    color: var(--orange);
}

.arech-sphpl__sub {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--light, var(--off-white));
    margin: 0 0 var(--space-6);
    max-width: 50ch;
    opacity: 0.88;
}

/* ---------- Spec callout chips ---------- */
.arech-sphpl__chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid color-mix(in oklch, var(--off-white) 6%, transparent);
}

@container (min-width: 480px) {
    .arech-sphpl__chips { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}

.arech-sphpl__chip {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.arech-sphpl__chip-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-accessible);
    margin: 0;
}

.arech-sphpl__chip-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.1;
    color: var(--off-white);
    margin: 0;
}

/* ---------- CTAs ---------- */
.arech-sphpl__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ---------- Media column ---------- */
.arech-sphpl__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background-color: color-mix(in oklch, var(--dark) 60%, var(--dark-3));
}

.arech-sphpl__pic,
.arech-sphpl__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arech-sphpl__media-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted-accessible);
    background-color: var(--dark-2);
}

.arech-sphpl__media-placeholder-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------- Variant: image-bottom (stack) ---------- */
@container (min-width: 900px) {
    .arech-sphpl--image-bottom .arech-sphpl__inner {
        grid-template-columns: 1fr;
    }
    .arech-sphpl--image-bottom .arech-sphpl__media {
        max-width: 720px;
        margin-inline: auto;
    }
}

/* ---------- Reduced-motion: kill grid drift ---------- */
@media (prefers-reduced-motion: reduce) {
    .arech-sphpl__grid { animation: none; }
}

/* ---------- Concrete edit-mode shim ---------- */
.ccm-edit-mode .arech-sphpl { padding-block: var(--space-7) var(--space-6); }
.ccm-edit-mode .arech-sphpl__grid { animation: none; opacity: 0.35; }

/* ---------- Print ---------- */
@media print {
    .arech-sphpl { background: #fff !important; color: #000 !important; padding-block: var(--space-5); }
    .arech-sphpl__bg { display: none; }
    .arech-sphpl__h1-line--accent { color: #000 !important; }
}