/*!
 * Oyolloo Elements — J10 Pillars widget.
 *
 * Every rule is scoped to .oo-pillars. There is no element selector and no
 * :root block, so nothing here can reach the theme or any other widget.
 */

.oo-pillars{
  --oop-maxw:1220px;
  --oop-pad:clamp(18px,4.5vw,44px);

  --oop-band:#F7BE27;
  --oop-ink:#211A05;
  --oop-rule:rgba(33,26,5,.22);

  --oop-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oop-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;

  /* brand yellow, so the page steps down from the dark banner above to the
     white section below instead of repeating the banner's own fact strip */
  background:var(--oop-band);
  position:relative;
  /* the theme runs the page at 300; this band was built against a normal one */
  font-family:var(--oop-f-head); font-weight:400;
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-pillars,.oo-pillars *,.oo-pillars *::before,.oo-pillars *::after{ box-sizing:border-box; }

.oo-pillars__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px 0; align-items:center;
  max-width:var(--oop-maxw); margin:0 auto;
  padding-inline:var(--oop-pad);
  padding-block:clamp(20px,3vw,32px);
  list-style:none;
}

.oo-pillar{
  display:flex; align-items:center; gap:13px; min-width:0;
  padding-inline:clamp(14px,2vw,28px);
  margin:0; list-style:none;
}
.oo-pillar::marker{ content:""; }
.oo-pillar:first-child{ padding-left:0; }

.oo-pillar__n{
  flex:none; line-height:1;
  font-family:var(--oop-f-display); font-weight:700; font-size:1.5rem;
  letter-spacing:.012em;
  color:var(--oop-ink); opacity:.4;
}
.oo-pillar__t{
  /* Two lines are reserved whether this label needs them or not. One of the
     four already wraps, so the band is this tall either way — and reserving
     it means a label that wraps at one width and not another cannot resize
     the whole strip and shove the page below it. */
  min-height:calc(.8rem * 1.5 * 2);
  margin:0; line-height:1.5;
  font-family:var(--oop-f-head); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--oop-ink); opacity:.92;
}

/* a hairline between the columns, only while they are side by side */
@media (min-width:961px){
  .oo-pillars__grid > .oo-pillar + .oo-pillar{ border-left:1px solid var(--oop-rule); }
}

@media (max-width:960px){
  .oo-pillars__grid{ grid-template-columns:repeat(2,1fr); gap:16px 30px; }
  .oo-pillar{ padding-inline:0; }
}
@media (max-width:560px){
  .oo-pillars__grid{ grid-template-columns:1fr; gap:16px; }
}

/* ================= theme hardening =================
   A WordPress theme styles bare elements — ul and li above all. Those rules
   beat inheritance however low their specificity, so the list reset is stated
   here rather than left to chance. */
.oo-pillars__grid{ margin-block:0; }