/*
 * public-hero.css — THE ONLY public-frontend hero stylesheet.
 *
 * ONE unified public-website hero. Renders through partials/page-hero.blade.php.
 * Solid brand background, edge-to-edge (no radius), fixed 240px on desktop.
 * Content = breadcrumb, title, subtitle, badges (NO icon). The content block is
 * pinned to the right on a centered 1200px track so its right edge lines up with
 * the page content container below the hero. Full-width on mobile, no inset.
 *
 * Fully isolated from the dashboard hero (page-hero.css / .app-page-hero):
 *   PUBLIC  → layouts.app       → public-hero.css  (this file, .page-hero*)
 *   USER    → layouts.user      → page-hero.css    (.app-page-hero*)
 *   ADMIN   → layouts.dashboard → page-hero.css    (.app-page-hero*)
 * The Public Hero must never depend on page-hero.css or sidebar.css.
 *
 * Canonical partial: partials/page-hero.blade.php
 * Canonical class:   .page-hero
 */

/* ─────────────────────────────────────────────────────────
 * TOKENS
 * ───────────────────────────────────────────────────────── */
:root {
    --public-hero-bg:        #815ef5;
    --public-hero-height:    240px;
    --public-hero-track:     1200px;   /* centered content track (matches page container) */
    --public-hero-pad-x:     24px;     /* track horizontal padding */
    --public-hero-text-w:    520px;    /* right-aligned content block width */
    --public-hero-font:      "Tajawal", "Cairo", "Segoe UI", system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────
 * SHELL — full-bleed, fixed height, no radius, vertically centered
 * ───────────────────────────────────────────────────────── */
.page-hero {
    position: relative;
    overflow: hidden;
    height: var(--public-hero-height);
    min-height: var(--public-hero-height);
    max-height: var(--public-hero-height);
    display: flex;
    align-items: center;
    background: var(--public-hero-bg);
    color: #fff;
    box-sizing: border-box;
    font-family: var(--public-hero-font);
    /* no border-radius — edge to edge */
}

.page-hero__pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* ─────────────────────────────────────────────────────────
 * ROW — centered 1200px track; content pinned RIGHT.
 * The track is forced LTR so justify-content:flex-end resolves to the RIGHT
 * edge even though the surrounding page wrappers set direction:rtl. The text
 * INSIDE is restored to rtl. Left side of the track stays empty.
 * ───────────────────────────────────────────────────────── */
.page-hero__row {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--public-hero-track);
    margin: 0 auto;
    padding: 0 var(--public-hero-pad-x);
    display: flex;
    justify-content: flex-end;   /* LTR track → right edge */
    align-items: center;
    direction: ltr;
    box-sizing: border-box;
}

.page-hero__text {
    width: var(--public-hero-text-w);
    max-width: var(--public-hero-text-w);
    text-align: right;
    direction: rtl;
}

/* ─────────────────────────────────────────────────────────
 * BREADCRUMB → TITLE → SUBTITLE → BADGES  (this order, nothing else)
 * ───────────────────────────────────────────────────────── */
.page-hero__breadcrumb {
    margin: 0 0 12px;
}
.page-hero__breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.80);
}
.page-hero__breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.page-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.80);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.55);
    outline: none;
}
.page-hero__breadcrumb li.is-current > span {
    color: #fff;
    font-weight: 700;
}
.page-hero__breadcrumb-icon {
    font-size: 15px;
}
.page-hero__breadcrumb-sep {
    font-size: 14px;
    opacity: 0.6;
}

.page-hero__title {
    margin: 0 0 8px;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-hero__subtitle {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-hero__badges {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.page-hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
}
.page-hero__badges li i {
    font-size: 13px;
}
/* Invisible one-row placeholder: keeps a badge-less hero the exact same height
   as a hero with a single row of badges, so the title/subtitle position matches
   /quizzes. Occupies real box space; hidden from view and assistive tech. */
.page-hero__badge-spacer {
    visibility: hidden;
}

/* ─────────────────────────────────────────────────────────
 * MOBILE — full-width purple header, internal padding only, no inset.
 * Height relaxes to fit but never below 220px; content stays centered.
 * ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-hero {
        height: auto;
        min-height: 220px;
        max-height: none;
        padding-block: 24px;
    }
    .page-hero__row {
        max-width: none;
        margin: 0;
        padding: 0 20px;      /* internal padding only; hero itself is full width */
    }
    .page-hero__text {
        width: 100%;
        max-width: none;
    }
    .page-hero__title {
        font-size: 26px;
    }
    .page-hero__subtitle {
        font-size: 14px;
    }
}

/* ─────────────────────────────────────────────────────────
 * PUBLIC PAGE-WRAPPER RESET — keep the full-bleed hero edge-to-edge.
 * On prod, page-hero.css (loaded app-wide via the shared design-system-css
 * partial) applies padding:15px to these public wrappers, insetting the hero.
 * The content below is self-spaced via .container, so zeroing this is safe.
 * No-op on staging (page-hero.css isn't loaded on public pages here).
 * Loads AFTER page-hero.css → wins on source order (no !important needed).
 * ───────────────────────────────────────────────────────── */
.quizzes-page-wrapper,
.articles-page-wrapper {
  padding: 0;
}