/* ==========================================================================
   mobile.css — phone overrides (≤ 767px)

   Load AFTER shared.css / card-elements.css / base-elements.css:
     <link rel="stylesheet" href="{% static 'css/mobile.css' %}"
           media="(max-width: 767.98px)">

   The media attribute means desktops download it at low priority and never
   apply it. The @media wrapper below is a safety net in case it's ever
   linked without the attribute.

   767.98px (not 768px) avoids the 1px overlap with shared.css's
   min-width: 768px desktop rules.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ---------- Page frame ---------- */
    html {
        -webkit-text-size-adjust: 100%; /* stop iOS inflating text on rotate */
    }

    .site_main {
        align-items: stretch; /* full-width children; was center */
        padding: 1rem 16px;
        min-height: auto; /* 90vh fights the iOS URL bar */
        width: 100%;
        box-sizing: border-box;
    }

    .container {
        padding-inline: 2px;
    }

    p {
        max-width: 100%; /* base-elements caps at 80vw */
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* ---------- Header + nav ---------- */
    .site_header {
        max-height: none; /* 15vh clipped the opened menu */
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top));
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .site_banner_logo,
    .brand-image {
        max-height: 44px; /* 10vw ≈ 39px on a phone = too small */
        max-width: 160px;
        width: auto;
    }

    /* The header row (.container.flex-between) must never change height.
       The open menu is pulled out of the flow and drops down OVER the page,
       so the hamburger stays put and nothing below it jumps. */
    .site_header > .container {
        padding-inline: 0;
        align-items: center;
    }

    .nav_container {
        position: static; /* let .nav-list anchor to the header */
        display: flex;
        align-items: center;
    }

    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        line-height: 1;
    }

    .nav-list {
        position: absolute; /* out of the flow = no layout shift */
        top: 100%; /* directly under the header's bottom edge */
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--brand-dark);
        padding: 0.25rem 16px 0.75rem;
        border-bottom: 2px solid var(--primary);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
        max-height: calc(100svh - 70px); /* long menus scroll instead of overflowing */
        overflow-y: auto;
    }

    .nav-list a {
        display: block;
        padding: 0.75rem 0.25rem; /* 44px+ tap targets */
        font-size: 1.1rem;
        color: var(--white);
        border-bottom: 1px solid color-mix(in srgb, var(--white), transparent 88%);
    }

    .nav-list > li:last-child a {
        border-bottom: none;
    }

    /* ---------- Two-column layouts collapse ---------- */
    /* Image-behind-text cards.
       Both children go in the SAME grid cell (1 / 1), so they overlap while
       staying in normal flow: the section grows to fit whichever is taller,
       and markup order (image first or text first) doesn't matter. */
    .info_section {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 0;
        padding: 0;
        margin-block: 1rem;
        min-height: 320px;
        border-radius: var(--radius);
        overflow: hidden; /* clip the image to the rounded corners */
        isolation: isolate; /* keep the z-index stack local to this card */
        align-items: end; /* text panel sits at the bottom */
    }

    .info_section > .standard_image_wrapper,
    .info_section > .section_text {
        grid-area: 1 / 1;
    }

    .info_section > .standard_image_wrapper {
        height: 100%;
        z-index: 0;
    }

    .info_section > .standard_image_wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* fill the card without stretching */
        border-radius: 0;
    }

    .info_section > .section_text {
        z-index: 1;
        margin: 0.75rem;
        padding: 1rem 1.1rem;
        border-radius: calc(var(--radius) - 4px);
        color: var(--brand-light);
        background: rgba(20, 20, 20, 0.72);
        /* Frosted glass where supported; the solid-ish rgba above is the
           fallback and keeps text readable on any photo. */
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .info_section > .section_text {
            background: rgba(20, 20, 20, 0.55);
        }
    }

    .info_section > .section_text h3 {
        margin-top: 0;
        color: var(--white);
    }

    .info_section > .section_text p {
        margin-bottom: 0;
        color: color-mix(in srgb, var(--white), transparent 10%);
    }

    .info_section:has(> .standard_image_wrapper.portrait) {
        grid-template-rows: auto; /* undo the single 1fr cell */
        min-height: 0;
        align-items: start;
        gap: 0.75rem;
    }

    .info_section > .standard_image_wrapper.portrait,
    .info_section:has(> .standard_image_wrapper.portrait) > .section_text {
        grid-area: auto;
    }

    .info_section > .standard_image_wrapper.portrait {
        height: auto;
    }

    .info_section > .standard_image_wrapper.portrait img {
        height: auto;
        max-height: 70svh; /* keep tall images from eating the screen */
        object-fit: contain;
    }

    /* Text becomes a normal block below the image, not a frosted panel */
    .info_section:has(> .standard_image_wrapper.portrait) > .section_text {
        margin: 0;
        padding: 0 1rem 1rem;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        color: inherit;
    }

    .par_split {
        grid-template-columns: 1fr;
    }

    .row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    /* ---------- Typography ---------- */
    h1, .page-title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1.15;
    }

    .heading,
    .title {
        font-size: 1.35rem;
    }

    .section-title {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }

    /* ---------- Buttons: comfortable thumb targets ---------- */
    .button,
    .button-primary,
    .button-secondary,
    .create-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .button {
        width: 100%;
        margin: 0;
    }

    /* ---------- Forms ---------- */
    .input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* < 16px makes iOS zoom on focus */
    }

    .label {
        text-align: left;
    }

    /* ---------- Cards ---------- */
    .card-container {
        margin-left: 0;
        padding: 0.5rem 16px 1rem;
        scroll-padding-inline: 16px;
    }

    .card-grid {
        gap: 0.75rem;
    }

    .avail_card {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .avail_title {
        max-width: 100%;
        min-width: 0;
        padding: 0.75rem 1rem 0;
    }

    /* ---------- Tables: scroll instead of squash ---------- */
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 0.8rem;
    }

    .table th,
    .table td {
        padding: .45rem .6rem;
    }

    .table tr:hover {
        background: none; /* sticky hover on touch looks broken */
    }

    /* ---------- Modals become bottom sheets ---------- */
    .modal-overlay {
        align-items: flex-end;
    }

    .modal-body,
    .modal-content {
        width: 100%;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    /* ---------- Footer ---------- */
    .site_footer {
        position: static; /* sticky footer eats ~15% of a phone screen */
        font-size: 0.9rem;
    }
}