/* ================================================================
   MG News Feed — mg-news-feed.css
   All selectors scoped to .mgnf-wrap to avoid theme conflicts.
   Uses explicit px values + !important where Elementor overrides.
   v1.1 — full-width layout, masthead removed (site header used),
           4-col secondary grid, edge-to-edge ticker.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Source+Sans+3:wght@400;500;600&display=swap');

/* ── Variables + outer wrapper ── */
.mgnf-wrap {
    --mgnf-teal:     #0f7a57;
    --mgnf-teal-dk:  #0a5c40;
    --mgnf-teal-lt:  #e0f4ed;
    --mgnf-orange:   #d95f1a;
    --mgnf-orange-lt:#fdf0e8;
    --mgnf-blue:     #1a5fa8;
    --mgnf-blue-lt:  #e6f0fb;
    --mgnf-red:      #c0392b;
    --mgnf-red-lt:   #fcecea;
    --mgnf-ink:      #1a1a18;
    --mgnf-ink-2:    #3d3d3a;
    --mgnf-ink-3:    #6b6b67;
    --mgnf-ink-4:    #9a9a96;
    --mgnf-rule:     #e2e0d8;
    --mgnf-bg:       #fafaf8;
    --mgnf-surface:  #f2f0ea;
    --mgnf-radius:   6px;
    --mgnf-font-head:'Playfair Display', Georgia, serif;
    --mgnf-font-body:'Source Sans 3', sans-serif;
    --mgnf-shadow:   0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
    --mgnf-shadow-h: 0 4px 20px rgba(0,0,0,0.14);

    /* Full width — no max-width, no centering margin */
    position: relative !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--mgnf-ink) !important;
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.mgnf-wrap *, .mgnf-wrap *::before, .mgnf-wrap *::after {
    box-sizing: border-box !important;
}

/* Inner content container — constrains tabs, grid, feed to a
   readable max-width and provides side gutters.
   Ticker intentionally sits OUTSIDE this to go edge-to-edge. */
.mgnf-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 40px 4px !important;
    box-sizing: border-box !important;
}

/* ── Masthead — hidden. Site header handles branding. ── */
.mgnf-masthead { display: none !important; }

/* ── Toast ── */
.mgnf-toast {
    position: absolute !important;
    top: -52px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--mgnf-teal) !important;
    color: #fff !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 8px 18px !important;
    border-radius: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: top 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
    box-shadow: 0 4px 18px rgba(15,122,87,0.35) !important;
    z-index: 100 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
.mgnf-toast.mgnf-toast--visible {
    top: 12px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}
.mgnf-toast-dot {
    width: 7px !important;
    height: 7px !important;
    background: #fff !important;
    border-radius: 50% !important;
    animation: mgnf-pulse 1.4s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}
.mgnf-toast-btn {
    background: rgba(255,255,255,0.22) !important;
    border: none !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
.mgnf-toast-btn:hover { background: rgba(255,255,255,0.35) !important; }

@keyframes mgnf-pulse {
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.5; transform:scale(1.35); }
}

