/**
 * 3001Web Box Grid — Shared Base Styles
 *
 * Common styles for all Box Grid modules.
 * Preset-specific styles are in each module's own CSS file.
 *
 * @package ThreeOhOneWeb_BeaverBox
 * @since 2.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE / GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.sbb-grid-wrap {
        --sbb-cols-desktop: 3;
        --sbb-cols-tablet: 2;
        --sbb-cols-mobile: 1;
        --sbb-gap: 24px;
        --sbb-accent: #e8a445;
        --sbb-align: center;

        padding-top: var(--sbb-pad-top, 0);
        padding-right: var(--sbb-pad-right, 0);
        padding-bottom: var(--sbb-pad-bottom, 0);
        padding-left: var(--sbb-pad-left, 0);
        box-sizing: border-box;
}

.sbb-grid {
        display: grid;
        grid-template-columns: repeat(var(--sbb-cols-desktop), 1fr);
        gap: var(--sbb-gap);
}

/* Equal height rows. */
.sbb-equal-height .sbb-grid {
        align-items: stretch;
}

.sbb-equal-height .sbb-box {
        display: flex;
        flex-direction: column;
}

.sbb-equal-height .sbb-box-content {
        flex: 1;
        display: flex;
        flex-direction: column;
}

.sbb-equal-height .sbb-box-text {
        flex: 1;
}

/* ─── Responsive breakpoints ──────────────────────────────────────────── */

@media (max-width: 992px) {
        .sbb-grid {
                grid-template-columns: repeat(var(--sbb-cols-tablet), 1fr);
        }
}

@media (max-width: 768px) {
        .sbb-grid {
                grid-template-columns: repeat(var(--sbb-cols-mobile), 1fr);
        }
}

/* ─── Last Row Alignment ─────────────────────────────────────────────── */

/* 
 * Center: Uses flexbox with fixed-width boxes and justify-content: center
 * This ensures incomplete last rows are centered, not left-aligned.
 * CSS Grid's justify-content doesn't work for this because 1fr columns 
 * always expand to fill the container.
 */
.sbb-last-row-center .sbb-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sbb-gap);
}

.sbb-last-row-center .sbb-grid .sbb-box {
        /* Fixed width: don't grow or shrink, maintain column-based width */
        flex: 0 0 calc((100% - var(--sbb-gap) * (var(--sbb-cols-desktop) - 1)) / var(--sbb-cols-desktop));
        max-width: calc((100% - var(--sbb-gap) * (var(--sbb-cols-desktop) - 1)) / var(--sbb-cols-desktop));
}

/* Responsive center for tablet */
@media (max-width: 992px) {
        .sbb-last-row-center .sbb-grid .sbb-box {
                flex: 0 0 calc((100% - var(--sbb-gap) * (var(--sbb-cols-tablet) - 1)) / var(--sbb-cols-tablet));
                max-width: calc((100% - var(--sbb-gap) * (var(--sbb-cols-tablet) - 1)) / var(--sbb-cols-tablet));
        }
}

/* Responsive center for mobile */
@media (max-width: 768px) {
        .sbb-last-row-center .sbb-grid .sbb-box {
                flex: 0 0 calc((100% - var(--sbb-gap) * (var(--sbb-cols-mobile) - 1)) / var(--sbb-cols-mobile));
                max-width: calc((100% - var(--sbb-gap) * (var(--sbb-cols-mobile) - 1)) / var(--sbb-cols-mobile));
        }
}

/* 
 * Justify: Uses flexbox to expand last row items to fill width.
 * Items grow to fill available space.
 */
.sbb-last-row-justify .sbb-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--sbb-gap);
}

.sbb-last-row-justify .sbb-grid .sbb-box {
        /* Flexible width: grow to fill space, but start at column-based width */
        flex: 1 1 calc((100% - var(--sbb-gap) * (var(--sbb-cols-desktop) - 1)) / var(--sbb-cols-desktop));
        min-width: calc((100% - var(--sbb-gap) * (var(--sbb-cols-desktop) - 1)) / var(--sbb-cols-desktop));
        max-width: 100%;
}

/* Responsive justify for tablet */
@media (max-width: 992px) {
        .sbb-last-row-justify .sbb-grid .sbb-box {
                flex: 1 1 calc((100% - var(--sbb-gap) * (var(--sbb-cols-tablet) - 1)) / var(--sbb-cols-tablet));
                min-width: calc((100% - var(--sbb-gap) * (var(--sbb-cols-tablet) - 1)) / var(--sbb-cols-tablet));
        }
}

