/**
 * Featured / Most Recent Posts Block Styles
 *
 * Supports three layout modes:
 * - Card: Standard 3-column card grid with images
 * - Text: 3-column text-only layout (with optional icons)
 * - Masonry: 2x3 grid with alternating background colors
 *
 * @package TMW_Blocks
 * @since 1.0.0
 */

/* ==========================================================================
   Block Wrapper
   ========================================================================== */

.featured-recent-posts-wrapper {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

/* Ensure badges don't stretch to full width */
.featured-recent-posts-wrapper .badge {
    align-self: flex-start;
}

/* Badge positioning and hiding now handled globally in theme cards.css */

/* Eyebrow text styling for masonry layout (non-pill design) */
.featured-recent-posts-wrapper .eyebrow-text {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
}

/**
 * Badge override - plain text style (matches Literature & Videos)
 * Removes pill/badge styling from badges so they display as colored text without background.
 */
.featured-recent-posts-wrapper .badge.card-badge-primary {
	background: transparent;
	padding: 0;
	border-radius: 0;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	margin-bottom: 0;
}

/* ==========================================================================
   Section Header
   ========================================================================== */

.featured-recent-posts-wrapper .section-header--center {
    text-align: center;
}

.featured-recent-posts-wrapper .section-header--left {
    text-align: left;
    max-width: var(--max-width-content-lg);
    margin-bottom: var(--space-2xl);
}

.featured-recent-posts-wrapper .section-header--right {
    max-width: var(--max-width-content-xl);
    text-align: right;
    align-items: end;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: 0;
}

.featured-recent-posts-wrapper .section-title {
    margin-bottom: var(--space-md);
    max-width: var(--max-width-content-lg);
}

.featured-recent-posts-wrapper.layout-masonry .section-title {
    text-wrap: auto;
}

.featured-recent-posts-wrapper .section-subtitle {
    max-width: 800px;
    margin: 0;
}

.featured-recent-posts-wrapper .section-header--center .section-title {
    margin-left: auto;
    margin-right: auto;
}

.featured-recent-posts-wrapper .section-header--center .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.featured-recent-posts-wrapper .section-cta {
    margin-top: var(--space-lg);
}

/* ==========================================================================
   Grid Container Base & Element Defaults
   ========================================================================== */

.featured-recent-posts-grid {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.featured-recent-posts-wrapper .post-title a:hover {
    text-decoration: underline;
    color: var(--color-tertiary);
}

/* ==========================================================================
   Card Wrapper Links (Accessibility)
   ========================================================================== */

/* Ensure entire card wrapper links display properly */
.featured-recent-posts-wrapper .card-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Card action spans should still look clickable - styling inherited from card component */

/* Focus state for keyboard navigation */
.featured-recent-posts-wrapper .card-wrapper:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* ==========================================================================
   CARD LAYOUT (3-Column Standard Cards)
   ========================================================================== */

/* Force Flexbox layout to override .row's display:grid
   This allows incomplete rows to be centered. */
.layout-card .featured-recent-posts-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

/* REMOVED: Desktop grid override - grid system handles responsive layout */

.layout-card .post-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

/* 3-column layout: all cards in flexbox need explicit width
   Formula: (100% - 2 gaps) / 3 = 33.333% - gap * 2/3
   This ensures cards fill full container width, matching Content Card Carousel grid */
.layout-card .featured-recent-posts-grid .col-4 {
    width: calc(33.333% - var(--row-gap) * 2 / 3) !important;
}

/* ==========================================================================
   Single Card Centering - Match Content Card Carousel width (400px)
   When only one post is displayed, center it and match carousel card width
   ========================================================================== */

.featured-recent-posts-wrapper.has-single-card.layout-card .featured-recent-posts-grid .col-4 {
    width: 400px !important;
    min-width: 300px;
    max-width: 400px;
}

.layout-card .post-card .post-thumbnail {
    order: -1;
}

.layout-card .post-card .post-content {
    order: 0;
}

.layout-card .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.layout-card .post-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-light-gray);
}

/* Cap thumbnail height at intermediate widths (1200px and below) to prevent overly tall images */
@media (width <=1200px) {
    .layout-card .post-thumbnail,
    .layout-card .card-media {
        max-height: 220px;
    }
}

