/*
 * News. — "Tech" design style, News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: dark first (new readers see dark; they can switch),
 * near-black one-row header (logo left), electric blue accent, Manrope headlines, Inter text.
 * Clean: tiles with thin borders and a soft glow on hover, monospace details (times, labels).
 * Front-page top section: template-parts/home/featured-tech.php.
 */

.style-tech{
  --tech-accent: var(--red);
  --tech-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --tech-glow: 0 0 0 1px color-mix(in srgb, var(--tech-accent) 55%, transparent), 0 12px 40px -12px color-mix(in srgb, var(--tech-accent) 45%, transparent);
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 18px;
}
html[data-theme="dark"] .style-tech{
  --paper:#0A0C11; --paper-2:#11141B; --line:#1F2430; --border-bottom:#1F2430;
  --ink:#E9ECF3; --ink-2:#DDE1EA; --ink-3:#C9CED9; --muted:#8F97AB; --muted-light:#7E8699;
  --tech-accent: color-mix(in srgb, var(--red) 80%, #ffffff);
}
html:not([data-theme="dark"]) .style-tech{ --paper:#FFFFFF; --paper-2:#F5F7FB; --line:#E4E8F0; --border-bottom:#E4E8F0; --ink:#0B0F19; --muted:#5B6376; }
html[data-theme="dark"] body.style-tech.header-light{ --header-bg:#0A0C11; }

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

/* ---- Section heads: "/ Title" with a mono slash ---- */
.style-tech .section__dot{ display:none; }
.style-tech .section__head{ border:0; }
.style-tech .section__title,
.style-tech .shead__title{ font-family:var(--display); font-size:22px; font-weight:800; letter-spacing:-.02em; }
.style-tech .section__title::before,
.style-tech .shead__title::before{ content:"/"; margin-right:.4em; font-family:var(--tech-mono); font-weight:500; color:var(--tech-accent); }
.style-tech .see-all{ font-family:var(--tech-mono); font-size:12px; font-weight:500; letter-spacing:0; text-transform:lowercase; }

/* ---- Labels: mono, outlined ---- */
.style-tech .tag{
  background:transparent !important; color:var(--tech-accent) !important; border:1px solid color-mix(in srgb, var(--tech-accent) 50%, transparent);
  border-radius:99px; padding:3px 9px; font-family:var(--tech-mono); font-weight:500; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
}
.style-tech .story-card .tag, .style-tech .featured__cover-body .tag{ background:rgba(10,12,17,.6) !important; color:#fff !important; border-color:rgba(255,255,255,.3); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.style-tech .kicker{ font-family:var(--tech-mono); font-weight:500; letter-spacing:.04em; color:var(--tech-accent); }
.style-tech .meta, .style-tech time{ font-family:var(--tech-mono); font-size:.92em; }

/* ---- Header ---- */
.style-tech .site-header{ border-bottom:1px solid var(--border-bottom); }
html[data-theme="dark"] .style-tech .site-header{ border-bottom-color:#1F2430; }
.style-tech .nav-link{ font-weight:600; font-size:14px; letter-spacing:0; }
.style-tech .nav-link::after{ height:2px; background:var(--tech-accent); }
.style-tech .nav-link.is-active, .style-tech .nav-item.is-open .nav-link{ color:var(--tech-accent); }
.style-tech .brand-bar__premium{ padding:0 12px; height:32px; border:1px solid rgba(255,255,255,.25); border-radius:99px; }
.style-tech .breaking{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); }
.style-tech .breaking__track li{ color:var(--ink); font-weight:500; }
.style-tech .live-tag{ border-radius:99px; background:var(--red); font-family:var(--tech-mono); font-weight:600; }
.style-tech .topic-row{ background:var(--paper); border-bottom:1px solid var(--border-bottom); }
.style-tech .markets{ background:var(--paper); }

/* ---- Buttons ---- */
.style-tech .btn{ border-radius:99px; font-weight:700; }

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

/* =====================================================================
   FRONT PAGE TOP: bento grid (featured-tech.php)
   ===================================================================== */
.tech-top{ padding-top:clamp(20px, 2.4vw, 32px); }
.tech-kicker{ display:block; font-family:var(--tech-mono, monospace); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--tech-accent, var(--red)); }

.tech-bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  grid-template-areas:
    "lead lead a b"
    "lead lead latest latest"
    "w1 w1 w2 w2";
}
.tech-tile{
  position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden;
  border:1px solid var(--border-bottom); border-radius:var(--radius-l, 18px); background:var(--paper-2); color:var(--ink);
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
a.tech-tile:hover{ box-shadow:var(--tech-glow); border-color:transparent; transform:translateY(-2px); }
.tech-tile__title{ margin:0; font-family:var(--display); font-weight:700; font-size:17px; line-height:1.28; letter-spacing:-.005em; }
.tech-tile__body{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; }
.tech-tile__media{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper); }
.tech-tile__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
a.tech-tile:hover .tech-tile__media img{ transform:scale(1.04); }
.tech-tile__meta{ font-family:var(--tech-mono, monospace); font-size:12px; color:var(--muted); }

.tech-tile--lead{ grid-area:lead; min-height:540px; justify-content:flex-end; color:#fff; background:#0A0C11; }
.tech-tile--lead > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tech-tile--lead:hover > img{ transform:scale(1.03); }
.tech-tile__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,17,0) 35%, rgba(10,12,17,.92)); }
.tech-tile--lead .tech-tile__body{ position:relative; padding:clamp(20px, 2.4vw, 32px); gap:12px; }
.tech-tile--lead .tech-tile__title{ font-size:clamp(26px, 2.8vw, 40px); font-weight:800; line-height:1.12; letter-spacing:-.015em; color:#fff; }
.tech-tile__dek{ margin:0; max-width:56ch; font-size:15px; line-height:1.5; color:rgba(255,255,255,.8); }
.tech-tile--lead .tech-kicker{ color:#fff; opacity:.8; }
.tech-tile--lead .live-badge{ position:absolute; top:16px; left:16px; z-index:2; }
.tech-tile--a{ grid-area:a; }
.tech-tile--b{ grid-area:b; }

.tech-tile--latest{ grid-area:latest; padding:16px 18px 12px; }
.tech-latest__head{ display:flex; align-items:center; gap:8px; margin:0 0 6px; font-family:var(--tech-mono, monospace); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tech-latest__dot{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:tech-pulse 2s ease-in-out infinite; }
@keyframes tech-pulse{ 50%{ opacity:.4; } }
.tech-latest{ list-style:none; margin:0; padding:0; }
.tech-latest li + li{ border-top:1px solid var(--border-bottom); }
.tech-latest a{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:baseline; padding:9px 0; color:var(--ink); }
.tech-latest time{ font-family:var(--tech-mono, monospace); font-size:12px; color:var(--tech-accent, var(--red)); }
.tech-latest span{ font-size:14px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tech-latest a:hover span{ color:var(--tech-accent, var(--red)); }
.tech-latest__all{ display:inline-block; margin-top:6px; font-family:var(--tech-mono, monospace); font-size:12px; color:var(--muted); }
.tech-latest__all:hover{ color:var(--tech-accent, var(--red)); }

.tech-tile--wide{ flex-direction:row; align-items:stretch; }
.tech-tile--w1{ grid-area:w1; }
.tech-tile--w2{ grid-area:w2; }
.tech-tile--wide .tech-tile__media{ flex:0 0 42%; aspect-ratio:auto; min-height:150px; }
.tech-tile--wide .tech-tile__body{ justify-content:center; }
.tech-top .ad-wrap{ margin-top:24px; }

@media (max-width:1100px){
  .tech-bento{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-areas:"lead lead" "a b" "latest latest" "w1 w2";
  }
  .tech-tile--lead{ min-height:460px; }
  .tech-tile--wide{ flex-direction:column; }
  .tech-tile--wide .tech-tile__media{ flex:none; aspect-ratio:16/9; min-height:0; }
}
@media (max-width:640px){
  .tech-bento{ gap:12px; grid-template-areas:"lead lead" "a b" "latest latest" "w1 w2"; }
  .tech-tile--lead{ min-height:400px; }
  .tech-tile__body{ padding:12px 12px 14px; }
  .tech-tile__title{ font-size:15px; }
  .tech-tile--latest{ padding:14px; }
}
@media (prefers-reduced-motion: reduce){
  .tech-tile, .tech-tile img, .tech-tile--lead > img{ transition:none; }
  a.tech-tile:hover{ transform:none; }
  .tech-latest__dot{ animation:none; }
}

.style-tech .headline-tag--video{ color:var(--tech-accent); }