/* ============================================================
   Pillar Card Grid — module-scoped CSS
   Plan 01-05 / BRAND-03.
   ------------------------------------------------------------
   Visual contract: UI-SPEC §Page 1 §2 "Pillar Card Grid".
   Token contract: every color / spacing / radius / type-size
   value resolves to a `--ob-*` custom property declared in
   child-theme/style.css :root. Zero hardcoded hex / px values
   here so a token shift in Plan 03 propagates without edits.
   ============================================================ */

/* ---------- Grid wrapper ----------------------------------- */
.ob-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-s-6);
  /* Allow the host Divi row to control horizontal padding —
     the grid only owns its internal gap + tile surface. */
  width: 100%;
}

/* ---------- Tile surface ----------------------------------- */
.ob-pillar-grid__tile {
  background: var(--ob-bg-card);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-r-md);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Tile is purely a container — the whole-card link inside
     handles padding + flex layout so the click target
     covers the entire surface (UI-SPEC §"Card touch target"). */
  transition:
    background var(--ob-t-base) var(--ob-ease),
    border-color var(--ob-t-base) var(--ob-ease);
}

/* ---------- Whole-card link (UI-SPEC §"Card touch target") - */
.ob-pillar-grid__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--ob-s-7);
  width: 100%;
  color: var(--ob-fg-1);
  text-decoration: none;
  /* `<a>` inherits link color by default; force inheritance so
     the H3 + body + eyebrow rules below get the colors we set
     rather than the UA-default link blue. */
  font: inherit;
}

/* ---------- Icon ------------------------------------------- */
.ob-pillar-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--ob-fg-2);
  margin-bottom: var(--ob-s-6);
}
.ob-pillar-grid__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---------- Typography per UI-SPEC §Page 1 §2 -------------- */
.ob-pillar-grid .eyebrow {
  font-family: var(--ob-font-display);
  font-weight: 600;
  font-size: var(--ob-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-fg-2);
  margin-bottom: var(--ob-s-2);
  display: block;
}

.ob-pillar-grid h3 {
  font-family: var(--ob-font-display);
  font-weight: 600;
  font-size: var(--ob-text-2xl);
  line-height: 1.25;
  color: var(--ob-fg-1);
  margin: 0 0 var(--ob-s-3);
}

.ob-pillar-grid__body {
  font-family: var(--ob-font-sans);
  font-weight: 400;
  font-size: var(--ob-text-sm);
  line-height: 1.55;
  color: var(--ob-fg-2);
  margin: 0 0 var(--ob-s-6);
}

/* ---------- CTA — looks like a button, is part of the link  -
   UI-SPEC §Page 1 §2: "Primary button (full-width, → arrow
   suffix)". `<span>` (not <button>) because it sits inside the
   already-clickable `<a>` wrap; rendering an interactive
   element here would create nested-interactive a11y issues.
   The 44px min-height comes from UI-SPEC §Touch targets. */
.ob-pillar-grid__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ob-s-2);
  width: 100%;
  min-height: 44px;
  background: var(--ob-brand);
  color: var(--ob-brand-fg);
  border-radius: var(--ob-r-sm);
  padding: var(--ob-s-3) var(--ob-s-5);
  font-family: var(--ob-font-display);
  font-weight: 600;
  font-size: var(--ob-text-sm);
  margin-top: auto;
  transition: background var(--ob-t-base) var(--ob-ease);
}

/* ---------- States ---------------------------------------- */

/* Hover: tile surface lightens, border darkens. Both keyed off
   the tile so the rule applies once even though the link wraps
   the entire surface. */
.ob-pillar-grid__tile:hover {
  background: #F4F8FB;          /* UI-SPEC §2 hover-bg literal — no semantic token defined */
  border-color: var(--ob-border-strong);
}
.ob-pillar-grid__tile:hover .ob-pillar-grid__cta {
  background: var(--ob-brand-hover);
}

/* Focus ring on the link (whole-card target). The card itself
   doesn't take focus — only the <a> does — but the visible
   ring wraps the full card via outline-offset. */
.ob-pillar-grid__link:focus-visible {
  outline: 2px solid var(--ob-cyan-500);
  outline-offset: 2px;
  border-radius: var(--ob-r-md);
}

/* Press: brief scale-down on active to give tactile feedback. */
.ob-pillar-grid__link:active {
  transform: scale(0.98);
  transition: transform 50ms var(--ob-ease);
}

/* ---------- Responsive: stack on mobile ------------------- */
@media (max-width: 768px) {
  .ob-pillar-grid {
    grid-template-columns: 1fr;
    gap: var(--ob-s-6);
  }
}

/* ---------- Reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ob-pillar-grid__tile,
  .ob-pillar-grid__link,
  .ob-pillar-grid__cta {
    transition: none !important;
  }
  .ob-pillar-grid__link:active {
    transform: none;
  }
}