/* ==========================================================================
   TechPulse HQ — editorial skin
   An Engadget-inspired reading of the News Theme framework: white surfaces,
   hairline rules, bold sentence-case sans headlines, 16:9 media and a single
   restrained accent. Loads after news-theme.css and supersedes its styling.
   ========================================================================== */

:root {
  /* Surfaces */
  --tp-page: #ffffff;
  --tp-surface: #ffffff;
  --tp-surface-subtle: #f5f3f5;
  --tp-chip: #2d2c2e;

  /* Text */
  --tp-ink: #010101;
  --tp-body: #222222;
  --tp-muted: #827e82;
  --tp-strong: #0e0811;

  /* Lines */
  --tp-line: #e0dfe0;

  /* Accent — interaction states and the "HQ" in the wordmark only */
  --tp-accent: #e10600;
  --tp-accent-strong: #b30500;
  --tp-accent-soft: #fdecec;

  /* Type */
  --tp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Shape + rhythm */
  --tp-radius-media: 8px;
  --tp-radius-pill: 999px;
  --tp-container: 1250px;
  --tp-gap: 12px;
  --tp-gap-lg: 24px;
  --tp-header-h: 72px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body.nt-theme {
  background: var(--tp-page);
  color: var(--tp-body);
  font-family: var(--tp-font);
  font-size: 16px;
  line-height: 1.5;
}

body.nt-theme h1, body.nt-theme h2, body.nt-theme h3,
body.nt-theme h4, body.nt-theme h5, body.nt-theme h6,
body.nt-theme .newsx-grid-title a,
body.nt-theme .newsx-widget-title-text {
  font-family: var(--tp-font);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

:where(body.nt-theme) a { color: var(--tp-accent); }
:where(body.nt-theme) a:hover { color: var(--tp-accent-strong); }

.nt-container {
  max-width: var(--tp-container);
  margin: 0 auto;
  padding: 0 16px;
}

/* --------------------------------------------------------------------------
   Header — white bar, 1px hairline, sentence-case nav
   -------------------------------------------------------------------------- */

body.nt-theme .newsx-site-header {
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-line);
  box-shadow: none;
}

body.nt-theme .newsx-top-section-wrap,
body.nt-theme .newsx-middle-section-wrap,
body.nt-theme .newsx-bottom-section-wrap {
  background: var(--tp-surface);
  border-bottom: 1px solid var(--tp-line);
}

body.nt-theme .newsx-bottom-section-wrap { border-bottom: 0; }

body.nt-theme .newsx-news-ticker .news-ticker-heading,
body.nt-theme .newsx-news-ticker a.newsx-news-ticker-title {
  color: var(--tp-body);
  background: transparent;
  font-family: var(--tp-font);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.2px;
}

body.nt-theme .newsx-site-title-tagline .site-title a {
  font-family: var(--tp-font);
  font-size: 30px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--tp-ink);
}

body.nt-theme .newsx-site-title-tagline .site-title a::before {
  width: 30px;
  height: 20px;
}

body.nt-theme .newsx-site-title-tagline .site-description {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--tp-muted);
}

body.nt-theme .newsx-nav-menu a,
body.nt-theme .newsx-header-menu-primary .newsx-nav-menu > .menu-item > a,
body.nt-theme .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a {
  font-family: var(--tp-font);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--tp-body);
}

body.nt-theme .newsx-header-menu-primary .newsx-nav-menu > .menu-item > a:hover,
body.nt-theme .newsx-header-menu-secondary .newsx-nav-menu > .menu-item > a:hover {
  color: var(--tp-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

body.nt-theme .newsx-site-header .newsx-social-icon svg { fill: var(--tp-body); }
body.nt-theme .newsx-site-header .newsx-social-icon:hover svg { fill: var(--tp-accent); }
body.nt-theme .newsx-header-search .search-icon svg { fill: var(--tp-body); }

/* --------------------------------------------------------------------------
   Section header — bold sentence case, rules fanning out either side
   -------------------------------------------------------------------------- */

/* The framework paints .nt-home a light grey; the editorial look wants white. */
.nt-home { background: var(--tp-page); }

.nt-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px 0 20px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-ink);
}

.nt-section-header::before,
.nt-section-header::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px solid var(--tp-line);
}

