/**
 * home.css — homepage sections (resources/views/home/*.blade.php).
 * Design-system tokens and logical properties only; component styling comes
 * from ds.css (cards, buttons, stat tiles, section headings). This file only
 * lays the sections out and adds the homepage-specific pieces (hero, steps,
 * mobile scroll-snap rail, FAQ width, closing CTA).
 *
 * Breakpoints: mobile < 768 · tablet 768–1023 · desktop 1024–1439 · wide >= 1440
 */

/* Every homepage section sets its own surface. */
.home {
    background-color: var(--surface-base);
    font-family: var(--font-sans);
}
.home p {
    font-family: var(--font-sans);
}
.home ul[role="list"],
.home ol[role="list"] {
    margin: 0;
    padding: 0;
    list-style: none;
}
.home .ds-section-heading__title {
    color: var(--ink-primary);
}

/* ==========================================================================
   1. Hero (audit #26, #27) — brand surface, one h1, F device as an edge crop.
   ========================================================================== */
.home-hero {
    position: relative;
    overflow: hidden;
    /* Content-driven height (no full-viewport band); stays well under 80vh. */
    padding-block: var(--space-12) var(--space-16);
}
@media (min-width: 1024px) {
    .home-hero { padding-block: var(--space-16) var(--space-24); }
}
/* The two-bar F device, cropped off the bottom edge at the trailing side.
   It never mirrors: in RTL it keeps its shape and sits inside the edge. */
.home-hero::after {
    content: "";
    position: absolute;
    inset-block-end: -120px;
    inset-inline-end: -40px;
    inline-size: 360px;
    block-size: 360px;
    opacity: var(--opacity-device-graphic);
    pointer-events: none;
    background:
        linear-gradient(var(--ink-on-brand), var(--ink-on-brand)) 0 48px / 288px 48px no-repeat,
        linear-gradient(var(--ink-on-brand), var(--ink-on-brand)) 0 144px / 200px 48px no-repeat,
        linear-gradient(var(--ink-on-brand), var(--ink-on-brand)) 0 48px / 48px 312px no-repeat;
}
[dir="rtl"] .home-hero::after {
    inset-inline-end: var(--space-8);
}
@media (max-width: 767px) {
    .home-hero::after {
        inline-size: 180px;
        block-size: 180px;
        inset-block-end: -70px;
        transform: scale(0.5);
        transform-origin: bottom center;
    }
    [dir="rtl"] .home-hero::after { inset-inline-end: 0; }
}
.home-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-8);
    align-items: center;
}
@media (min-width: 1024px) {
    .home-hero--media .home-hero__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}
.home-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    max-inline-size: calc(var(--content-max) * 0.625);
}
.home-hero__title {
    color: var(--ink-on-brand);
    text-wrap: balance;
}
/* The wide display look comes from the type scale, not from tatweel. */
@media (min-width: 1440px) {
    .home-hero__title {
        font-size: calc(var(--type-display-lg-size) * 1.25);
    }
    /* Latin only: Arabic keeps its 1.5 line-height from the type scale. */
    .home-hero__title:lang(en) {
        line-height: 1.25;
    }
}
.home-hero__subtitle {
    font-family: var(--font-display);
    color: var(--ink-on-brand);
}
.home-hero__lead {
    max-inline-size: 56ch;
    color: var(--ink-on-brand);
}
.home-hero__actions {
    margin-block-start: var(--space-4);
    gap: var(--space-3);
}
@media (max-width: 767px) {
    .home-hero__actions,
    .home-hero__actions .ds-btn {
        inline-size: 100%;
    }
}
/* Secondary action on a red surface: outlined in white (see report: the
   design system has no "secondary on brand" variant yet). */
.home-hero__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    /* The box is known before the image loads: no layout shift. */
    aspect-ratio: 4 / 3;
    max-block-size: 60vh;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   2. Steps (audit #8, #9) — three numbered cards, all visible.
   ========================================================================== */
@media (min-width: 768px) {
    .home-steps__list.ds-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.home-steps__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}
@media (min-width: 1024px) {
    .home-steps__item { padding: var(--space-6); }
}
.home-steps__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.home-steps__icon {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-full);
    background-color: var(--brand-red);
}
.home-steps__icon img {
    display: block;
    inline-size: 32px;
    block-size: 32px;
    object-fit: contain;
}
.home-steps__number {
    font-family: var(--font-display);
    font-size: var(--type-title-1-size);
    line-height: var(--type-title-1-leading);
    font-weight: 700;
    color: var(--ink-brand);
}
.home-steps__title {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink-primary);
}

