/* =====================================================
   Arab Union Tech — Responsive Stylesheet
   Mobile-First Breakpoints
   ===================================================== */

/* ─── Large Desktop (1400px+) ────────────────────────── */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* ─── Tablet Landscape & Small Desktop (< 1100px) ───── */
@media (max-width: 1100px) {
    .programs-grid       { grid-template-columns: repeat(2, 1fr); }
    .footer-grid         { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
    .footer-cta-card     { align-items: flex-start; flex-direction: column; }
    .footer-cta-copy h2  { max-width: none; }
    .values-grid         { grid-template-columns: repeat(3, 1fr); }
    .membership-types    { grid-template-columns: repeat(2, 1fr); }
    .masthead-grid       { grid-template-columns: 1fr; }
    .page-title          { max-width: none; }
    .page-side-visual,
    .knowledge-visual    { min-height: 360px; }
    .knowledge-shell,
    .form-shell          { grid-template-columns: 1fr; }
    /* Phase 4 */
    .why-union-layout    { grid-template-columns: 1fr; }
    .value-props-grid    { grid-template-columns: repeat(2, 1fr); }
    .fields-domain-grid  { grid-template-columns: repeat(3, 1fr); }
    .fields-domain-intro { grid-template-columns: 1fr; }
    .hero-stage-shell    { grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; }
    .hero-stage-title    { font-size: clamp(2.5rem, 4.8vw, 4rem); }
    .hero-stage-routes   { grid-template-columns: 1fr; }
    .hero-stage-stat .stat-num { font-size: 1.9rem; }
    .hero-screen-grid    { grid-template-columns: minmax(0, 1fr) 340px; }
    .hero-screen-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-page .content-page-hero-grid { grid-template-columns: 1fr; }
    .content-page .content-page-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reports-page .reports-hero-grid,
    .reports-featured-card,
    .reports-section-head,
    .reports-contribution-shell { grid-template-columns: 1fr; }
    .reports-page .reports-hero-metrics,
    .reports-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) and (max-height: 820px) {
    .hero-stage-section .hero-body { padding: .75rem 0 .45rem; }
    .hero-stage-shell {
        grid-template-columns: minmax(0, 1.34fr) minmax(235px, .62fr);
        gap: .85rem;
        min-height: clamp(220px, 31vh, 320px);
    }
    .hero-stage-copy,
    .hero-stage-visual-card {
        min-height: clamp(220px, 30vh, 310px);
        padding: .9rem;
    }
    .hero-stage-title {
        font-size: clamp(1.95rem, 3.2vw, 2.9rem);
        margin-bottom: .4rem;
        max-width: 18ch;
    }
    .hero-stage-desc {
        font-size: .82rem;
        line-height: 1.5;
        margin-bottom: .6rem;
        max-width: 44ch;
    }
    .hero-stage-actions { gap: .55rem; }
    .hero-stage-actions .btn-lg {
        padding: .72rem 1.15rem;
        font-size: .86rem;
    }
    .hero-globe-scene { width: min(100%, 250px); }
    .hero-globe { width: min(100%, 205px); }
    .hero-visual-chip {
        padding: .4rem .58rem;
        font-size: .64rem;
    }
    .hero-visual-chip.chip-side { display: none; }
    .hero-stage-routes {
        gap: .55rem;
        margin-top: .45rem;
    }
    .hero-stage-route {
        gap: .6rem;
        padding: .58rem .65rem;
        border-radius: 18px;
    }
    .hero-stage-route-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
    .hero-stage-route-body small { margin-bottom: .12rem; }
    .hero-stage-route-body strong {
        font-size: .78rem;
        margin-bottom: .1rem;
    }
    .hero-stage-route-body span {
        font-size: .64rem;
        line-height: 1.35;
    }
    .hero-stage-stat {
        padding: .58rem .7rem;
    }
    .hero-stage-stat .stat-num { font-size: 1.32rem; }
    .hero-stage-stat-label,
    .hero-stage-stat-eyebrow { font-size: .62rem; }
    .hero-stage-stat-label { font-size: .64rem; }
}

/* ─── Tablet Portrait (< 900px) ─────────────────────── */
@media (max-width: 900px) {
    /* Phase 4 hero */
    .hero-visual-bg            { display: none; }
    .hero-stage-section .hero-body { padding: 1.35rem 0 .9rem; }
    .hero-stage-shell          { grid-template-columns: 1fr; min-height: auto; }
    .hero-stage-copy,
    .hero-stage-visual-card    { min-height: auto; }
    .hero-stage-title,
    .hero-stage-desc           { max-width: none; }
    .hero-stage-title          { font-size: clamp(2.4rem, 7vw, 4rem); }
    .hero-stage-routes         { grid-template-columns: 1fr; }
    .hero-stage-visual-card    { min-height: 360px; }
    .hero-stage-stats-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-stage-stat:nth-child(3),
    .hero-stage-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.12); }
    .hero-stage-stat:nth-child(3),
    .hero-stage-stat:nth-child(4) { border-inline-start: none; }
    .hero-screen-section .hero-body { min-height: auto; }
    .hero-screen-grid          {
        grid-template-columns: 1fr;
        grid-template-areas:
            'main'
            'aside'
            'metrics';
        gap: 1rem;
    }
    .hero-body                 { padding: 3rem 0 2rem; }
    .hero-screen-title,
    .hero-screen-copy          { max-width: none; }
    .hero-preview-panel        { grid-template-rows: 260px auto; }
    .hero-screen-metrics       { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Phase 4 layout */
    .why-union-layout       { grid-template-columns: 1fr; }
    .value-props-grid       { grid-template-columns: repeat(2, 1fr); }
    .fields-domain-grid     { grid-template-columns: repeat(2, 1fr); }
    .fields-domain-summary  { max-width: 420px; }
    .membership-home-grid   { grid-template-columns: 1fr; }
    .partnerships-home-grid { grid-template-columns: 1fr; }

    /* Navbar */
    .site-header { padding-top: .45rem; }
    .nav-links   { display: none; }
    .hamburger   { display: flex; }
    .navbar      { height: 76px; }
    .navbar-brand { max-width: 168px; }
    .brand-logo { height: 60px; }
    body > :not(.site-header):first-of-type:not(.hero-section),
    .page-content { padding-top: 84px; }

    /* Hero light — tablet/portrait */
    .hero-orbit-section {
        padding-top: 84px;
        min-height: auto;
    }
    .hero-orbit-body { padding: 1.5rem 0 1rem; }
    .hero-orbit-shell { gap: 0; min-height: 320px; }
    .hero-stage-title { font-size: clamp(1.9rem, 6vw, 2.6rem); }
    .hero-stage-desc  { font-size: .94rem; white-space: normal; }
    .hero-orbit-visual {
        left: -10%;
        top: 0;
        bottom: 0;
        transform: none;
        width: min(110vw, 860px);
        opacity: 0.44;
    }

    /* Hero */
    .stats-grid         { grid-template-columns: repeat(2, 1fr); }
    .hero-content       { padding: 3rem 0; }

    /* Layout */
    .why-grid           { grid-template-columns: repeat(2, 1fr); }
    .articles-grid      { grid-template-columns: repeat(2, 1fr); }
    .reports-grid       { grid-template-columns: repeat(2, 1fr); }
    .reports-list       { grid-template-columns: 1fr; }
    .media-grid         { grid-template-columns: repeat(2, 1fr); }
    .page-fact-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-shell       { flex-direction: column; align-items: flex-start; }
    .story-grid         { grid-template-columns: 1fr; }
    .contact-grid       { grid-template-columns: 1fr; }
    .about-grid         { grid-template-columns: 1fr; }
    .partner-type-grid  { grid-template-columns: 1fr; }
    .form-row           { grid-template-columns: 1fr; }
    .info-card-grid     { grid-template-columns: repeat(2, 1fr); }
    .final-cta          { grid-template-columns: 1fr; }
    .final-cta-actions  { justify-content: flex-start; }
    .content-page .content-page-hero-metrics { grid-template-columns: 1fr; }
    .content-page-panel-illustration { min-height: 190px; }
    .reports-page .page-title { max-width: none; }
    .reports-page .reports-hero-metrics,
    .reports-pillars-grid,
    .reports-library-grid { grid-template-columns: 1fr; }
    .reports-panel-illustration { min-height: 190px; }
    .reports-contribution-actions { justify-content: flex-start; }

    /* Event card — show meta below on tablet */
    .event-card {
        grid-template-columns: auto 1fr;
        row-gap: .6rem;
    }
    .agenda-card {
        grid-template-columns: auto 1fr;
    }
    .agenda-card > :last-child {
        grid-column: 1 / -1;
        justify-self: flex-start;
    }
    .event-meta {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: .5rem;
    }

    /* Values */
    .values-grid { grid-template-columns: repeat(2, 1fr); }

    /* Membership */
    .membership-types { grid-template-columns: 1fr 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col.footer-brand { grid-column: 1 / -1; }
    .footer-cta-actions { justify-content: flex-start; }
}

/* ─── Mobile (< 640px) ───────────────────────────────── */
@media (max-width: 640px) {
    /* Global */
    .section    { padding: 3.5rem 0; }
    .section-lg { padding: 4rem 0; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.45rem; }
    .fields-domain-grid    { grid-template-columns: 1fr; }
    .fields-domain-summary { max-width: none; }

    /* Hero */
    .hero-section       { min-height: auto; padding: 5rem 0 2.5rem; }
    .hero-actions       { flex-direction: column; align-items: center; }
    .hero-actions .btn  { width: 100%; max-width: 300px; justify-content: center; }
    .hero-stage-section .hero-body { padding: 1rem 0 .75rem; }
    .hero-stage-copy    { border-radius: 24px; padding: 1.2rem 1rem; }
    .hero-stage-title   { font-size: clamp(2rem, 9vw, 2.9rem); }
    .hero-stage-desc    { font-size: .94rem; }
    .hero-stage-actions { width: 100%; }
    .hero-stage-visual-card { min-height: 280px; border-radius: 24px; }
    .hero-visual-chip.chip-side { display: none; }
    .hero-stage-route   { padding: .9rem; border-radius: 20px; }
    .hero-stage-route-icon { width: 50px; height: 50px; }
    .hero-stage-stat    { padding: .95rem 1rem; }
    .hero-stage-stat .stat-num { font-size: 1.7rem; }
    .hero-stage-stats-grid { grid-template-columns: 1fr 1fr; }
    .hero-orbit-body    { padding: .8rem 0 .7rem; }
    /* Hero light — mobile */
    .hero-orbit-section { padding-top: 64px; }
    .hero-orbit-body    { padding: 1rem 0 .75rem; }
    .hero-stage-title   { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
    .hero-stage-title-line { gap: .25rem .5rem; }
    .hero-stage-desc    { font-size: .92rem; }
    .hero-stage-kicker  { font-size: .78rem; }
    .hero-stage-actions { gap: .6rem; }
    .btn-hero-primary,
    .btn-hero-outline,
    .btn-hero-white     { width: 100%; justify-content: center; }
    .hero-orbit-shell   { min-height: 280px; }
    .hero-orbit-visual  {
        left: -18%;
        top: 0;
        bottom: 0;
        transform: none;
        width: min(138vw, 760px);
        opacity: 0.34;
    }
    .hero-stage-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-stage-stat:nth-child(2n)   { border-inline-start: 1px solid var(--hero-border); }
    .hero-stage-stat:nth-child(n+3)  { border-top: 1px solid var(--hero-border); }
    .hero-stage-stat + .hero-stage-stat { border-inline-start: none; }
    .hero-screen-main   { border-radius: 26px; padding: 1.25rem; }
    .hero-screen-pill   { margin-bottom: .85rem; }
    .hero-screen-title  { font-size: clamp(2rem, 9vw, 2.9rem); }
    .hero-screen-actions { width: 100%; }
    .hero-screen-points { gap: .5rem; }
    .hero-screen-point  { width: 100%; justify-content: center; }
    .hero-preview-media { min-height: 220px; border-radius: 24px; }
    .hero-preview-panel { grid-template-rows: 220px auto; }
    .hero-route-card    { grid-template-columns: auto 1fr; }
    .hero-route-order   { display: none; }
    .hero-screen-metrics { grid-template-columns: 1fr; }
    .stats-grid         { grid-template-columns: repeat(2, 1fr); }
    .stat-num           { font-size: 1.65rem; }

    /* Grids → single column */
    .why-grid           { grid-template-columns: 1fr; }
    .programs-grid      { grid-template-columns: 1fr; }
    .articles-grid      { grid-template-columns: 1fr; }
    .reports-grid       { grid-template-columns: 1fr; }
    .reports-list       { grid-template-columns: 1fr; }
    .media-grid         { grid-template-columns: 1fr; }
    .values-grid        { grid-template-columns: 1fr; }
    .membership-types   { grid-template-columns: 1fr; }
    .partner-type-grid  { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .page-masthead      { padding: 1.25rem 0 1.5rem; }
    .page-title         { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .page-fact-grid     { grid-template-columns: 1fr; }
    .content-page .page-title { font-size: clamp(1.55rem, 6.8vw, 2.2rem); }
    .content-page-hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .content-page-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .content-page-panel-shell { border-radius: 24px; padding: 1rem; }
    .content-page-panel-illustration { min-height: 170px; padding: .85rem; }
    .page-side-visual,
    .knowledge-visual   { min-height: 280px; padding: 1rem; border-radius: 24px; }
    .section-block      { padding: 1.35rem 0 3rem; }
    .filter-shell       { padding: 1rem; border-radius: 20px; }
    .form-aside,
    .form-panel         { padding: 1.2rem; border-radius: 24px; }

    /* Event card */
    .event-card {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }
    .event-date-box { display: none; }
    .agenda-card {
        grid-template-columns: 1fr;
        padding: 1.2rem;
    }
    .agenda-date {
        min-width: 0;
        width: 100%;
    }
    .media-card-top,
    .media-card h3,
    .media-card p,
    .media-meta { padding-inline: 1rem; }
    .media-meta { padding-bottom: 1rem; }
    .report-row         { padding: 1.25rem; }
    .report-row-top     { align-items: flex-start; }
    .report-actions     { align-items: flex-start; }
    .final-cta          { border-radius: 24px; padding: 1.35rem; }
    .reports-hero-actions,
    .reports-featured-actions,
    .reports-contribution-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .reports-hero-actions .btn,
    .reports-featured-actions .btn,
    .reports-contribution-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .reports-page .reports-hero-metric,
    .reports-pillar-card,
    .reports-library-card,
    .reports-panel-card,
    .reports-featured-side,
    .reports-featured-card { padding: 1.2rem; }
    .reports-panel-shell,
    .reports-contribution-shell { border-radius: 24px; padding: 1rem; }
    .reports-panel-illustration { min-height: 170px; padding: .85rem; }
    .reports-card-footer { align-items: flex-start; }

    /* Section header */
    .section-header { margin-bottom: 2rem; }

    /* Forms */
    .form-row        { grid-template-columns: 1fr; }
    .form-section    { padding: 1.75rem 1.25rem; }

    /* Navbar */
    .brand-sub { display: none; }

    /* Hero stats — compact 2×2 grid on mobile */
    .hero-stats       { padding: 1.25rem 0; }
    .stat-num         { font-size: 1.45rem; }
    .stat-label       { font-size: .73rem; }

    /* Phase 4 mobile */
    .why-union-content .value-props-grid,
    .value-props-grid       { grid-template-columns: 1fr; }
    .fields-domain-grid     { grid-template-columns: repeat(2, 1fr); }
    .membership-types-mini  { grid-template-columns: 1fr; }
    .hero-secondary-links   { flex-direction: column; align-items: center; gap: .75rem; }

    /* Footer */
    .footer-grid      { grid-template-columns: 1fr; }
    .footer-main      { padding: 2.5rem 0; }
    .footer-cta-strip { padding-top: 2rem; }
    .footer-cta-card  { padding: 1.5rem 1.25rem; border-radius: 22px; }
    .footer-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .footer-cta-actions .btn,
    .footer-actions .btn { width: 100%; justify-content: center; }
    .footer-actions { width: 100%; }
    .footer-badges  { gap: .45rem; }
    .quote-panel    { padding: 1.75rem 1.25rem; }
    .info-card-grid { grid-template-columns: 1fr; }
    .contact-social-list { gap: .5rem; }

    /* CTA buttons */
    .cta-actions      { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 100%; max-width: 280px; justify-content: center; }

    /* Contact info */
    .contact-info-card { padding: 1.75rem 1.25rem; }

    /* Page hero */
    .page-hero { padding: 4rem 0 2.5rem; }
}

/* ─── Small Mobile (< 400px) ─────────────────────────── */
@media (max-width: 400px) {
    .container { padding: 0 1rem; }
    .hero-title { font-size: 1.55rem; }
    .hero-stage-title { font-size: 1.75rem; }
    .hero-orbit-section .hero-stage-title { font-size: clamp(1.18rem, 6.6vw, 1.6rem); }
    .hero-stage-title-line { gap: .15rem .35rem; }
    .hero-stage-stats-grid { grid-template-columns: 1fr; }
    .hero-stage-stat + .hero-stage-stat { border-inline-start: none; border-top: 1px solid rgba(255,255,255,.12); }
    .hero-screen-title { font-size: 1.8rem; }
    .hero-preview-chip { font-size: .73rem; }
}

/* ─── Phase 5 — About Page ───────────────────────────── */
@media (max-width: 1100px) {
    .problem-solve-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .about-challenge-grid { grid-template-columns: 1fr; }
    .bridge-grid          { grid-template-columns: 1fr; }
    .hero-title-editorial { font-size: 2rem; }
    .hero-stage-card { max-width: calc(100% - 1.25rem); }
    .transform-grid       { grid-template-columns: 1fr; }
    .bridge-card          { grid-template-columns: 1fr auto 1fr; }
    .vision-grid          { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .problem-solve-grid   { grid-template-columns: repeat(2, 1fr); }
    .about-intro-badges   { gap: .5rem; }
    .founding-quote-block { padding: 2.25rem 1.5rem; }
    .founding-quote-text  { font-size: 1rem; }
    .transform-grid       { gap: .85rem; }
    .about-hero-subtitle  { font-size: .9rem; }
    .vision-card          { padding: 1.75rem 1.25rem; }
    .vision-principle-card { gap: 1rem; }
}
@media (max-width: 400px) {
    .problem-solve-grid   { grid-template-columns: 1fr; }
}

/* ─── Print ──────────────────────────────────────────── */
@media print {
    .site-header, .hamburger, .mobile-menu,
    .mobile-overlay, .site-footer { display: none !important; }
    body { background: white; color: black; }
}