/******************************************* BOAT SHOWS *******************************************/
/*
    DEVELOPER NOTE - READ FIRST
    ---------------------------
    This is THE stylesheet for boat show pages from 2027 onward. Every NEW boat show page goes here,
    in its own section (show + year). Do NOT create a separate CSS file per show, and do NOT put
    boat show styles in style.css.

    Older boat show pages (/nybs, /flibs, /newport-boat-show, the 2026 /miami-boat-show and
    /palm-beach-boat-show, ...) keep their CSS where it already is; it was not moved here.

    How a boat show page uses it:
      - Route (routes/index.js) pushes it after nybs.css:
            styles.push({ url: "/assets/css/nybs.css", comment: "" });
            styles.push({ url: "/assets/css/boat-shows.css", comment: "" });
      - The template is built from the nybs.css components (.nybs-page, .nybs-hero, .nybs-info,
        .nybs-cards, .nybs-appt ...) and only uses this file for what nybs.css doesn't have.
      - The wrapper gets the page class:  <div class="nybs-page bs27-palm-beach">

    Naming:
      - Page class  : bs<yy>-<show>        e.g. .bs27-palm-beach, .bs28-miami
      - Extra class : bs<yy>-<thing>       e.g. .bs27-stats, .bs27-locations
      - Scope every rule under the page class or a bs<yy>- class so nothing leaks to other pages.
      - Don't add fonts or new CSS variables; re-point the existing --nybs-* tokens instead
        (e.g. the accent: --nybs-red / --nybs-red-dark).

    Build : standalone file, NOT part of the gulp bundle (gulpfile.js lists its sources), so no
            gulp run is needed after editing.

    Contents:
      1. 2027 - shared (Palm Beach + Miami)
      2. 2027 - Palm Beach International Boat Show   (/palm-beach-boat-show-2027)
      3. 2027 - Miami International Boat Show        (/miami-boat-show-2027)
*/


/* ============================================================================
   1. 2027 - SHARED (Palm Beach + Miami)
   ========================================================================== */

/* Hero: show logo instead of the text title */
.bs27-hero-title { line-height: 0; }
.bs27-hero-logo { width: 500px; max-width: 100%; height: auto; }

/* About section: stats row (reuses .nybs-why-text / .nybs-why-media for the split) */
.bs27-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    margin-top: 40px;
    list-style: none;
}
.bs27-stat-value {
    display: block;
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}
.bs27-stat-label {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--nybs-muted);
}

/* Inventory cards. Listing sale price: priceUpdateNew(..., 'boatListing', make) returns
   "<span>$x</span>" (no .sale_new) -> navy like a normal price, not the accent "Call For Pricing" style */
.nybs-page[class*="bs27-"] .nybs-card-price > span:not(.sale_new) {
    color: var(--nybs-navy);
    letter-spacing: 0;
    text-transform: none;
}
/* "Pending Sale" card badge (db.boats sale_status), grey per the comp */
.nybs-card-badge.bs27-badge-pending { background: var(--nybs-muted); }

@media (max-width: 767px) {
    .bs27-stats { gap: 20px 32px; margin-top: 32px; }
    .bs27-stat-value { font-size: 36px; }
    .bs27-stat-label { font-size: 14px; }
}
@media (max-width: 575px) {
    .bs27-hero-logo { width: 300px; }
}


/* ============================================================================
   2. 2027 - PALM BEACH INTERNATIONAL BOAT SHOW  (/palm-beach-boat-show-2027)
      Template: views/themes/Material/palm-beach-boat-show-2027.hbs
   ========================================================================== */

/* Accent colour (design comp): teal */
.nybs-page.bs27-palm-beach { --nybs-red: #04A8A1; --nybs-red-dark: #038A84; }

.bs27-palm-beach .nybs-hero-img { object-position: center 50%; }


/* ============================================================================
   3. 2027 - MIAMI INTERNATIONAL BOAT SHOW  (/miami-boat-show-2027)
      Template: views/themes/Material/miami-boat-show-2027.hbs
   ========================================================================== */

/* Accent colour (design comp): magenta */
.nybs-page.bs27-miami { --nybs-red: #CF00CF; --nybs-red-dark: #A800A8; }

.bs27-miami .bs27-hero-logo { width: 480px; }

/* Hero: muted looping YouTube background over the still image (still stays as fallback) */
.bs27-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
.bs27-hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 1640px);   /* 1640 x 9/16 = 922px >= tallest hero (920px), so it always covers */
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    transform: translate(-50%, -50%);
}

/* Six show locations */
.bs27-locations {
    margin-top: 44px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    border-top: 1px solid var(--nybs-line-dark);
}
.bs27-locations li {
    padding: 16px 0;
    border-bottom: 1px solid var(--nybs-line-dark);
    font-size: 17px;
    font-weight: 600;
}

/* Google My Maps embed in the media slot */
.bs27-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
    .bs27-hero-video { display: none; }
}
@media (max-width: 575px) {
    .bs27-miami .bs27-hero-logo { width: 300px; }
    .bs27-locations { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
    .bs27-locations li { padding: 12px 0; font-size: 16px; }
}