/* Small additions on top of style.css (homepage badges, listing title, pager). */
.card-noimage { display: block; height: 190px; background: linear-gradient(135deg, #0F172A, #2563EB); }
.card-badges { position: absolute; right: 12px; top: 12px; z-index: 21; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; pointer-events: none; }
.card-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.card-badge--lead { background: #e50914; }
.card-badge--video { background: #b91c1c; }
.card-badge--audio { background: #b45309; }
.card-badge--pdf { background: #6d28d9; }
.card--lead { outline: 3px solid #e50914; outline-offset: -3px; }
.listing-title { margin: 0 0 18px; font-size: 26px; color: #0F172A; border-left: 5px solid #2563EB; padding-left: 12px; }
.site-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-pager a, .site-pager span { padding: 8px 16px; border-radius: 50px; background: #fff; border: 1px solid #E2E8F0; color: #0F172A; text-decoration: none; font-weight: 600; font-size: 14px; }
.site-pager a:hover { background: #EFF6FF; color: #2563EB; }
.site-pager .is-disabled { color: #94A3B8; }
.img-broken { display: none !important; }

/* October layout refinement */
.card-grid .card { position:relative; display:flex; flex-direction:column; }
.card-grid .card > .card-media > a:first-child img { height:280px; width:100%; object-fit:cover; }
.card-grid .card h3 { margin:10px 14px 6px; font-size:18px; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.card-grid .card .btn { align-self:flex-start; margin:6px 14px 12px; padding:8px 16px; }
.footer-social-wrap { max-width:1200px; margin:24px auto 0; padding:12px 18px 24px; }
.footer-social-wrap .follow-title { margin-bottom:12px; }
.sidebar-media { margin-top:24px; }
.sidebar-media h3 { margin:18px 0 10px; }
.sidebar-media-item { display:flex; gap:10px; align-items:center; padding:9px 4px; text-decoration:none; border-bottom:1px solid #e5e7eb; color:#0f172a; font-weight:600; font-size:14px; }
.sidebar-media-item img { height:62px; width:96px; object-fit:cover; border-radius:8px; flex-shrink:0; }
@media(max-width:700px) {.card-grid .card > .card-media > a:first-child img { height:255px; } .footer-social-wrap { padding:14px; }}

/* Homepage: equal-height desktop columns, independently scrollable content. */
@media (min-width: 993px) {
  .main-container { align-items: stretch; }
  .main-container > .left-column,
  .main-container > .right-column {
    flex: 1 1 0;
    height: clamp(650px, 76vh, 920px);
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
  }
  .main-container > .left-column { flex-grow: 7; }
  .main-container > .right-column { flex-grow: 3; }
}
/* Visible 15-word excerpt, escaped in Blade. */
.card-grid .card .card-summary {
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 14px 7px;
  overflow-wrap: anywhere;
}
/* Consistent hover and keyboard focus borders for every story. */
.card-grid .card { border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-grid .card.card--lead { outline: none; }
.card-grid .card:hover,
.card-grid .card:focus-within { border-color: #2563eb; }
/* One audio post and one video post, side by side. */
.watch-listen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.watch-listen-column { min-width: 0; }
.watch-listen-column h4 { margin: 0 0 8px; font-size: 13px; color: #475569; }
.watch-listen-grid .sidebar-media-item { flex-direction: column; align-items: stretch; padding: 0 0 10px; overflow-wrap: anywhere; }
.watch-listen-grid .sidebar-media-item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.watch-listen-grid .media-empty { font-size: 13px; color: #64748b; overflow-wrap: anywhere; }
/* Compact footer: native SVG brand icons directly on footer background. */
.footer .footer-social { display: flex; flex-direction: column; align-items: center; gap: 9px; background: transparent; }
.footer .follow-title { font-weight: 700; font-size: 14px; color: #f8fafc; }
.footer .footer-social-icons { display: flex; align-items: center; justify-content: center; gap: 24px; }
.footer .footer-social-link { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; text-decoration: none; transition: transform .2s ease; }
.footer .footer-social-link:hover { transform: translateY(-2px); }
.footer .footer-social-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 3px; }
.footer .footer-social-link svg { width: 23px; height: 23px; fill: currentColor; }
.footer .footer-social-link.facebook { color: #1877f2; }
.footer .footer-social-link.instagram { color: #e4405f; }
.footer .footer-social-link.twitterx { color: #fff; }
.footer .footer-social-link.youtube { color: #ff0000; }
@media (max-width: 992px) {
  .main-container > .left-column, .main-container > .right-column { height: auto; max-height: none; overflow: visible; }
}
@media (max-width: 700px) {
  .footer .footer-social { width: 100%; order: 2; }
  .footer .footer-visits { order: 3; }
}

/* Credit line under imported news posts */
.news-source-credit { margin: 18px 0 6px; padding: 10px 14px; border-left: 4px solid #2563eb; background: #f1f5f9; border-radius: 6px; font-size: 14px; color: #334155; }
.news-source-credit a { font-weight: 600; }

/* YouTube video that only plays on youtube.com: picture + "Watch on YouTube" */
.yt-fallback { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 240px; background: #000 center / cover no-repeat; border-radius: 8px; text-decoration: none; color: #fff; }
.yt-fallback::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); border-radius: inherit; }
.yt-fallback__btn, .yt-fallback__note { position: relative; }
.yt-fallback__btn { background: #e50914; padding: 12px 20px; border-radius: 8px; font-weight: 700; font-size: 16px; }
.yt-fallback__note { font-size: 13px; color: #eee; text-shadow: 0 1px 2px #000; padding: 0 12px; text-align: center; }
.yt-fallback:hover .yt-fallback__btn { background: #c4302b; }
.article-video .yt-fallback { position: absolute; inset: 0; min-height: 0; border-radius: 0; }
.video-frame .yt-fallback { height: 430px; }
@media (max-width: 992px) { .video-frame .yt-fallback { height: 300px; } }

/* Default picture (your logo) for posts without an image. The SVG adapts itself to the
   box: the whole logo in the middle, a blurred copy filling the rest. Don't crop it. */
img.img-default { object-fit: fill !important; background: #2A1B1A; }

/* ===== Post page: source under the picture + formatted text ===== */
.image-source { margin: 0 0 20px; font-size: 12px; line-height: 1.4; color: #64748b; }
.article-image + .image-source, .article-video + .image-source, .watch-on-youtube + .image-source { margin-top: -18px; }
.image-source a { color: #2563eb; }
.article-content p { margin: 0 0 1em; }
.article-content h2 { font-size: 26px; line-height: 1.3; margin: 1.2em 0 .5em; text-align: left; color: #0f172a; }
.article-content h3 { font-size: 21px; line-height: 1.35; margin: 1.1em 0 .45em; text-align: left; color: #0f172a; }
.article-content h4 { font-size: 18px; margin: 1em 0 .4em; text-align: left; }
.article-content blockquote { margin: 1em 0; padding: 10px 18px; border-left: 4px solid #e50914; background: #f8fafc; font-style: italic; }
.article-content ul, .article-content ol { margin: 0 0 1em; padding-left: 26px; text-align: left; }
.article-content li { margin-bottom: .35em; }
.article-content a { color: #2563eb; text-decoration: underline; }

/* ===== Homepage / category cards: category label on the picture + time ===== */
.card-media { position: relative; }
.card-category { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 4px; background: #e50914; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; text-transform: uppercase; pointer-events: none; }
.card-grid .card .card-time { display: block; margin: 0 14px 6px; font-size: 12px; color: #64748b; }