/* Full Width Block MF Styles - Mobile First */

/* Block wrapper */
.wp-block-gourmand-full-width-block-mf {
    margin: 0;
    padding: 0;
}

/* Header section - single container for title and description */
.full-width-block-mf-header {
    width: 100%;
    background-color: var(--color-white);
    padding: 1rem 10%;
    text-align: center;
    box-shadow: 0 3px 6px rgba(var(--color-black-rgb), 0.15);
}

/* Remove shadow in editor */
.editor-styles-wrapper .full-width-block-mf-header,
.block-editor-block-list__layout .full-width-block-mf-header {
    box-shadow: none !important;
}

/* Header title */
.full-width-block-mf-header-title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-tight);
    color: var(--color-heading);
    margin: 0 0 0.25rem 0;
}

/* Header title as link */
a.full-width-block-mf-header-title {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a.full-width-block-mf-header-title:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Header description */
.full-width-block-mf-header-description {
    font-family: var(--font-body);
    font-size: var(--body-m);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-normal);
    color: var(--color-body);
    margin: 0;
}

/* Container */
.full-width-block-mf-container {
    display: flex;
    flex-direction: column;
}

/* Hide desktop upper and lower layouts on mobile/tablet (shown by default on mobile) */
.fwb-upper,
.full-width-block-mf-lower-container,
.full-width-block-mf-separator {
    display: none;
}

/* Individual post item */
.full-width-block-mf-item {
    width: 100%;
}

/* Link wrapper */
.full-width-block-mf-link {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    padding: 1rem;
    transition: opacity 0.2s ease;
}

.full-width-block-mf-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Separator between items - all items get border */
.full-width-block-mf-item .full-width-block-mf-link {
    border-bottom: 1px solid var(--color-gray-300);
}

/* Image - 25% width, 1:1 aspect ratio */
.full-width-block-mf-image {
    flex: 0 0 25%;
    position: relative;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

/* Force 1:1 aspect ratio with padding-bottom trick */
.full-width-block-mf-image::before {
    content: '';
    display: block;
    padding-bottom: 100%; /* 1:1 ratio */
}

.full-width-block-mf-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content container */
.full-width-block-mf-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
}

/* Title */
.full-width-block-mf-title {
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-normal);
    color: var(--color-heading);
    margin: 0;

    /* 2-line clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Excerpt */
.full-width-block-mf-excerpt {
    font-family: var(--font-body);
    font-size: var(--body-m);
    font-weight: var(--weight-normal);
    line-height: var(--leading-body-normal);
    color: var(--color-body);
    margin: 0;

    /* 2-line clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Remove default p margins in excerpt */
.full-width-block-mf-excerpt p {
    margin: 0;
}

/* Meta (date and reading time) */
.full-width-block-mf-meta {
    font-family: var(--font-meta);
    font-size: var(--meta-m);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body-tight);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-gray-500);
}

/* Separator dot */
.full-width-block-mf-separator {
    margin: 0 0.5rem;
}

/* See More Link section - Mobile */
.full-width-block-mf-see-more {
    width: 100%;
}

.full-width-block-mf-see-more-link,
.full-width-block-mf-see-more-text {
    display: block;
    padding: 1rem;
    font-family: var(--font-meta);
    font-size: var(--meta-m);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body-tight);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--color-meta);
    text-align: center;
}

