/* Ghost Boost Aesthetic Engine */
:root {
    --bento-gap: 24px;
    --luxury-radius: 22px;
    --ghost-shimmer-base: #f2f2f2;
    --ghost-shimmer-highlight: #ffffff;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--bento-gap);
    padding: var(--bento-gap);
    max-width: 1440px;
    margin: 0 auto;
    align-items: stretch;
    container-type: inline-size;
    container-name: bento;
}

/* Skeleton Synthesis */
.skeleton-card {
    background: #fff;
    border-radius: var(--luxury-radius);
    height: 400px;
    position: relative;
    overflow: hidden;
}

.shimmer-layer {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--ghost-shimmer-base) 25%, var(--ghost-shimmer-highlight) 50%, var(--ghost-shimmer-base) 75%);
    background-size: 200% 100%;
    animation: ghost-shimmer-pulse 1.8s infinite linear;
}

@keyframes ghost-shimmer-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Luxury card chrome lives in bento-cards.css (sharper, containment, product badges). */
.bento-card.size-normal { grid-column: span 1; grid-row: span 1; }
.bento-card.size-wide { grid-column: span 2; grid-row: span 1; }
.bento-card.size-tall { grid-column: span 1; grid-row: span 2; }
.bento-card.size-hero { grid-column: span 2; grid-row: span 2; }

/* =============================================================================
   Global Button Clamping — .gb-singular (singular reading layout)
   -----------------------------------------------------------------------------
   Scope: button-like controls inside `.gb-singular` only (descendant selectors;
   no blanket `.gb-singular *` — add targeted rules if a one-off element needs
   the same treatment).
   Intent: prevent wide labels / long URLs from forcing horizontal overflow on
   small viewports while keeping intrinsic “inline” buttons from stretching.
   Note: `max-width: min(100%, calc(100vw - 40px))` is often safer inside a
   narrow column than viewport-only math; primary rule below uses the explicit
   calc the theme asked for.
   ============================================================================= */
.gb-singular button,
.gb-singular input[type="submit"],
.gb-singular input[type="button"],
.gb-singular input[type="reset"],
.gb-singular a[role="button"],
.gb-singular .button,
.gb-singular a.button,
.gb-singular .wp-block-button__link,
.gb-singular a[class*="btn"] {
    max-width: calc(100vw - 40px);
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    width: auto;
}