/*
 * News. — "Crypto" design style, News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: dark first, near-black one-row header (logo left), violet
 * accent, Manrope headlines, Inter text, markets bar with coins only. Data-looking:
 * a live markets table with 24 h change and 7-day lines, tabular figures, monospace details.
 * Front-page top section: template-parts/home/featured-crypto.php.
 */

.style-crypto{
  --cx-accent: var(--red);
  --cx-up: #0F8A4B;
  --cx-down: #C62828;
  --cx-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 16px;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .style-crypto{
  --paper:#090B10; --paper-2:#10131B; --line:#1D2230; --border-bottom:#1D2230; --ink:#E8EBF2; --muted:#8F97AB; --muted-light:#7E8699;
  --cx-accent: color-mix(in srgb, var(--red) 55%, #fff); --cx-up:#16C784; --cx-down:#EA3943;
}
html:not([data-theme="dark"]) .style-crypto{ --paper:#FFFFFF; --paper-2:#F5F6FA; --line:#E3E6EE; --border-bottom:#E3E6EE; --ink:#0B0E16; --muted:#596178; }
html[data-theme="dark"] body.style-crypto.header-light{ --header-bg:#090B10; }

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

/* ---- Section heads: title with a glowing accent square ---- */
.style-crypto .section__dot{ display:none; }
.style-crypto .section__head{ border:0; }
.style-crypto .section__title,
.style-crypto .shead__title{ font-family:var(--display); font-size:22px; font-weight:800; }
.style-crypto .section__title::before,
.style-crypto .shead__title::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:10px; border-radius:3px; background:var(--cx-accent); box-shadow:0 0 12px var(--cx-accent); vertical-align:.12em; }
.style-crypto .see-all{ font-family:var(--cx-mono); font-size:12px; font-weight:500; text-transform:lowercase; }

/* ---- Labels ---- */
.style-crypto .tag{ border-radius:6px; font-family:var(--cx-mono); font-weight:600; letter-spacing:.02em; }
.style-crypto .kicker{ font-family:var(--cx-mono); font-weight:600; letter-spacing:.02em; color:var(--cx-accent); }
.style-crypto .meta, .style-crypto time{ font-family:var(--cx-mono); font-size:.92em; }

/* ---- Header ---- */
.style-crypto .site-header{ border-bottom:1px solid #1D2230; }
.style-crypto .nav-link{ font-weight:700; font-size:14px; letter-spacing:0; }
.style-crypto .nav-link::after{ height:2px; background:var(--cx-accent); box-shadow:0 0 10px var(--cx-accent); }
.style-crypto .nav-link.is-active, .style-crypto .nav-item.is-open .nav-link{ color:#fff; }
.style-crypto .breaking{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); }
.style-crypto .breaking__track li{ color:var(--ink); }
.style-crypto .live-tag{ border-radius:6px; font-family:var(--cx-mono); }
.style-crypto .markets{ background:var(--paper); }
.style-crypto .markets__name{ font-family:var(--cx-mono); }
html[data-theme="dark"] .style-crypto .markets__chg--up{ color:var(--cx-up); }
html[data-theme="dark"] .style-crypto .markets__chg--down{ color:var(--cx-down); }
.style-crypto .btn{ border-radius:10px; }

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

/* =====================================================================
   FRONT PAGE TOP (featured-crypto.php)
   ===================================================================== */
.cx-top{ padding-top:clamp(18px, 2.2vw, 28px); }
.cx-kicker{ display:block; font-family:var(--cx-mono, monospace); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--cx-accent, var(--red)); }
.cx-meta{ display:block; font-family:var(--cx-mono, monospace); font-size:12px; color:var(--muted); }

.cx-hero{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.cx-lead{ position:relative; display:flex; align-items:flex-end; min-height:500px; border-radius:var(--radius-l); overflow:hidden; color:#fff; background:#090B10; }
.cx-lead > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.cx-lead:hover > img{ transform:scale(1.03); }
.cx-lead__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,11,16,0) 35%, rgba(9,11,16,.92)); }
.cx-lead__body{ position:relative; display:flex; flex-direction:column; gap:10px; padding:clamp(20px, 2.4vw, 32px); }
.cx-lead .cx-kicker{ color:#fff; opacity:.85; }
.cx-lead__title{ margin:0; font-family:var(--display); font-size:clamp(26px, 2.8vw, 40px); font-weight:800; line-height:1.12; letter-spacing:-.02em; color:#fff; }
.cx-lead .live-badge{ position:absolute; top:14px; left:14px; z-index:2; }

.cx-panel{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.cx-markets{ padding:16px 16px 10px; border:1px solid var(--border-bottom); border-radius:var(--radius-l); background:var(--paper-2); }
.cx-label{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-family:var(--display); font-size:15px; font-weight:800; color:var(--ink); }
.cx-label__sub{ margin-left:auto; font-family:var(--cx-mono, monospace); font-size:11px; font-weight:500; color:var(--muted); }
.cx-live{ width:8px; height:8px; border-radius:50%; background:var(--cx-up); box-shadow:0 0 0 4px color-mix(in srgb, var(--cx-up) 22%, transparent); animation:cx-pulse 2s ease-in-out infinite; }
@keyframes cx-pulse{ 50%{ opacity:.4; } }
.cx-table{ width:100%; border-collapse:collapse; }
.cx-coin th, .cx-coin td{ padding:9px 0; border-top:1px solid var(--border-bottom); vertical-align:middle; }
.cx-coin:first-child th, .cx-coin:first-child td{ border-top:0; }
.cx-coin th{ text-align:left; font-weight:400; }
.cx-sym{ display:block; font-family:var(--cx-mono, monospace); font-size:13px; font-weight:700; color:var(--ink); }
.cx-name{ display:block; font-size:11.5px; color:var(--muted); }
.cx-price{ text-align:right; font-family:var(--cx-mono, monospace); font-size:13px; font-weight:600; color:var(--ink); padding-left:8px !important; }
.cx-chg{ text-align:right; width:68px; font-family:var(--cx-mono, monospace); font-size:12px; font-weight:700; }
.cx-coin--up .cx-chg, .cx-coin--up .cx-spark{ color:var(--cx-up); }
.cx-coin--down .cx-chg, .cx-coin--down .cx-spark{ color:var(--cx-down); }
.cx-line{ width:76px; padding-left:12px !important; }
.cx-spark{ display:block; width:64px; height:22px; }
.cx-src{ margin:6px 0 0; font-size:11px; color:var(--muted); }
.cx-src a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

.cx-mini{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:center; padding:10px; border:1px solid var(--border-bottom); border-radius:var(--radius-m); background:var(--paper); color:var(--ink); transition:border-color .2s; }
.cx-mini__media{ display:block; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:var(--paper-2); }
.cx-mini__media img{ width:100%; height:100%; object-fit:cover; }
.cx-mini__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cx-mini:hover{ border-color:var(--cx-accent, var(--red)); }
.cx-mini__title{ font-family:var(--display); font-size:15.5px; font-weight:700; line-height:1.3; }

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

@media (max-width:1100px){
  .cx-hero{ grid-template-columns:minmax(0,1fr); }
  .cx-lead{ min-height:420px; }
  .cx-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .cx-lead{ min-height:380px; }
  .cx-line{ display:none; }
  .cx-row{ gap:18px 14px; }
  .cx-card__title{ font-size:15px; }
}
@media (prefers-reduced-motion: reduce){ .cx-lead > img, .cx-card__media img{ transition:none; } .cx-live{ animation:none; } }