/**
 * Icon & Text Box Grid Block Styles (Child Theme Override)
 *
 * Grid layout for content boxes with icons, titles, descriptions, and hover effects.
 * Uses CSS Grid for responsive layout with optional CTA buttons or clickable boxes.
 *
 * Child theme modifications:
 * - Added side-by-side layout support (heading left, grid right)
 * - Maintained stacked layout as default
 * - Default light grey background color
 * - Smart text color adaptation for dark background cards
 * - Dark background support for bottom_content WYSIWYG field
 *
 * @package TMW_Core_Child
 * @since 1.0.0
 * @version 2.7.0-client (based on plugin v2.2.0)
 */

/* Stacked layout: Flexbox for centering rogue columns */
.row.icon-text-box-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    --row-gap: 20px;
}

/* Column width constraints - prevents content from stretching boxes too wide */

/* When using CSS gap, flex-basis should account for gap space shared between items */

/* Formula: (100% - (n-1) * gap) / n, simplified for common layouts */

/* 2 columns (col-6 = 50%) - 1 gap shared between 2 items */
.row.icon-text-box-grid > .col-6 {
    flex: 0 1 calc((100% - var(--row-gap)) / 2);
    min-width: 0;
}

/* 3 columns (col-4 = 33.33%) - 2 gaps shared among 3 items */
.row.icon-text-box-grid > .col-4 {
    flex: 0 1 calc((100% - 2 * var(--row-gap)) / 3);
    min-width: 0;
}

/* 4 columns (col-3 = 25%) - 3 gaps shared among 4 items */
.row.icon-text-box-grid > .col-3 {
    flex: 0 1 calc((100% - 3 * var(--row-gap)) / 4);
    min-width: 0;
}

/* Full width for section headers at all screen sizes */
.row.icon-text-box-grid .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ==========================================================================
   Section Header Text Color Inheritance
   Only inherit text color when a custom color is set via block settings
   Works in both frontend and editor preview
   EXCEPT when dark background is detected - let parent theme handle that
   ========================================================================== */

/* Frontend: when color is set on the section itself (exclude dark bg) */
.icon-text-box-grid-section.has-text-color:not([data-section-dark-bg="true"]) .section-title,
.icon-text-box-grid-section.has-text-color:not([data-section-dark-bg="true"]) .section-subtitle,
.icon-text-box-grid-section[style*="color"]:not([data-section-dark-bg="true"]) .section-title,
.icon-text-box-grid-section[style*="color"]:not([data-section-dark-bg="true"]) .section-subtitle {
    color: inherit;
}

/* Editor preview: Gutenberg applies color to outer .wp-block wrapper (exclude dark bg) */
.wp-block[data-type="acf/icon-text-box-grid"].has-text-color:not(:has([data-section-dark-bg="true"])) .section-title,
.wp-block[data-type="acf/icon-text-box-grid"].has-text-color:not(:has([data-section-dark-bg="true"])) .section-subtitle,
.wp-block[data-type="acf/icon-text-box-grid"][style*="color"]:not(:has([data-section-dark-bg="true"])) .section-title,
.wp-block[data-type="acf/icon-text-box-grid"][style*="color"]:not(:has([data-section-dark-bg="true"])) .section-subtitle,
.has-text-color .icon-text-box-grid-section:not([data-section-dark-bg="true"]) .section-title,
.has-text-color .icon-text-box-grid-section:not([data-section-dark-bg="true"]) .section-subtitle {
    color: inherit;
}

/* ==========================================================================
   Stacked Layout (Default)
   Heading centered above, icon grid below
   ========================================================================== */

.icon-text-box-grid-section.layout-stacked .section-header {
    text-align: center;
    margin-bottom: var(--space-md);
}

.icon-text-box-grid-section.layout-stacked .section-header .section-title {
    max-width: var(--max-width-content-lg);
    margin: 0 auto;
}

.icon-text-box-grid-section.layout-stacked .section-header-cta {
    margin-top: var(--space-md);
}

