/* ============================================================
   ARECH CTA Banner block — front-end styles.
   Port of `site/src/components/home/HomeCTAPanel.astro` lines 47-180.
   Light or dark variant + optional radial-orange glow + grid overlay.
   ============================================================ */

.arech-cta {
    /* TDM Design layer: each property consumes a per-instance --tdmx-* var
       (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
       to the block's original hardcoded value — so default = byte-identical. */
    position: relative;
    overflow: hidden;
    /* New stacking context so the -2/-1 bg pseudo-elements anchor to the root
       (and stay behind the glow/grid at z-index:1 and inner at z-index:2). */
    isolation: isolate;
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
}
/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-cta). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. Sit behind the decorative
   glow/grid (z-index:1) and the inner content (z-index:2). */
.arech-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}
@media (min-width: 768px) {
    .arech-cta {
        padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10));
    }
}
@media (min-width: 1024px) {
    .arech-cta {
        padding-block: var(--tdmx-pad-top, var(--space-11)) var(--tdmx-pad-bottom, var(--space-11));
    }
}

/* TDM bg threaded as an OVERRIDE on each theme class: with no Design bg set the
   theme background holds (identical); a Design background wins when picked.
   Theme text colours stay as-is so dark-theme contrast is preserved. */
.arech-cta--paper-2 { background: var(--tdmx-bg, var(--paper-2)); color: var(--ink-2); }
.arech-cta--paper-1 { background: var(--tdmx-bg, var(--paper-1)); color: var(--ink-2); }
.arech-cta--dark { background: var(--tdmx-bg, var(--dark)); color: var(--off-white); }

/* ---- Background decorations ---- */
.arech-cta__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 100% 70% at 50% 50%, color-mix(in oklch, var(--orange) 8%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.arech-cta__grid-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}
.arech-cta--dark .arech-cta__glow {
    background: radial-gradient(ellipse 100% 70% at 50% 50%, color-mix(in oklch, var(--orange) 18%, transparent) 0%, transparent 70%);
}

/* ---- Inner ---- */
.arech-cta__inner {
    position: relative;
    z-index: 2;
    max-width: var(--tdmx-max-width, var(--container-narrow));
    margin-inline: auto;
    text-align: var(--tdmx-align, center);
}

/* ---- Eyebrow ---- */
.arech-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange-text));
    margin-bottom: var(--space-4);
}
/* Dark-theme accent kept hardcoded so the var doesn't override the dark
   variant's brighter orange (contrast on near-black). */
.arech-cta--dark .arech-cta__eyebrow { color: var(--tdmx-accent, var(--orange)); }

/* ---- Title ---- */
.arech-cta__title {
    font-family: var(--font-headline);
    font-weight: 600;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398).
       Padding ladder already matches prototype `section-premium`
       (96 → 128 → 160) per audit § 2 row 9 — no D4 change needed. */
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--tdmx-heading, var(--ink-1));
    margin: 0 0 var(--space-5);
}
/* Dark-theme heading kept hardcoded (light ink on near-black) so a Design
   --tdmx-heading meant for light themes can't darken it into invisibility. */
.arech-cta--dark .arech-cta__title { color: var(--off-white); }
.arech-cta__accent { color: var(--tdmx-accent, var(--orange-text)); }
.arech-cta--dark .arech-cta__accent { color: var(--tdmx-accent, var(--orange)); }

/* ---- Body ---- */
.arech-cta__body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--tdmx-text, var(--ink-3));
    max-width: 56ch;
    margin: 0 auto var(--space-7);
}
/* Dark-theme body kept hardcoded (light text on near-black) for contrast. */
.arech-cta--dark .arech-cta__body { color: var(--light); }

/* ---- Contact rows ---- */
.arech-cta__rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
    max-width: 420px;
    margin-inline: auto;
}
@media (min-width: 680px) {
    .arech-cta__rows {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
        max-width: 560px;
    }
}

.arech-cta__row {
    text-align: center;
    padding-block: var(--space-3);
}
.arech-cta__row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-text, var(--ink-4));
    margin-bottom: var(--space-2);
}
/* Dark-theme row label kept hardcoded (accessible muted on near-black). */
.arech-cta--dark .arech-cta__row-label { color: var(--muted-accessible); }

.arech-cta__row-link {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 18px;
    color: var(--tdmx-text, var(--ink-1));
    text-decoration: none;
    /* Touch target: 44px-tall inline-flex hit area. */
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-cta__row-link:hover {
    color: var(--tdmx-accent, var(--orange-text));
}
/* Dark-theme row link kept hardcoded (light text on near-black) for contrast. */
.arech-cta--dark .arech-cta__row-link {
    color: var(--off-white);
}
.arech-cta--dark .arech-cta__row-link:hover {
    color: var(--orange-bright);
}

/* ---- Primary button ---- */
.arech-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 32px;
    /* Accent surface: --tdmx-accent recolours the primary button when the
       operator picks a Design accent; hover states stay on the systematic
       orange-bright/orange-dim tokens (no hover var in the contract). */
    background: var(--tdmx-accent, var(--orange));
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition:
        background var(--motion-normal) var(--ease-standard),
        transform var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard);
}
.arech-cta__button:hover,
.arech-cta__button:focus-visible {
    background: var(--orange-bright);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in oklch, var(--orange) 30%, transparent);
}
.arech-cta--paper-2 .arech-cta__button:hover,
.arech-cta--paper-1 .arech-cta__button:hover {
    background: var(--orange-dim);
}
.arech-cta__button:focus-visible {
    outline: 2px solid var(--orange-text);
    outline-offset: 3px;
}

/* ---- Reveal stagger ---- */
.arech-cta .arech-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-cta .arech-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.arech-cta .arech-reveal--s1 { transition-delay: var(--stagger-1); }
.arech-cta .arech-reveal--s2 { transition-delay: var(--stagger-2); }
.arech-cta .arech-reveal--s3 { transition-delay: var(--stagger-3); }
.arech-cta .arech-reveal--s4 { transition-delay: var(--stagger-4); }
.arech-cta .arech-reveal--s5 { transition-delay: var(--stagger-5); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-cta .arech-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .arech-cta__button,
    .arech-cta__button:hover,
    .arech-cta__row-link {
        transform: none !important;
        transition: none;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-cta {
    padding-block: var(--space-6);
}