/* Mexperience Blog / Posts Index (Discover Mexico) — page chrome
 * Full-width card layout, mirrors the tag archive. Shared pieces:
 *   card grid + cards + pagination -> mex-cards.css
 *   search/filter bar              -> mex-searchbar.css
 * Title + deck keep their existing theme fonts (not restyled here).
 */

/* ── Layout — full width, centred, no sidebar ── */
.blog #main-wrap .mex-home#primary {
    width: 100%;
    max-width: 1200px;
    float: none;
    margin: 0 auto;
    padding: 8px 0 40px;
}

.mex-home,
.mex-home * {
    box-sizing: border-box;
}

/* ── Rounded, elegant hero image ── */
.mex-home .mex-tag-hero {
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 12px;
    background: #f0eeec;
    line-height: 0;
}

.mex-home .mex-tag-hero img {
    width: 100%;
    height: 205px;
    object-fit: cover;
    display: block;
}

/* ── Header (fonts inherited from theme; spacing only) ──
   Editorial pattern: hero + grid stay full width, but the title + deck
   are capped to a comfortable measure and left-aligned with the grid. */
.mex-home .mex-tag-header {
    max-width: 620px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.mex-home#primary .mex-tag-header .entry-title,
.mex-home .mex-tag-header .entry-title {
    margin: 0 0 5px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2;
    border: 0;
    /* Match the Tag page title (theme's canonical entry-title font). */
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: normal;
}

.mex-home .mex-tag-header .page-summary {
    margin: 0;
}

/* ── Empty state ── */
.mex-home .mex-search-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--mex-stone);
    border-radius: 8px;
    border: 1px solid var(--mex-border);
}

.mex-home .mex-search-no-results h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 22px;
    color: var(--mex-ink);
    margin: 0 0 12px;
}

.mex-home .mex-search-no-results p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    color: var(--mex-grey);
    margin: 0;
}

/* ── Responsive ── */

/* Tablet / iPad: the theme insets #main-wrap by 35px each side at >=601px,
   which wastes width here. Reclaim it so the grid fills the viewport. */
@media screen and (min-width: 601px) and (max-width: 960px) {
    .blog #main-wrap {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media screen and (max-width: 960px) {
    .blog #main-wrap .mex-home#primary {
        padding-left: 0;
        padding-right: 0;
    }

    .mex-home .mex-tag-hero img {
        height: 185px;
    }
}

@media screen and (max-width: 600px) {
    .mex-home .mex-tag-hero {
        border-radius: 10px;
        margin-bottom: 4px;
    }

    .mex-home .mex-tag-hero img {
        height: 116px;
    }
}