/* ARECH Icon Bullets — block-11 view.css */
.arech-ib { padding-block: var(--space-9); padding-inline: var(--container-px); container-type: inline-size; }
.arech-ib--theme-paper-2 { background-color: var(--paper-2); color: var(--ink-1); }
.arech-ib--theme-paper-1 { background-color: var(--paper-1); color: var(--ink-1); }
.arech-ib--theme-dark    { background-color: var(--dark); color: var(--off-white); }

/* 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. */
@media (min-width: 768px) {
    .arech-ib--theme-dark { padding-block: 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. */
.arech-ib--theme-paper-2 .arech-ib__h2,
.arech-ib--theme-paper-2 .arech-ib__label,
.arech-ib--theme-paper-1 .arech-ib__h2,
.arech-ib--theme-paper-1 .arech-ib__label { color: var(--ink-1); }
.arech-ib--theme-dark .arech-ib__h2,
.arech-ib--theme-dark .arech-ib__label { color: var(--off-white); }

.arech-ib__inner { max-width: var(--container); margin-inline: auto; }

.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(--orange);
    margin: 0 0 var(--space-3);
}
.arech-ib__h2 {
    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(--orange);
    border-left: 3px solid 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;
    background-color: color-mix(in oklch, var(--orange) 12%, transparent);
    color: 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;
    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(--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);
}
.arech-ib__link:hover, .arech-ib__link:focus-visible { color: var(--orange-bright); }
.arech-ib__link:focus-visible { outline: 2px solid 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; }
}