/*
 * Shared post-card styles for WB_POST_CAROUSEL and WB_POST_LISTING.
 */

/* Mobile / tablet tap modal - the .detailed-card.mobile-modal clone built by
   open_tap_modal(). Its position and pop-in animation are set inline by the
   script; its size lives here so the landscape layout below can override it.
   The card itself is the scroll container, so every part of it stays
   reachable when it is taller than the viewport. */
.detailed-card.mobile-modal {
    width: 90vw;
    max-width: 400px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px); /* excludes the mobile browser toolbars */
    overflow-y: auto;
    overscroll-behavior: contain; /* don't chain the scroll to the locked page */
    -webkit-overflow-scrolling: touch;
}

/* Short landscape screens (phones on their side): a fixed left column with
   the thumbnail on top and the action buttons pinned under it, and a right
   column (title and details) that scrolls on its own.

   The buttons live inside the scrolling .wb-content-box, so they are
   absolutely positioned against the card (position: fixed, set inline by the
   script). Their containing block is outside the scroller, so it neither
   clips nor scrolls them. */
@media (orientation: landscape) and (max-height: 500px) {
    .detailed-card.mobile-modal {
        --wb-modal-left: 0.48; /* left column's share of the card's width */
        display: grid;
        grid-template-columns: minmax(0, calc(var(--wb-modal-left) * 100%)) minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
        padding: 15px; /* the button and scroller sizes below assume this */
        width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: 720px;
        max-height: calc(100vh - 34px);
        max-height: calc(100dvh - 34px);
        overflow: hidden; /* the right column scrolls instead */
        container-type: inline-size; /* lets the buttons size off the card (cqw) */
    }

    /* Left column. The bottom margin reserves room for the pinned buttons, so
       a short card is still tall enough to hold them under the thumbnail. */
    .detailed-card.mobile-modal .wb-image-box {
        margin-bottom: 60px;
    }

    /* Falls back to the card's lower-left corner where container query units
       are unsupported. */
    .detailed-card.mobile-modal .wb-action {
        position: absolute;
        left: 15px;
        bottom: 15px;
        width: calc((100% - 30px) * var(--wb-modal-left)); /* the left grid column */
    }

    /* The buttons' mt-1 / mt-3 spacing was for sitting under the details */
    .detailed-card.mobile-modal .wb-action > .btn,
    .detailed-card.mobile-modal .wb-action > button {
        margin-top: 0 !important;
    }

    /* Right column: the card's height minus its padding. !important on the
       padding beats .py-2, so the title lines up with the thumbnail and the
       details end flush with the card's own padding. */
    .detailed-card.mobile-modal .wb-content-box {
        max-height: calc(100vh - 24px - 30px);
        max-height: calc(100dvh - 24px - 30px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Trim price wrapper margin */
    .detailed-card.mobile-modal .wb-price-wrapper {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    /* No trailing space under the pricing box, inside or out. */
    .detailed-card.mobile-modal .wb-price-wrapper > dl {
        margin-bottom: 0;
    }

    /* Login / error alerts are appended after the buttons, at the end of the
       scrolling details. Keep them in view at the bottom of the column. */
    .detailed-card.mobile-modal .wb-hidden-info > .alert {
        position: sticky;
        bottom: 0;
    }
}