/* ==========================================================================
   FOLDABLE / WIDE-PHONE LAYOUT (Ivy, 14 Nov 2026). Layout only: no colours, type or components change.
   Nawid: "optimize the mini app for the iPhone Duo screen: inner, outer, when you turn it".
   iPhone Duo web viewport (WebKit, Safari 27.1): outer 382 wide (594 turned), inner 669 portrait,
   951 landscape, 385 per side when two apps share the inner screen. Notes + sources:
   02_Projects/01_CRM/02_Features/miniapp-foldable-layout/PLAN.md
   Loaded LAST. Everything sits under max-width 1023.98px, so the desktop web store (1024+) is untouched.
   ========================================================================== */

@media (max-width: 1023.98px) {
    /* Side insets: the outer screen keeps its controls in a strip on ONE side when turned, and the
       inner screen's landscape insets are uneven. Telegram (Bot API 8.0+) publishes its insets as
       --tg-safe-area-inset-* / --tg-content-safe-area-inset-* and keeps them current on fold/turn;
       env() is the fallback. All are 0 on an ordinary portrait phone, so the gutters stay 24px/16px. */
    :root {
        --fold-safe-l: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
        --fold-safe-r: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
    }
    .main-content,
    .app-header {
        padding-left: max(var(--spacing-lg), calc(var(--fold-safe-l) + 16px));
        padding-right: max(var(--spacing-lg), calc(var(--fold-safe-r) + 16px));
    }
    #main-content [style*="position: fixed"][style*="bottom: 0"] {
        padding-left: max(16px, calc(var(--fold-safe-l) + 16px)) !important;
        padding-right: max(16px, calc(var(--fold-safe-r) + 16px)) !important;
    }
}

/* Wide phone (unfolded inner screen, 600-1023 px): one centred reading column instead of
   edge-to-edge cards and rows. */
@media (min-width: 600px) and (max-width: 1023.98px) {
    .main-content {
        max-width: 760px;
    }
    /* The fixed action bar still spans the screen; its buttons line up with the column above. */
    #main-content [style*="position: fixed"][style*="bottom: 0"] {
        padding-left: max(16px, calc(var(--fold-safe-l) + 16px), calc((100% - 712px) / 2)) !important;
        padding-right: max(16px, calc(var(--fold-safe-r) + 16px), calc((100% - 712px) / 2)) !important;
    }
    /* Service cards: two per row instead of one card the width of the screen. home.js sets this grid
       with !important (300px minimum, one column below 624px), hence the id and !important here. */
    #main-content .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important;
    }
}

/* Turned with little height (inner screen turned: 585 px tall; outer turned: 368 px). The service
   banner stays under half the screen so the title and text show, centred at its own shape, and the
   two bottom buttons sit side by side so the bar is one row, not two. */
@media (orientation: landscape) and (min-width: 560px) and (max-width: 1023.98px) and (max-height: 700px) {
    #main-content .product-header-image {
        width: fit-content !important;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    #main-content .product-header-image img.product-image {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 44vh !important;
        aspect-ratio: auto !important;
        display: block;
        margin: 0 auto;
    }
    #main-content [style*="position: fixed"][style*="bottom: 0"] > div:has(> .btn-full-width + .btn-full-width:last-child) {
        display: flex;
        align-items: stretch;
        gap: 12px;
    }
    #main-content [style*="position: fixed"][style*="bottom: 0"] > div:has(> .btn-full-width + .btn-full-width:last-child) > .btn-full-width {
        flex: 1 1 0;
        min-width: 0;
        margin-top: 0 !important;
    }
}