.layout-card .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.layout-card .post-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.layout-card .post-content {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.layout-card .post-title,
.layout-card .card-title {
    color: var(--color-heading);
}

.layout-card .post-title a,
.layout-card .card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.layout-card .post-meta {
    font-size: var(--font-size-small);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.layout-card .post-excerpt,
.layout-card .card-excerpt {
    font-size: var(--font-size-body);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-card .btn-arrow,
.layout-card .card-action {
    margin-top: auto !important;

    /* Force CTA to bottom of flexbox */
}

/* ==========================================================================
   TEXT LAYOUT (3-Column Text with Optional Icons)
   ========================================================================== */

.layout-text .featured-recent-posts-grid {
    /* REMOVED: grid-template-columns - grid system (.col-4) handles 3-column layout */
    position: relative;
}

@media (width >=768px) {
    .layout-text .featured-recent-posts-grid {
        gap: var(--space-xl);

        /* REMOVED: grid-template-columns: repeat(3, 1fr) - grid system handles responsive layout */
    }
}

.layout-text .post-card {
    background: transparent;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.layout-text .post-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.layout-text .post-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.layout-text .post-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.layout-text .post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.layout-text .post-excerpt {
    margin-bottom: var(--space-md);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-text .btn-arrow,
.layout-text .card-action {
    margin-top: auto !important;
    color: var(--color-link);

    /* Force CTA to bottom of flexbox */
}

/* ==========================================================================
   MASONRY LAYOUT (3-Column Flexbox with 2 Items Per Column)

   Uses flexbox column wrap to create true masonry effect. Items flow
   vertically (top to bottom) within each column, then wrap to next column.
   This eliminates gaps between cards of different heights.

   Layout Structure (column-first flow):
   Col 1: [Post #1] → [Post #2]
   Col 2: [Post #3] → [Post #4]
   Col 3: [Post #5] → [Post #6]

   Reference: https://tobiasahlin.com/blog/masonry-with-css/
   ========================================================================== */

.layout-masonry .featured-recent-posts-grid {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    gap: var(--row-gap);
    margin-bottom: 0;

    /* Height is set dynamically by masonry.js based on card content.
       This ensures the flexbox column wrap works correctly without overflow. */
}

/* Items need explicit width for 3-column layout */
.layout-masonry .featured-recent-posts-grid > * {
    width: calc(33.333% - var(--row-gap) * 2 / 3);
}

.layout-masonry .post-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}

/* Focus state for keyboard navigation accessibility */
.layout-masonry .post-card:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.layout-masonry .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

/* For cards with images */
.layout-masonry .post-card.has-image {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.layout-masonry .post-card.has-image .post-content {
    padding: var(--space-lg);
    order: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.layout-masonry .post-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-secondary);
    order: -1;
}

/* Desktop: Show thumbnails only for positions 1, 4, 5 (puzzle-piece effect) */
/* Hide thumbnails for positions 2, 3, 6 on desktop */
/* NOTE: Must be in media query so mobile rules can override */
@media (width > 767px) {
    .layout-masonry .post-card:nth-child(2) .post-thumbnail,
    .layout-masonry .post-card:nth-child(3) .post-thumbnail,
    .layout-masonry .post-card:nth-child(6) .post-thumbnail {
        display: none;
    }

    /* Desktop: Hide icons for positions 1, 4, 5 (where thumbnails are visible) */
    .layout-masonry .post-card:nth-child(1) .post-icon,
    .layout-masonry .post-card:nth-child(4) .post-icon,
    .layout-masonry .post-card:nth-child(5) .post-icon {
        display: none;
    }
}

/* Desktop: Cards at positions 2, 3, 6 don't have .has-image class (set in PHP)
   so they inherit base .post-card padding (var(--space-lg)) automatically */

.layout-masonry .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category icon for non-image cards */
.layout-masonry .post-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.layout-masonry .post-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.layout-masonry .post-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    flex: 1;
}

.layout-masonry .post-title {
    margin-bottom: var(--space-xs);
    font-weight: 500;
    color: var(--color-heading);
}

.layout-masonry .post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
    /* Remove flex: 1 - the button's margin-top: auto handles bottom positioning */
}

/* Make p tag transparent to layout so line-clamp works on parent */
.layout-masonry .post-excerpt p {
    display: contents;
}

.layout-masonry .btn-arrow,
.layout-masonry .card-action,
.has-text-color .card-action {
    margin-top: auto !important;
    color: var(--color-link);
}

/* ==========================================================================
   Bottom CTA
   ========================================================================== */

.featured-recent-posts-wrapper .bottom-cta {
    margin-top: var(--space-2xl);
    text-align: center;
}

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

/* Tablet: 2 columns for Card layout
   Formula: (100% - 1 gap) / 2 = 50% - gap / 2 */
@media (width <=1024px) {
    .layout-card .featured-recent-posts-grid .col-4 {
        width: calc(50% - var(--row-gap) / 2) !important;
    }

    .layout-masonry .featured-recent-posts-grid {
        --row-gap: 20px;
    }
}

/* Tablet: 3 columns grid for Masonry layout (skip 2-column, go straight to 1) */
@media (width <=1024px) and (width > 767px) {
    .layout-masonry .featured-recent-posts-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column; /* Flow down columns like flexbox masonry */
        height: auto !important; /* Override JS-set height */
    }

    .layout-masonry .featured-recent-posts-grid > * {
        width: auto;
    }
}

@media (width <=767px) {
    .layout-masonry .post-icon img {
        max-width: 40px;
    }

    .featured-recent-posts-wrapper .section-title {
        font-size: var(--font-size-h3);
    }

    /* Mobile: 1 column for Card layout */
    .layout-card .featured-recent-posts-grid .col-4 {
        width: 100% !important;
    }

    /* Mobile: 1 column for Masonry layout - override flexbox column wrap */
    .layout-masonry .featured-recent-posts-grid {
        display: flex;
        flex-flow: row wrap; /* Override column wrap to simple row wrap */
        height: auto !important; /* Override JS-set height */
    }

    .layout-masonry .featured-recent-posts-grid > * {
        width: 100% !important; /* Override desktop calc(33.333% - gap) */
        max-width: 100%;
        flex: 0 0 100%; /* Force single column - no grow, no shrink, 100% basis */
        box-sizing: border-box;
    }

    /* Mobile: Reorder posts so image cards (1, 3, 5) come first, then non-image cards (2, 4, 6) */
    /* Order: 1, 3, 5, 2, 4, 6 */
    .layout-masonry .post-card:nth-child(1) { order: 1; }
    .layout-masonry .post-card:nth-child(3) { order: 2; }
    .layout-masonry .post-card:nth-child(5) { order: 3; }
    .layout-masonry .post-card:nth-child(2) { order: 4; }
    .layout-masonry .post-card:nth-child(4) { order: 5; }
    .layout-masonry .post-card:nth-child(6) { order: 6; }

    .layout-masonry .post-thumbnail {
        height: 200px;
    }

    .layout-masonry .post-thumbnail img {
        object-fit: cover;
    }

    /* Mobile: Use .has-image class to determine which cards show thumbnails
       This is more reliable than nth-child since it matches the actual data.
       Cards with .has-image have a featured image set, others show icons. */

    /* Mobile: Show thumbnails for all cards that have images */
    .layout-masonry .post-card.has-image .post-thumbnail {
        display: block;
    }

    /* Mobile: Cards with images - no padding on card (content has padding) */
    .layout-masonry .post-card.has-image {
        padding: 0;
    }

    /* Mobile: Cards with images need padding on content since card has none */
    .layout-masonry .post-card.has-image .post-content {
        padding: var(--space-lg);
    }

    /* Mobile: Hide icons for cards with images */
    .layout-masonry .post-card.has-image .post-icon {
        display: none;
    }

    /* Mobile: Cards without images - padding on card, show icons */
    .layout-masonry .post-card:not(.has-image) {
        padding: var(--space-lg);
        flex-direction: column;
        align-items: flex-start;
    }

    /* Mobile: Cards without images - no content padding (card has it) */
    .layout-masonry .post-card:not(.has-image) .post-content {
        padding: 0;
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    /* Mobile: Show icons for cards without images */
    .layout-masonry .post-card:not(.has-image) .post-icon {
        display: block;
        flex-shrink: 0;
        margin-bottom: var(--space-md);
    }
}

/* ==========================================================================
   Block Editor Preview Styles
   ========================================================================== */

/* In the block editor, the masonry.js viewScript doesn't run, so flexbox
   column wrap has no height set and items stack in a single column.
   Use CSS Grid with column flow to match frontend order:
   Col 1: Post 1, Post 2 | Col 2: Post 3, Post 4 | Col 3: Post 5, Post 6 */
.block-editor-block-list__layout .layout-masonry .featured-recent-posts-grid,
.editor-styles-wrapper .layout-masonry .featured-recent-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; /* Flow down columns to match frontend masonry order */
    height: auto !important;
}

.block-editor-block-list__layout .layout-masonry .featured-recent-posts-grid > *,
.editor-styles-wrapper .layout-masonry .featured-recent-posts-grid > * {
    width: auto;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center {
    text-align: center;
}