/* ARECH Icon Bullets — block-11 view.css */
/* TDM Design layer: each threaded 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. Mirrors the
   proven arech_cta_banner threading (theme-class bg override + bg pseudo-elements).
   container-type:inline-size is PRESERVED so the bullets @container queries below
   keep working unchanged. */
.arech-ib {
    /* New stacking context so the -2/-1 bg pseudo-elements anchor to the root
       and stay behind the inner content. */
    position: relative;
    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);
    container-type: inline-size;
}
/* 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-ib--theme-paper-2 { background-color: var(--tdmx-bg, var(--paper-2)); color: var(--ink-1); }
.arech-ib--theme-paper-1 { background-color: var(--tdmx-bg, var(--paper-1)); color: var(--ink-1); }
.arech-ib--theme-dark    { background-color: var(--tdmx-bg, var(--dark)); color: var(--off-white); }

/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-ib). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. Sit behind the inner content. */
.arech-ib::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-ib::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}

/* S55 D4 — padding-block ladder per audit prescription.
   Paper variants stay on --space-9 (the section-premium "modest" beat);
   dark variant takes the heavier --space-10 step for visual weight.
   Viewport media query is intentional: section-padding is a top-level
   layout decision tied to viewport, not the block's container width.
   --tdmx-pad-* fall back to the original ladder value per breakpoint so a
   Design override wins, default stays byte-identical. */
@media (min-width: 768px) {
    .arech-ib--theme-dark { padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10)); }
}

/* S55 C1+C2 fix — global h2/h4 rules in main.css set color: var(--off-white)
   directly on h2/h4, breaking the cascade from the container color above.
   Re-declare color explicitly on heading descendants per theme variant.
   --tdmx-heading recolours the title, --tdmx-text recolours the label, each
   falling back to the original per-theme token. Dark variant heading/label kept
   on --off-white fallback so a light-theme Design colour can't darken them into
   invisibility on near-black (mirrors cta_banner's dark-hardcode note). */
.arech-ib--theme-paper-2 .arech-ib__h2,
.arech-ib--theme-paper-1 .arech-ib__h2 { color: var(--tdmx-heading, var(--ink-1)); }
.arech-ib--theme-paper-2 .arech-ib__label,
.arech-ib--theme-paper-1 .arech-ib__label { color: var(--tdmx-text, var(--ink-1)); }
.arech-ib--theme-dark .arech-ib__h2 { color: var(--tdmx-heading, var(--off-white)); }
.arech-ib--theme-dark .arech-ib__label { color: var(--tdmx-text, var(--off-white)); }

/* __inner: max-width threaded; text-align threaded with a `left` fallback so the
   default keeps the block's left-aligned reading layout. The bullets grid/list
   layout below is NOT touched. */
.arech-ib__inner {
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
    text-align: var(--tdmx-align, left);
}

.arech-ib__header { max-width: 60ch; margin-bottom: var(--space-7); }
.arech-ib__eyebrow {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange));
    margin: 0 0 var(--space-3);
}
.arech-ib__h2 {
    color: inherit; /* defeat global h2{color:off-white}; take the themed container color */
    font-family: var(--font-display); font-weight: 700;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398).
       Previous clamp(28px, 4vw, 48px) was two scale steps small. */
    font-size: clamp(42px, 5vw, 72px); line-height: 1.1;
    margin: 0 0 var(--space-4);
    /* S56 P3 — soft cap raised from 38ch to 56ch. 38ch forced
       "Why Buyers Choose a Factory-Direct LED Display Supplier"
       (~52 chars) to wrap on 4 narrow lines. 56ch holds the headline
       on a balanced 2-3 line break at common viewport widths. */
    max-width: min(56ch, 100%);
}
.arech-ib__pullquote {
    font-family: var(--font-body); font-size: 18px; line-height: 1.5;
    font-style: italic; color: var(--tdmx-accent, var(--orange));
    border-left: 3px solid var(--tdmx-accent, var(--orange)); padding-left: var(--space-4);
    margin: 0;
}

.arech-ib__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@container (min-width: 768px) {
    .arech-ib--two-col .arech-ib__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-7); }
}

.arech-ib__item {
    display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items: start;
}
@container (max-width: 480px) {
    .arech-ib__item { grid-template-columns: 1fr; gap: var(--space-3); }
}

.arech-ib__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    /* Bullet-icon accent threaded: both the soft tint backdrop and the glyph
       colour derive from --tdmx-accent (orange fallback), so a Design accent
       recolours the whole icon chip systematically via color-mix. */
    background-color: color-mix(in oklch, var(--tdmx-accent, var(--orange)) 12%, transparent);
    color: var(--tdmx-accent, var(--orange)); border-radius: var(--radius-sm);
}
.arech-ib__icon img { display: block; width: 32px; height: 32px; }

.arech-ib__copy { padding-top: var(--space-2); }
.arech-ib__label {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2;
    margin: 0 0 var(--space-2);
}
.arech-ib__body {
    font-family: var(--font-body); font-size: 16px; line-height: 1.55;
    /* Body text threaded → --tdmx-text. The original colour was inherited (no
       explicit colour); the fallback is `inherit` so default = byte-identical
       (themed container colour at 0.86 opacity). */
    color: var(--tdmx-text, inherit);
    margin: 0 0 var(--space-2); opacity: 0.86;
}
.arech-ib__link {
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange)); 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);
}
/* Hover/focus colours kept hardcoded on the systematic orange-bright token
   (no hover var in the contract); same rationale as cta_banner. */
.arech-ib__link:hover, .arech-ib__link:focus-visible { color: var(--orange-bright); }
.arech-ib__link:focus-visible { outline: 2px solid var(--tdmx-accent, var(--orange)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .arech-ib__link { transition: none; }
}

.ccm-edit-mode .arech-ib { padding-block: var(--space-7); }

@media print {
    .arech-ib { background: #fff !important; color: #000 !important; }
    .arech-ib__icon { background: transparent !important; }
}