/* =============================================================================
   The four pillars (views/partials/pillars.php): two by two, hairlines between
   them and never a box round them, each with a line icon that draws itself in,
   its figures set in white, and a way in to the page that proves it.

   Home sets them under a wide photograph (the .pillars section, home.css), on
   a dark ground. About sets the bare grid in its Vision & Values chapter, on a
   light one: the inks are tokens with the dark ground's values as defaults,
   and a light ground sets --pillars-line, -icon, -num, -ink and -body.
   ========================================================================== */

/* ---- the four pillars: hairlines between them, never a box round them */
.pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--pillars-line, rgba(255, 255, 255, 0.12));
}
.pillar {
  --gap: clamp(1.75rem, 0.5rem + 4vw, 5rem);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  border-block-start: 1px solid var(--pillars-line, rgba(255, 255, 255, 0.12));
}
@media (min-width: 48rem) {
  .pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pillar:nth-child(odd) {
    padding-inline-end: var(--gap);
  }
  .pillar:nth-child(even) {
    --d: 1;
    padding-inline-start: var(--gap);
    border-inline-start: 1px solid var(--pillars-line, rgba(255, 255, 255, 0.12));
  }
}
/* A red rule runs out along the top of the pillar under the pointer. */
.pillar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 2px;
  background: var(--eme-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--eme-ease-out);
}
html[dir="rtl"] .pillar::before {
  transform-origin: right;
}
.pillar:hover::before,
.pillar:focus-within::before {
  transform: scaleX(1);
}

.pillar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  inline-size: 100%;
}
.pillar__icon {
  inline-size: clamp(3.25rem, 2.5rem + 1.6vw, 4.5rem);
  block-size: auto;
  overflow: visible;
  fill: none;
  stroke: var(--pillars-icon, rgba(255, 255, 255, 0.92));
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar__icon .acc {
  stroke: var(--eme-red);
}
/* The number stands in outline, like the product slider's big index. */
.pillar__num {
  font-size: clamp(2.5rem, 1.9rem + 1.8vw, 4rem);
  font-weight: 700;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--pillars-num, rgba(255, 255, 255, 0.2));
  font-variant-numeric: tabular-nums;
  transition: -webkit-text-stroke-color 500ms var(--eme-ease);
  display: none;
}
.pillar:hover .pillar__num {
  -webkit-text-stroke-color: rgba(218, 33, 39, 0.8);
}
.pillar__title {
  margin: clamp(1.25rem, 0.9rem + 1vw, 2rem) 0 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pillars-ink, var(--eme-white));
}
html[lang="ar"] .pillar__title {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
}
.pillar__body {
  max-inline-size: 54ch;
  margin: 0.75rem 0 1.5rem;
  font-size: var(--eme-step-0);
  line-height: 1.7;
  color: var(--pillars-body, rgba(255, 255, 255, 0.64));
}
.pillar__body strong {
  font-weight: 600;
  color: var(--pillars-ink, var(--eme-white));
  white-space: nowrap;
}
/* The links sit on one line across a row, whatever the paragraphs above. */
.pillar__link {
  margin-block-start: auto;
}

/* ---- arrival (see "home section heads"): each pillar's icon draws itself as
   the pillar settles, the red strokes last. */
.is-armed .pillar__icon > * {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.is-armed .pillar.is-in .pillar__icon > * {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--eme-ease-out)
    calc(var(--d, 0) * 140ms + 250ms);
}
.is-armed .pillar.is-in .pillar__icon > .acc {
  transition-delay: calc(var(--d, 0) * 140ms + 850ms);
}

@media (prefers-reduced-motion: reduce) {
  .pillar::before,
  .pillar__num {
    transition: none;
  }
  .is-armed .pillar__icon > * {
    stroke-dashoffset: 0;
  }
}