/*
 * News. — "Local" design style (local / city news), News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: white one-row header (logo left), civic blue accent,
 * Merriweather headlines, Lato text. Friendly and practical: rounded cards, a "Latest" box and a
 * tip box for readers. Front-page top section: template-parts/home/featured-local.php.
 */

.style-local{
  --loc-accent: var(--red);
  --loc-soft: color-mix(in srgb, var(--red) 8%, #fff);
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
}
html:not([data-theme="dark"]) .style-local{ --paper:#FFFFFF; --paper-2:#F4F7FB; --line:#E3E8EF; --border-bottom:#E3E8EF; --ink:#152033; --muted:#5A6577; }
html[data-theme="dark"] .style-local{ --loc-accent:color-mix(in srgb, var(--red) 55%, #fff); --loc-soft:#141B27; --paper:#0D1219; --paper-2:#141B27; }

/* ---- Type ---- */
.style-local h1, .style-local h2, .style-local h3,
.style-local .featured__headline, .style-local .story-card__headline, .style-local .article-title,
.style-local .feature-title, .style-local .cover-card h3, .style-local .showbiz-card__title{
  font-family:var(--display); font-weight:700; letter-spacing:-.005em;
}

/* ---- Section heads: title with a rounded accent underline ---- */
.style-local .section__dot{ display:none; }
.style-local .section__head{ border-bottom:1px solid var(--border-bottom); padding-bottom:10px; position:relative; }
.style-local .section__head::after{ content:""; position:absolute; left:0; bottom:-2px; width:54px; height:3px; border-radius:3px; background:var(--loc-accent); }
.style-local .section__title,
.style-local .shead__title{ font-family:var(--display); font-size:22px; font-weight:700; }

/* ---- Labels: soft pills ---- */
.style-local .tag{ background:var(--loc-soft) !important; color:var(--loc-accent) !important; border-radius:99px; letter-spacing:.04em; }
.style-local .story-card .tag, .style-local .featured__cover-body .tag{ background:#fff !important; color:#152033 !important; }

/* ---- Header ---- */
.style-local .site-header{ border-bottom:1px solid var(--border-bottom); box-shadow:0 2px 10px rgba(21,32,51,.04); }
.style-local .nav-link{ font-weight:700; font-size:14.5px; letter-spacing:0; }
.style-local .nav-link::after{ height:3px; border-radius:3px 3px 0 0; background:var(--loc-accent); }
.style-local .nav-link.is-active, .style-local .nav-item.is-open .nav-link{ color:var(--loc-accent); }
.style-local .breaking{ background:var(--loc-soft); border-bottom:1px solid var(--border-bottom); }
.style-local .breaking__track li{ color:var(--ink); }
.style-local .live-tag{ border-radius:99px; background:var(--red); }
.style-local .btn{ border-radius:99px; }

/* ---- Cards ---- */
.style-local .story-card, .style-local .cover-card, .style-local .featured__mini, .style-local .featured__thumb,
.style-local .showbiz-card__media, .style-local .scitech-card__media, .style-local .tv-card__media,
.style-local .studio__feature, .style-local .studio__gallery, .style-local .market-card__media{ border-radius:var(--radius-m); }

/* =====================================================================
   FRONT PAGE TOP (featured-local.php)
   ===================================================================== */
.loc-top{ padding-top:clamp(20px, 2.4vw, 32px); }
.loc-kicker{ display:block; font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--loc-accent, var(--red)); }
.loc-meta{ display:block; font-size:12.5px; color:var(--muted); }

.loc-grid{ display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:28px; align-items:start; }
.loc-lead{ display:flex; flex-direction:column; gap:10px; color:var(--ink); }
.loc-lead__media{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--radius-l); overflow:hidden; background:var(--paper-2); margin-bottom:6px; }
.loc-lead__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.loc-lead:hover .loc-lead__media img{ transform:scale(1.03); }
.loc-lead__media .live-badge{ position:absolute; top:14px; left:14px; z-index:2; }
.loc-lead__title{ margin:0; font-family:var(--display); font-size:clamp(26px, 2.6vw, 36px); font-weight:700; line-height:1.18; }
.loc-lead:hover .loc-lead__title{ color:var(--loc-accent, var(--red)); }
.loc-lead__dek{ margin:0; font-size:16.5px; line-height:1.55; color:var(--muted); }

.loc-side{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.loc-box{ padding:18px 20px 10px; border:1px solid var(--border-bottom); border-radius:var(--radius-l); background:var(--paper); }
.loc-box__title{ margin:0 0 6px; font-family:var(--display); font-size:18px; font-weight:700; }
.loc-latest{ list-style:none; margin:0; padding:0; }
.loc-latest li + li{ border-top:1px solid var(--border-bottom); }
.loc-latest a{ display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; padding:10px 0; color:var(--ink); }
.loc-latest time{ font-size:12.5px; font-weight:800; color:var(--loc-accent, var(--red)); font-variant-numeric:tabular-nums; }
.loc-latest span{ font-size:14.5px; font-weight:600; line-height:1.35; }
.loc-latest a:hover span{ color:var(--loc-accent, var(--red)); }

.loc-tip{ padding:20px; border-radius:var(--radius-l); background:var(--loc-soft); }
.loc-tip__title{ margin:0 0 6px; font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink); }
.loc-tip__text{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--muted); }
.loc-tip__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.loc-tip__btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:99px; background:var(--paper); border:1px solid var(--border-bottom); color:var(--ink); font-size:13.5px; font-weight:700; }
.loc-tip__btn svg{ width:16px; height:16px; flex:none; }
.loc-tip__btn svg:not([fill="none"]){ fill:currentColor; } /* Brand icons are filled; outline icons stay outlines. */
.loc-tip__btn:hover{ border-color:var(--loc-accent, var(--red)); color:var(--loc-accent, var(--red)); }

.loc-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; margin-top:30px; }
.loc-card{ display:flex; flex-direction:column; gap:8px; min-width:0; color:var(--ink); }
.loc-card__media{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-2); margin-bottom:4px; }
.loc-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.loc-card:hover .loc-card__media img{ transform:scale(1.04); }
.loc-card__title{ margin:0; font-family:var(--display); font-size:16.5px; font-weight:700; line-height:1.3; }
.loc-card:hover .loc-card__title{ color:var(--loc-accent, var(--red)); }
.loc-top .ad-wrap{ margin-top:26px; }

@media (max-width:1100px){
  .loc-grid{ grid-template-columns:minmax(0,1fr); }
  .loc-side{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .loc-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .loc-side{ grid-template-columns:minmax(0,1fr); }
  .loc-row{ gap:18px 14px; }
  .loc-card__title{ font-size:15px; }
}
@media (prefers-reduced-motion: reduce){ .loc-lead__media img, .loc-card__media img{ transition:none; } }