/**
 * Multi-Column Boxed Content Block Styles
 *
 * Fully responsive grid supporting 1-3 columns
 * These styles are loaded conditionally when the block is used
 *
 * @package TMW_Blocks
 */

/* Section Container - NO max-width constraint here to allow full-width backgrounds */
.multi-column-boxed-content {
    position: relative;
    transition: background-image 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Background Image Styling with Lazy Loading */

/* Uses CSS custom property --bg-section-image for dynamic image URLs */

/* Only applies background-image when section is in viewport (via .bg-loaded class) */

/* Synchronized fade-in with card animations (800ms, 300ms delay) */

.multi-column-boxed-content[data-has-bg-image="true"].bg-loaded {
    background-image: var(--bg-section-image);
    background-size: 110% 95%;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* Responsive Grid Container
 * Grid system (.row class) provides layout - no custom grid needed
 * REMOVED: display: grid and grid-template-columns
 * Flexbox centering for incomplete rows
 */
.multi-column-boxed-content .column-container {
    /* REMOVED: display: grid */

    /* REMOVED: grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) */

    /* Center incomplete rows */
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--row-gap);

    /* Width inherited from .container class - outer section stays full-width for backgrounds */
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    perspective: 1000px; /* Create 3D rendering context for all cards */
}

.multi-column-boxed-content .section-title,
.multi-column-boxed-content .section-subtitle {
    text-align: center;
    max-width: var(--max-width-content-lg);
    margin-left: auto;
    margin-right: auto;
}

/* Desktop layout handled by grid system (.col-4 classes on cards) */

/* REMOVED: Desktop flexbox override (lines 54-67) - grid system handles 3-column layout */

/* Card Styling */
.multi-column-boxed-content .column-card {
    /* flex-col utility class provides: display: flex; flex-direction: column */
    background-color: rgb(255 255 255 / 90%);
    backdrop-filter: blur(8px);
    padding: var(--space-lg);
    border-radius: var(--radius-card);
    border: 1px solid transparent; /* Base border for smooth transition */
    box-shadow: var(--shadow-default);
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

/* GPU acceleration optimizations - desktop only to prevent iOS border rendering issues */
@media (width > 768px) and (hover: hover) and (pointer: fine) {
    .multi-column-boxed-content .column-card {
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Explicit widths for flexbox centering */

/* 3 columns (default) - col-4 class */
.multi-column-boxed-content .column-card.col-4 {
    width: calc(33.333% - 30px);
}

/* 4 columns - col-3 class */
.multi-column-boxed-content .column-card.col-3 {
    width: calc(25% - 30px);
}

/* Only apply hover effects to cards with CTAs (clickable cards) */
.multi-column-boxed-content .column-card.has-cta:hover,
.multi-column-boxed-content .column-card.has-cta:has(:focus-visible) {
    background-color: rgb(255 255 255 / 96%);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

/* Title styling on hover */
.multi-column-boxed-content .column-card.has-cta:hover .column-title,
.multi-column-boxed-content .column-card.has-cta:has(:focus-visible) .column-title {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Content Elements */
.multi-column-boxed-content .column-card .eyebrow-text {
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.multi-column-boxed-content .column-title {
    margin-top: 0;
    color: var(--color-heading);
}

.multi-column-boxed-content .column-content {
    flex-grow: 1;
}

/* Prevent Gutenberg text color from affecting section headers - they should inherit */
section.multi-column-boxed-content.has-text-color .section-title,
section.multi-column-boxed-content.has-text-color .section-subtitle,
.has-text-color .multi-column-boxed-content .section-title,
.has-text-color .multi-column-boxed-content .section-subtitle {
    color: inherit;
}

/* Card content should maintain default colors regardless of section text color */

/* Selectors handle both frontend (section.has-text-color) and editor (.has-text-color ancestor) */

section.multi-column-boxed-content.has-text-color .column-title,
.has-text-color .multi-column-boxed-content .column-title {
    color: var(--color-heading) !important;
}

/* Eyebrow text - use heading color */
section.multi-column-boxed-content.has-text-color .column-card .eyebrow-text,
.has-text-color .multi-column-boxed-content .column-card .eyebrow-text {
    color: var(--color-heading) !important;
}

/* Card description - use primary text color */
section.multi-column-boxed-content.has-text-color .column-content,
.has-text-color .multi-column-boxed-content .column-content {
    color: var(--color-text-primary) !important;
}

/* Links inside cards should maintain primary color (not inherit white from section) */

/* Exclude .btn elements - they have their own color styling */
section.multi-column-boxed-content.has-text-color .column-card a:not(.btn),
.has-text-color .multi-column-boxed-content .column-card a:not(.btn) {
    color: var(--color-primary) !important;
}

section.multi-column-boxed-content.has-text-color .column-card a:not(.btn):hover,
.has-text-color .multi-column-boxed-content .column-card a:not(.btn):hover {
    color: var(--color-primary-dark) !important;
}

/* Button positioning - always at bottom of card with guaranteed minimum gap.
   margin-top:auto alone fails when cards shrink to content height (no leftover space). */
.multi-column-boxed-content .column-card .btn {
    margin-top: var(--space-md);
    align-self: flex-start;
}

/* Tablet layout: 2 columns (both col-3 and col-4 become col-md-6) */
@media (width <=1024px) {
    .multi-column-boxed-content .column-card.col-4 {
        width: calc(33.333% - var(--space-md));
    }
}

@media (width <=991px) {
    .multi-column-boxed-content .column-card.col-md-6,
    .multi-column-boxed-content .column-card.col-3.col-md-6,
    .multi-column-boxed-content .column-card.col-4.col-md-6 {
        width: calc(50% - 30px);
    }
}

/* Mobile layout: 1 column (all column classes become full width) */
@media (width <=768px) {
    /* Disable 3D perspective to prevent clipping on mobile browsers */
    .multi-column-boxed-content .column-container {
        perspective: none;
        padding-left: 0;
        padding-right: 0;
    }

    .multi-column-boxed-content .column-card {
        transform: none;
        backface-visibility: visible;
    }

    .multi-column-boxed-content .column-card.col-sm-12,
    .multi-column-boxed-content .column-card.col-3.col-sm-12,
    .multi-column-boxed-content .column-card.col-4.col-sm-12 {
        width: 100% !important;
    }

    .multi-column-boxed-content .column-card .btn {
        align-self: center;
    }

    /* Mobile: Use cover to fill space appropriately */
    .multi-column-boxed-content[data-has-bg-image="true"].bg-loaded {
        background-size: cover;
        background-position: center;
    }
}