/**
 * Section: board-profile
 *
 * Extracted from template-parts/board_profile.php.
 * Loaded via trunorth_enqueue_section('board-profile').
 */

.board-profile {
    width: 100%;
    background: #fff;
    /* Match the site's standard horizontal gutter so the section
       doesn't slam against the browser edges. */
    padding: 0 calc(var(--vw) * 5);
    box-sizing: border-box;
}

    .board-profile .bp-inner {
        display: grid;
        /* Left column shrinks to the board image's actual width so the
           profile options can start right next to it — no dead space. */
        grid-template-columns: auto 1fr;
        gap: calc(var(--vw) * 3);
        max-width: 1600px;
        margin: 5vh auto;
        border: 1px solid #ffffff5e;
    }

    /* ---- Left: board image ---- */
    .board-profile .bp-media {
        width: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: left;
        overflow: hidden;
        
    }

    .board-profile .bp-media img {
        width: 100%;
        max-width: 22rem;
        height: auto;
        max-height: 45vh;
        object-fit: contain;
        display: block;
    }

    .board-profile .bp-placeholder {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* ---- Right: profile options ---- */
    .board-profile .bp-options {
        padding: 0 calc(var(--vw) * 0.5);
    }

    .board-profile .bp-heading {
        color: var(--bp-accent);
        font-family: 'Montserrat', 'Open Sans', sans-serif;
        font-weight: 500;
        font-size: clamp(1.25rem, calc(var(--vw) * 2), 2rem);
        letter-spacing: 0.02em;
        margin: 0 0 calc(var(--vw) * 2) 0;
    }

    /* Two-column grid — profiles arrange 2-across, aligned to top so
       diagrams and labels sit on the same baseline row-by-row. */
    .board-profile .bp-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: calc(var(--vw) * 2);
        row-gap: calc(var(--vw) * 3);
    }

    .board-profile .bp-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .board-profile .bp-item .bp-figure {
        width: 100%;
        max-width: 18rem;
        height: auto;
    }

    .board-profile .bp-item .bp-label {
        margin-top: calc(var(--vw) * 1);
    }

    .board-profile .bp-item--full {
        grid-column: span 2;
        width: 100%;
    }

    /* Even when a profile is set to full-width (spans both columns),
       cap its diagram so wide items like the fascia don't dominate. */
    .board-profile .bp-item--full .bp-figure {
        width: 100%;
        max-width: 26rem;
    }

    .board-profile .bp-figure {
        display: block;
        object-fit: contain;
    }

    .board-profile .bp-label {
        font-family: 'Montserrat', 'Open Sans', sans-serif;
        font-size: var(--font-body);
        font-weight: 500;
        color: #2a2a2a;
        text-align: left;
        margin-top: 4px;
    }

    /* ---- Responsive ---- */
    @media (max-width: 1440px) {
         .board-profile .bp-media img{
            max-width: 18rem;
        }
    }

    @media (max-width: 1024px) {
         .board-profile .bp-media img{
            max-width: 15rem;
        }
    }

    @media (max-width: 900px) {
        .board-profile .bp-inner {
            grid-template-columns: 1fr;
            gap: calc(var(--vw) * 4);
        }

        .board-profile .bp-options {
            padding: 0 calc(var(--vw) * 4);
        }

        .board-profile .bp-media {
            display: none;
        }

        .board-profile .bp-media img {
            max-height: 45vw;
            width: 100%;
        }

        .board-profile .bp-figure {
            width: clamp(120px, 38vw, 320px);
        }

        .board-profile .bp-grid {
            gap: calc(var(--vw) * 4);
        }
    }

    @media (max-width: 480px) {
        .board-profile .bp-media img {
            max-height: 55vw;
        }

        .board-profile .bp-figure {
            width: clamp(110px, 45vw, 280px);
        }
    }

    /* Optional specs paragraph shown above the profile-options grid.
       Used for "Ultra deck boards are 5/4″ x 6″ and are available in
       12′, 16′, 20′…" style copy on each product page. */
    .board-profile .bp-specs-text {
        font-family: "Montserrat", sans-serif;
        font-size: var(--font-body);
        line-height: 1.4;
        color: #222;
        margin-bottom: calc(var(--vw) * 2);
        max-width: 44em;
    }
    .board-profile .bp-specs-text p {
        margin: 0 0 0.65em;
    }
    .board-profile .bp-specs-text p:last-child {
        margin-bottom: 0;
    }