/* =============================================================================
   sections.css — per-section composition
   ABOUT · VALUES (5-block logomark grid) · METHODOLOGY (vertical timeline)
   GALLERY (bento) · CONTACT.  Plus soft brand-gradient glows.
   Tokens only · logical props · clamp() fluid · motion degrades.
   ========================================================================== */

/* =====================================================================
   SOFT BRAND GLOWS  (cheap radial washes behind key sections)
   ===================================================================== */
.section--about::before,
.section--values::before,
.section--contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 12% 8%,
      color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 70%),
    radial-gradient(46% 56% at 92% 96%,
      color-mix(in srgb, var(--brand-secondary) 11%, transparent), transparent 72%);
}
[data-theme="dark"] .section--about::before,
[data-theme="dark"] .section--values::before,
[data-theme="dark"] .section--contact::before {
  background:
    radial-gradient(42% 52% at 12% 8%,
      color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 70%),
    radial-gradient(48% 58% at 92% 96%,
      color-mix(in srgb, var(--brand-secondary) 14%, transparent), transparent 72%);
}
/* keep content above the glow + the values motif layer */
.section > .container { position: relative; z-index: 1; }

/* client: NO gradient wash on the contact section (about/values keep theirs) */
.section--contact::before,
[data-theme="dark"] .section--contact::before { background: none; }

/* =====================================================================
   ABOUT
   ===================================================================== */
.section--about .about__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.about__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: start;
}
.about__icon {
  display: inline-flex;
  inline-size: 38px;
  block-size: 38px;
  margin-block-end: var(--space-1);
}
.about__icon .logomark { inline-size: 100%; block-size: 100%; }
.about__card h3 { margin: 0; }
.about__card p { color: var(--text-muted); margin: 0; }

/* tilt cards — preserve-3d + tiny CSS-only hover tilt (JS may enhance) */
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--dur) var(--ease-cinematic),
              box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}
.tilt:hover {
  transform: perspective(900px) translateY(-4px) rotateX(2.5deg) rotateY(-2.5deg);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .tilt, .tilt:hover { transform: none; }
}

/* محاور التميّز */
.about__axes { margin-block-start: var(--space-5); }
.about__axes-title {
  text-align: center;
  margin-block-end: var(--space-4);
}
.axes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .section--about .about__grid { grid-template-columns: 1fr; }
  .axes-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   VALUES — loose 3×3 grid echoing the 5-square logomark
   Mapping (col,row) keyed off [data-square]:
     tl -> col 1 / row 1        tr -> col 3 / row 1
                  c -> col 2 / row 2
     bl -> col 1 / row 3        br -> col 3 / row 3
   Each card's --accent = the matching --mark-* token.
   ===================================================================== */
/* TETRIS-style 3-over-2 brick layout (client: "لو تستخدمو التترس أفضل").
   6-col grid; each tile spans 2 cols. Top row = 3 tiles, bottom row = 2 tiles
   offset by one column → interlocking brick pattern, balanced and centered. */
.section--values .values-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-3);
  max-inline-size: 660px;
  margin-inline: auto;
}

.values-grid .value-card { grid-column: span 2; }
.values-grid .value-card:nth-child(1) { grid-row: 1; grid-column: 1 / span 2; --accent: var(--c-purple); }
.values-grid .value-card:nth-child(2) { grid-row: 1; grid-column: 3 / span 2; --accent: var(--c-pink); }
.values-grid .value-card:nth-child(3) { grid-row: 1; grid-column: 5 / span 2; --accent: var(--c-lpurple); }
.values-grid .value-card:nth-child(4) { grid-row: 2; grid-column: 2 / span 2; --accent: var(--c-yellow); }
.values-grid .value-card:nth-child(5) { grid-row: 2; grid-column: 4 / span 2; --accent: var(--c-dpurple); }
/* dark: deep-purple icon is near-invisible on the charcoal card — lift it to a
   brighter violet so all five value icons stay clearly visible */
[data-theme="dark"] .values-grid .value-card:nth-child(5) { --accent: var(--c-purple); }

/* The motif layer for this section sits beneath the grid */
.section--values .motif-bg { z-index: 0; }

/* MOBILE (< 768px): tidy 2-column grid (reset the brick placement) */
@media (max-width: 768px) {
  .section--values .values-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    max-inline-size: 420px;
  }
  .values-grid .value-card:nth-child(1),
  .values-grid .value-card:nth-child(2),
  .values-grid .value-card:nth-child(3),
  .values-grid .value-card:nth-child(4),
  .values-grid .value-card:nth-child(5) { grid-row: auto; grid-column: auto; }
  .value-card { min-block-size: 96px; }
}

