/* M360 UI Components Foundation - v0.4.2.0
 * Strict scope: only elements with .m360-ui.
 * Never target theme, Elementor, Home Editorial, Bolao, or Semantic Relations selectors.
 */

:root {
    --m360-ui-red: #d71920;
    --m360-ui-red-dark: #b81218;
    --m360-ui-text: #202124;
    --m360-ui-muted: #6b7280;
    --m360-ui-border: rgba(0,0,0,.08);
    --m360-ui-soft: #f6f7f9;
    --m360-ui-radius: 16px;
    --m360-ui-shadow: 0 10px 26px rgba(0,0,0,.07);
}

.m360-ui,
.m360-ui * { box-sizing: border-box; }

.m360-ui-container {
    width: min(1200px, calc(100% - 64px));
    margin-left: auto;
    margin-right: auto;
}

.m360-ui-container--narrow { width: min(920px, calc(100% - 64px)); }
.m360-ui-container--wide { width: min(1360px, calc(100% - 64px)); }
.m360-ui-container--fluid { width: 100%; }

.m360-ui-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid rgba(215,25,32,.22);
    border-radius: 999px;
    background: #fff;
    color: var(--m360-ui-red) !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.m360-ui-chip:hover,
.m360-ui-chip.is-active {
    background: var(--m360-ui-red);
    border-color: var(--m360-ui-red);
    color: #fff !important;
    transform: translateY(-1px);
}

.m360-ui-chip--soft {
    background: #fff8f8;
    border-color: #f2bcbc;
    color: var(--m360-ui-text) !important;
}

.m360-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid #ececec;
    border-radius: 999px;
    background: #f6f6f6;
    color: var(--m360-ui-text);
    font-weight: 600;
    line-height: 1;
}

.m360-ui-badge strong { color: var(--m360-ui-text); }
.m360-ui-badge--red { background: var(--m360-ui-red); border-color: var(--m360-ui-red); color: #fff; }
.m360-ui-badge--red strong { color: #fff; }

.m360-ui-card {
    overflow: hidden;
    border: 1px solid var(--m360-ui-border);
    border-radius: var(--m360-ui-radius);
    background: #fff;
    box-shadow: var(--m360-ui-shadow);
}

.m360-ui-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eceff3;
}

.m360-ui-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m360-ui-card__body { padding: 18px; }

.m360-ui-card__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--m360-ui-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.m360-ui-card__title {
    margin: 0 0 8px;
    color: var(--m360-ui-text);
    font-size: 21px;
    line-height: 1.18;
}

.m360-ui-card__title a {
    color: var(--m360-ui-text) !important;
    text-decoration: none !important;
}

.m360-ui-card__title a:hover { color: var(--m360-ui-red) !important; }
.m360-ui-card__content { color: #374151; }

.m360-ui-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0 18px;
    color: var(--m360-ui-text);
    font-size: 14px;
}

.m360-ui-breadcrumb a {
    color: var(--m360-ui-red) !important;
    font-weight: 800;
    text-decoration: none !important;
}

.m360-ui-breadcrumb a:hover { color: var(--m360-ui-red-dark) !important; }
.m360-ui-breadcrumb__separator { color: var(--m360-ui-red); opacity: .45; font-weight: 900; }
.m360-ui-breadcrumb__current { background: #fff8f8; border: 1px solid #f2bcbc; border-radius: 14px; color: #222; font-weight: 600; padding: 4px 12px; }

@media (max-width: 900px) {
    .m360-ui-container,
    .m360-ui-container--narrow,
    .m360-ui-container--wide { width: min(100% - 32px, 1200px); }
}

@media (max-width: 640px) {
    .m360-ui-container,
    .m360-ui-container--narrow,
    .m360-ui-container--wide { width: calc(100% - 36px); }
    .m360-ui-card__body { padding: 16px; }
    .m360-ui-card__title { font-size: 19px; }
}