/* =============================================================================
   Market Insights Shortcode – Stylesheet
   market-insights.css
   Place this file in your theme folder, e.g. /wp-content/themes/your-theme/css/
   Then enqueue it via wp_enqueue_style() — see 3-market-insights-shortcode.php
   ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.mi-wrap { font-family: inherit; }


/* ── Filter Tabs ─────────────────────────────────────────────────────────── */
.mi-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 20px;
    margin-bottom: 2.5rem;
    justify-content: center;
}
.mi-filters a {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid #29312d;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 400;
    color: #29312d;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.mi-filters a:hover,
.mi-filters a.is-active {
    background: #29312d;
    color: #fff;
    border-color: #29312d;
}


/* ── Featured Row ────────────────────────────────────────────────────────── */
.mi-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3rem;
    background: #2a312d;
    border-bottom-right-radius: 70px;
    overflow: hidden;
}
.mi-featured__thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    display: block;
}
.mi-featured__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.mi-featured__thumb:hover img { transform: scale(1.03); }

.mi-featured__body {
    padding: 2rem 2rem 2rem 0;
}
.mi-featured__meta {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: .75rem;
}
.mi-featured__tag {
	display:none;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7280;
    background: #e5e7eb;
    padding: .2rem .65rem;
    border-radius: 1rem;
}
.mi-featured__date {
    color: #ffffff;
}

.mi-featured__title a { color: #ffffff!important; text-decoration: none; }

.mi-featured__excerpt {
    color: #ffffff;
}


/* ── Read More Button ────────────────────────────────────────────────────── */
.mi-btn {
    display: inline-block;
    padding: .55rem 1.35rem;
    background: #111827;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    border-radius: .4rem;
    text-decoration: none;
    transition: background .2s;
}
.mi-btn:hover { background: #2563eb; color: #fff; }


/* ── 3-Column Grid ───────────────────────────────────────────────────────── */
.mi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 2.5rem;
}


/* ── Card ────────────────────────────────────────────────────────────────── */
.mi-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.mi-card__thumb {
    overflow: hidden;
    display: block;
}
.mi-card__thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .4s;
}
.mi-card:hover .mi-card__thumb img { transform: scale(1.04); }

.mi-card__body {
    padding: 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mi-card__meta {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-bottom: .5rem;
}
.mi-card__tag {
	display:none;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f3f4f6;
    padding: .15rem .55rem;
    border-radius: 1rem;
}

.mi-card__title a { color: #000000!important; text-decoration: none; }

.mi-card__excerpt {
    font-size: .85rem;
    color: #6b7280;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}
.mi-card__btn {
    font-size: .8rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    align-self: flex-start;
}
.mi-card__btn:hover { text-decoration: underline; }


/* ── No-thumbnail Placeholder ────────────────────────────────────────────── */
.mi-no-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 2rem;
}


/* ── Pagination ──────────────────────────────────────────────────────────── */
.mi-pagination {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}
.mi-pagination a,
.mi-pagination span {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    width: 24px;
    height: 24px;
    border: 1px solid #000000;
    border-radius: 100%;
    font-size: .85rem;
    font-weight: 400;
    color: #000000!important;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.mi-pagination a:hover {     background: #d3a097;
    border-color: #d3a097;}
.mi-pagination .current {     background: #d3a097;
    border-color: #d3a097;}


/* ── No Results ──────────────────────────────────────────────────────────── */
.mi-no-results { padding: 2rem 0; color: #6b7280; }


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mi-featured { grid-template-columns: 1fr; }
    .mi-featured__body { padding: 0 1.5rem 1.5rem; }
    .mi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .mi-grid { grid-template-columns: 1fr; }
}