/* ─────────────────────────────────────────────────────────────────────────────
   About — built around a centred hero: the children of the artwork gather on
   both edges and point inward, the academy's pink logo stands between them.
   The rest of the page keeps that axis: centred headings, the vision as a
   manifesto, the two pillars mirrored around the academy's seal, milestones
   and values. Teachers, founder and contact come from blocks.css.
   ───────────────────────────────────────────────────────────────────────────── */

@layer page {

  /* ── Hero ────────────────────────────────────────────────────────────────
     Measured on the artwork (16:9): the children and their floating cards
     fill 0–29% and 68–100% of its width; the centre 31–67% is open and light.
     On wide screens the artwork spans the hero and the content column stays
     inside that open centre (36vw). */
  .about-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    place-items: center;
    min-height: clamp(38rem, 56.25vw, 100svh);
    padding-top: calc(var(--header-h) + var(--s-5));
    padding-bottom: calc(var(--hero-foot) * 1.35 + var(--s-6));
    text-align: center;
  }
  .about-hero__art { position: absolute; inset: 0; z-index: -2; }
  .about-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  /* A soft light behind the centre column and a fade into the page below. */
  .about-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at 50% 48%, rgb(255 255 255 / 0.6), transparent),
      linear-gradient(to bottom, transparent 76%, var(--bg));
  }

  .about-hero__content {
    width: min(36vw, 38rem);
    display: grid;
    justify-items: center;
    gap: var(--s-4);
  }
  .about-hero__crumbs ol {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.62);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  /* The logo stands on a soft halo and floats gently. */
  .about-hero__emblem {
    position: relative;
    width: min(11vw, 20svh, 13rem);
    margin-block: var(--s-2);
  }
  .about-hero__emblem::before {
    content: "";
    position: absolute;
    inset: -28% -46%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(255 240 245 / 0.6) 55%, transparent);
  }
  .about-hero__emblem picture { display: block; animation: emblem-float 7s ease-in-out infinite; }
  .about-hero__emblem img { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgb(204 39 89 / 0.22)); }
  @keyframes emblem-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
  }

  .about-hero__eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.55; }
  .about-hero__title { font-size: clamp(2.6rem, 1rem + 3.6vw, 4.6rem); line-height: var(--lh-tight); }
  .about-hero__lead { max-width: 34rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.85; text-wrap: balance; }

  /* Round loop around «نحن», fitted as described in components.css (its tail
     rises from the far side of the word). It needs room before «من». */
  .scribble--round { --scribble-inset: -0.253em -0.632em -0.046em -0.753em; --scribble-gap: 0.41em; }
  /* The tail rises above the word toward the eyebrow: keep them apart. */
  .about-hero__title:has(.scribble--round) { margin-top: 0.2em; }
  /* The hero title enters without a reveal, so the loop draws on load. */
  .about-hero .scribble__mark {
    mask-image: conic-gradient(from 200deg, #000 var(--scribble-sweep), transparent 0);
    animation: scribble-draw 0.9s var(--ease-out) 0.7s both;
  }

  /* ── Figures: the panel rises into the hero's foot ──────────────────────── */
  .about-facts { position: relative; z-index: 2; margin-top: calc(var(--hero-foot) * -1.35); }

  /* ── Story: the vision as a manifesto, two pillars around the seal ─────── */
  .manifesto {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
  }
  .manifesto__mark { width: 3.25rem; height: 3.25rem; color: var(--pink); opacity: 0.85; }
  .manifesto__text p {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 1rem + 1.5vw, 2.3rem);
    font-weight: 600;
    line-height: 1.75;
    color: var(--ink);
    text-wrap: balance;
  }

  .pillars {
    --pillars-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--pillars-gap);
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }
  .pillar {
    height: 100%;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--s-3);
    padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    text-align: center;
  }
  .pillar__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: linear-gradient(150deg, var(--pink-soft), var(--white));
    border: 1px solid var(--pink-border);
    color: var(--pink-strong);
  }
  .pillar__icon svg { width: 1.5rem; height: 1.5rem; }
  .pillar__title { font-size: var(--fs-h3); }
  .pillar__text { color: var(--ink-2); line-height: 2; max-width: 30rem; }
  .pillars__seal {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 6px var(--pink-mist), 0 0 0 7px var(--pink-border), var(--shadow-md);
  }
  .pillars__seal img { width: 3rem; height: 3rem; }
  /* A hairline joins the two pillars through the seal, only across the gaps
     (the cards are translucent, so it must not run behind them). */
  .pillars__seal::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline: calc(var(--pillars-gap) * -1);
    height: 1px;
    background: linear-gradient(to left, var(--pink-border) calc(var(--pillars-gap) - 0.5rem), transparent 0 calc(100% - var(--pillars-gap) + 0.5rem), var(--pink-border) 0);
  }

  .about-motto {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    color: var(--pink-strong);
    text-align: center;
    text-wrap: balance;
  }
  .about-motto::before,
  .about-motto::after {
    content: "";
    flex: 1 1 3rem;
    height: 1px;
    background: linear-gradient(to var(--line-dir, left), transparent, var(--pink-border));
  }
  .about-motto::after { --line-dir: right; }

  /* ── Milestones ─────────────────────────────────────────────────────────── */
  .journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
  }
  /* The line runs through the nodes, from the first year to the last. */
  .journey::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    inset-inline: 12.5%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--pink), var(--pink-border));
  }
  .journey__step { position: relative; display: grid; justify-items: center; gap: var(--s-5); }
  .journey__node {
    position: relative;
    z-index: 1;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 3px var(--pink), 0 0 0 8px rgb(244 63 117 / 0.12);
  }
  .journey__card {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-6);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    text-align: center;
  }
  .journey__year {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--pink);
  }
  .journey__title { font-size: 1.15rem; }
  .journey__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.9; }
  .journey__art {
    position: absolute;
    bottom: -1.9rem;
    inset-inline-end: -1.1rem;
    width: 6.25rem;
    rotate: -8deg;
    animation: sticker-float 6.5s ease-in-out infinite;
  }

  /* ── Values ─────────────────────────────────────────────────────────────── */
  .about-values { isolation: isolate; }
  .about-values .ambient { --glow-a: 12% 30%; --glow-b: 90% 75%; }
  .values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }
  .value {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--s-3);
    padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    text-align: center;
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .value:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-md); }
  .value__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: linear-gradient(150deg, var(--pink-soft), var(--white));
    border: 1px solid var(--pink-border);
    color: var(--pink-strong);
  }
  .value__icon svg { width: 1.5rem; height: 1.5rem; }
  .value__title { font-size: 1.2rem; }
  .value__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.95; }

  /* The founder's section is deep-toned; give the contact panel after it room. */
  .founder + .cta { padding-top: var(--section-y); }

  /* ── Responsive ─────────────────────────────────────────────────────────── */
  @media (max-width: 1080px) {
    .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-10); }
    .journey::before { display: none; }
    .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Below 900px the open centre is too narrow for the text: the artwork comes
     first, edge to edge, with the logo standing in its centre; the text
     follows below it. The content wrapper steps aside so the logo can share
     the artwork's grid cell. */
  @media (max-width: 899px) {
    .about-hero {
      grid-template-columns: minmax(0, 1fr);
      place-items: stretch;
      min-height: 0;
      padding-top: calc(var(--header-h) + var(--s-2));
      padding-bottom: calc(var(--hero-foot) * 0.72 + var(--s-8));
    }
    .about-hero__art { position: relative; inset: auto; z-index: 0; grid-row: 1; grid-column: 1; aspect-ratio: 16 / 9; }
    .about-hero__art::after { background: radial-gradient(closest-side at 50% 50%, rgb(255 255 255 / 0.55), transparent), linear-gradient(to bottom, transparent 70%, var(--bg)); }
    .about-hero__content { display: contents; }
    .about-hero__emblem { grid-row: 1; grid-column: 1; place-self: center; width: 22vw; z-index: 1; margin: 0; }
    .about-hero__crumbs { grid-row: 2; justify-self: center; margin-top: var(--s-4); }
    .about-hero__eyebrow { grid-row: 3; justify-self: center; margin-top: var(--s-4); }
    .about-hero__title { grid-row: 4; justify-self: center; margin-top: var(--s-4); }
    .about-hero__lead { grid-row: 5; justify-self: center; margin: var(--s-3) var(--gutter) 0; }
    .about-facts { margin-top: calc(var(--hero-foot) * -0.72); }

    .pillars { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .pillars__seal::before { inset-inline: auto; left: 50%; top: calc(var(--pillars-gap) * -1); bottom: calc(var(--pillars-gap) * -1); width: 1px; height: auto; background: linear-gradient(to bottom, var(--pink-border) calc(var(--pillars-gap) - 0.5rem), transparent 0 calc(100% - var(--pillars-gap) + 0.5rem), var(--pink-border) 0); }
  }
  @media (max-width: 720px) {
    .values { grid-template-columns: minmax(0, 1fr); }
    /* Milestones become a vertical line with the nodes on the start side. */
    .journey { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); padding-inline-start: var(--s-8); }
    .journey::before { display: block; inset-inline: auto; inset-inline-start: 0.5rem; top: 1.6rem; bottom: 1.6rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--pink), var(--pink-border)); }
    .journey__step { justify-items: stretch; }
    .journey__node { position: absolute; top: 1.6rem; inset-inline-start: calc(var(--s-8) * -1 + 0.4rem - 0.1rem); }
    .journey__card { justify-items: start; text-align: start; }
    /* Inside the card's empty top corner, clear of the next card. */
    .journey__art { width: 4.5rem; top: 1.25rem; bottom: auto; inset-inline-end: 1.25rem; }
    .about-motto::before, .about-motto::after { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .journey__art, .about-hero__emblem picture { animation: none; }
    .about-hero .scribble__mark { animation: none; mask-image: none; }
  }
}