/**
 * Destinations Archive — archive-locations.css
 * Page-specific overrides for the destinations archive template.
 */

/* Featured Journeys — mobile stacked card spacing */
@media (max-width: 781px) {

    /* Gap between stacked two-column cards */
    .field-notes-section .wp-block-columns + .wp-block-columns .wp-block-column + .wp-block-column {
        margin-top: var(--wp--preset--spacing--4-x);
    }

    /* Reduce hero content padding on mobile */
    .field-notes-section .wp-block-columns > .wp-block-column:last-child {
        padding: var(--wp--preset--spacing--2-x) 0 0 0 !important;
    }

    /* Filters — wrap into columns, hide dot separators */
    .destination-filters {
        flex-wrap: wrap !important;
        gap: 12px 24px !important;
        justify-content: center;
    }

    .destination-filters > span[style*="heritage-gold"] {
        display: none;
    }
}

/* Destination card titles: ONE line with ellipsis, without forcing the grid wider (B).
   .archive-card min-width:0 lets the grid track shrink below the title's natural
   width, so nowrap + overflow:hidden clips instead of pushing the card past the
   viewport (fixes the "destinations bleed off screen" report). nowrap/ellipsis is
   used rather than -webkit-line-clamp because the post-title computes display:flow-root,
   which would neutralise the line-clamp. */
.archive-card {
    min-width: 0;
}
.archive-card__title {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.archive-card__title a {
    color: inherit;
    text-decoration: none;
}
/* Card image links to the details page. */
.archive-card .wp-block-post-featured-image a {
    display: block;
}

/* Card images never exceed their column. Responsive column COUNT is handled
   natively by the post-template block's `minimumColumnWidth` grid layout — no
   CSS column overrides here (a plain `1fr` re-introduces a min-content floor
   that balloons under the nowrap card titles and bleeds off narrow screens). */
.archive-card img {
    max-width: 100%;
    height: auto;
}