/* ==========================================================================
   3. Card rails (programs, stories, testimonials, news)
   Below 1024px: a CSS scroll-snap carousel (no library). Desktop: the ds-grid.
   ========================================================================== */
.home-rail__item,
.home .ds-grid > li {
    display: flex;
    min-inline-size: 0;
}
.home-rail__item > .ds-card,
.home .ds-grid > li > .ds-card {
    flex: 1 1 auto;
}
@media (max-width: 1023px) {
    .home .home-rail.ds-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: var(--space-3);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        padding-block: var(--space-1) var(--space-3);
        scrollbar-width: thin;
    }
    .home-rail__item {
        scroll-snap-align: start;
    }
    /* A rail that scrolls is a keyboard stop (home.js): ring inside its box. */
    .home .home-rail.ds-grid:focus-visible {
        outline: 2px solid var(--border-brand);
        outline-offset: -2px;
        border-radius: var(--radius-md);
    }
}
/* Tablet: two cards and a peek of the next one. */
@media (min-width: 768px) and (max-width: 1023px) {
    .home .home-rail.ds-grid {
        grid-auto-columns: 44%;
        gap: var(--space-4);
    }
}
.home-card__text {
    margin: 0;
}
/* Media placeholder when a post/story has no image: sunken ground with the
   F device as a watermark, so cards in a row keep the same shape. */
.home-card__placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--brand-red), var(--brand-red)) calc(50% + 12px) calc(50% - 20px) / 72px 12px no-repeat,
        linear-gradient(var(--brand-red), var(--brand-red)) calc(50% + 1px) calc(50% + 4px) / 50px 12px no-repeat,
        linear-gradient(var(--brand-red), var(--brand-red)) calc(50% - 24px) calc(50% + 8px) / 12px 68px no-repeat,
        var(--surface-sunken);
    opacity: 1;
}
/* The F reads as a watermark: the ground covers it again, leaving the
   device at its --opacity-device-graphic strength (1 - 0.18). */
.home-card__placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--surface-sunken);
    opacity: calc(1 - var(--opacity-device-graphic));
}
/* Cards in a row share a height: the footer always sits on the bottom edge. */
.home-card .ds-card__footer {
    margin-block-start: auto;
}
.home-card__text--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.home-card__more {
    font-weight: 600;
    color: var(--ink-brand);
}
.home-card time {
    font-family: var(--font-sans);
}

/* Testimonials */
.home-quote__figure {
    margin: 0;
}
.home-quote__text {
    margin: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: var(--space-1) solid var(--brand-red);
    color: var(--ink-secondary);
}
.home-quote__text p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.home-quote .ds-card__media img {
    object-position: top center;
}

/* ==========================================================================
   5. Statistics (audit #22)
   ========================================================================== */
.home-stats .ds-stat-tile {
    inline-size: 100%;
}
@media (max-width: 767px) {
    .home-stats__grid.ds-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }
    .home-stats .ds-stat-tile { padding: var(--space-4); }
}

/* ==========================================================================
   9. FAQ — the shared .ds-accordion (ds.css), capped to a readable width.
   ========================================================================== */
.home-faq__inner .ds-accordion {
    max-inline-size: calc(var(--content-max) * 0.75);
}

/* ==========================================================================
   10. Closing CTA band — the view's one brand card.
   ========================================================================== */
.home-cta {
    padding-block-start: 0;
}
.home-cta__card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
}
@media (min-width: 768px) {
    .home-cta__card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-10) var(--space-12);
    }
}
.home-cta__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-inline-size: 640px;
}
.home-cta__text h2,
.home-cta__text p {
    margin: 0;
    color: var(--ink-on-brand);
}
.home-cta__text h2 {
    font-family: var(--font-display);
}
@media (max-width: 767px) {
    .home-cta__card .ds-btn { inline-size: 100%; }
}