/* ============================================================
   ALLOut Products — module listing band
   HERMETIC component stylesheet. Everything scoped under
   `.aos-products`. Enqueued AFTER the theme stylesheet (the theme
   handle is declared as a dependency in allout_apa_block_register_assets()).

   Section 1 = defensive reset (neutralize BeTheme cascade).
   Section 2 = the band's real styling.
   Do NOT add bare-tag selectors (h2{}, p{}, a{}) — theme-safe only.

   Values below are the approved design's own — do not retune them.
   ============================================================ */

/* ---- local design tokens (scoped, NOT :root, so they can't collide) ---- */
.aos-products {
  --aos-red-50:  #FFF1F2;
  --aos-red-400: #F0555F;
  --aos-red-500: #E8323F;
  --aos-red-600: #D11F2C;
  --aos-navy-200:#A9B7D6;
  --aos-navy-700:#14224A;
  --aos-navy-800:#0E1C40;
  --aos-gray-50: #F7F8FB;
  --aos-border:  #E3E7EF;
  --aos-body:    #3E4658;
  --aos-muted:   #7B8499;
  --aos-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --aos-font:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ============================================================
   1) DEFENSIVE RESET — known state regardless of BeTheme cascade.
   ============================================================ */
.aos-products, .aos-products * { box-sizing: border-box; }
/* Reset is wrapped in :where() so it carries ZERO specificity — the band's
   own .aos-products__* classes below always win over it, while bare tags
   inherited from BeTheme still get normalized. Do NOT rewrite it as a plain
   element list: that would out-specify the component classes and break the
   eyebrow, the icon tiles and the names. */
.aos-products :where(h2, h3, p, a, span, div, em, img, svg) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-transform: none;
  font: inherit;
  font-style: normal;
  color: inherit;
  letter-spacing: normal;
  line-height: normal;
  text-decoration: none;
  text-align: left;
  box-shadow: none;
  float: none;
  max-width: none;
  min-height: 0;
}
.aos-products img { max-width: 100%; height: auto; display: block; }
.aos-products a { cursor: pointer; }

/* ============================================================
   2) COMPONENT STYLING
   ============================================================ */
.aos-products {
  font-family: var(--aos-font);
  color: var(--aos-body);
  background: var(--aos-gray-50);
  border-top: 1px solid var(--aos-border);
  border-bottom: 1px solid var(--aos-border);
  -webkit-font-smoothing: antialiased;
  display: block;
}
.aos-products__inner { max-width: 1200px; margin: 0 auto; padding: 76px 24px; }

/* ---- header ---- */
.aos-products__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.aos-products__eyebrow {
  display: block;
  font-family: var(--aos-font);
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aos-red-500);
}
.aos-products__title {
  font-family: var(--aos-display); font-weight: 700; font-size: 34px;
  line-height: 1.12; color: var(--aos-navy-700); margin: 10px 0 14px;
}
.aos-products__title em { font-style: normal; color: var(--aos-red-500); }
.aos-products__sub { font-size: 16px; line-height: 1.6; color: var(--aos-muted); }

/* ---- listing ---- */
.aos-products__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  column-gap: 56px;
}
.aos-products__row {
  display: flex; gap: 18px; align-items: center;
  padding: 22px 16px;
  border-bottom: 1px solid var(--aos-border);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background .16s ease;
}
.aos-products__row:hover { background: #fff; text-decoration: none; }
.aos-products__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  background: var(--aos-red-50); color: var(--aos-red-500);
  border-radius: 11px;
}
.aos-products__ico svg { width: 23px; height: 23px; display: block; }
.aos-products__body { display: block; flex: 1; min-width: 0; }
.aos-products__name {
  display: block; font-family: var(--aos-display); font-weight: 600;
  font-size: 17px; color: var(--aos-navy-800); line-height: 1.25;
}
.aos-products__desc {
  display: block; margin: 4px 0 0; font-size: 13.5px;
  line-height: 1.5; color: var(--aos-body);
}
.aos-products__arrow {
  display: inline-flex; flex: none; align-self: center;
  color: var(--aos-red-500); transition: transform .18s ease;
}
.aos-products__arrow svg { width: 19px; height: 19px; display: block; }
.aos-products__row:hover .aos-products__arrow { transform: translateX(4px); }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .aos-products__inner { padding: 56px 20px; }
  .aos-products__list { grid-template-columns: 1fr; column-gap: 0; }
  .aos-products__title { font-size: 28px; }
  .aos-products__head { margin-bottom: 36px; }
}