/* ==========================================================================
   Side-by-Side Layout
   Heading left (col-4), icon grid right (col-8)
   ========================================================================== */

/* Fix outer side-by-side layout: Override flexbox with CSS Grid for col-4/col-8 to work */
.icon-text-box-grid-section.layout-side-by-side .row.icon-text-box-grid {
    align-items: flex-start;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.icon-text-box-grid-section.layout-side-by-side .section-header {
    text-align: left;
    margin-bottom: 0;
}

.icon-text-box-grid-section.layout-side-by-side .section-header--left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: var(--space-xl);
}

/* Remove top margin from subtitle when it's the first/only element in header
   This ensures left column heading aligns with right column content */
.icon-text-box-grid-section.layout-side-by-side .section-header--left > .section-subtitle:first-child {
    margin-top: 0;
}

.icon-text-box-grid-section.layout-side-by-side .section-header-cta {
    margin-top: var(--space-lg);
}

/* Decorative header image (side-by-side layout only) */
.icon-text-box-grid-section.layout-side-by-side .section-header-image {
    margin-top: var(--space-xl);
}

.icon-text-box-grid-section.layout-side-by-side .header-decorative-img {
    max-width: 240px;
    height: auto;
}

.icon-text-box-grid-section.layout-side-by-side .section-header .section-subtitle {
    margin-left: 0;
}

/* ==========================================================================
   Box Item Styles (Shared)
   ========================================================================== */

