/* Public inner pages (Phase 6). Imported after tokens.css + main.css. */

.page-hero {
  margin-block-start: 0; /* sits directly under main's --header-offset */
  position: relative;
  overflow: hidden;
  /* Gradient position is decorative & roughly symmetric — no RTL variant needed */
  background:
    radial-gradient(56rem 22rem at 82% -30%, rgba(60, 160, 155, 0.16), transparent 62%),
    linear-gradient(to bottom, var(--surface-card), var(--primary));
  padding-block: var(--space-8) var(--space-7);
  border-block-end: 1px solid var(--divider);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -55%;
  inset-inline-end: -5%;
  width: clamp(15rem, 28vw, 24rem);
  aspect-ratio: 1;
  background: url("../img/blop.b90c9a7086ba.svg") no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
}
.page-hero > .container { position: relative; }
.page-hero__eyebrow { color: var(--accent-text); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: var(--space-2); }
html[lang="ar"] .page-hero__eyebrow { text-transform: none; letter-spacing: 0; }
.page-hero__title { color: var(--dark-text-300); }
.page-hero__subtitle { color: var(--dark-text-200); font-size: var(--text-lg); max-width: 70ch; margin-block-start: var(--space-3); }
.page-hero .breadcrumbs { margin-block: 0 var(--space-4); }

.main-title { text-align: center; margin-block-end: 2rem; margin-block-start: 1rem; color: var(--dark-text-300); }
.empty-state {
  text-align: center;
  color: var(--dark-text-200);
  padding: var(--space-8) var(--space-6);
  border: 1.5px dashed var(--border-200);
  border-radius: var(--radius-xl);
  background: var(--boxes); /* soft tint instead of stark white; theme-aware */
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.cards-grid--tight { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cards-grid--wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-block-start: 1.5rem; }
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } }

.project-card { display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.15s, box-shadow 0.15s; }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
.project-card__title { color: var(--dark-text-300); }
.project-card__desc { color: var(--dark-text-200); flex: 1; }
.project-card__link { color: var(--accent-text); font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; }

.testimonial { display: flex; flex-direction: column; gap: 1rem; }
/* Header row: circular photo beside the stacked name/position; plain quote below. */
.testimonial__quote { color: var(--dark-text-200); }
.testimonial__who { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; }
.testimonial__who-text { display: flex; flex-direction: column; }
.testimonial__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
/* CMS-provided section image (homepage about panel etc.) */
.section-media { max-width: 100%; border-radius: var(--radius-lg); margin-block-start: 1rem; }
.testimonial__who strong { color: var(--accent-text); }
.testimonial__who span { color: var(--dark-text-100); font-size: 0.875rem; }

.logo-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; }
.logo-row__item { max-height: 72px; width: auto; }
.logo-row__name { color: var(--dark-text-100); font-weight: 600; }
/* Partner logos on the navy band show in full colour as uploaded (logos may carry
   their own background). No silhouette filter — it destroyed logos with a baked-in
   background by flattening them to a solid white block. */
.logo-row--dark .logo-row__name { color: var(--light-text-300); }
.band-divider { height: 1px; background: rgba(255, 255, 255, 0.14); margin-block: var(--space-7); }
.band--dark__label { display: flex; justify-content: center; margin-block-end: var(--space-5); }

/* Home: about panel with vision/mission cards overlapping its lower edge */
@media (min-width: 901px) {
  .about-section .panel-dark { text-align: start; padding-block-end: calc(var(--space-8) + var(--space-9)); }
  .about-section .panel-dark p { margin-inline: 0; }
  .about-section .about-grid { margin-block-start: calc(-1 * var(--space-9)); padding-inline: var(--space-7); }
}
.about-grid .icon-chip { margin-block-end: var(--space-3); }

/* Featured first card in a grid (Latest Updates) */
@media (min-width: 901px) {
  .cards-grid--featured > :first-child { grid-column: span 2; }
}

/* Newsletter card overlaps the CTA band that follows it — one closing moment */
.newsletter-section { position: relative; z-index: 2; margin-block-end: calc(-1 * var(--space-8)); }
.newsletter-section .newsletter { box-shadow: var(--elev-3); }
.newsletter-section + section { margin-block-start: 0; }
.newsletter-section + section .cta-band { padding-block-start: calc(var(--space-8) + var(--space-8)); }

.stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.stat-block { background: var(--accent); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); text-align: center; min-width: 150px; flex: 1; }
.stat-block__value { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; color: var(--stat-highlight); }
.stat-block__label { color: var(--primary); }
/* On a navy band the blocks dissolve into divided columns — yellow on navy ≈ 13:1 */
.band--dark .stats-row { gap: 0; }
.band--dark .stat-block { background: transparent; border-radius: 0; border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }
.band--dark .stat-block:first-child { border-inline-start: none; }
.band--dark .stat-block__label { color: var(--light-text-300); }

.update-card { display: flex; flex-direction: column; gap: 0.5rem; }
.tag { display: inline-block; width: fit-content; background: var(--accent); color: var(--secondary); border-radius: var(--radius-full); padding: 0.15rem 0.75rem; font-size: 0.75rem; font-weight: 600; }

.newsletter { text-align: center; }
.newsletter p { color: var(--dark-text-200); margin-block: 0.5rem 1rem; }
.newsletter__form { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; max-width: 480px; margin-inline: auto; }
.newsletter__form input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--divider);
  border-block-end: 2px solid var(--border-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.newsletter__form input:focus-visible {
  border-block-end-color: var(--accent-hover);
  box-shadow: var(--ring);
  outline: none;
}

.cta-band {
  position: relative;
  overflow: hidden;
  /* Gradient position decorative — no RTL variant needed */
  background:
    radial-gradient(30rem 18rem at 15% 130%, rgba(60, 160, 155, 0.4), transparent 65%),
    var(--surface-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset-block-end: -50%;
  inset-inline-end: -4%;
  width: 15rem;
  aspect-ratio: 1;
  background: url("../img/blop.b90c9a7086ba.svg") no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--light-text-400); }
.cta-band p { color: var(--light-text-300); margin-block-start: 0.5rem; }
.button--light { color: var(--light-text-400); border-color: var(--light-text-400); }
.button--light:hover { background: var(--light-text-400); color: var(--secondary); }

.event-card, .webinar-card, .season-card, .product-card { display: flex; flex-direction: column; gap: 0.75rem; }
.event-card .button, .webinar-card .button, .product-card .button { margin-block-start: auto; }
.card-media { position: relative; }
.card-media__badge { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); box-shadow: var(--elev-2); }
.play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 23, 45, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.box:hover .play-badge { background: var(--accent); color: var(--secondary); transform: scale(1.08); }
.webinar-card__meta { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
/* Fixed aspect ratios (not max-height) — no squashed images, no layout shift */
.event-card__logo, .webinar-card__thumb { border-radius: var(--radius-lg); width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.season-card__cover { border-radius: var(--radius-lg); width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.product-card__img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
/* Navy text on teal ≈ 5.5:1 — the old --primary text was 2.9:1 */
.year-pill { display: inline-block; width: fit-content; background: var(--accent); color: var(--secondary); border-radius: var(--radius-full); padding: 0.15rem 0.85rem; font-weight: 600; font-size: 0.875rem; }
.event-card__desc, .webinar-card__desc { color: var(--dark-text-200); flex: 1; }
.webinar-card__meta { color: var(--dark-text-100); font-size: 0.875rem; }

.detail-banner { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 21 / 9; object-fit: cover; margin-block-end: 1.5rem; box-shadow: var(--elev-2); }
.detail-logo { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-md); vertical-align: middle; }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.5rem; }
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-block-end: 1rem; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-aside { display: grid; gap: var(--space-5); align-self: start; align-content: start; }
@media (min-width: 901px) {
  .detail-aside { position: sticky; inset-block-start: var(--header-offset); }
}
.booking-card { display: grid; gap: var(--space-4); background: var(--surface-dark); }
.booking-card .button { width: 100%; }
.booking-card__meta { display: flex; align-items: center; gap: 0.5rem; color: var(--light-text-300); }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); color: var(--dark-text-200); margin-block-end: var(--space-4); }
.detail-meta__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.detail-meta .icon { color: var(--accent-text); }
.button--book { font-size: 1.05rem; }