.nt-section-header span { padding: 0 8px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Featured — one lead beside a 2x2 grid of briefs
   -------------------------------------------------------------------------- */

.nt-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tp-gap-lg);
  padding-top: 24px;
}

.nt-lead { min-width: 0; }

.nt-lead__media {
  position: relative;
  display: block;
  border-radius: var(--tp-radius-media);
  overflow: hidden;
  background: var(--tp-surface-subtle);
}

.nt-lead__media-link { display: block; }

.nt-lead__media img,
.nt-lead__media .nt-card__fallback {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tp-radius-media);
}

.nt-lead__body { padding-top: 14px; }

.nt-lead__title {
  margin: 10px 0 10px;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tp-ink);
}

.nt-lead__title a { color: var(--tp-ink); text-decoration: none; }
.nt-lead__title a:hover { color: var(--tp-ink); text-decoration: underline; text-underline-offset: 5px; }

.nt-lead__excerpt {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tp-body);
}

.nt-featured__briefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--tp-gap) var(--tp-gap-lg);
}

.nt-brief {
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  align-items: stretch;
  height: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tp-line);
  min-width: 0;
}

.nt-brief__media {
  flex: 0 0 46%;
  align-self: stretch;
  border-radius: var(--tp-radius-media);
  overflow: hidden;
  background: var(--tp-surface-subtle);
}

.nt-brief__media img,
.nt-brief__media .nt-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
  border-radius: var(--tp-radius-media);
}

.nt-brief__body { display: flex; flex-direction: column; }
.nt-brief .nt-meta { flex-wrap: nowrap; font-size: 12.5px; overflow: hidden; }
.nt-brief .nt-meta__read { display: none; }

.nt-brief__body { flex: 1 1 auto; min-width: 0; }

.nt-brief__title {
  margin: 8px 0 6px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tp-ink);
}

.nt-brief__title a { color: var(--tp-ink); text-decoration: none; }
.nt-brief__title a:hover { color: var(--tp-accent); }

/* --------------------------------------------------------------------------
   Feed — ruled 3-column grid, list on small screens
   -------------------------------------------------------------------------- */

.nt-feed { padding-bottom: 48px; }

.nt-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tp-gap) var(--tp-gap-lg);
  align-items: stretch;
}

.nt-feed__grid .nt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 20px;
}

.nt-feed__grid .nt-card:hover { transform: none; box-shadow: none; }

/* Column rule drawn in the gutter so every column keeps its exact width.
   Left border on columns 2 and 3 means a short final row never leaves a
   dangling rule beside an empty cell. */
.nt-feed__grid .nt-card:not(:nth-child(3n + 1))::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tp-gap-lg) / -2);
  width: 1px;
  background: var(--tp-line);
}

.nt-feed__grid .nt-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 12px 0 0;
}

.nt-feed__grid .nt-card__excerpt { -webkit-line-clamp: 2; }

.nt-feed__grid .nt-card__body .nt-meta { margin-top: auto; }

/* --------------------------------------------------------------------------
   Cards — no surface, no shadow; only the image is rounded
   -------------------------------------------------------------------------- */

.nt-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.nt-card__media {
  border-radius: var(--tp-radius-media);
  overflow: hidden;
  background: var(--tp-surface-subtle);
}

.nt-card__img,
.nt-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tp-radius-media);
}

.nt-card__body { padding: 12px 0 0; }

.nt-card__title {
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tp-ink);
  -webkit-line-clamp: 3;
}

.nt-card__title a { color: var(--tp-ink); text-decoration: none; }
.nt-card__title a:hover { color: var(--tp-accent); }

.nt-card__excerpt {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tp-body);
  -webkit-line-clamp: 4;
}

.nt-card--sm { flex-direction: row-reverse; }
.nt-card--sm .nt-card__media { flex: 0 0 46%; width: 46%; }
.nt-card--sm .nt-card__body { padding: 0; }
.nt-card--sm .nt-card__title { font-size: 18px; }

/* --------------------------------------------------------------------------
   Chips + meta
   -------------------------------------------------------------------------- */

.nt-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 2px solid var(--tp-chip);
  border-radius: 0 var(--tp-radius-pill) var(--tp-radius-pill) 0;
  background: var(--tp-chip);
  color: #ffffff !important;
  font-family: var(--tp-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  line-height: 1.4;
  text-decoration: none;
}