/* Responsive justify for mobile */
@media (max-width: 768px) {
        .sbb-last-row-justify .sbb-grid .sbb-box {
                flex: 1 1 calc((100% - var(--sbb-gap) * (var(--sbb-cols-mobile) - 1)) / var(--sbb-cols-mobile));
                min-width: calc((100% - var(--sbb-gap) * (var(--sbb-cols-mobile) - 1)) / var(--sbb-cols-mobile));
        }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE BOX
   ═══════════════════════════════════════════════════════════════════════════ */

.sbb-box {
        position: relative;
        overflow: hidden;
        text-align: var(--sbb-align);
        transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* ─── Image wrapper (with flexible margin/padding) ────────────────────── */

.sbb-box-image {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        line-height: 0;
        margin-top: var(--sbb-img-margin-top, 0);
        margin-right: var(--sbb-img-margin-right, 0);
        margin-bottom: var(--sbb-img-margin-bottom, 0);
        margin-left: var(--sbb-img-margin-left, 0);
        padding-top: var(--sbb-img-pad-top, 0);
        padding-right: var(--sbb-img-pad-right, 0);
        padding-bottom: var(--sbb-img-pad-bottom, 0);
        padding-left: var(--sbb-img-pad-left, 0);
}

.sbb-box-image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        transition: transform 0.4s ease;
}

.sbb-box:hover .sbb-box-image img {
        transform: scale(1.04);
}

/* ─── Placeholder image (for preset examples) ────────────────────────── */

.sbb-placeholder-image {
        min-height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.sbb-placeholder-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 180px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 2.5rem;
}

/* ─── Content area (with flexible padding) ────────────────────────────── */

.sbb-box-content {
        padding-top: var(--sbb-content-pad-top, 24px);
        padding-right: var(--sbb-content-pad-right, 24px);
        padding-bottom: var(--sbb-content-pad-bottom, 24px);
        padding-left: var(--sbb-content-pad-left, 24px);
}

/* ─── Icon ────────────────────────────────────────────────────────────── */

.sbb-box-icon {
        font-size: 2.4rem;
        margin-bottom: var(--sbb-icon-gap, 12px);
        color: var(--sbb-accent);
}

.sbb-box-logo-only .sbb-box-content {
        display: flex;
        align-items: center;
        justify-content: center;
}

.sbb-equal-height .sbb-box-logo-only .sbb-box-content {
        flex: 0 0 auto;
}

.sbb-box-logo-only .sbb-box-icon,
.sbb-box-logo-only .sbb-box-icon-custom {
        margin-bottom: 0;
}

/* ─── Custom icon image ──────────────────────────────────────────────── */

.sbb-box-icon-custom {
        line-height: 0;
}

.sbb-custom-icon-img {
        display: inline-block;
        max-width: 100%;
        height: auto;
        object-fit: contain;
}

/* ─── Heading ── */

.sbb-box-heading {
        margin: 0 0 var(--sbb-heading-gap, 10px);
        font-family: var(--sbb-heading-font-family, inherit);
        font-size: var(--sbb-heading-font-size, 1.25rem);
        font-weight: var(--sbb-heading-font-weight, 700);
        line-height: var(--sbb-heading-line-height, 1.3);
        letter-spacing: var(--sbb-heading-letter-spacing, normal);
        text-transform: var(--sbb-heading-text-transform, none);
        color: var(--sbb-heading-color, inherit);
}

/* ─── Body text ── */

.sbb-box-text {
        margin-bottom: var(--sbb-text-gap, 16px);
        font-family: var(--sbb-body-font-family, inherit);
        font-size: var(--sbb-body-font-size, 0.95rem);
        font-weight: var(--sbb-body-font-weight, normal);
        line-height: var(--sbb-body-line-height, 1.6);
        letter-spacing: var(--sbb-body-letter-spacing, normal);
        color: var(--sbb-body-color, #555);
}

/* ─── Star Rating ─────────────────────────────────────────────────────── */

.sbb-box-stars {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-bottom: 10px;
        font-size: 1.1rem;
        line-height: 1;
}

.sbb-box-stars.sbb-stars-align-left {
        justify-content: flex-start;
}

.sbb-box-stars.sbb-stars-align-center {
        justify-content: center;
}

.sbb-box-stars.sbb-stars-align-right {
        justify-content: flex-end;
}

.sbb-box-stars .fa-star {
        display: inline-block;
}

/* ─── Button ──────────────────────────────────────────────────────────── */

.sbb-box-btn-wrap {
        margin-top: auto;
        padding-top: var(--sbb-button-gap, 8px);
}

.sbb-box-btn {
        display: inline-block;
        padding: 10px 24px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
        background-color: var(--sbb-accent);
        color: #fff;
}

.sbb-box-btn:hover {
        filter: brightness(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        color: #fff;
        text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY — Print-friendly
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
        .sbb-box {
                break-inside: avoid;
                page-break-inside: avoid;
                box-shadow: none !important;
        }
}