/* Each field (photo / name / title / organization / bio) sits on its own row. */
.speaker-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; }
.speaker-card__photo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; transition: border-color 0.2s ease; margin-block-end: 0.4rem; }
.speaker-card:hover .speaker-card__photo { border-color: var(--accent); }
.speaker-card__name { color: var(--dark-text-300); font-size: 1.05rem; }
.speaker-card__title { color: var(--dark-text-200); font-size: 0.875rem; }
.speaker-card__org { color: var(--dark-text-100); font-size: 0.8125rem; }
.speaker-card__bio { color: var(--dark-text-100); font-size: 0.8125rem; margin-block-start: 0.5rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
.gallery__item { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); aspect-ratio: 4/3; }
/* Mosaic: the first shot anchors the grid on wider screens */
@media (min-width: 641px) {
  .gallery > .gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
}
/* Sponsors: uniform rounded tiles, full-colour logos contained inside */
.logo-row--tiles { gap: var(--space-5); }
.logo-row--tiles .logo-row__item {
  width: clamp(6.5rem, 5rem + 4vw, 8.5rem);
  height: clamp(6.5rem, 5rem + 4vw, 8.5rem);
  max-height: none;
  object-fit: contain;
  background: var(--surface-raised);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.logo-row--tiles .logo-row__item:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }

.timeline { list-style: none; border-inline-start: 3px solid var(--accent); margin-inline-start: 1rem; padding-inline-start: 1.5rem; display: grid; gap: 1.5rem; }
.timeline__item { position: relative; }
/* Node dot centred on the timeline rail (rail = 3px border at -1.5rem) */
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1.5rem - 8px);
  inset-block-start: 0.3rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--primary);
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline__item .year-pill { margin-block-end: 0.5rem; }

.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow: hidden; margin-block: 1rem; box-shadow: var(--elev-3); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.episode-list { display: grid; gap: 1.5rem; }
.episode-card__head { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.episode-card__thumb { max-width: 320px; width: 100%; border-radius: var(--radius-lg); }
.season-overview { color: var(--dark-text-200); max-width: 70ch; margin-block-end: var(--space-5); }
/* Episodes become media-object rows on desktop: text column + video column */
@media (min-width: 901px) {
  .episode-card { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: var(--space-6); align-items: start; }
  .episode-card > * { grid-column: 1; }
  .episode-card .video-embed { grid-column: 2; grid-row: 1 / span 2; margin-block: 0; }
}

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-end: 1.5rem; padding: 1rem; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--elev-1); }
.filter-bar select, .filter-bar input { padding: 0.5rem 0.85rem; border: 1px solid var(--border-200); border-radius: var(--radius-full); font-family: inherit; background: var(--surface-raised); color: var(--dark-text-300); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.filter-bar select:focus-visible, .filter-bar input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* With JS, filters auto-submit on change, so the manual Filter button is redundant. */
html.js .filter-bar__submit { display: none; }
/* Opportunity card: flex column so the gap rhythm is real and the actions row
   pins to the bottom (equal footer height across the grid). The title gets a
   card-scale size — without this it inherits the page-level h2 clamp. */
.opportunity-card { display: flex; flex-direction: column; gap: var(--space-4); }
.opportunity-card:hover { transform: translateY(-2px); box-shadow: var(--elev-3); border-color: rgba(60, 160, 155, 0.35); }
.opportunity-card__head { display: flex; gap: 1rem; align-items: flex-start; }
.opportunity-card__logo { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--elev-1); flex-shrink: 0; }
.opportunity-card__title { font-size: var(--text-xl); line-height: 1.35; margin: 0; }
.opportunity-card__title a { color: inherit; }
.opportunity-card__title a:hover { color: var(--accent-text); }
.opportunity-card__org { color: var(--dark-text-100); font-size: 0.875rem; margin: 0; margin-block-start: 0.25rem; }
.opportunity-card__desc { color: var(--dark-text-200); margin: 0; }
.opportunity-card__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--divider); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* .chip base lives in main.css */
.chip--accent { background: var(--accent-text); color: var(--surface-raised); font-weight: 600; }
.chip--icon { display: inline-flex; align-items: center; gap: 0.3rem; }

