/* Mexperience Card System — shared component
 * The reusable ".mex-card" used across search, tag/category archives and
 * (later) sidebars & the homepage grid. Context-specific chrome (search
 * filter bar, results header, pagination) lives in its own stylesheet.
 *
 * Rendered by template-parts/mex-card.php. Context flags: show_tags, show_date.
 *
 * Palette tokens (defined here, the shared base):
 *   --mex-red   #ce1126   brand accent: title hover, chip hover, active states
 *   --mex-gold  #E88B00   buttons only
 *   --mex-stone #FAF9F7   off-white panels / chips
 *   --mex-grey  #6f6f6f   secondary text
 *   --mex-ink   #191919   headings / body text
 *
 * Type system (locked): titles = Open Sans; excerpts = Libre Baskerville.
 */

:root {
    --mex-red: #ce1126;
    --mex-red-dark: #a50e1f;
    --mex-red-light: #e5384d;
    --mex-gold: #E88B00;
    --mex-gold-dark: #C77400;
    --mex-stone: #FAF9F7;
    --mex-grey: #6f6f6f;
    --mex-ink: #191919;
    --mex-border: #e7e3df;
}

/* ── Grid ── */
.mex-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* ── Card ── */
.mex-card {
    background: #fff;
    border: 1px solid var(--mex-border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
}

.mex-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.mex-card .card-thumbnail {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0eeec;
}

/* Optional per-post ribbon (meta _image_ribbon + _image_ribbon_text) —
   an elegant brand-red tab flush to the top-left of the thumbnail. */
.mex-card .card-ribbon {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 2;
    max-width: 92%;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.3;
    color: var(--mex-stone); /* warm off-white, softer than pure white */
    background: rgba(206, 17, 38, 0.68); /* more translucent brand red */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 5px 12px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mex-card .card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mex-card .card-thumbnail.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f4f1ee 0%, #e7e1da 100%);
    min-height: 140px;
}

.mex-card .card-thumbnail.no-image::after {
    content: "";
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8ada2' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 16l5-5 3 3 5-5 5 5'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: 0.7;
}

.mex-card .card-body {
    padding: 16px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Date — shown only when the show_date flag is set. */
.mex-card .card-date {
    display: block;
    text-align: right;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    color: var(--mex-grey);
    margin-bottom: 6px;
}

/* Title — Open Sans. Hover reddens (also when hovering anywhere on the card).
   .mex-card:hover .card-title a is (0,3,1) and beats the theme's h2 a:hover
   (#777, specificity 0,1,2), so no !important is needed. */
.mex-card .card-title {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
    padding: 0;
}

.mex-card .card-title a {
    color: var(--mex-ink);
    text-decoration: none;
    transition: color 0.15s;
    border: 0;
}

/* !important beats the theme's global "h1..h6 a:hover { color:#777 }". */
.mex-card .card-title a:hover,
.mex-card:hover .card-title a {
    color: var(--mex-red) !important;
}

/* Excerpt — Libre Baskerville, clamped to 3 lines. */
.mex-card .card-excerpt {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mex-grey);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tag chips — shown only when the show_tags flag is set (below the excerpt). */
.mex-card .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f2efec;
}

.mex-card .card-tag {
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: var(--mex-grey);
    background: var(--mex-stone);
    border: 1px solid var(--mex-border);
    padding: 2px 9px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mex-card .card-tag:hover {
    background: var(--mex-red);
    color: #fff;
    border-color: var(--mex-red);
    text-decoration: none;
}

/* ── Pagination (shared listing pager: search, tag, blog) ── */
.mex-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 40px 0;
    font-family: 'Open Sans', Arial, sans-serif;
}

.mex-pagination a,
.mex-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d1cfcb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mex-ink);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mex-pagination a:hover {
    background: var(--mex-stone);
    border-color: var(--mex-grey);
    color: var(--mex-ink);
}

.mex-pagination .current {
    background: var(--mex-red);
    border-color: var(--mex-red);
    color: #fff;
    font-weight: 700;
}

.mex-pagination .dots {
    border: none;
    color: var(--mex-grey);
}

/* Prev / Next carry a little more label; keep them comfortable to tap. */
.mex-pagination .prev,
.mex-pagination .next {
    font-weight: 600;
}

/* ── Responsive ── */
@media screen and (max-width: 960px) {
    .mex-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 600px) {
    .mex-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mex-card .card-title {
        font-size: 20px;
    }

    /* Single column on phones: no row to align, so show the full excerpt
       (avoids the mid-word line-clamp cut). Desktop/tablet keep the 3-line clamp. */
    .mex-card .card-excerpt {
        font-size: 16px;
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .mex-pagination a,
    .mex-pagination span {
        min-width: 38px;
        height: 38px;
        padding: 0 8px;
        font-size: 13px;
    }
}