/* ==========================================================================
   Saja Medflix — home.css
   The one page.

   Built like a room with the lights down: a dark opening, the library in the
   middle of it, one lit band of paper where the practical explanation lives,
   and back to dark for the close. The library is the point of the page and
   everything else is arranged to get the visitor there.
   ========================================================================== */

@layer components {

  /* ======================================================================
     1. Hero
     ====================================================================== */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4.5rem, 10vw, 8rem);
    background: var(--brand-950);
  }
  .hero-photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Nearly full strength, and the wash below does the darkening. The
       theatre photograph is already low key; multiplying a dark picture by a
       low opacity just gives black, and then the replacement image has to be
       chosen to survive the treatment rather than the other way round. */
    opacity: 0.85;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--grad-stage);
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Two washes, not one. The vertical one sets the mood and hands off to
       the section below; the horizontal one darkens only the side the copy
       is on, so the photograph keeps some life on the other side instead of
       being flattened everywhere to protect text that is not there. It is
       mirrored for Arabic, because the copy changes sides. */
    background:
      linear-gradient(to right, rgb(7 10 9 / 0.86) 0%, rgb(7 10 9 / 0.42) 52%, rgb(7 10 9 / 0.2) 100%),
      linear-gradient(to bottom, rgb(7 10 9 / 0.3) 0%, rgb(7 10 9 / 0.6) 55%, rgb(7 10 9 / 0.95) 100%);
  }
  [dir="rtl"] .hero::after {
    background:
      linear-gradient(to left, rgb(7 10 9 / 0.86) 0%, rgb(7 10 9 / 0.42) 52%, rgb(7 10 9 / 0.2) 100%),
      linear-gradient(to bottom, rgb(7 10 9 / 0.3) 0%, rgb(7 10 9 / 0.6) 55%, rgb(7 10 9 / 0.95) 100%);
  }
  /* Below the fold there is no two-column split, so the horizontal scrim
     would only mute the picture. */
  @media (max-width: 940px) {
    .hero::after,
    [dir="rtl"] .hero::after {
      background: linear-gradient(to bottom, rgb(7 10 9 / 0.62) 0%, rgb(7 10 9 / 0.8) 50%, rgb(7 10 9 / 0.96) 100%);
    }
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4.5rem);
  }
  @media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.95rem;
    border-radius: var(--r-full);
    border: 1px solid rgb(237 28 36 / 0.4);
    background: rgb(237 28 36 / 0.12);
    color: #ff8b8f;
    font-size: 0.78rem;
    font-weight: 500;
  }
  /* The dot that says "on air". Static under reduced motion, because a
     pulsing red dot is exactly the kind of thing that setting is for. */
  .hero-badge::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--red-500);
    box-shadow: 0 0 0 0 rgb(237 28 36 / 0.7);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-badge::before { animation: saja-pulse 2.4s var(--ease-out) infinite; }
    @keyframes saja-pulse {
      0%   { box-shadow: 0 0 0 0 rgb(237 28 36 / 0.7); }
      70%  { box-shadow: 0 0 0 10px rgb(237 28 36 / 0); }
      100% { box-shadow: 0 0 0 0 rgb(237 28 36 / 0); }
    }
  }

  .hero h1 {
    margin-block: 1.5rem 0;
    font-size: clamp(2.3rem, 1.1rem + 4.6vw, 4.2rem);
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
  }
  .hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg in oklab, var(--accent-400), var(--accent-200));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-lead {
    margin-block-start: 1.5rem;
    max-inline-size: 54ch;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    color: var(--ink-500);
  }

  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-block-start: 2.25rem; }

  .hero-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: 1.75rem;
    font-size: 0.85rem;
    color: var(--ink-400);
  }
  .hero-note img { block-size: 26px; inline-size: auto; background: #fff; border-radius: 6px; padding: 3px; }

  /* --- the poster ------------------------------------------------------ */
  .hero-poster {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--r-xl);
    border: 1px solid rgb(255 255 255 / 0.12);
    background: linear-gradient(165deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-lg);
    text-align: center;
  }
  .hero-poster::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg, rgb(0 166 81 / 0.6), transparent 42%, rgb(237 28 36 / 0.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  .hero-poster img { inline-size: clamp(130px, 20vw, 172px); }
  .hero-poster-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.08em;
  }
  [dir="rtl"] .hero-poster-name { letter-spacing: 0; }
  .hero-poster-sub { font-size: 0.85rem; color: var(--ink-500); max-inline-size: 28ch; }

  .hero-poster-strip {
    display: flex;
    gap: 0.4rem;
    margin-block-start: 0.25rem;
  }
  .hero-poster-strip span {
    inline-size: 26px;
    block-size: 4px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.16);
  }
  .hero-poster-strip span:nth-child(1) { background: var(--accent-500); }
  .hero-poster-strip span:nth-child(2) { background: var(--red-500); }

  /* ======================================================================
     2. The badge row
     ====================================================================== */
  .assurances {
    border-block: 1px solid var(--line);
    background: var(--brand-900);
  }
  .assurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .assurance {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  }
  .assurance + .assurance { border-inline-start: 1px solid var(--line); }
  @media (max-width: 860px) {
    .assurance + .assurance { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  }
  .assurance-icon {
    flex-shrink: 0;
    inline-size: 42px;
    block-size: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgb(0 166 81 / 0.12);
    color: var(--accent-400);
  }
  .assurance strong { display: block; font-size: 0.92rem; color: var(--ink-900); font-weight: 500; }
  .assurance span { font-size: 0.8rem; color: var(--ink-400); }

  /* ======================================================================
     3. Why
     ====================================================================== */
  .value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  .value {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: clamp(1.6rem, 3vw, 2.1rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--brand-800);
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  }
  .value:hover { border-color: rgb(0 166 81 / 0.4); transform: translateY(-4px); }
  /* A light that follows the pointer. Its position comes from site.js and
     defaults to the middle, so a keyboard user sees a static glow instead of
     nothing at all. */
  .value::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(0 166 81 / 0.16), transparent 70%);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out);
  }
  .value:hover::before { opacity: 1; }
  .value-icon {
    inline-size: 46px;
    block-size: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgb(255 255 255 / 0.06);
    color: var(--accent-400);
  }
  .value h3 { font-size: 1.08rem; font-weight: 600; }
  .value p { font-size: 0.92rem; color: var(--ink-500); }

  /* ======================================================================
     4. The library
     ====================================================================== */
  .library { scroll-margin-block-start: calc(var(--header-h) + 2rem); }

  /* The attribution. Above the grid and hard to miss: whose platform these
     courses are on is something a visitor is entitled to know before they
     create an account, not after. */
  .powered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
    margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
    background: linear-gradient(120deg in oklab, rgb(0 166 81 / 0.1), rgb(255 255 255 / 0.03) 70%);
  }
  .powered-mark {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--r-md);
    background: #fff;
  }
  .powered-mark img { block-size: 40px; inline-size: auto; }
  .powered-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  [dir="rtl"] .powered-label { letter-spacing: 0.02em; text-transform: none; }
  .powered-copy { flex: 1 1 260px; }
  .powered-copy strong { display: block; color: var(--ink-900); font-weight: 500; }
  .powered-copy p { font-size: 0.9rem; color: var(--ink-500); }
  .powered-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--accent-400);
    white-space: nowrap;
  }
  .powered-link:hover { color: var(--accent-200); }

  /* ======================================================================
     5. How it works — on the lit band
     ====================================================================== */
  .how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    counter-reset: how;
  }
  .how-step { counter-increment: how; }
  .how-num {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    margin-block-end: 1.1rem;
    border-radius: 50%;
    background: var(--accent-700);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
  }
  .how-num::before { content: counter(how); }
  .how-step h3 { font-size: 1.08rem; font-weight: 600; margin-block-end: 0.5rem; }
  .how-step p { font-size: 0.93rem; }

  .how-media {
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 28px 60px -30px rgb(13 21 18 / 0.45);
  }
  .how-media img { inline-size: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

  /* ======================================================================
     6. Specialties
     ====================================================================== */
  .spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    border: 1px solid var(--line);
    background: var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .spec {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    background: var(--brand-900);
    transition: background-color var(--t-base) var(--ease-out);
  }
  .spec:hover { background: var(--brand-700); }
  .spec svg { color: var(--accent-400); flex-shrink: 0; }
  .spec span { font-size: 0.92rem; color: var(--ink-700); }

  /* ======================================================================
     7. About
     ====================================================================== */
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4.5rem);
  }
  @media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

  .about-media { position: relative; }
  .about-media img {
    inline-size: 100%;
    aspect-ratio: 8 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .about-media::after {
    content: "";
    position: absolute;
    inset-block-end: -16px;
    inset-inline-start: -16px;
    inline-size: 56%;
    block-size: 56%;
    border-radius: var(--r-lg);
    border: 1.5px solid var(--red-500);
    opacity: 0.5;
    z-index: -1;
  }

  .about-points { margin-block-start: 1.75rem; display: grid; gap: 1rem; }
  .about-point { display: flex; gap: 0.85rem; align-items: flex-start; }
  .about-point svg { flex-shrink: 0; color: var(--accent-400); margin-block-start: 4px; }
  .about-point strong { display: block; color: var(--ink-900); font-weight: 500; }
  .about-point p { font-size: 0.92rem; color: var(--ink-500); }

  .partner-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-block-start: 2rem;
    padding: 1.1rem 1.35rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 0.04);
  }
  .partner-card img { block-size: 52px; inline-size: auto; flex-shrink: 0; }
  .partner-card p { font-size: 0.88rem; color: var(--ink-500); }

  /* ======================================================================
     8. FAQ
     ====================================================================== */
  .faq-list {
    max-inline-size: 880px;
    margin-inline: auto;
    border-block-start: 1px solid var(--line);
  }
  .faq-item { border-block-end: 1px solid var(--line); }
  .faq-question {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 1.35rem;
    text-align: start;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink-900);
    transition: color var(--t-fast) var(--ease-out);
  }
  .faq-question:hover { color: var(--accent-400); }
  .faq-question svg { flex-shrink: 0; color: var(--accent-500); transition: rotate var(--t-base) var(--ease-out); }
  .faq-item.is-open .faq-question svg { rotate: 180deg; }
  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base) var(--ease-out);
  }
  .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
  .faq-answer > div { overflow: hidden; }
  .faq-answer p { padding-block-end: 1.35rem; color: var(--ink-500); max-inline-size: 72ch; }

  /* ======================================================================
     9. Closing call
     ====================================================================== */
  .cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    text-align: center;
  }
  .cta-photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.7;
  }
  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--grad-stage);
  }
  .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(7 10 9 / 0.78), rgb(7 10 9 / 0.9));
  }
  .cta h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); color: #fff; text-wrap: balance; }
  .cta p { margin-block-start: 1.1rem; max-inline-size: 56ch; margin-inline: auto; color: var(--ink-500); }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-block-start: 2.25rem; }
}