.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-block-start: 2rem; }
.pagination__link {
  color: var(--accent-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-raised);
  box-shadow: var(--elev-1);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.1rem;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.pagination__link:hover { background: var(--accent); color: var(--secondary); }
.pagination__status { color: var(--dark-text-200); font-size: var(--text-sm); }

.shop-hero { text-align: start; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.shop-hero p { max-width: 60ch; }
/* Product grid overlaps the dark shop panel's lower edge on desktop */
@media (min-width: 901px) {
  .shop-hero { padding-block-end: calc(var(--space-8) + var(--space-9)); }
  .shop-hero + .cards-grid { margin-block-start: calc(-1 * var(--space-9)); padding-inline: var(--space-7); position: relative; }
}
.product-card__price { color: var(--accent-text); font-weight: 600; }

/* .coming-soon lives in main.css (the standalone 500 page needs it too) */

/* Legal pages (privacy / terms) — readable prose column, aligned to text start (RTL-safe). */
.legal { padding-block: 1rem 3rem; text-align: start; }
.legal__updated { color: var(--dark-text-100); font-size: 0.9rem; margin-block-end: 2rem; }
.legal__section { margin-block-end: 1.75rem; }
.legal__heading { font-size: 1.25rem; margin-block-end: 0.6rem; }
.legal__text { color: var(--dark-text-200); max-width: 68ch; margin-block-end: 0.75rem; }

.book-sticky { display: none; }
@media (max-width: 900px) {
  /* Shown wherever the desktop booking sidebar doesn't fit */
  .book-sticky { display: block; position: fixed; inset-inline: 0; bottom: 0; padding: 0.75rem 1rem; background: var(--primary-transparent); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(16, 23, 45, 0.12); z-index: 500; text-align: center; }
  .book-sticky .button { width: 100%; }
}

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Mobile nav drawer */
#menu-button { display: none; }
.overlay { position: fixed; inset: 0; opacity: 0; background: var(--scrim); pointer-events: none; }

@media (max-width: 900px) {
  .drawer {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    height: 100dvh;
    width: min(340px, 82%);
    /* Closed = pushed off its own (inline-end) edge. Positive % moves right in
       LTR; RTL flips the sign below so it slides toward its edge in both dirs. */
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    background: var(--surface-raised);
    border-inline-start: 1px solid var(--divider);
    overflow-y: auto;
  }
  html[dir="rtl"] .drawer { transform: translateX(-100%); }
  /* Opened wins in BOTH directions — the RTL closed rule above is more specific
     than a bare .drawer.opened, so scope the open state to <html> to match it. */
  html .drawer.opened { transform: translateX(0); box-shadow: var(--elev-4); }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--header-offset) + var(--space-2)) var(--space-5) var(--space-6);
    min-height: 100%;
    gap: 0.35rem;
  }
  .nav-links a {
    display: block;
    text-align: start;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--dark-text-300);
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .nav-links a::after { display: none; } /* desktop underline animation is meaningless on drawer tiles */
  .nav-links a:hover,
  .nav-links a:focus-visible { background: var(--boxes); color: var(--accent-text); }
  .nav-links a:active { transform: scale(0.98); }
  .nav-links a[aria-current="page"] {
    background: var(--accent);
    color: var(--secondary); /* navy on teal — matches the solid-button contrast fix */
    font-weight: 600;
  }

  /* Theme toggle + language switch sit together on a divided footer row pinned
     to the bottom of the drawer. */
  .nav-links li:has(.theme-toggle) {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--divider);
  }
  .nav-links li:has(.theme-toggle),
  .nav-links li:has(.lang-switch) { display: flex; }
  .nav-links .lang-switch { flex: 1; text-align: center; }

  /* The sign-in CTA stays in the top bar (never in the drawer); trim it so it
     fits comfortably beside the hamburger on small screens. */
  .header-cta {
    padding: 0.5rem 1.1rem;
    font-size: var(--text-sm);
  }

  #menu-button {
    display: block; width: 30px; height: 22px; position: relative; z-index: 1001;
    background: none; border: none; cursor: pointer;
  }
  #menu-button span {
    position: absolute; inset-inline-start: 0; width: 26px; height: 4px;
    background: var(--dark-text-300); border-radius: var(--radius-full);
    transition: transform 0.25s, opacity 0.25s, width 0.25s;
  }
  #menu-button span:nth-child(1) { top: 0; }
  #menu-button span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  #menu-button span:nth-child(3) { bottom: 0; }
  #menu-button.cross span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  #menu-button.cross span:nth-child(2) { opacity: 0; width: 0; }
  #menu-button.cross span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .overlay { transition: opacity 0.25s; z-index: 998; }
  .overlay.opened { opacity: 1; pointer-events: all; }
}