@media (max-width: 460px) {
  .section--values .values-grid { grid-template-columns: 1fr; max-inline-size: 280px; }
}

/* =====================================================================
   METHODOLOGY — vertical timeline (4 alternating steps on desktop)
   PROGRESS CONTRACT for animations.js:
     - The fill is .timeline::after, scaled vertically.
     - Drive it with custom property  --progress  (0 .. 1), set on .timeline.
     - CSS uses: transform: scaleY(var(--progress, 0)); transform-origin: top.
   The track is .timeline::before. Nodes get .is-active (styled in components).
   ===================================================================== */
/* NEW: 4 stage cards using the client's designed artwork (photo + details are
   baked into each image). Replaces the old vertical timeline markup; the
   .timeline rules further down are now unused but harmless. */
.method-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.method-card {
  background: var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--c-navy) 8%, transparent);
  border-radius: 18px;
  overflow: hidden;
  transition: transform var(--dur-fast, .2s) var(--ease-out, ease);
}
.method-card:hover { transform: translateY(-5px); }
.method-card img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1000 / 1600;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) { .method-card:hover { transform: none; } }
@media (max-width: 900px) { .method-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .method-grid { grid-template-columns: 1fr; max-inline-size: 360px; margin-inline: auto; }
}

.section--methodology .timeline {
  position: relative;
  display: grid;
  gap: var(--space-4);
  max-inline-size: 640px;
  margin-inline: auto;
  padding-block: var(--space-2);
  /* default so the line is visible even before JS sets it */
  --progress: 0;
}

/* STRAIGHT spine on the inline-start edge — track + fill.
   Client note: the alternating left/right layout made the line read as zig-zag.
   A single-side layout (all cards on one side, spine on the other) keeps the
   line perfectly straight. inset-inline-start:11px puts the 4px spine's centre
   at 13px — exactly the centre of the 26px node in its column. */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 11px;
  inline-size: 4px;
  border-radius: 999px;
}
/* track */
.timeline::before {
  background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
}
/* fill — JS scales this via --progress (origin: top) */
.timeline::after {
  background: var(--gradient-brand);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand-primary) 45%, transparent);
  transform: scaleY(var(--progress, 0));
  transform-origin: top center;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* each step: node on the spine, card beside it on the same single side */
.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
}
.timeline__step .timeline__node { grid-column: 1; grid-row: 1; justify-self: center; }
/* all cards on ONE side (no alternating) so the spine never zig-zags */
.timeline__card,
.timeline__step:nth-child(even) .timeline__card {
  grid-column: 2;
  grid-row: 1;
  text-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .timeline::after { transition: none; }
}

@media (max-width: 768px) {
  .section--methodology .timeline { gap: var(--space-3); max-inline-size: 520px; }
}

/* =====================================================================
   ACADEMIC STAGES — two division cards (International + National)
   ===================================================================== */
.section--stages .stages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-inline-size: 860px;
  margin-inline: auto;
  align-items: start;
}
.stages-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: start;
}
.stages-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.stages-card__mark {
  display: inline-flex;
  inline-size: 42px;
  block-size: 42px;
  flex: none;
}
.stages-card__mark .logomark { inline-size: 100%; block-size: 100%; }
.stages-card__titles { display: flex; flex-direction: column; line-height: 1.4; }
.stages-card__head h3 { margin: 0; }
.lang-ar .stages-card__head h3 { word-spacing: .1em; }
.stages-card__note {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-block-start: .28em;   /* clear the Arabic descenders above this line */
  color: var(--text-muted);
}
.stages-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.stages-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
  font-weight: 600;
  color: var(--text-primary);
}
.stages-list .motif-bullet { inline-size: 13px; block-size: 13px; flex: none; }

.stages-cta {
  margin-block-start: var(--space-5);
  text-align: center;
}

@media (max-width: 768px) {
  .section--stages .stages-grid { grid-template-columns: 1fr; max-inline-size: 480px; }
}

/* =====================================================================
   SCIENTIFIC METHODOLOGY — three ordered steps (#stages).
   A real <ol>: the client framed STEAM / environment / enrichment as an
   ordered 3-step sequence, so the numbering carries meaning.
   Flat cards (no gradient, no shadow) to match the rest of the site.
   ===================================================================== */
