/* About page — React About sections parity */
[data-route="/about"] section[id] {
  scroll-margin-top: 100px;
}

/* Partnerships anchor — React /about#partnerships (fixed header clearance) */
[data-route="/about"] #partnerships {
  scroll-margin-top: 120px;
  scroll-snap-margin-top: 120px;
}

/* Leadership anchor — React /about#leadership */
[data-route="/about"] #leadership {
  scroll-margin-top: 120px;
  scroll-snap-margin-top: 120px;
}

/* ── Leadership.jsx layout (no hover) ────────────────────────────────────
   Source: arihantaa/src/components/sections/about/Leadership.jsx

   Grid:  grid-cols-1 · xl:grid-cols-12 · border-t + border-l · gap-0
   Main:  xl:col-span-8
   Vision: xl:col-span-4
   Motion: y24 · 0.65s · quart · delay 0 / 0.1 · margin -40px
*/

/* Mobile: col-span-12 on a 1-col grid creates implicit tracks — force full width */
[data-ari-leadership] .ari-lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

[data-ari-leadership] .ari-lead-main,
[data-ari-leadership] .ari-lead-vision {
  grid-column: 1 / -1;
}

@media (min-width: 1280px) {
  [data-ari-leadership] .ari-lead-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  [data-ari-leadership] .ari-lead-main {
    grid-column: span 8 / span 8 !important;
  }

  [data-ari-leadership] .ari-lead-vision {
    grid-column: span 4 / span 4 !important;
  }
}

/* Leadership profile photo LinkedIn corner badge */
[data-ari-leadership] .ari-lead-photo {
  position: relative;
}

[data-ari-leadership] .ari-lead-linkedin {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a66c2;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  text-decoration: none;
}

@media (min-width: 640px) {
  [data-ari-leadership] .ari-lead-linkedin {
    width: 40px;
    height: 40px;
  }
}

[data-ari-leadership] .ari-lead-linkedin:hover {
  background-color: #e9652b; /* Theme accent color */
  color: #ffffff;
}

[data-ari-leadership] .ari-lead-linkedin svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

[data-ari-leadership] .ari-lead-linkedin:hover svg {
  transform: scale(1.12);
}


/* ── StatsGrid.jsx — By The Numbers borders ──────────────────────────────
   L-technique (grid top+left / card right+bottom) fails: next card’s opaque
   bg paints over the previous card’s right border (esp. card 1→2).
   Fix: outer 1px on grid + inset left edge on cards 2–4 (never covered).
*/
[data-ari-stats-grid] .ari-stats-grid {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  gap: 0 !important;
}

[data-ari-stats-grid] .ari-stats-grid-card {
  border: 0 !important;
  background-color: #080808 !important;
  position: relative !important;
}

/* Vertical dividers — inset so adjacent cards cannot cover them */
@media (min-width: 640px) {
  [data-ari-stats-grid] .ari-stats-grid-card:not(:first-child) {
    box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1) !important;
  }
}

/* 2-col: only odd→even column pairs need left inset; row 2 cards are 3 & 4.
   :not(:first-child) already covers cards 2,3,4 — on 2-col, card 3 is row2-col1
   and should NOT have a left divider (it's the left edge). Override: */
@media (min-width: 640px) and (max-width: 1023px) {
  [data-ari-stats-grid] .ari-stats-grid-card:nth-child(2n + 1) {
    box-shadow: none !important;
  }
  [data-ari-stats-grid] .ari-stats-grid-card:nth-child(n + 3) {
    /* horizontal seam between row 1 and row 2 */
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  }
  [data-ari-stats-grid] .ari-stats-grid-card:nth-child(4) {
    box-shadow:
      inset 1px 0 0 0 rgba(255, 255, 255, 0.1),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  }
}

@media (min-width: 1024px) {
  [data-ari-stats-grid] .ari-stats-grid-card:not(:first-child) {
    box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1) !important;
  }
}

/* Mobile 1-col: horizontal seams between stacked cards */
@media (max-width: 639px) {
  [data-ari-stats-grid] .ari-stats-grid-card:not(:first-child) {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
  }
}

/* ── ValuesBento.jsx — Principles grid borders ───────────────────────────
   Same L-technique paint-over: card 1→2 divider missing.
   Color: outline-variant/30 → #c8a698a6
*/
[data-ari-values-bento] .ari-values-grid {
  border: 1px solid #c8a698a6 !important;
  gap: 0 !important;
}

[data-ari-values-bento] .ari-values-card {
  border: 0 !important;
  background-color: #ffffff !important;
  position: relative !important;
}

[data-ari-values-bento] .ari-values-card:hover {
  background-color: rgba(233, 101, 43, 0.015) !important; /* accent/[0.015] */
}

@media (max-width: 639px) {
  [data-ari-values-bento] .ari-values-card:not(:first-child) {
    box-shadow: inset 0 1px 0 0 #c8a698a6 !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  [data-ari-values-bento] .ari-values-card:nth-child(2) {
    box-shadow: inset 1px 0 0 0 #c8a698a6 !important;
  }
  [data-ari-values-bento] .ari-values-card:nth-child(3) {
    box-shadow: inset 0 1px 0 0 #c8a698a6 !important;
  }
  [data-ari-values-bento] .ari-values-card:nth-child(4) {
    box-shadow:
      inset 1px 0 0 0 #c8a698a6,
      inset 0 1px 0 0 #c8a698a6 !important;
  }
}

@media (min-width: 1024px) {
  [data-ari-values-bento] .ari-values-card:not(:first-child) {
    box-shadow: inset 1px 0 0 0 #c8a698a6 !important;
  }
}

/* Certifications anchor */
[data-route="/about"] #certifications {
  scroll-margin-top: 120px;
  scroll-snap-margin-top: 120px;
}

/* ── Certifications.jsx — exact React configuration ─────────────────────
   Source: arihantaa/src/components/sections/about/Certifications.jsx

   Section:  py-16 md:py-24 · bg-inverse-surface
   Layout:   flex-col lg:flex-row · items-center · justify-between · gap-12
   Title:    Reveal — y30 · 0.65s · expo · margin 0 0 -50px 0
   Cards:    y15 · 0.5s · delay 0.1 / 0.25 · viewport once (no margin)
   Card UI:  p-8 · border-r/b white/10 · bg-white/[0.02]
             hover:bg-white/[0.04] · duration-300
             min-w-[150px] sm:min-w-[200px]
*/
[data-ari-certifications] .ari-cert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
}

@media (min-width: 640px) {
  [data-ari-certifications] .ari-cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  [data-ari-certifications] .ari-cert-grid {
    width: auto;
  }
}

[data-ari-certifications] .ari-cert-card {
  text-align: center;
  min-width: 150px;
  transition: background-color 0.3s ease;
}

@media (min-width: 640px) {
  [data-ari-certifications] .ari-cert-card {
    min-width: 200px;
  }
}

[data-ari-certifications] .ari-cert-card:hover {
  background-color: rgba(255, 255, 255, 0.04); /* white/[0.04] */
}

/* Fix: parity .eyebrow { font-size:11px } loads after Tailwind and crushes
   React classes text-sm (14px) / md:text-base (16px). Force React sizes. */
[data-ari-certifications] .ari-cert-card .eyebrow {
  color: #ffffff !important;
  margin-bottom: 0.25rem !important; /* !mb-1 */
  font-size: 0.875rem !important; /* text-sm */
  line-height: 1.25rem !important;
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  [data-ari-certifications] .ari-cert-card .eyebrow {
    font-size: 1rem !important; /* md:text-base */
    line-height: 1.5rem !important;
  }
}