/* ============================================================
   NAVY VARIANT — add modifier class .aos-products--navy on root.
   Full-navy band; rows invert to light text on the gradient.
   ============================================================ */
.aos-products--navy {
  background:
    linear-gradient(118deg, transparent 58%, rgba(232,50,63,0) 60%, rgba(232,50,63,.55) 78%, rgba(240,85,95,.15) 92%),
    linear-gradient(115deg, #081634 0%, #0E1C40 46%, #1A2A52 100%);
  border-top: 1px solid var(--aos-navy-800);
  border-bottom: 0;
}
.aos-products--navy .aos-products__eyebrow { color: var(--aos-red-400); }
.aos-products--navy .aos-products__title { color: #fff; }
.aos-products--navy .aos-products__title em { color: var(--aos-red-400); }
.aos-products--navy .aos-products__sub { color: var(--aos-navy-200); }
.aos-products--navy .aos-products__row { border-bottom-color: rgba(255,255,255,.12); }
.aos-products--navy .aos-products__row:hover { background: rgba(255,255,255,.06); }
.aos-products--navy .aos-products__ico { background: rgba(255,255,255,.09); color: var(--aos-red-400); }
.aos-products--navy .aos-products__name { color: #fff; }
.aos-products--navy .aos-products__desc { color: var(--aos-navy-200); }
.aos-products--navy .aos-products__arrow { color: var(--aos-red-400); }

/* ============================================================
   ADDITIONS TO THE DESIGN'S OWN CSS
   Everything above this line is the approved design, verbatim.
   ============================================================ */

/* ---- 1) Header centring, re-asserted -----------------------
   .aos-products__head sets text-align:center, but the defensive
   reset above declares text-align:left DIRECTLY on h2/p/span. A
   declared value beats an inherited one whatever its specificity,
   so the reset wins and the header renders left-aligned. Re-assert
   centring on the band's own header classes — the same
   "re-assert what the reset touches" rule the tokens follow.
   ------------------------------------------------------------ */
.aos-products__head .aos-products__eyebrow,
.aos-products__head .aos-products__title,
.aos-products__head .aos-products__sub { text-align: center; }

/* ---- 2) Image tiles ----------------------------------------
   A row's tile can hold artwork instead of a line icon: a product's
   ACF image, or any image from the Media Library. Two things are
   choosable per block, because artwork and line icons want
   different treatment:

     .aos-products--imgplain   drop the tinted tile — show the
                               artwork on its own, edge to edge
     .aos-products--img<NN>    tile size, applied to EVERY tile so
                               rows stay aligned whatever mix of
                               icons and images a block holds
   ------------------------------------------------------------ */
.aos-products__ico--img { overflow: hidden; padding: 9px; }
.aos-products__ico-img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  max-width: none;
}

/* Plain: no tint, no radius, no padding — just the image, at full tile size. */
.aos-products--imgplain .aos-products__ico--img {
  background: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.aos-products--navy.aos-products--imgplain .aos-products__ico--img { background: none; }

/* Tile sizes. The line-icon glyph keeps its design size; the box grows. */
.aos-products--img56 .aos-products__ico { width: 56px; height: 56px; }
.aos-products--img64 .aos-products__ico { width: 64px; height: 64px; }
.aos-products--img72 .aos-products__ico { width: 72px; height: 72px; }
.aos-products--img88 .aos-products__ico { width: 88px; height: 88px; }