.nt-chip:hover { filter: none; background: var(--tp-accent); border-color: var(--tp-accent); color: #fff !important; }

.nt-chip--overlay {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 3;
  box-shadow: none;
}

.nt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--tp-muted);
}

.nt-meta__sep { color: var(--tp-line); }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.nt-empty {
  margin: 64px 0;
  padding: 48px 24px;
  text-align: center;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius-media);
}

.nt-empty h2 { margin: 0 0 8px; font-size: 26px; color: var(--tp-ink); }
.nt-empty p { margin: 0; color: var(--tp-muted); }

/* --------------------------------------------------------------------------
   Single post + archive
   -------------------------------------------------------------------------- */

body.nt-theme .newsx-single-post-header h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tp-ink);
}

body.nt-theme .newsx-single-post-header .newsx-breadcrumbs {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--tp-muted);
}

body.nt-theme .newsx-post-categories a {
  background: var(--tp-chip) !important;
  color: #fff !important;
  border-radius: 0 var(--tp-radius-pill) var(--tp-radius-pill) 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

body.nt-theme .newsx-post-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tp-body);
}

body.nt-theme .newsx-post-content h2,
body.nt-theme .newsx-post-content h3 {
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--tp-ink);
}

body.nt-theme .newsx-post-content img { border-radius: var(--tp-radius-media); }

body.nt-theme .newsx-archive-page-header h1,
body.nt-theme .newsx-blog-page-wrap h1 {
  font-family: var(--tp-font);
  font-size: 34px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--tp-ink);
}

body.nt-theme .newsx-posts-feed .newsx-list-layout-post,
body.nt-theme .newsx-posts-feed article {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--tp-line);
}

/* Sidebar (used on archives and articles, not the homepage) */
body.nt-theme .newsx-sidebar .widget {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--tp-line);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 0 0;
  margin-bottom: 26px;
}

body.nt-theme .newsx-sidebar .widget-title,
body.nt-theme .newsx-sidebar .newsx-widget-title-text {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--tp-ink);
}

body.nt-theme .newsx-sidebar .widget a { color: var(--tp-ink); }
body.nt-theme .newsx-sidebar .widget a:hover { color: var(--tp-accent); }

/* --------------------------------------------------------------------------
   Footer — light, hairline separated
   -------------------------------------------------------------------------- */

body.nt-theme .newsx-site-footer {
  background: var(--tp-surface);
  border-top: 1px solid var(--tp-line);
  color: var(--tp-body);
}

body.nt-theme .newsx-site-footer .newsx-widget-title-text,
body.nt-theme .newsx-site-footer .widget-title,
body.nt-theme .newsx-site-footer .widgettitle { color: var(--tp-ink) !important; }
body.nt-theme .newsx-site-footer a { color: var(--tp-body); }
body.nt-theme .newsx-site-footer a:hover { color: var(--tp-accent); }
body.nt-theme .newsx-site-footer .widget_nav_menu li { border-bottom-color: var(--tp-line); }
body.nt-theme .newsx-site-footer .widget_recent_entries .post-date { color: var(--tp-muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 926px) {
  .nt-featured { grid-template-columns: 1fr; }
  .nt-lead__title { font-size: 32px; }
  .nt-featured__briefs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nt-featured__briefs { grid-template-columns: 1fr; }
  .nt-brief { flex-direction: row-reverse; }

  .nt-feed__grid { grid-template-columns: 1fr; }

  .nt-feed__grid .nt-card,
  .nt-feed__grid .nt-card:not(:nth-child(3n)) {
    display: flex;
    flex-direction: row;
    gap: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--tp-line);
    padding: 12px 0;
  }

  .nt-feed__grid .nt-card__media { flex: 0 0 42%; width: 42%; }
  .nt-feed__grid .nt-card__body { flex: 1 1 auto; padding: 0; }
  .nt-feed__grid .nt-card__title { font-size: 18px; -webkit-line-clamp: 3; }
  .nt-feed__grid .nt-card__excerpt { display: none; }
  .nt-feed__grid .nt-card__media .nt-chip--overlay { display: none; }

  .nt-section-header { font-size: 22px; margin: 24px 0 16px; }
}

@media (max-width: 480px) {
  .nt-lead__title { font-size: 27px; }
  .nt-card__title { font-size: 20px; }
  body.nt-theme .newsx-site-title-tagline .site-title a { font-size: 26px; }
}