/* Mexperience Tag Archive — page chrome (preview)
 * Full-width card layout that links into Search. Shared pieces:
 *   card grid + cards + pagination -> mex-cards.css
 *   search/filter bar              -> mex-searchbar.css
 * Tag title + description keep their existing theme fonts (not restyled here).
 */

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

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

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

.mex-tag .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 + description
   are capped to a comfortable measure and left-aligned with the grid. */
.mex-tag .mex-tag-header {
    max-width: 620px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

/* Own the title box at every breakpoint. #primary id beats the theme's
   body.tag padding-top:16px (desktop) and the !important beats the mobile-only
   padding-bottom:10px !important; line-height matches desktop (theme uses 1.35
   on phones) so the header gaps stay in the same proportion as iPad. */
.mex-tag#primary .mex-tag-header .entry-title,
.mex-tag .mex-tag-header .entry-title {
    margin: 0 0 5px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2;
    border: 0;
}

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

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

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

.mex-tag .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) {
    .tag #main-wrap {
        padding-left: 18px;
        padding-right: 18px;
    }
}

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

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

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

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