/**
 * Banner Spot Module — front end
 *
 * Paid banners reuse the theme's own `.bannerImage` card, in a `column sixcol`
 * — the same cell the hand-managed page banners sit in. Nearly everything
 * visible (border, radius, padding, centring, button styling) therefore comes
 * from style.css and is NOT repeated here.
 *
 * This file only does what the theme cannot know about: hold the 440 × 220 slot
 * open so a row does not reflow when an advert is bought, and lay out two
 * contact buttons where the theme's own card has one.
 *
 * Enqueued only on pages that actually drew a banner.
 */

/* Grid cell -----------------------------------------------------------------
 * Paid banners are printed into the theme's OWN `<div class="column twelvecol">`
 * — the one holding the hand-placed page banners — so there is no wrapper of
 * ours to style. margin-top matches the inline 10px the theme puts on its own
 * cells, so both sets sit level in the shared row.
 */

.bsm-spots__cell {
    margin-top: 10px;
}

/* Artwork -------------------------------------------------------------------
 * aspect-ratio holds the box before the image has loaded, so the page does not
 * jump. The explicit height fallback covers browsers without aspect-ratio; both
 * are overridden by the natural size once it arrives, because the upload is
 * validated to be exactly 440 × 220.
 */

.bsm-spot__media {
    display: block;
    line-height: 0;
}

.bsm-spot__img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 440 / 220;
    margin: 0 auto;
    border-radius: 6px;
}

/* Title ---------------------------------------------------------------------
 * `.bannerImage h3` is already styled by the theme. Only the clamp is ours: a
 * two-line ceiling stops a long title making one card taller than the one
 * beside it and breaking the row.
 */

.bsm-spot__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Contact buttons -----------------------------------------------------------
 * The theme sets `.bannerImage .button { width: 93% }`, which is right for its
 * own single phone button and wrong for two side by side. Overridden only
 * inside our row, so the theme's banners are untouched.
 */

.bsm-spot__cta {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.bannerImage .bsm-spot__cta .button {
    width: auto;
    flex: 1 1 0;
    margin: 0;
}

/* Availability line ---------------------------------------------------------
 * When this slot frees up. Seen by subscribers (who might want to book it) and
 * by managers (who need to know who holds it).
 *
 * Small, grey, and separated by a rule, because it is site furniture rather
 * than part of the advert above it — the advertiser paid for the banner, not
 * for a caption offering their position to somebody else.
 */

.bsm-spot__availability {
    margin: 8px 0 0;
    padding-top: 6px;
    border-top: 1px dashed #d5d5d5;
    font-size: 11px;
    line-height: 1.4;
    color: #767676;
}

/* ===========================================================================
 * Empty slot
 *
 * Same card, same height. The dashed box stands exactly where the artwork would
 * be, so buying a slot changes what is in the row and not the shape of it.
 * ======================================================================== */

.bsm-spot--empty {
    display: block;
    text-decoration: none;
}

.bsm-spot--empty:hover,
.bsm-spot--empty:focus {
    text-decoration: none;
}

.bsm-spot__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 440 / 220;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    border: 2px dashed #c9c9c9;
    border-radius: 6px;
    background: #fafafa;
    transition: border-color .15s ease, background-color .15s ease;
}

.bsm-spot--empty:hover .bsm-spot__slot,
.bsm-spot--empty:focus .bsm-spot__slot {
    border-color: #999;
    background: #f4f4f4;
}

.bsm-spot__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #888;
}

.bsm-spot__price {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #222;
}

.bsm-spot__terms {
    margin-top: 2px;
    font-size: 12px;
    color: #777;
}

.bsm-spot__cta-text {
    display: inline-block;
    margin-top: 4px;
}

/* Admin preview -------------------------------------------------------------
 * What whoever runs the marketplace sees in an unsold slot. Not a link and not
 * hoverable, because it is not an offer to this viewer — it is a report that
 * the slot exists and is empty. Tinted so it cannot be mistaken for what a
 * customer is being shown.
 */

.bsm-spot--preview {
    cursor: default;
}

.bsm-spot--preview .bsm-spot__slot {
    border-color: #b9c7d6;
    background: #f4f7fa;
}

.bsm-spot--preview:hover .bsm-spot__slot,
.bsm-spot--preview:focus .bsm-spot__slot {
    border-color: #b9c7d6;
    background: #f4f7fa;
}

.bsm-spot--preview .bsm-spot__label {
    color: #4a6c8c;
}

.bsm-spot__preview-note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7b8a;
}

/* Narrow screens ------------------------------------------------------------
 * The theme collapses .column to full width below 768px, so the cards stack and
 * each one gets the whole container. Nothing to do but stop the artwork
 * stretching past its natural size on a wide phone.
 */

@media only screen and (max-width: 767px) {
    .bsm-spots__cell {
        margin-top: 0;
    }
}