.steps-grid {
  list-style: none;                 /* we render our own numerals */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-inline-size: 980px;
  margin-inline: auto;
  align-items: stretch;
}
.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  text-align: start;
  transition: transform var(--dur-fast, .2s) var(--ease-out, ease);
}
.step-card:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .step-card:hover { transform: none; } }

/* Numeral sits in a rounded square — echoes the brand logomark motif.
   All three badges are the SAME purple with a WHITE numeral (client asked for
   every number to be white, "زي رقم 1"). They can't keep the pink/yellow badges
   AND white numerals: white on --c-yellow is ~1.3:1 and on --c-pink ~2.1:1 —
   effectively invisible. Purple + white is 4.6:1 and passes. */
.step-card__num {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: 12px;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--c-purple);
  color: #fff;
}

.step-card__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}
.step-card__text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; max-inline-size: 520px; }
}

/* =====================================================================
   GALLERY — responsive BENTO via masonry-ish CSS columns
   Each .gallery-item honors --ratio (set inline by JS) via aspect-ratio.
   Using CSS multicol keeps the bento flowing with mixed 3/2, 3/4, 1/1.
   ===================================================================== */
.section--gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  max-inline-size: 980px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .section--gallery .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .section--gallery .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .section--gallery .gallery-grid { grid-template-columns: repeat(2, 1fr); max-inline-size: 22rem; margin-inline: auto; }
}

/* =====================================================================
   CONTACT — intro + form, 2 columns desktop / stacked mobile
   ===================================================================== */
.section--contact .contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
/* form-only variant (client removed the intro column): one centered column */
.section--contact .contact__grid--form-only {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.contact__intro { text-align: start; }
.contact__intro .section__kicker { margin-block-end: var(--space-3); }
.contact__intro .section__title { text-align: start; margin-inline: 0; }
.contact__intro .section__lead { text-align: start; margin-inline: 0; }

.social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.contact__form { display: flex; flex-direction: column; }
.contact__submit {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

/* the contact section header inside intro shouldn't be centered */
.section--contact .section__head { text-align: start; margin-inline: 0; }

/* =====================================================================
   ABOUT-PRIME (#stages) — 3 client-designed boards as full-width slides.
   Text is baked into each image; click opens the full-res file to zoom.
   ===================================================================== */
.section--prime .prime-slides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 cards side by side */
  gap: var(--space-4);
  max-inline-size: 1100px;
  margin-inline: auto;
  align-items: start;
}
@media (max-width: 860px) {
  .section--prime .prime-slides { grid-template-columns: 1fr; max-inline-size: 440px; }
}
.prime-slide {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  cursor: zoom-in;
  transition: transform var(--dur-fast, .2s) var(--ease-out, ease),
              box-shadow var(--dur-fast, .2s) var(--ease-out, ease);
}
.prime-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -14px rgba(30, 20, 60, .35);
}
.prime-slide img { display: block; inline-size: 100%; block-size: auto; }
@media (prefers-reduced-motion: reduce) { .prime-slide:hover { transform: none; } }

/* in-page lightbox for the board slides (js/prime.js) */
.pl-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;                 /* above nav + floating launcher */
  display: grid;
  place-items: center;
  padding: 4vmin;
  background: rgba(10, 8, 20, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.pl-overlay.is-open { opacity: 1; visibility: visible; }
.pl-img {
  max-inline-size: 95vw;
  max-block-size: 88vh;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.pl-close {
  position: absolute;
  inset-block-start: max(14px, 3vmin);
  inset-inline-end: max(14px, 3vmin);
  inline-size: 48px;
  block-size: 48px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast, .2s) var(--ease-out, ease);
}
.pl-close:hover { background: rgba(255, 255, 255, .3); }
body.pl-lock { overflow: hidden; }

/* =====================================================================
   IN-SITE FORMS — registration (#register) + visit request (#visit).
   Submit builds a WhatsApp message (js/forms.js). Flat card, 2-col fields.
   ===================================================================== */
.section--form .wa-form {
  max-inline-size: 720px;
  margin-inline: auto;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.wa-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-2);
  margin: 0;
}
.wa-group legend {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--brand-primary);
  padding-inline: var(--space-2);
}
.wa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-4);
}
.wa-grid .field--full { grid-column: 1 / -1; }
.wa-grid .field { margin-block-end: var(--space-3); }
.field__opt { font-weight: 500; color: var(--text-muted); font-size: 0.85em; }
.wa-form__submit { inline-size: 100%; margin-block-start: var(--space-2); }
.wa-form__hint {
  margin: 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.is-hidden { display: none !important; }

@media (max-width: 620px) {
  .wa-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .section--contact .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}