/*
 * News. — "Business" design style (business / finance), News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: white one-row header (logo left), deep teal accent,
 * IBM Plex Sans headlines, Inter text, Newsreader article text, markets bar on.
 * Calm: white pages, thin grey rules, one accent color, figures in tabular numbers.
 * Front-page top section: template-parts/home/featured-business.php.
 */

.style-business{
  --biz-accent: var(--red);
  --biz-rule: 1px solid var(--border-bottom);
  --radius-s: 3px;
  --radius-m: 4px;
  --radius-l: 6px;
  font-variant-numeric: tabular-nums;
}
/* Dark mode: a lighter accent, so small labels stay readable on the dark pages. */
html[data-theme="dark"] .style-business{ --biz-accent:color-mix(in srgb, var(--red) 55%, #ffffff); }
html:not([data-theme="dark"]) .style-business{ --paper:#FFFFFF; --paper-2:#F6F8F8; --border-bottom:#E3E8E8; --line:#E3E8E8; --ink:#0F1B24; }

/* ---- Type: calm, firm sans headlines ---- */
.style-business h1, .style-business h2, .style-business h3,
.style-business .featured__headline, .style-business .story-card__headline, .style-business .article-title,
.style-business .feature-title, .style-business .cover-card h3, .style-business .showbiz-card__title{
  font-family:var(--display); letter-spacing:-.01em;
}

/* ---- Section heads: accent bar + title, no dots ---- */
.style-business .section__dot{ display:none; }
.style-business .section__head{ border:0; }
.style-business .section__title,
.style-business .shead__title{
  position:relative; padding-left:14px; font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.01em;
}
.style-business .section__title::before,
.style-business .shead__title::before{
  content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:4px; border-radius:2px; background:var(--biz-accent);
}
.style-business .see-all{ font-weight:600; font-size:13px; }

/* ---- Tags and kickers: quiet accent text ---- */
.style-business .tag{ background:transparent !important; color:var(--biz-accent) !important; padding:0; border-radius:0; font-weight:700; letter-spacing:.06em; }
.style-business .story-card .tag, .style-business .featured__cover-body .tag{ background:var(--biz-accent) !important; color:#fff !important; padding:3px 8px; }
.style-business .kicker{ color:var(--biz-accent); }

/* ---- Header: white, one row, thin rule ---- */
.style-business .site-header{ border-bottom:var(--biz-rule); }
.style-business:not(.header-inline) .nav-bar{ background:var(--paper); }
.style-business .nav-link{ font-weight:500; font-size:14.5px; letter-spacing:0; }
.style-business .nav-link::after{ height:2px; background:var(--biz-accent); }
.style-business .nav-link.is-active, .style-business .nav-item.is-open .nav-link{ color:var(--ink); }
.style-business.header-inline .nav-link.is-active{ font-weight:700; }
.style-business .brand-bar__premium{ color:var(--biz-accent); }
.style-business .topic-row{ background:var(--paper); border-bottom:var(--biz-rule); }
.style-business .breaking{ background:var(--paper); border-bottom:var(--biz-rule); }
.style-business .breaking__inner{ height:42px; }
.style-business .breaking__track li{ color:var(--ink); font-weight:500; }
.style-business .live-tag{ border-radius:var(--radius-s); background:var(--red); } /* White text: the deep accent, also in dark mode. */

/* ---- Buttons ---- */
.style-business .btn{ border-radius:var(--radius-s); font-weight:600; }

/* ---- Cards: square-ish pictures, no heavy shadows ---- */
.style-business .story-card, .style-business .cover-card, .style-business .featured__mini, .style-business .featured__thumb,
.style-business .showbiz-card__media, .style-business .scitech-card__media, .style-business .tv-card__media,
.style-business .studio__feature, .style-business .studio__gallery, .style-business .market-card__media{ border-radius:var(--radius-m); }

/* =====================================================================
   FRONT PAGE TOP (featured-business.php)
   ===================================================================== */
.biz-top{ padding-top:clamp(20px, 2.4vw, 32px); }
.biz-kicker{ display:block; font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--biz-accent, var(--red)); }

.biz-hero{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:28px; align-items:stretch; }
/* 16:10 is the minimum height (padding spacer); when the list beside it is taller the lead grows in
   height only — an aspect-ratio would make it wider than its column and slide under the list. */
.biz-lead{ position:relative; display:block; border-radius:var(--radius-m); overflow:hidden; color:#fff; background:#1b2a33; }
.biz-lead::before{ content:""; display:block; padding-top:62.5%; }
.biz-lead img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.biz-lead:hover img{ transform:scale(1.03); }
.biz-lead__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(8,16,22,.82)); }
.biz-lead__body{ position:absolute; left:0; right:0; bottom:0; padding:0 clamp(18px, 3vw, 40px) clamp(18px, 2.6vw, 34px); }
.biz-lead .biz-kicker{ color:#fff; opacity:.85; margin:0 0 8px 18px; }
.biz-lead__title{
  margin:0; padding-left:14px; border-left:5px solid var(--biz-accent, var(--red));
  font-family:var(--display); font-size:clamp(24px, 2.6vw, 36px); font-weight:700; line-height:1.15; letter-spacing:-.015em; color:#fff;
  max-width:26ch;
}
.biz-lead .live-badge{ position:absolute; top:16px; left:16px; z-index:2; }

/* The list fills the height of the lead picture (the lead grows if the list is taller). */
.biz-side{ display:flex; flex-direction:column; justify-content:space-between; }
.biz-item{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:start; padding:14px 0; border-top:var(--biz-rule, 1px solid var(--border-bottom)); color:var(--ink); }
.biz-item:first-child{ padding-top:0; border-top:0; }
.biz-side .biz-item:last-child{ padding-bottom:0; }
.biz-item__media{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--radius-s); overflow:hidden; background:var(--paper-2); }
.biz-item__media img{ width:100%; height:100%; object-fit:cover; }
.biz-item__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.biz-item__title{ font-family:var(--display); font-size:15.5px; font-weight:600; line-height:1.3; }
.biz-item:hover .biz-item__title, .biz-card:hover .biz-card__title{ color:var(--biz-accent, var(--red)); }
.biz-item__meta{ font-size:12px; color:var(--muted); }

.biz-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; margin-top:32px; padding-top:24px; border-top:var(--biz-rule, 1px solid var(--border-bottom)); }
.biz-card{ display:flex; flex-direction:column; gap:8px; min-width:0; color:var(--ink); }
.biz-card__media{ position:relative; display:block; aspect-ratio:16/10; border-radius:var(--radius-m); overflow:hidden; background:var(--paper-2); margin-bottom:4px; }
.biz-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.biz-card:hover .biz-card__media img{ transform:scale(1.04); }
.biz-card__title{ margin:0; font-family:var(--display); font-size:17px; font-weight:600; line-height:1.28; }
.biz-top .ad-wrap{ margin-top:28px; }

@media (max-width:1100px){
  .biz-hero{ grid-template-columns:minmax(0,1fr); }
  .biz-side{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
  .biz-item:nth-child(2){ padding-top:0; border-top:0; }
  .biz-item:nth-child(5){ display:none; } /* Two columns: an even number of stories. */
  .biz-lead::before{ padding-top:56.25%; }
  .biz-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .biz-lead::before{ padding-top:125%; }
  .biz-side{ grid-template-columns:minmax(0,1fr); }
  .biz-item:nth-child(2){ padding-top:14px; border-top:var(--biz-rule, 1px solid var(--border-bottom)); }
  .biz-item:nth-child(5){ display:grid; }
  .biz-item{ grid-template-columns:104px minmax(0,1fr); }
  .biz-row{ gap:18px 14px; }
  .biz-card__title{ font-size:15px; }
}