/* ── Tabs row — lives inside .mgnf-inner, includes live badge ── */
.mgnf-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    border-bottom: 2px solid var(--mgnf-rule) !important;
    padding-bottom: 10px !important;
}
.mgnf-tab {
    font-family: var(--mgnf-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 5px 14px !important;
    border-radius: 3px !important;
    border: 1.5px solid var(--mgnf-rule) !important;
    background: transparent !important;
    color: var(--mgnf-ink-3) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
.mgnf-tab:hover:not(.mgnf-tab--active) {
    border-color: var(--mgnf-ink-2) !important;
    color: var(--mgnf-ink) !important;
}
.mgnf-tab--active {
    background: var(--mgnf-ink) !important;
    color: #fff !important;
    border-color: var(--mgnf-ink) !important;
}

/* Live badge sits at the right end of the tabs row */
.mgnf-live-badge {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--mgnf-red) !important;
    margin-left: auto !important;
}
.mgnf-live-dot {
    width: 7px !important; height: 7px !important;
    background: var(--mgnf-red) !important;
    border-radius: 50% !important;
    animation: mgnf-pulse 1.6s ease-in-out infinite !important;
    display: inline-block !important;
}

/* ── Pills ── */
.mgnf-pills {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    margin-bottom: 7px !important;
}
.mgnf-pill {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    line-height: 1 !important;
}
.mgnf-pill--local    { background: var(--mgnf-teal) !important;   color: #fff !important; }
.mgnf-pill--florida  { background: var(--mgnf-blue) !important;   color: #fff !important; }
.mgnf-pill--national { background: var(--mgnf-ink-2) !important;  color: #fff !important; }
.mgnf-pill--breaking {
    background: var(--mgnf-red) !important;
    color: #fff !important;
    animation: mgnf-blink-pill 1.3s step-end infinite !important;
}
@keyframes mgnf-blink-pill {
    50% { background: #8b1a1a !important; }
}

/* ── Hero — full width of .mgnf-inner ── */
.mgnf-hero {
    position: relative !important;
    border-radius: var(--mgnf-radius) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    display: block !important;
}
.mgnf-hero-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}
.mgnf-hero-img-wrap {
    position: relative !important;
    height: 420px !important;
    overflow: hidden !important;
}
.mgnf-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.55s ease, opacity 0.3s ease !important;
    opacity: 0.75 !important;
}
.mgnf-hero-link:hover .mgnf-hero-img {
    transform: scale(1.04) !important;
    opacity: 0.6 !important;
}
.mgnf-hero-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mgnf-placeholder--local    { background: linear-gradient(145deg, #0a5c40 0%, #1a9e6e 100%) !important; }
.mgnf-placeholder--florida  { background: linear-gradient(145deg, #103d6b 0%, #1a5fa8 100%) !important; }
.mgnf-placeholder--national { background: linear-gradient(145deg, #2c2c2a 0%, #5a5a56 100%) !important; }
.mgnf-placeholder-label {
    font-family: var(--mgnf-font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.25) !important;
}
.mgnf-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%) !important;
    pointer-events: none !important;
}
.mgnf-hero-body {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 28px 36px 26px !important;
}
.mgnf-hero-headline {
    font-family: var(--mgnf-font-head) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    color: #fff !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.5px !important;
    max-width: 820px !important;
}
.mgnf-hero-excerpt {
    font-family: var(--mgnf-font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.78) !important;
    margin: 0 0 12px !important;
    line-height: 1.55 !important;
    max-width: 680px !important;
}
.mgnf-hero-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.55) !important;
    flex-wrap: wrap !important;
}
.mgnf-meta-read {
    margin-left: auto !important;
    color: rgba(255,255,255,0.7) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
    transition: color 0.15s !important;
}
.mgnf-hero-link:hover .mgnf-meta-read { color: #fff !important; }

/* ── Secondary grid — 4 columns ── */
.mgnf-secondary-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

/* ── Cards ── */
.mgnf-card {
    background: #fff !important;
    border-radius: var(--mgnf-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--mgnf-rule) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
}
.mgnf-card:hover {
    box-shadow: var(--mgnf-shadow-h) !important;
    transform: translateY(-3px) !important;
}
.mgnf-card-link {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    flex: 1 !important;
}
.mgnf-card-img-wrap {
    overflow: hidden !important;
    height: 148px !important;
    flex-shrink: 0 !important;
}
.mgnf-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s ease !important;
}
.mgnf-card-link:hover .mgnf-card-img { transform: scale(1.05) !important; }
.mgnf-card-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mgnf-card-body {
    padding: 12px 14px 14px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.mgnf-card-headline {
    font-family: var(--mgnf-font-head) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--mgnf-ink) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.1px !important;
    flex: 1 !important;
}
.mgnf-card-link:hover .mgnf-card-headline { color: var(--mgnf-teal) !important; }
.mgnf-card-meta {
    font-family: var(--mgnf-font-body) !important;
    font-size: 11px !important;
    color: var(--mgnf-ink-4) !important;
    margin-top: auto !important;
}

/* ── Skeleton loader ── */
.mgnf-skeleton-pulse {
    background: linear-gradient(90deg, var(--mgnf-surface) 25%, var(--mgnf-rule) 50%, var(--mgnf-surface) 75%) !important;
    background-size: 200% 100% !important;
    animation: mgnf-shimmer 1.6s ease-in-out infinite !important;
    border-radius: var(--mgnf-radius) !important;
}
@keyframes mgnf-shimmer {
    0%  { background-position: 200% 0; }
    100%{ background-position: -200% 0; }
}
.mgnf-skeleton-hero { height: 420px !important; margin-bottom: 12px !important; display: block !important; }
.mgnf-skeleton-card { height: 240px !important; }

/* ── Load more ── */
.mgnf-load-more-wrap {
    text-align: center !important;
    padding: 8px 0 6px !important;
}
.mgnf-load-more {
    font-family: var(--mgnf-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--mgnf-teal) !important;
    background: transparent !important;
    border: 1.5px solid var(--mgnf-teal) !important;
    padding: 8px 28px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.mgnf-load-more:hover {
    background: var(--mgnf-teal) !important;
    color: #fff !important;
}
.mgnf-load-more--loading .mgnf-load-more-text { opacity: 0.5 !important; }
.mgnf-load-more-spinner {
    width: 14px !important; height: 14px !important;
    border: 2px solid currentColor !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    display: none !important;
}
.mgnf-load-more--loading .mgnf-load-more-spinner {
    display: block !important;
    animation: mgnf-spin 0.7s linear infinite !important;
}
@keyframes mgnf-spin { to { transform: rotate(360deg); } }

/* ── Ad slot — inside .mgnf-inner ── */
.mgnf-ad-slot {
    margin: 10px 0 14px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--mgnf-radius) !important;
    overflow: hidden !important;
}
.mgnf-ad-placeholder {
    width: 100% !important;
    height: 60px !important;
    background: var(--mgnf-surface) !important;
    border: 1px dashed var(--mgnf-rule) !important;
    border-radius: var(--mgnf-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--mgnf-ink-4) !important;
}

/* ── Ticker — edge to edge, no max-width, no side padding ── */
.mgnf-ticker-wrap {
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    height: 38px !important;
    width: 100% !important;
    /* Negative margins cancel the inner wrapper's padding so ticker bleeds full width */
    border-top: 1.5px solid var(--mgnf-rule) !important;
    border-bottom: 1px solid var(--mgnf-rule) !important;
    background: #fff !important;
}
.mgnf-ticker-label {
    flex-shrink: 0 !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: var(--mgnf-teal) !important;
    color: #fff !important;
    padding: 0 18px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
.mgnf-ticker-overflow {
    overflow: hidden !important;
    flex: 1 !important;
    height: 100% !important;
}
.mgnf-ticker-track {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    animation: mgnf-ticker 36s linear infinite !important;
    white-space: nowrap !important;
    width: max-content !important;
}
.mgnf-ticker-track:hover { animation-play-state: paused !important; }
@keyframes mgnf-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.mgnf-ticker-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 18px !important;
    font-family: var(--mgnf-font-body) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--mgnf-ink-2) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
    height: 100% !important;
}
.mgnf-ticker-item:hover { color: var(--mgnf-teal) !important; }
.mgnf-ticker-pill {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    padding: 2px 5px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}
.mgnf-ticker-pill--local    { background: var(--mgnf-teal) !important;   color: #fff !important; }
.mgnf-ticker-pill--florida  { background: var(--mgnf-blue) !important;   color: #fff !important; }
.mgnf-ticker-pill--national { background: var(--mgnf-ink-2) !important;  color: #fff !important; }
.mgnf-ticker-sep {
    color: var(--mgnf-rule) !important;
    font-size: 8px !important;
    flex-shrink: 0 !important;
}
.mgnf-ticker-headline { white-space: nowrap !important; }

/* ── Empty state ── */
.mgnf-empty {
    text-align: center !important;
    padding: 56px 24px !important;
}
.mgnf-empty-icon {
    font-size: 36px !important;
    margin-bottom: 12px !important;
    display: block !important;
}
.mgnf-empty-title {
    font-family: var(--mgnf-font-head) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--mgnf-ink) !important;
    margin: 0 0 8px !important;
}
.mgnf-empty-text {
    font-family: var(--mgnf-font-body) !important;
    font-size: 14px !important;
    color: var(--mgnf-ink-3) !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* ── Category filter fade ── */
.mgnf-hero.mgnf-filtered-out,
.mgnf-card.mgnf-filtered-out {
    opacity: 0.2 !important;
    pointer-events: none !important;
    transform: none !important;
}
.mgnf-hero,
.mgnf-card {
    transition: opacity 0.25s, transform 0.2s, box-shadow 0.2s !important;
}

/* ── Staggered entrance animation ── */
.mgnf-hero,
.mgnf-card,
.mgnf-ticker-wrap {
    animation: mgnf-fadein 0.45s ease both !important;
}
.mgnf-card:nth-child(1) { animation-delay: 0.05s !important; }
.mgnf-card:nth-child(2) { animation-delay: 0.10s !important; }
.mgnf-card:nth-child(3) { animation-delay: 0.15s !important; }
.mgnf-card:nth-child(4) { animation-delay: 0.20s !important; }
.mgnf-card:nth-child(5) { animation-delay: 0.25s !important; }
.mgnf-ticker-wrap       { animation-delay: 0.30s !important; }

@keyframes mgnf-fadein {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mgnf-hero, .mgnf-card, .mgnf-ticker-wrap { animation: none !important; }
    .mgnf-ticker-track { animation: none !important; }
    .mgnf-live-dot, .mgnf-toast-dot { animation: none !important; }
    .mgnf-pill--breaking { animation: none !important; }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .mgnf-secondary-row { grid-template-columns: repeat(3, 1fr) !important; }
    .mgnf-inner { padding: 0 28px 4px !important; }
}
@media (max-width: 800px) {
    .mgnf-secondary-row { grid-template-columns: repeat(2, 1fr) !important; }
    .mgnf-hero-img-wrap { height: 300px !important; }
    .mgnf-hero-headline { font-size: 26px !important; }
    .mgnf-hero-body     { padding: 20px 22px 18px !important; }
    .mgnf-inner { padding: 0 20px 4px !important; }
}
@media (max-width: 560px) {
    .mgnf-secondary-row { grid-template-columns: 1fr !important; }
    .mgnf-hero-img-wrap { height: 240px !important; }
    .mgnf-hero-headline { font-size: 21px !important; }
    .mgnf-hero-excerpt  { display: none !important; }
    .mgnf-inner { padding: 0 16px 4px !important; }
    .mgnf-tab   { padding: 4px 10px !important; font-size: 10px !important; }
}