/**
 * 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;
    isolation: isolate;
}

/* Section background image: a real <img> (with srcset) inside a clipping
   wrapper that sits behind the section's content (z-index: -1 inside the
   isolated section). script.js adds .bg-loaded as the section nears the
   viewport, fading the image in (800ms, 300ms delay - synced with the cards). */
.multi-column-boxed-content__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

/* Matches the previous background-size: 110% 95% / background-position: bottom */
.multi-column-boxed-content__bg-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 110%;
    max-width: none;
    height: 95%;
    object-fit: fill;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.multi-column-boxed-content.bg-loaded .multi-column-boxed-content__bg-img {
    opacity: 1;
}

/* 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;
}

/* Child theme: optional paragraph below the grid (above the Bottom CTA). */
.multi-column-boxed-content .section-bottom-paragraph {
    text-align: center;
    max-width: var(--max-width-content-lg);
    margin: var(--space-xl) auto 0;
}

.multi-column-boxed-content .section-bottom-paragraph > :last-child {
    margin-bottom: 0;
}

/* 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 */
}

/* This block's cards are direct children of the .row inside a
   .stagger-animate section, which makes them also match generic
   entrance-reveal utilities in the parent theme's core/animations.css:
   `.stagger-animate .row > *` (full transition shorthand: opacity/transform
   at 0.8s cubic-bezier, no box-shadow or border-color at all) and
   `.stagger-animate .row > *:nth-child(n)` (a standalone transition-delay of
   0.3s–1s+ based on row position), both meant only for staggering the
   entrance fade-in.

   Both are specificity (0,3,0) — the nth-child one counts .stagger-animate,
   .row, and :nth-child(n) as three "class-level" selectors. A plain
   `.column-card` (or even `.column-card.flex-col`) selector ties at (0,2,0)
   or (0,3,0) respectively, and core/animations.css wins ties: it's compiled
   into frontend.css, which this theme enqueues AFTER this block's own
   inline style (confirmed via document.styleSheets order on a live page —
   not the order you'd assume from file structure alone). Qualifying with
   BOTH .flex-col and .has-nested-bg (also always present on these cards)
   reaches specificity (0,4,0), which reliably wins regardless of load
   order. transition-delay is set as its own explicit declaration — it
   cascades independently from transition-property/duration as its own
   longhand, so leaving it implicit in the shorthand is not equivalent to
   overriding it outright. */
.multi-column-boxed-content .column-card.flex-col.has-nested-bg {
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
    transition-delay: 0s;
}

/* 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).
   The higher-specificity .column-card.flex-col transition rule above
   already wins over both of core/animations.css's stagger-related rules
   (the full-shorthand .stagger-animate .row > * override and the
   position-based .animate-stagger > *:nth-child(n) delay), so no
   transition-delay override is needed here. */
.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);
}

/* 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;
}

.multi-column-boxed-content .column-content ul {
    margin-bottom: 0;
}

/* 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: cover the section instead of the stretched desktop placement */
    .multi-column-boxed-content__bg-img {
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
    }
}