.icon-text-box-grid .box-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-md);
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* GPU acceleration optimizations - desktop only to prevent iOS border rendering issues */
@media (width > 768px) and (hover: hover) and (pointer: fine) {
    .icon-text-box-grid .box-item {
        backface-visibility: hidden;
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Boxes with CTA buttons: override center alignment to push button to bottom */
.icon-text-box-grid .box-item.flex-col {
    justify-content: flex-start;
    height: 100%;
}

/* Clickable card links - extra bottom padding for chevron */
.icon-text-box-grid a.box-item {
    cursor: pointer;
    padding-bottom: var(--space-lg);
}

.icon-text-box-grid .box-item .box-title {
    color: var(--color-heading);
}

/* Hover effects only for clickable card links */
.icon-text-box-grid a.box-item:hover {
    background-color: rgb(255 255 255 / 96%);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    border-color: var(--color-primary);
}

/* Preserve GPU acceleration on hover for devices that support it */
@media (hover: hover) and (pointer: fine) {
    .icon-text-box-grid a.box-item:hover {
        transform: translateY(-4px) translateZ(0);
    }
}

/* Dark background sections - more visible shadow on hover */
[data-section-dark-bg="true"] .icon-text-box-grid a.box-item:hover,
.has-dark-background .icon-text-box-grid a.box-item:hover {
    box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
}

/* Icon scale on hover for clickable cards */
.icon-text-box-grid a.box-item .box-icon {
    transition: transform 0.3s ease;
}

.icon-text-box-grid a.box-item:hover .box-icon {
    transform: scale(1.1);
}

.icon-text-box-grid a.box-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wp--preset--gradient--gradient-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.icon-text-box-grid a.box-item:hover::before {
    transform: scaleX(1);
}

/* Hover chevron - centered at bottom of card */
.icon-text-box-grid a.box-item::after {
    content: "›";
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-light);
    color: var(--color-primary);
    opacity: 0;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.icon-text-box-grid a.box-item:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* White chevron for dark background cards */
.icon-text-box-grid a.box-item.has-dark-bg::after {
    color: var(--color-white);
}

.icon-text-box-grid .box-icon {
    height: auto;
    background: var(--wp--preset--gradient--gradient-2);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-sm);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /* Force pixel alignment to prevent sub-pixel blur */
    transform: translate3d(0, 0, 0);
}

/* Icon mode (default): Small constrained icons */
.icon-text-box-grid .box-icon img {
    margin-bottom: var(--space-sm);
    object-fit: contain;
    max-height: var(--dimension-icon-sm);
    width: auto;
    height: auto;
    /* GPU layer for pixel alignment */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* SVG-specific sharpness - crisp-edges works for vectors but blurs raster images */
.icon-text-box-grid .box-icon img[src$=".svg"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================================================
   Image Mode - Larger images that fill available space
   Toggle via ACF "Media Size" field
   ========================================================================== */

.media-size-image .icon-text-box-grid .box-icon {
    width: 100%;
    margin-bottom: var(--space-md);
    background: none;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.media-size-image .icon-text-box-grid .box-icon img {
    max-height: none;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
    margin-bottom: 0;
}

/* Image mode: No icon scale on hover - images are too large for this effect */
.media-size-image .icon-text-box-grid a.box-item:hover .box-icon {
    transform: none;
}

/* ==========================================================================
   Image Style: Circle Frame
   CSS-powered circular frame for images
   Toggle via ACF "Image Style" field (only when Media Size is "Image")
   ========================================================================== */

.icon-style-circle.media-size-image .icon-text-box-grid .box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full);
    background: var(--wp--preset--gradient--gradient-2);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.icon-style-circle.media-size-image .icon-text-box-grid .box-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
    aspect-ratio: 1 / 1;
}

/* Circle frame on hover for clickable cards - subtle grow effect */
.icon-style-circle.media-size-image .icon-text-box-grid a.box-item:hover .box-icon {
    transform: scale(1.05);
}

/* 4-column layout: smaller circle images to prevent overflow */
.icon-style-circle.media-size-image .row.icon-text-box-grid > .col-3 .box-icon {
    max-width: 150px;
}

/* SVG-specific styling */
.icon-text-box-grid .box-icon-img--svg {
    display: block;
    fill: currentcolor;
}

.icon-text-box-grid .box-description,
.icon-text-box-grid a .box-description {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

/* Remove bottom margin when description is last child (no CTA button) for even padding */
.icon-text-box-grid .box-description:last-child {
    margin-bottom: 0;
}

/* Linked cards: Keep bottom margin on description for chevron clearance */
.icon-text-box-grid a.box-item .box-description:last-child {
    margin-bottom: var(--space-md);
}

.icon-text-box-grid .box-description ul,
.icon-text-box-grid .box-description ol {
    text-align: left;
    margin-bottom: 0 !important;
    margin-left: 0;
}

/* CTA Button inside boxes (for external URL links) */
.icon-text-box-grid .box-cta {
    margin-top: auto;
    display: inline-block;
    align-self: center;
}

/* Override global .has-text-color inheritance for box grid - reset at card level */
.has-text-color .icon-text-box-grid .box-item {
    color: var(--color-text-primary);
}

/* Editor preview: Ensure card content is readable with dark section bg + white card bg
   Must use !important to override global [data-section-dark-bg="true"] p/li/span rules */
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item,
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item p,
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item li,
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item span {
    color: var(--color-text-primary) !important;
}

/* Editor preview: Card titles should use heading color */
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item .box-title {
    color: var(--color-heading) !important;
}

/* Editor preview: Card descriptions should use text primary color */
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item .box-description,
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item .box-description p,
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item .box-description li {
    color: var(--color-text-primary) !important;
}

/* Protect links inside cards from inheriting white text color */
.has-text-color .icon-text-box-grid .box-description a {
    color: var(--color-link);
}

.has-text-color .icon-text-box-grid .box-description a:hover {
    color: var(--color-link-hover);
}

/* Editor preview: Protect links inside cards */
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-description a {
    color: var(--color-link) !important;
}

/* Protect arrow-style CTA buttons from inheriting section's light text color */
.has-text-color .icon-text-box-grid .box-cta.btn-arrow {
    color: var(--color-link);
}

.has-text-color .icon-text-box-grid .box-cta.btn-arrow:hover {
    color: var(--color-link-hover);
}

/* Editor preview: Protect CTA buttons */
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-cta.btn-arrow {
    color: var(--color-link) !important;
}

/* ==========================================================================
   Dark Background Cards - Light Text
   Automatically applied via PHP when card_background_color is dark
   ========================================================================== */

.icon-text-box-grid .box-item.has-dark-bg {
    color: var(--color-text-light);
}

.icon-text-box-grid .box-item.has-dark-bg .box-title {
    color: var(--color-text-light);
}

.icon-text-box-grid .box-item.has-dark-bg .box-description {
    color: var(--color-text-light);
}

/* Links inside dark background cards */
.icon-text-box-grid .box-item.has-dark-bg .box-description a {
    color: var(--color-text-light);
    text-decoration: underline;
}

.icon-text-box-grid .box-item.has-dark-bg .box-description a:hover {
    opacity: 0.8;
}

/* Focus visible for dark background cards handled by global rules in layout.css */

/* ==========================================================================
   Step Numbers
   Numbered badges positioned in top-left corner of each box
   Toggle via ACF "Show Step Numbers" field
   ========================================================================== */

/* Ensure box wrapper has position context for absolute positioning */
.icon-text-box-grid .has-step-number {
    position: relative;
}

/* Add extra top padding ONLY when no icon present to prevent title overlapping badge */
/* When icon exists, it's centered and provides natural clearance from corner badge */
.icon-text-box-grid .box-item.has-step-number:not(:has(.box-icon)) {
    padding-top: calc(var(--space-md) + 40px);
}

/* Image mode: larger badge (40px) needs more padding when no icon */
.media-size-image .icon-text-box-grid .box-item.has-step-number:not(:has(.box-icon)) {
    padding-top: calc(var(--space-md) + 48px);
}

.icon-text-box-grid .box-step-number {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    z-index: 2;
}

/* Larger step numbers for image mode */
.media-size-image .icon-text-box-grid .box-step-number {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-body);
}

/* Side-by-side layout: position relative to content area */
.icon-text-box-grid-section.layout-side-by-side .box-step-number {
    top: 0;
    left: 0;
}

/* Editor preview: Ensure step numbers stay readable on dark section backgrounds
   Must override parent theme's .has-nested-bg span:not(.btn) rule that resets text to dark
   Extra specificity via .icon-text-box-grid and .box-item ensures we win */
.editor-styles-wrapper [data-section-dark-bg="true"] .icon-text-box-grid .box-item.has-nested-bg:not(.has-dark-bg) span.box-step-number,
.editor-styles-wrapper .has-dark-bg .icon-text-box-grid .box-item.has-nested-bg:not(.has-dark-bg) span.box-step-number {
    color: var(--color-white) !important;
}

/* ==========================================================================
   Side-by-Side Layout - Linked Cards
   Entire card area is clickable, no underlines on text
   ========================================================================== */

.icon-text-box-grid-section.layout-side-by-side a.col-6 {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.icon-text-box-grid-section.layout-side-by-side a.col-6:hover {
    transform: translateY(var(--transform-offset-sm));
}

.icon-text-box-grid-section.layout-side-by-side a.col-6:hover .box-title {
    color: var(--color-link-hover);
}

/* Ensure text elements inside linked cards don't get underlined or bold */
.icon-text-box-grid-section.layout-side-by-side a.col-6 .box-title,
.icon-text-box-grid-section.layout-side-by-side a.col-6 .box-description {
    text-decoration: none;
}

.icon-text-box-grid-section.layout-side-by-side a.col-6 .box-description {
    font-weight: normal;
}

/* Side-by-side layout: 2-column grid on the right (Bootstrap "Features with title" style) */
.icon-text-box-grid-section.layout-side-by-side .icon-grid-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-xl) var(--space-2xl);
}

.icon-text-box-grid-section.layout-side-by-side .icon-grid-inner .box-title {
    font-weight: 500;
}

/* Side-by-side layout: Left-align icons and text in grid columns */
.icon-text-box-grid-section.layout-side-by-side .box-item {
    text-align: left;
}

.icon-text-box-grid-section.layout-side-by-side .box-icon {
    margin-left: 0;
    margin-right: 0;
}

/* Reset col-6 grid-column span - CSS Grid handles sizing */
.icon-text-box-grid-section.layout-side-by-side .icon-grid-inner > * {
    grid-column: auto !important;
}

/* Mobile: stack to single column */
@media (width <= 768px) {
    .icon-text-box-grid-section.layout-side-by-side .icon-grid-inner {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (width <=1024px) {
    /* Side-by-side layout adjustments for tablet */
    .icon-text-box-grid-section.layout-side-by-side .section-header {
        position: relative;
        top: 0;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left {
        padding-right: var(--space-md);
    }

}

/* Tablet ONLY: 2-column layout for section header when image is present */
@media (768px < width <= 1024px) {
    .icon-text-box-grid-section.layout-side-by-side .section-header--left:has(.section-header-image) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title image"
            "subtitle image"
            "cta image";
        align-items: start;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left:has(.section-header-image) .section-title {
        grid-area: title;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left:has(.section-header-image) .section-subtitle {
        grid-area: subtitle;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left:has(.section-header-image) .section-header-cta {
        grid-area: cta;
        align-self: start;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left:has(.section-header-image) .section-header-image {
        grid-area: image;
        margin-top: 0;
        margin-left: auto;
        align-self: center;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left:has(.section-header-image) .header-decorative-img {
        max-width: 200px;
    }
}

/* ==========================================================================
   Bottom Content
   ========================================================================== */

.icon-text-box-grid__bottom-content {
    text-align: center;
    margin-top: var(--space-xl);
    max-width: var(--max-width-content-md) !important;
}

/* Rounded corners for photos/raster images only (not SVG icons) */
.icon-text-box-grid__bottom-content img:not([src$=".svg"]) {
    border-radius: var(--radius-card);
}

.icon-text-box-grid__bottom-content img {
    border-radius: var(--radius-card);
}

/* ==========================================================================
   Bottom Content - Dark Background Support
   Applies light text/icons when section has dark FSE background
   Uses semantic --dark-bg-* variables for consistency
   ========================================================================== */

[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content {
    color: var(--dark-bg-text);
}

[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content p,
[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content li {
    color: var(--dark-bg-text);
}

/* Links need underline for accessibility on dark backgrounds */
[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content a:not(.btn) {
    color: var(--dark-bg-link);
    text-decoration: underline;
}

[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content a:not(.btn):hover {
    opacity: var(--dark-bg-link-hover-opacity);
}

/* Icons/SVGs inherit light color */
[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content svg {
    fill: currentColor;
    color: var(--dark-bg-text);
}

/* Only invert SVG icons on dark backgrounds - photos should retain original colors */
[data-section-dark-bg="true"] .icon-text-box-grid__bottom-content img[src$=".svg"] {
    filter: brightness(0) invert(1);
}

/* Mobile: Stack everything vertically */
@media (width <= 768px) {
    /* Stacked layout: Stack columns to full width on mobile */
    .row.icon-text-box-grid > .col-3,
    .row.icon-text-box-grid > .col-4,
    .row.icon-text-box-grid > .col-6 {
        flex: 0 0 100%;
    }

    .icon-text-box-grid-section.layout-side-by-side .section-header--left {
        text-align: center;
        padding-right: 0;
        margin-bottom: var(--space-lg);
    }

    /* Switch to single column on mobile */
    .icon-text-box-grid-section.layout-side-by-side .icon-grid-inner {
        grid-template-columns: 1fr;
    }

    /* Center decorative image on mobile */
    .icon-text-box-grid-section.layout-side-by-side .section-header-image {
        display: flex;
        justify-content: center;
        margin-top: var(--space-lg);
    }

    .icon-text-box-grid-section.layout-side-by-side .header-decorative-img {
        max-width: 250px;
    }
}