/*
 * PBA Layout Patch — button layout + Preview line fixes
 * Load AFTER responsive.css via wp_enqueue_style in functions.php
 *
 * @package pba-storefront
 */

/* ============================================================
   DESKTOP — Genre/Home pages: vendor left, buy right
   ============================================================ */

/* Clear the floated cover image so button-container uses full width,
   then use CSS Grid for a clean two-column layout. */
.product_info > .button-container {
    clear: both;
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 20px;
    align-items: start;
    justify-content: start;
    width: 100%;
    margin-top: 10px;
}

/* Vendor links (Amazon, Kobo, Paperback, etc.) go to column 1 */
.product_info > .button-container > a {
    grid-column: 1;
}

/* Preview button: column 2, row 1 — sits under the blurb, above the price.
   Override the absolute positioning from the base theme. */
.product_info > .button-container > .preview_button {
    grid-column: 2;
    grid-row: 1;
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto;
}

/* Store buy buttons ($price + Buy Now + Add to Cart) in column 2,
   starting at row 2 so they sit below Preview */
.product_info > .button-container > .store-buttons {
    grid-column: 2;
    grid-row: 2 / span 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 140px;
}

/* ============================================================
   DESKTOP — Single book landing page
   ============================================================ */
.pba-landing-info .button-container {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: auto;
    position: static;
}

.vendor-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

/* Nested .button-container inside .vendor-buttons should be a plain column */
.vendor-buttons .button-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.store-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

/* ============================================================
   MOBILE — centered, Preview on its own line
   ============================================================ */
@media (max-width: 768px) {

    /* Genre/Home pages: flex-wrap so vendor links sit side by side,
       but Preview and store-buttons each take a full row */
    .product_info > .button-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }

    /* Vendor links flow naturally side by side */
    .product_info > .button-container > a {
        order: 0;
        flex: 0 0 auto;
    }

    /* Preview button gets its own full-width line with subtle separator */
    .product_info > .button-container > .preview_button {
        order: 5;
        flex: 0 0 100%;
        margin-top: 8px;
        margin-bottom: 8px;
        padding-top: 8px;
        border-top: 1px solid #3a3830;
        text-align: center;
    }

    /* Store buy buttons below preview, also full width and centered */
    .product_info > .button-container > .store-buttons {
        order: 10;
        flex: 0 0 100%;
        margin-top: 4px;
        align-items: center;
    }

    /* Landing page: button container stacks vertically */
    .pba-landing-info .button-container {
        flex-direction: column;
    }
}