.full-width-block-mf-see-more-link {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.full-width-block-mf-see-more-link:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Tablet and larger */
@media (min-width: 768px) {
    /* Add padding to block wrapper */
    .wp-block-gourmand-full-width-block-mf {
        padding: 1.5rem;
    }

    /* Header with inline separator bars */
    .full-width-block-mf-header {
        display: flex;
        align-items: center;
        gap: 1.25rem; /* 20px gap between text and line */
        padding: 1rem 0;
        box-shadow: none;
        background-color: transparent;
    }

    /* Separator lines using pseudo-elements */
    .full-width-block-mf-header::before,
    .full-width-block-mf-header::after {
        content: '';
        height: 1px;
        background-color: var(--color-gray-300);
        flex: 1;
    }

    /* Left alignment - line only on right */
    .header-align-left .full-width-block-mf-header::before {
        display: none;
    }

    /* Center alignment - lines on both sides */
    .header-align-center .full-width-block-mf-header {
        justify-content: center;
    }

    /* Right alignment - line only on left */
    .header-align-right .full-width-block-mf-header {
        justify-content: flex-end;
    }

    .header-align-right .full-width-block-mf-header::after {
        display: none;
    }

    /* Header title for tablet/desktop */
    .full-width-block-mf-header-title {
        margin: 0;
    }

    /* Header description hidden on tablet/desktop */
    .full-width-block-mf-header-description {
        display: none;
    }

    /* See More section with separator lines */
    .full-width-block-mf-see-more {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        padding: 1rem 0;
        margin-top: 1rem;
        border-top: none;
    }

    /* Separator lines using pseudo-elements */
    .full-width-block-mf-see-more::before,
    .full-width-block-mf-see-more::after {
        content: '';
        height: 1px;
        background-color: var(--color-gray-300);
        flex: 1;
    }

    .full-width-block-mf-see-more-link,
    .full-width-block-mf-see-more-text {
        flex-shrink: 0;
        padding: 0;
    }

}

/* Desktop */
@media (min-width: 1024px) {
    /* Increase padding for desktop */
    .wp-block-gourmand-full-width-block-mf {
        padding: 2rem;
    }

    /* Reduce header bottom padding on desktop */
    .full-width-block-mf-header {
        padding: 0.5rem 0;
    }

    /* Show desktop upper layouts */
    .fwb-upper {
        display: grid;
    }

    /* Hide mobile layout on desktop when desktop layouts are active */
    .desktop-layout-upper .full-width-block-mf-container > .full-width-block-mf-item,
    .desktop-layout-upper-lower .full-width-block-mf-container > .full-width-block-mf-item,
    .desktop-layout-lower .full-width-block-mf-container > .full-width-block-mf-item {
        display: none;
    }

    /* Prevent mobile bottom borders from appearing in upper layouts */
    .fwb-upper .full-width-block-mf-link {
        border-bottom: none;
    }

    /* ============================================================================
       NEW ARCHITECTURE - Desktop Grid-2 Layout (Phase 1)
       ============================================================================ */

    /* Main wrapper for desktop grid-2 upper layout */
    .fwb-upper.fwb-desktop-grid-2 {
        display: grid;
        grid-template-columns: 3fr auto 8fr;
        column-gap: 2rem;
        margin-top: 1rem;
    }

    /* Left column wrapper - enables vertical centering */
    .fwb-upper.fwb-desktop-grid-2 .fwb-left-col {
        display: flex;
        align-items: center; /* Vertical centering */
    }

    /* Inner wrapper for left column posts */
    .fwb-upper.fwb-desktop-grid-2 .fwb-left-inner {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    /* Right-align text in left column */
    .fwb-upper.fwb-desktop-grid-2 .fwb-left-col .full-width-block-mf-content {
        text-align: right;
    }

    /* Horizontal divider between posts 2 and 3 */
    .fwb-upper.fwb-desktop-grid-2 .fwb-divider-h {
        height: 1px;
        width: 100%;
        background-color: var(--color-gray-300);
    }

    /* Vertical divider between columns */
    .fwb-upper.fwb-desktop-grid-2 .fwb-divider-v {
        width: 1px;
        background-color: var(--color-gray-300);
        align-self: stretch;
    }

    /* Right column wrapper - enables vertical centering */
    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col {
        display: flex;
        align-items: center;
    }

    /* Featured post wrapper - ensure full width */
    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .fwb-featured {
        width: 100%;
    }

    /* Right column - featured post */
    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .full-width-block-mf-link {
        display: flex;
        gap: 1rem;
        padding: 0;
        border-bottom: none;
        width: 100%;
    }

    /* Featured post image - 5/8 of right column */
    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .full-width-block-mf-image {
        flex: 0 0 calc(5 / 8 * 100%);
        aspect-ratio: 4/3;
    }

    /* Featured post content - 3/8 of right column */
    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .full-width-block-mf-content {
        flex: 0 0 calc(3 / 8 * 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Left column posts - hide images, keep text only */
    .fwb-upper.fwb-desktop-grid-2 .fwb-left-col .full-width-block-mf-link {
        padding: 0;
        border-bottom: none;
    }

    /* Featured post (right column) - heading-m, body-m, meta-m */
    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .full-width-block-mf-title {
        font-size: var(--heading-m);
    }

    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .full-width-block-mf-excerpt {
        font-size: var(--body-m);
    }

    .fwb-upper.fwb-desktop-grid-2 .fwb-right-col .full-width-block-mf-meta {
        font-size: var(--meta-m);
    }

    /* Left column posts - heading-s, body-m, meta-m */
    .fwb-upper.fwb-desktop-grid-2 .fwb-left-col .full-width-block-mf-title {
        font-size: var(--heading-s);
    }

    .fwb-upper.fwb-desktop-grid-2 .fwb-left-col .full-width-block-mf-excerpt {
        font-size: var(--body-m);
    }

    .fwb-upper.fwb-desktop-grid-2 .fwb-left-col .full-width-block-mf-meta {
        font-size: var(--meta-m);
    }

    /* Grid-2 title and excerpt - 3 line clamp for both featured and side posts */
    .fwb-upper.fwb-desktop-grid-2 .full-width-block-mf-title,
    .fwb-upper.fwb-desktop-grid-2 .full-width-block-mf-excerpt {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* ============================================================================
       NEW ARCHITECTURE - Desktop Grid-3 Layout (Phase 2)
       ============================================================================ */

    /* Main wrapper for desktop grid-3 upper layout */
    .fwb-upper.fwb-desktop-grid-3 {
        display: grid;
        grid-template-columns: 3fr auto 5fr auto 3fr;
        column-gap: 2rem;
        margin-top: 1rem;
    }

    /* Left column wrapper */
    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col {
        display: flex;
        flex-direction: column;
        grid-column: 1;
    }

    /* Left column items - Posts 2, 3, 4 */
    .fwb-upper.fwb-desktop-grid-3 .fwb-left-item-1 {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--color-gray-300);
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-item-2 {
        padding: 1.5rem 0;
        border-bottom: 1px solid var(--color-gray-300);
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-item-3 {
        padding-top: 1.5rem;
    }

    /* Left column layout - image on right, text on left */
    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-link {
        display: flex;
        flex-direction: row-reverse;
        gap: 1rem;
        padding: 0;
        border-bottom: none;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-image {
        flex: 0 0 40%;
        aspect-ratio: 3/4;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-image::before {
        display: none;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-content {
        flex: 1;
        text-align: right;
    }

    /* Vertical dividers between columns */
    .fwb-upper.fwb-desktop-grid-3 .fwb-divider-v-left {
        width: 1px;
        background-color: var(--color-gray-300);
        align-self: stretch;
        grid-column: 2;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-divider-v-right {
        width: 1px;
        background-color: var(--color-gray-300);
        align-self: stretch;
        grid-column: 4;
    }

    /* Center column - featured post */
    .fwb-upper.fwb-desktop-grid-3 .fwb-center-col {
        grid-column: 3;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-center-col .full-width-block-mf-link {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-center-col .full-width-block-mf-image {
        aspect-ratio: 4/3;
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Center column - heading-m, body-m, meta-s */
    .fwb-upper.fwb-desktop-grid-3 .fwb-center-col .full-width-block-mf-title {
        font-size: var(--heading-m);
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-center-col .full-width-block-mf-excerpt {
        font-size: var(--body-m);
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-center-col .full-width-block-mf-meta {
        font-size: var(--meta-s);
    }

    /* Right column wrapper */
    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col {
        display: flex;
        flex-direction: column;
        grid-column: 5;
    }

    /* Right column items - Posts 5, 6, 7 */
    .fwb-upper.fwb-desktop-grid-3 .fwb-right-item-1 {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--color-gray-300);
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-right-item-2 {
        padding: 1.5rem 0;
        border-bottom: 1px solid var(--color-gray-300);
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-right-item-3 {
        padding-top: 1.5rem;
    }

    /* Right column layout - image on left, text on right */
    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-link {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        padding: 0;
        border-bottom: none;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-image {
        flex: 0 0 40%;
        aspect-ratio: 3/4;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-image::before {
        display: none;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-content {
        flex: 1;
        text-align: left;
    }

    /* Side columns - heading-xs, body-s, meta-s */
    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-title,
    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-title {
        font-size: var(--heading-xs);
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-excerpt,
    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-excerpt {
        font-size: var(--body-s);
        line-height: var(--leading-body-tight);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .fwb-upper.fwb-desktop-grid-3 .fwb-left-col .full-width-block-mf-meta,
    .fwb-upper.fwb-desktop-grid-3 .fwb-right-col .full-width-block-mf-meta {
        font-size: var(--meta-s);
    }

    /* ============================================================================
       NEW ARCHITECTURE - Lower Layouts (Phase 3)
       ============================================================================ */

    /* Show lower layout container on desktop */
    .full-width-block-mf-lower-container {
        display: block;
    }

    /* Separator between upper and lower sections */
    .full-width-block-mf-separator {
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-gray-300);
        margin: 2rem 0;
    }

    /* ============================================================================
       Style 1 - Compact Grid
       3/4/6 posts in responsive grid, 5:4 images, title and reading time below
       ============================================================================ */

    .fwb-lower.fwb-lower-style-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-top: 1rem;
    }

    .fwb-lower.fwb-lower-style-1 .full-width-block-mf-link {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .fwb-lower.fwb-lower-style-1 .full-width-block-mf-image {
        aspect-ratio: 5/4;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Style 1 - heading-xs, meta-s (no excerpt) */
    .fwb-lower.fwb-lower-style-1 .full-width-block-mf-title {
        font-size: var(--heading-xs);
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-1 .full-width-block-mf-excerpt {
        display: none;
    }

    .fwb-lower.fwb-lower-style-1 .full-width-block-mf-meta {
        font-size: var(--meta-s);
    }

    /* ============================================================================
       Style 2 - Large Cards
       4 columns with vertical separators, 5:4 images, title, 2-line excerpt, reading time
       ============================================================================ */

    .fwb-lower.fwb-lower-style-2 {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        column-gap: 2rem;
        margin-top: 1rem;
    }

    /* Each column wrapper */
    .fwb-lower.fwb-lower-style-2 .fwb-lower-col {
        display: block;
    }

    /* Dividers fill the auto columns */
    .fwb-lower.fwb-lower-style-2 .fwb-lower-divider {
        width: 1px;
        background-color: var(--color-gray-300);
        align-self: stretch;
    }

    /* Post styling inside style-2 */
    .fwb-lower.fwb-lower-style-2 .full-width-block-mf-link {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .fwb-lower.fwb-lower-style-2 .full-width-block-mf-image {
        aspect-ratio: 5/4;
        width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Style 2 - heading-xs, body-s, meta-s */
    .fwb-lower.fwb-lower-style-2 .full-width-block-mf-title {
        font-size: var(--heading-xs);
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-2 .full-width-block-mf-excerpt {
        font-size: var(--body-s);
        line-height: var(--leading-body-tight);
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-2 .full-width-block-mf-meta {
        font-size: var(--meta-s);
    }

    /* ============================================================================
       Style 3 - Two Column
       2 or 4 posts, vertical divider between columns, 1:1 image left, content right
       ============================================================================ */

    .fwb-lower.fwb-lower-style-3 {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 2rem;
        margin-top: 1rem;
    }

    .fwb-lower.fwb-lower-style-3 .fwb-lower-col {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fwb-lower.fwb-lower-style-3 .fwb-lower-divider {
        width: 1px;
        background-color: var(--color-gray-300);
    }

    /* Horizontal separators between posts in each column */
    .fwb-lower.fwb-lower-style-3 .fwb-lower-item:not(:last-child) {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--color-gray-300);
    }

    .fwb-lower.fwb-lower-style-3 .fwb-lower-item:not(:first-child) {
        padding-top: 1.5rem;
    }

    .fwb-lower.fwb-lower-style-3 .full-width-block-mf-link {
        display: flex;
        gap: 1rem;
        padding: 0;
        border-bottom: none;
    }

    .fwb-lower.fwb-lower-style-3 .full-width-block-mf-image {
        flex: 0 0 120px;
        aspect-ratio: 1/1;
    }

    .fwb-lower.fwb-lower-style-3 .full-width-block-mf-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Style 3 - heading-xs, body-s, meta-s */
    .fwb-lower.fwb-lower-style-3 .full-width-block-mf-title {
        font-size: var(--heading-xs);
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-3 .full-width-block-mf-excerpt {
        font-size: var(--body-s);
        line-height: var(--leading-body-tight);
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-3 .full-width-block-mf-meta {
        font-size: var(--meta-s);
    }

    /* ============================================================================
       Style 4 - Featured + List
       Two columns: left has featured post (3:4 portrait), right has 3 posts (1:1 images)
       ============================================================================ */

    .fwb-lower.fwb-lower-style-4 {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 2rem;
        margin-top: 1rem;
        position: relative;
    }

    /* Vertical divider between columns */
    .fwb-lower.fwb-lower-style-4 .fwb-lower-divider {
        width: 1px;
        background-color: var(--color-gray-300);
        align-self: stretch;
    }

    /* Featured post on left */
    .fwb-lower.fwb-lower-style-4 .fwb-lower-featured .full-width-block-mf-link {
        display: flex;
        flex-direction: row-reverse;
        gap: 1.5rem;
        padding: 0;
        border-bottom: none;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-featured .full-width-block-mf-image {
        flex: 0 0 45%;
        aspect-ratio: 3/4;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-featured .full-width-block-mf-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: right;
    }

    /* Style 4 Featured - heading-s, body-m, meta-m */
    .fwb-lower.fwb-lower-style-4 .fwb-lower-featured .full-width-block-mf-title {
        font-size: var(--heading-s);
        margin-bottom: 0.75rem;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-featured .full-width-block-mf-excerpt {
        font-size: var(--body-m);
        -webkit-line-clamp: 3;
        line-clamp: 3;
        margin-bottom: 0.75rem;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-featured .full-width-block-mf-meta {
        font-size: var(--meta-m);
    }

    /* List posts on right */
    .fwb-lower.fwb-lower-style-4 .fwb-lower-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
    }

    /* Horizontal separators between list posts */
    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .fwb-lower-item:not(:last-child) {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--color-gray-300);
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .fwb-lower-item:not(:first-child) {
        padding-top: 1.5rem;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .full-width-block-mf-link {
        display: flex;
        gap: 1rem;
        padding: 0;
        border-bottom: none;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .full-width-block-mf-image {
        flex: 0 0 120px;
        aspect-ratio: 1/1;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .full-width-block-mf-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Style 4 List - heading-xs, body-s, meta-s */
    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .full-width-block-mf-title {
        font-size: var(--heading-xs);
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .full-width-block-mf-excerpt {
        font-size: var(--body-s);
        line-height: var(--leading-body-tight);
        margin-bottom: 0.5rem;
    }

    .fwb-lower.fwb-lower-style-4 .fwb-lower-list .full-width-block-mf-meta {
        font-size: var(--meta-s);
    }

}