/* ==========================================================================
   FEATURED GRID HOMEPAGE LAYOUT
   Opt-in via the "Featured grid homepage layout" Tiempos setting.
   Lead story full-width on top, next three as image-top cards below.
   ========================================================================== */

.view-id-frontpage.view-display-id-page_1.columns {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: var(--gap);
}

/* Force visual order: lead (view-content) first, secondaries (attachment-before) below. */
.view-id-frontpage.view-display-id-page_1.columns > .view-content {
    order: 1;
    flex: none;
    padding: 0;
    display: block;
}

.view-id-frontpage.view-display-id-page_1.columns > .attachment.attachment-before {
    order: 2;
    flex: none;
    padding: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   LEAD STORY: text left, image right, ~50/50
   -------------------------------------------------------------------------- */

.view-id-frontpage.view-display-id-page_1.columns
    > .view-content .node--view-mode-featured .node__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--gap);
    align-items: start;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .view-content .node--view-mode-featured .image-container {
    order: 2;
    margin: 0;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .view-content .node--view-mode-featured .content-container {
    order: 1;
    padding-top: 0;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .view-content .node--view-mode-featured .image-container img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   SECONDARY ROW: 3 image-top cards
   The unformatted views wrapper (<div>) is the grid container.
   -------------------------------------------------------------------------- */

.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-display-id-attachment_1 .view-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--gap);
    align-items: stretch;
}

/* Equal-height cards: propagate the row's stretched height down through the
   row wrapper, the article, and node__content so all three card bottoms align. */
.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-display-id-attachment_1 .view-content > div,
.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-content .node--view-mode-teaser {
    height: 100%;
    margin-bottom: 0;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-content .node--view-mode-teaser .node__content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-content .node--view-mode-teaser .image-container {
    order: 1;
    margin: 0 0 0.75rem;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-content .node--view-mode-teaser .content-container {
    order: 2;
    padding: 0;
}

.view-id-frontpage.view-display-id-page_1.columns
    > .attachment.attachment-before .view-content .node--view-mode-teaser .image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

/* Lead stacks (image below text) below 768px. */
@media screen and (max-width: 768px) {
    .view-id-frontpage.view-display-id-page_1.columns
        > .view-content .node--view-mode-featured .node__content {
        grid-template-columns: 1fr;
    }

    .view-id-frontpage.view-display-id-page_1.columns
        > .view-content .node--view-mode-featured .image-container {
        order: 1;
        margin-bottom: 0.75rem;
    }

    .view-id-frontpage.view-display-id-page_1.columns
        > .view-content .node--view-mode-featured .content-container {
        order: 2;
    }
}

/* Secondary collapses to single column below 640px. */
@media screen and (max-width: 640px) {
    .view-id-frontpage.view-display-id-page_1.columns
        > .attachment.attachment-before .view-display-id-attachment_1 .view-content {
        grid-template-columns: 1fr;
        grid-row-gap: var(--gap);
    }
}