/* =============================================================================
   Aamal Aljoud — the site as an app, on phones, tablets and foldables
   -----------------------------------------------------------------------------
   One media query holds all of it: up to 1024px wide, and touch tablets up to
   1194px so an iPad held sideways is an app as well. Outside it nothing here
   applies and the desktop is exactly as it was.

   What changes inside it:
   - the top bar is gone; the header keeps only its search dialog;
   - a floating tab bar sits at the thumb — الرئيسية، المشاريع، من نحن، المزيد;
   - المزيد lifts a sheet with the rest of the site as tiles.

   Colours, type, icons and shapes are the site's own tokens; nothing new.
   ========================================================================== */

.aj-tabbar,
.aj-sheet {
    display: none;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1194px) {

    :root {
        /* The pages already offset their heroes by the header's height;
           with no header, that offset is zero. */
        --aj-header-h: 0px;

        --aj-tabbar-h: 64px;
        --aj-tabbar-gap: 10px;
        --aj-app-bottom: calc(var(--aj-tabbar-h) + var(--aj-tabbar-gap) * 2 + env(safe-area-inset-bottom, 0px));
        --aj-app-ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ------------------------------------------------------------- shell -- */

    /* The bar goes; the header element stays for its search dialog, which is
       fixed and opened from the sheet. */
    .aj-header .sticky-header {
        display: none !important;
    }

    /* The filter has to go with the bar: a backdrop-filter makes the header
       the containing block of anything fixed inside it, and the search
       dialog would be pinned to a header that is now zero pixels tall. */
    .aj-header,
    .aj-header.is-scrolled {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: none;
        border: 0;
        box-shadow: none;
        min-block-size: 0;
        position: static;
    }

    body.aj-shell {
        padding-block-start: env(safe-area-inset-top, 0px);
        padding-block-end: var(--aj-app-bottom);
    }

    /* ------------------------------------------------------------ search -- */

    /* The dialog's own fixes are in shell.css, shared with the desktop; a
       phone needs a 16px field (below it Safari zooms in) and a panel that
       starts under the notch. */
    .aj-header #search #search-input {
        font-size: max(16px, var(--aj-fs-body));
    }

    .aj-search__panel {
        margin-block-start: calc(env(safe-area-inset-top, 0px) + 16px);
        padding: 16px;
        inline-size: calc(100% - 24px);
    }

    /* ------------------------------------------------------------- forms -- */

    /* Safari on an iPhone zooms the page into any field set below 16px the
       moment it is tapped, and leaves it zoomed. The site's fields were 15px. */
    .aj-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .aj-shell select,
    .aj-shell textarea {
        font-size: max(16px, 1em);
    }

    /* ------------------------------------------------------ page fixes -- */

    /* In an app the tab you are on takes you back to the top (app.js), so
       the floating back-to-top button is not needed, and it sat over the
       content just above the bar. */
    .aj-shell button.scroltop {
        display: none !important;
    }

    /* The lead story's link had a 16:10 ratio and a 340px floor, which
       together made it at least 544px wide: on a phone the card was wider
       than its column and its frame cut the headline off. The floor alone
       sets the height here. */
    .aj-news-card--overlay .aj-news-card__link {
        aspect-ratio: auto;
        inline-size: 100%;
    }

    /* The team swipes on a phone: see pages/about.css. */

    /* The figures, two by two: a phone reads four numbers at a glance
       instead of scrolling past a list of them. Below 360px the list stays,
       since a seven-digit figure will not fit two across. */
    @media (min-width: 360px) and (max-width: 720px) {
        .aj-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .aj-stats > .aj-stat {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
            justify-content: flex-start;
            min-inline-size: 0;
            padding: 18px 16px;
        }

        .aj-stats > .aj-stat .aj-stat__icon {
            block-size: 44px;
            border-radius: var(--aj-radius-md);
            inline-size: 44px;
        }

        .aj-stats > .aj-stat .aj-stat__value {
            flex-wrap: wrap;
            row-gap: 2px;
        }

        .aj-stats > .aj-stat .aj-stat__number {
            font-size: clamp(1.25rem, 5.4vw, 1.625rem);
        }

        .aj-stats > .aj-stat .aj-stat__unit {
            flex-basis: 100%;
            font-size: var(--aj-fs-caption);
            margin-inline-start: 0;
        }

        /* the rules between cells: a fading upright between the columns,
           a fading line between the rows */
        .aj-stats > .aj-stat::before,
        .aj-stats > .aj-stat::after {
            display: none;
        }

        .aj-stats > .aj-stat:nth-child(even)::before {
            background: linear-gradient(to bottom, transparent 0%, var(--aj-divider) 24%, var(--aj-divider) 76%, transparent 100%);
            block-size: auto;
            content: '';
            display: block;
            inline-size: 1px;
            inset-block: 16px;
            inset-inline-start: 0;
            position: absolute;
        }

        .aj-stats > .aj-stat:nth-child(n + 3)::after {
            background: linear-gradient(to left, transparent 0%, var(--aj-divider) 18%, var(--aj-divider) 82%, transparent 100%);
            block-size: 1px;
            content: '';
            display: block;
            inset-block-start: 0;
            inset-inline: 16px;
            position: absolute;
        }
    }

    /* ------------------------------------------------------------ tab bar -- */

    .aj-tabbar {
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
        backdrop-filter: saturate(1.6) blur(18px);
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(32, 36, 43, 0.08);
        border-radius: 22px;
        box-shadow: 0 12px 32px rgba(32, 36, 43, 0.14), 0 1px 3px rgba(32, 36, 43, 0.08);
        display: block;
        height: var(--aj-tabbar-h);
        inset-block-end: calc(var(--aj-tabbar-gap) + env(safe-area-inset-bottom, 0px));
        inset-inline: max(var(--aj-tabbar-gap), env(safe-area-inset-left, 0px));
        margin-inline: auto;
        max-width: 540px;
        position: fixed;
        z-index: var(--aj-z-drawer);
    }

    .aj-tabbar__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 6px;
    }

    .aj-tabbar__list > li {
        display: flex;
    }

    .aj-tabbar__item {
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        background: none;
        border: 0;
        border-radius: 16px;
        color: var(--aj-text-muted);
        cursor: pointer;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        font-family: inherit;
        font-size: 11.5px;
        font-weight: var(--aj-fw-medium);
        gap: 3px;
        justify-content: center;
        line-height: 1.2;
        padding: 0;
        text-decoration: none;
        transition: color var(--aj-duration) var(--aj-ease), transform 160ms var(--aj-ease);
    }

    .aj-tabbar__item:hover {
        color: var(--aj-text);
    }

    .aj-tabbar__item:active {
        transform: scale(0.93);
    }

    .aj-tabbar__item:focus-visible {
        outline: 2px solid var(--aj-accent);
        outline-offset: -2px;
    }

    .aj-tabbar__icon {
        align-items: center;
        border-radius: var(--aj-radius-pill);
        display: inline-flex;
        height: 30px;
        justify-content: center;
        position: relative;
        transition: background-color 280ms var(--aj-app-ease), transform 280ms var(--aj-app-ease);
        width: 52px;
    }

    .aj-tabbar__icon .aj-icon {
        height: 22px;
        width: 22px;
    }

    .aj-tabbar__item.is-active,
    .aj-tabbar__item[aria-expanded="true"] {
        color: var(--aj-accent);
        font-weight: var(--aj-fw-bold);
    }

    .aj-tabbar__item.is-active .aj-tabbar__icon,
    .aj-tabbar__item[aria-expanded="true"] .aj-tabbar__icon {
        background: var(--aj-accent-soft);
    }

    .aj-tabbar__item.is-active .aj-tabbar__icon {
        animation: aj-tab-pop 420ms var(--aj-app-ease);
    }

    @keyframes aj-tab-pop {
        0% { transform: scale(0.82); }
        60% { transform: scale(1.06); }
        100% { transform: scale(1); }
    }

    /* -------------------------------------------------------- more sheet -- */

    .aj-sheet {
        display: block;
        inset: 0;
        position: fixed;
        z-index: var(--aj-z-modal);
    }

    .aj-sheet[hidden] {
        display: none;
    }

    .aj-sheet__backdrop {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background: rgba(20, 23, 28, 0.5);
        inset: 0;
        opacity: 0;
        position: absolute;
        transition: opacity 360ms var(--aj-app-ease);
    }

    .aj-sheet.is-open .aj-sheet__backdrop {
        opacity: 1;
    }

    .aj-sheet__panel {
        background: var(--aj-charcoal);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
        color: var(--aj-text-inverse);
        inset-block-end: 0;
        inset-inline: 0;
        isolation: isolate;
        margin-inline: auto;
        max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px));
        max-width: 640px;
        outline: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        position: absolute;
        transform: translate3d(0, 100%, 0);
        transition: transform 480ms var(--aj-app-ease);
    }

    .aj-sheet.is-open .aj-sheet__panel {
        transform: translate3d(0, var(--aj-sheet-drag, 0px), 0);
    }

    .aj-sheet.is-dragging .aj-sheet__panel {
        transition: none;
    }

    /* The site's ornament, faint, across the sheet — the same ground the
       dark blocks of the site stand on. */
    .aj-sheet__panel::before {
        background: var(--aj-sheet-motif) repeat 0 0 / 420px auto;
        content: '';
        filter: invert(1);
        inset: 0;
        opacity: 0.045;
        pointer-events: none;
        position: absolute;
        z-index: -1;
    }

    .aj-sheet__grip {
        display: flex;
        justify-content: center;
        padding: 6px 0 10px;
        touch-action: none;
    }

    .aj-sheet__grip span {
        background: rgba(255, 255, 255, 0.28);
        border-radius: var(--aj-radius-pill);
        height: 5px;
        width: 42px;
    }

    .aj-sheet__head {
        align-items: center;
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        touch-action: none;
    }

    .aj-sheet__mark {
        flex: 0 0 auto;
        height: 44px;
        width: 44px;
    }

    .aj-sheet__title {
        color: var(--aj-text-inverse);
        flex: 1 1 auto;
        font-size: var(--aj-fs-h4);
        font-weight: var(--aj-fw-bold);
        margin: 0;
    }

    .aj-sheet__close {
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: var(--aj-text-inverse);
        cursor: pointer;
        display: inline-flex;
        height: 40px;
        justify-content: center;
        transition: background-color var(--aj-duration) var(--aj-ease);
        width: 40px;
    }

    .aj-sheet__close:hover {
        background: rgba(255, 255, 255, 0.16);
    }

    .aj-sheet__grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .aj-tile {
        -webkit-tap-highlight-color: transparent;
        align-items: flex-start;
        aspect-ratio: 1 / 0.82;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        color: var(--aj-text-inverse);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-family: inherit;
        justify-content: space-between;
        overflow: hidden;
        padding: 16px;
        position: relative;
        text-align: start;
        text-decoration: none;
        transition: transform 200ms var(--aj-app-ease), border-color var(--aj-duration) var(--aj-ease),
                    background-color var(--aj-duration) var(--aj-ease);
        width: 100%;
    }

    /* A light that sits in the tile's corner, as on a lit card. */
    .aj-tile::after {
        background: radial-gradient(circle at 100% 0%, rgba(74, 117, 140, 0.35), transparent 60%);
        content: '';
        inset: 0;
        opacity: 0.7;
        pointer-events: none;
        position: absolute;
        transition: opacity var(--aj-duration) var(--aj-ease);
    }

    .aj-tile:hover {
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--aj-text-inverse);
    }

    .aj-tile:hover::after {
        opacity: 1;
    }

    .aj-tile:active {
        transform: scale(0.96);
    }

    .aj-tile:focus-visible {
        outline: 2px solid var(--aj-text-inverse);
        outline-offset: 2px;
    }

    .aj-tile.is-active {
        background: linear-gradient(160deg, rgba(74, 117, 140, 0.45), rgba(74, 117, 140, 0.18));
        border-color: var(--aj-accent);
    }

    .aj-tile__icon {
        align-items: center;
        background: var(--aj-accent);
        border-radius: 14px;
        box-shadow: 0 10px 22px rgba(74, 117, 140, 0.4);
        color: var(--aj-text-inverse);
        display: inline-flex;
        height: 48px;
        justify-content: center;
        position: relative;
        width: 48px;
        z-index: 1;
    }

    .aj-tile__icon .aj-icon {
        height: 22px;
        width: 22px;
    }

    .aj-tile__label {
        font-size: var(--aj-fs-body-lg);
        font-weight: var(--aj-fw-bold);
        position: relative;
        z-index: 1;
    }

    .aj-sheet__cta {
        align-items: center;
        background: var(--aj-surface);
        border-radius: 16px;
        color: var(--aj-charcoal);
        display: flex;
        font-size: var(--aj-fs-body);
        font-weight: var(--aj-fw-bold);
        gap: 8px;
        justify-content: center;
        margin-top: 16px;
        min-height: 54px;
        text-decoration: none;
        transition: transform 200ms var(--aj-app-ease), background-color var(--aj-duration) var(--aj-ease);
    }

    .aj-sheet__cta:hover {
        background: var(--aj-accent-soft);
        color: var(--aj-charcoal);
    }

    .aj-sheet__cta:active {
        transform: scale(0.98);
    }

    .aj-sheet__social {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        list-style: none;
        margin: 20px 0 0;
        padding: 0;
    }

    .aj-sheet__social a {
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        color: var(--aj-text-inverse);
        display: inline-flex;
        height: 44px;
        justify-content: center;
        transition: background-color var(--aj-duration) var(--aj-ease), border-color var(--aj-duration) var(--aj-ease);
        width: 44px;
    }

    .aj-sheet__social a:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        color: var(--aj-text-inverse);
    }

    /* The sheet's contents arrive one after another as it rises. */
    .aj-sheet.is-open .aj-sheet__grid > li,
    .aj-sheet.is-open .aj-sheet__cta,
    .aj-sheet.is-open .aj-sheet__social {
        animation: aj-sheet-in 520ms var(--aj-app-ease) both;
        animation-delay: calc(120ms + var(--i, 0) * 45ms);
    }

    @keyframes aj-sheet-in {
        from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); }
        to { opacity: 1; transform: none; }
    }

    body.aj-sheet-open {
        overflow: hidden;
    }

    /* A tablet or an open foldable: four tiles to a row. */
    @media (min-width: 600px) {
        .aj-sheet__grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .aj-tile {
            aspect-ratio: 1 / 1;
        }
    }

    /* A phone on its side: a lower bar, and a sheet that scrolls. */
    @media (max-height: 500px) {
        :root {
            --aj-tabbar-h: 56px;
            --aj-tabbar-gap: 6px;
        }

        .aj-tabbar__icon {
            height: 26px;
        }

        .aj-sheet__grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .aj-tile {
            aspect-ratio: auto;
            gap: 10px;
            min-height: 108px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .aj-sheet__panel,
        .aj-sheet__backdrop,
        .aj-tabbar__item,
        .aj-tabbar__icon {
            transition: none;
        }

        .aj-tabbar__item.is-active .aj-tabbar__icon,
        .aj-sheet.is-open .aj-sheet__grid > li,
        .aj-sheet.is-open .aj-sheet__cta,
        .aj-sheet.is-open .aj-sheet__social {
            animation: none;
        }
    }
}