/*
Theme Name: YouthWire
Theme URI: https://youthwire.in
Author: YouthWire Team
Author URI: https://youthwire.in
Description: A premium, fast, E-E-A-T trust signals-focused WordPress theme for youthwire.in. Built for editorial excellence, typography-first reading experience, and full Gutenberg / Elementor compatibility.
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: youthwire
Tags: one-column, custom-colors, editor-style, news, blog, block-patterns, translation-ready

This theme is released under the GPL licence.
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* ── Colour System ──────────────────────────────────────────── */
  --color-primary:    #111111;  /* Headlines */
  --color-body:       #333333;  /* Body text */
  --color-secondary:  #444444;  /* Supporting text */
  --color-meta:       #666666;  /* Metadata, captions */
  --color-accent:     #DA251C;  /* YouthWire Red */
  --color-border:     #EAEAEA;
  --color-bg:         #FFFFFF;
  --color-white:      #FFFFFF;

  /* Legacy aliases kept for backwards compat */
  --primary:    var(--color-primary);
  --secondary:  var(--color-accent);
  --bg:         var(--color-bg);
  --card-bg:    var(--color-bg);
  --border:     var(--color-border);
  --heading:    var(--color-primary);
  --body:       var(--color-body);
  --white:      var(--color-white);

  /* Category Accent Colors */
  --accent-news:        var(--color-accent);
  --accent-exams:       var(--color-accent);
  --accent-colleges:    var(--color-primary);
  --accent-careers:     var(--color-primary);
  --accent-jobs:        var(--color-accent);
  --accent-policies:    var(--color-primary);
  --accent-study-abroad: var(--color-accent);
  --accent-opinion:     var(--color-primary);
  --accent-expert:      var(--color-accent);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, serif;   /* Editorial headings */
  --font-sans:  'Montserrat', system-ui, -apple-system, sans-serif; /* Everything else */

  /* Type Scale — single source of truth */
  --type-hero-h1:       38px; /* DM Serif Display, w700, lh 1.15 */
  --type-featured:      30px; /* DM Serif Display, w700, lh 1.2  */
  --type-article-h1:    42px; /* DM Serif Display, w700, lh 1.15 */
  --type-section-head:  32px; /* DM Serif Display, w700, lh 1.2  */
  --type-story-card:    18px; /* Inter, w700, lh 1.35 */
  --type-sidebar-story: 17px; /* Inter, w700, lh 1.35 */
  --type-article-intro: 20px; /* Inter, w400, lh 1.75 */
  --type-article-body:  16px; /* Inter, w400, lh 1.8  */
  --type-body:          16px; /* Inter, w400, lh 1.7  */
  --type-meta:          13px; /* Inter, w500, lh 1.5  */
  --type-nav:           16px; /* Inter, w600, lh 1    */
  --type-btn:           15px; /* Inter, w600, lh 1    */
  --type-caption:       14px; /* Inter, w400 */
  --type-subheading:    26px; /* Inter, w700 — article subheadings */
  --type-quote:         20px; /* Inter, w400, italic  */
  --type-category-h:    38px; /* DM Serif Display — category page h1 */

  /* ── 8-Point Spacing Grid ───────────────────────────────────── */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width-site:    1360px;
  --max-width-reading:  720px;  /* Article content column */
  --max-width-reading-max: 760px;
  --header-height:       72px;
  --card-radius:          6px;
  --card-image-ratio:  16 / 9;
  --card-img-max-h:    168px;
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Global heading defaults — serif only for editorial headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* Editorial headings — sections that use DM Serif Display */
.yw-serif,
.section-headline,
.archive-title,
.single-article-title,
.hero-title,
.featured-title {
  font-family: var(--font-serif) !important;
}

/* Header & Sticky Navbar */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  transition: box-shadow 0.2s ease-in-out;
}

.site-header.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header-container {
  max-width: var(--max-width-site);
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

@media (max-width: 992px) {
  .header-container {
    padding: 16px 24px;
  }
}

@media (max-width: 576px) {
  .header-container {
    padding: 16px 16px;
  }
}


/* Branding Logo */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  user-select: none;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: flex;
  white-space: nowrap;
}

.logo-youth {
  color: var(--primary);
}

.logo-wire {
  color: var(--secondary);
}

.logo-tagline {
  font-family: var(--font-sans);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--body);
  margin-top: 3px;
  font-weight: 500;
  border-top: 1px solid var(--border);
  padding-top: 2px;
  width: 100%;
  text-align: center;
}

/* Navigation Links */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .nav-desktop {
    gap: 12px;
  }
  .nav-link {
    font-size: 13px !important;
  }
}

.nav-link {
  font-family: var(--font-sans);
  font-size: var(--type-nav);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0;
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease;
  line-height: 1;
}

.nav-link:hover,
.nav-link.current {
  color: var(--color-accent);
}

.nav-home-link {
  color: var(--secondary) !important;
  display: flex;
  align-items: center;
  transition: opacity 0.15s ease;
  margin-right: 12px;
}

.nav-home-link:hover {
  opacity: 0.8;
}

.desktop-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 12px;
}

.mobile-actions {
  display: none;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--heading);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  border-radius: 50%;
}

.icon-btn:hover {
  background-color: var(--bg);
  color: var(--secondary);
}

.hamburger-btn {
  display: none;
}

/* Category Badges */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.badge-news { color: var(--accent-news); }
.badge-careers { color: var(--accent-careers); }
.badge-exams { color: var(--accent-exams); }
.badge-colleges { color: var(--accent-colleges); }
.badge-opinion { color: var(--accent-opinion); }
.badge-jobs { color: var(--accent-jobs); }
.badge-policies { color: var(--accent-policies); }
.badge-study-abroad { color: var(--accent-study-abroad); }
.badge-expert { color: var(--accent-expert); }


/* Main Site Content Areas */
.site-main {
  min-height: calc(100vh - var(--header-height) - 180px);
  padding: 40px 24px;
  max-width: var(--max-width-site);
  margin: 0 auto;
}/* Sub-navigation Bar */
.sub-navigation-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  margin-bottom: 32px;
  background-color: #f8fafc;
}

.sub-nav-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--max-width-site);
  margin: 0 auto;
}

.sub-nav-container a {
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sub-nav-container a:hover {
  color: var(--secondary);
}

.dot-separator {
  color: #cbd5e1;
  font-weight: bold;
}

/* Promotional Action Strip */
.homepage-action-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.action-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

.action-card-text {
  flex: 1;
  padding-right: 12px;
}

.action-card-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.action-card-text h4 {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary);
  margin: 0;
}

.action-card-icon {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-card-icon.green-icon {
  background: #ecfdf5;
}

.action-card-icon.red-icon {
  background: #fef2f2;
}

.action-card-icon.blue-icon {
  background: #f0f9ff;
}

/* Homepage Hero Section: 2-Column Newsroom Grid */
.hero-newsroom-section {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f1f5f9;
  align-items: stretch;
}

.hero-left-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f1f5f9;
  padding-right: 24px;
}

.hero-right-col-stories {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.column-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  color: #000000;
  margin-top: 0;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

/* Column 1: Latest News */
.latest-news-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.latest-news-item {
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.latest-news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.latest-news-item h4 {
  font-family: var(--font-sans), sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.latest-news-item h4 a {
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.latest-news-item h4 a:hover {
  color: #DA251C;
}

.live-badge {
  background-color: #DA251C;
  color: #ffffff;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  text-transform: uppercase;
  line-height: 1;
}

.live-dot {
  width: 5px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-live 1.2s infinite;
}

@keyframes pulse-live {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Column 2: Hero Stories */
.hero-main-featured-story {
  display: flex;
  flex-direction: column;
}

.main-featured-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f1f5f9;
  margin-bottom: 12px;
}

.hero-main-featured-img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.hero-main-featured-story:hover .hero-main-featured-img {
  transform: scale(1.01);
}

.main-featured-content {
  display: flex;
  flex-direction: column;
}

.main-featured-content h1 {
  font-family: var(--font-serif), serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 6px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.main-featured-content h1 a {
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.main-featured-content h1 a:hover {
  color: #DA251C;
}

.hero-supporting-stories-row {
  display: flex;
  gap: 24px;
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
}

.hero-supporting-story-card {
  display: flex;
  flex: 1;
  gap: 16px;
  align-items: flex-start;
}

.supporting-image-wrapper {
  flex: 0 0 120px;
  width: 120px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f5f9;
}

.hero-supporting-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.hero-supporting-story-card:hover .hero-supporting-img {
  transform: scale(1.02);
}

.supporting-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.supporting-content h2 {
  font-family: var(--font-sans), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 0;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.supporting-content h2 a {
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.supporting-content h2 a:hover {
  color: #DA251C;
}

/* Share Action Buttons */
.share-btn {
  background: none;
  border: none;
  padding: 4px;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
  margin-left: 8px;
}

.share-btn:hover {
  background-color: #f1f5f9;
  color: #DA251C;
}

.secondary-title a:hover {
  color: #DA251C;
}

/* Global Meta Rows */
.meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans), sans-serif;
  font-size: 11.5px;
  color: #64748B;
  font-weight: 500;
}

.meta-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #cbd5e1;
  display: inline-block;
}

.meta-read-time {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Homepage Category Sections */
.homepage-section {
  border-top: 1px solid #f1f5f9;
  padding-top: 48px;
  margin-top: 48px;
}

.homepage-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}

.section-headline {
  font-family: var(--font-serif), serif;
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  color: #000000;
  letter-spacing: -0.01em;
}

.view-more-link {
  font-family: var(--font-sans), sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.view-more-link:hover {
  color: #DA251C;
}

/* Consistent 2x2 Grid card layout */
/* Category Editorial Sections Layout: 1 Lead (Left) & 3 Stacked items (Right) */
.category-editorial-section {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 32px;
  align-items: stretch;
}

.category-lead-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f1f5f9;
  padding-right: 32px;
}

.category-list-col {
  display: flex;
  flex-direction: column;
}

.lead-editorial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lead-card-title {
  font-family: var(--font-serif), serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.lead-card-title a {
  color: #000000;
  text-decoration: none;
}

.lead-card-title a:hover {
  color: #DA251C;
}

.lead-card-excerpt {
  font-family: var(--font-sans), sans-serif;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.45;
  margin-top: 0;
  margin-bottom: 16px;
}

.lead-card-image-wrapper {
  width: 100%;
  margin-top: auto; /* Pushes image to bottom of lead card layout */
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f5f9;
}

.lead-thumbnail-img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.lead-editorial-card:hover .lead-thumbnail-img {
  transform: scale(1.01);
}

.stacked-stories-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  justify-content: space-between;
}

.stacked-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.stacked-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stacked-item-content {
  flex: 1;
  padding-right: 12px;
}

.stacked-item-title {
  font-family: var(--font-sans), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stacked-item-title a {
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.stacked-item-title a:hover {
  color: #DA251C;
}

.stacked-item-thumb-wrapper {
  flex: 0 0 90px;
  width: 90px;
  height: 60px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f5f9;
}

.stacked-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.stacked-list-item:hover .stacked-thumb-img {
  transform: scale(1.02);
}

/* Dark Newsroom Editorial Footer styling (from screenshot) */
.site-footer {
  background-color: #000000;
  color: #ffffff;
  padding: 60px 0 30px 0;
  margin-top: 80px;
  font-family: var(--font-sans), sans-serif;
  border-top: none;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-about-col {
  flex: 0 0 55%;
  max-width: 550px;
}

.footer-about-col .footer-logo {
  margin-bottom: 16px;
  font-family: var(--font-serif), serif;
  font-size: 26px;
  font-weight: bold;
}

.footer-about-col .footer-logo .logo-youth {
  color: #ffffff;
}

.footer-about-col .footer-logo .logo-wire {
  color: #DA251C;
}

.footer-about-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

.footer-links-col {
  flex: 0 0 35%;
  text-align: right;
}

.footer-vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-vertical-menu li a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.footer-vertical-menu li a:hover {
  color: #ffffff;
}

.footer-bottom-row {
  border-top: 1px solid #1e293b;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-copyright p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-social-icons a {
  color: #64748b;
  display: inline-flex;
  transition: color 0.2s ease-in-out;
}

.footer-social-icons a:hover {
  color: #ffffff;
}

.footer-sitemap-link a {
  color: #64748b;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.footer-sitemap-link a:hover {
  color: #ffffff;
}

/* Tablet & Mobile responsive footer layout */
@media (max-width: 768px) {
  .footer-top-row {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
  }
  
  .footer-about-col {
    flex: 1 1 100%;
    max-width: 100%;
  }
  
  .footer-links-col {
    flex: 1 1 100%;
    text-align: left;
  }
  
  .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Category Sections on Homepage */
.section-wrapper {
  margin-bottom: 56px;
}

.section-header {
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  padding-bottom: 8px;
  position: relative;
}

.section-headline {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  margin: 0;
  color: var(--primary);
}

.section-headline:after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  width: 45px;
  height: 3px;
  background-color: var(--secondary); /* ET Red accent block */
}

.section-more-link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
}

.section-more-link:hover {
  text-decoration: underline;
}

/* Standard Editorial Grid */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 560px) {
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.card-editorial {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.card-editorial:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.card-editorial .card-image {
  aspect-ratio: 16/9;
  background-color: #f1f5f9;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 1px;
}

.card-editorial .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.card-editorial:hover .card-image img {
  transform: scale(1.02);
}

.card-editorial h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.card-editorial h3 a:hover {
  color: var(--secondary);
}

.card-editorial p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-editorial .card-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* Opinion Section Styling */
.opinion-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
}

.opinion-main-card {
  border-right: 1px solid var(--border);
  padding-right: 32px;
}

.opinion-main-card h3 {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.opinion-main-card h3 a:hover {
  color: var(--secondary);
}

.opinion-main-card p {
  font-size: 15px;
  color: var(--body);
  margin-bottom: 16px;
}

.opinion-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.opinion-list-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}

.opinion-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.opinion-list-item h4 {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 8px;
}

.opinion-list-item h4 a:hover {
  color: var(--secondary);
}

/* Expert Speaks Homepage Strip & Cards */
.expert-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card-expert {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  padding: 20px;
  text-align: center;
  transition: var(--transition-smooth);
}

.card-expert:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.expert-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 16px;
  object-fit: cover;
  background-color: #e2e8f0;
}

.expert-name {
  font-size: 18px;
  font-family: var(--font-serif);
  color: var(--heading);
  margin-bottom: 4px;
}

.expert-credentials {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
  margin-bottom: 12px;
}

.expert-bio-preview {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expert-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: var(--transition-smooth);
}

.expert-link:hover {
  color: var(--secondary);
}

/* Article Template Style */
.article-wrapper {
  max-width: var(--max-width-reading);
  margin: 0 auto;
  padding: 24px 0;
}

.breadcrumb {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-separator {
  color: #cbd5e1;
}

.article-header {
  margin-bottom: 28px;
}

.article-header h1 {
  font-size: 46px;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  color: var(--heading);
}

.article-deck {
  font-size: 20px;
  line-height: 1.45;
  color: #475569;
  margin-bottom: 24px;
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.article-meta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.share-buttons {
  display: flex;
  gap: 8px;
}

.share-btn {
  background-color: var(--white);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.share-btn:hover {
  border-color: #cbd5e1;
  background-color: var(--bg);
  color: var(--primary);
}

/* Article Hero Image */
.article-featured-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 40px;
  border-radius: 1px;
}

.article-featured-image img,
.article-featured-image .hero-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.article-image-caption {
  font-size: 13px;
  color: #64748B;
  margin-top: 10px;
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
}

.image-credit {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Body Content Typography */
.article-body {
  font-size: 19px;
  line-height: 1.75;
  color: #27272a;
}

.article-body p {
  margin-bottom: 24px;
}

.article-body h2 {
  font-size: 28px;
  margin: 40px 0 20px;
  color: var(--heading);
  letter-spacing: -0.01em;
}

.article-body ul, .article-body ol {
  margin-bottom: 24px;
  padding-left: 28px;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body blockquote {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.4;
  color: var(--secondary);
  border-left: 3px solid var(--secondary);
  padding-left: 24px;
  margin: 36px 0;
  font-style: italic;
}

/* Premium Outline-only Components */
.editorial-widget {
  border: 1px solid var(--border);
  background-color: var(--white);
  padding: 24px;
  margin: 36px 0;
  border-radius: 1px;
}

.widget-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--primary);
  padding-bottom: 6px;
  display: inline-block;
}

.takeaway-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.takeaway-list li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.takeaway-list li::before {
  content: "•";
  color: var(--secondary);
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
}

/* Dotted Outline Facts Box */
.quick-facts-box {
  border: 1px dotted #94a3b8;
  background-color: var(--white);
  padding: 20px;
  margin: 32px 0;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.fact-item {
  font-size: 15px;
}

.fact-item strong {
  color: var(--heading);
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  margin-bottom: 2px;
}

/* Timeline component */
.editorial-timeline {
  margin: 32px 0;
  border-left: 1.5px solid var(--border);
  padding-left: 20px;
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--secondary);
  border: 2px solid var(--white);
}

.timeline-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 4px;
}

.timeline-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 14px;
  color: var(--body);
}

/* Author Box */
.author-box {
  border-top: 1.5px solid var(--primary);
  padding-top: 24px;
  margin-top: 48px;
  display: flex;
  gap: 20px;
}

.author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #cbd5e1;
  font-family: var(--font-serif);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  overflow: hidden;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-details h4 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.author-details p {
  font-size: 14px;
  color: #64748B;
  line-height: 1.5;
}

/* Post Navigation (Prev/Next) */
.post-navigation {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  margin-top: 36px;
  gap: 24px;
}

.post-nav-item {
  width: 50%;
}

.post-nav-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.post-nav-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.3;
}

.post-nav-item:hover .post-nav-title {
  color: var(--secondary);
}

.post-nav-next {
  text-align: right;
}

/* Footer Section */
.site-footer {
  background-color: var(--primary);
  color: #94a3b8;
  padding: 48px 24px 32px;
  border-top: 1px solid var(--border);
}

.footer-container {
  max-width: var(--max-width-site);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-about {
  max-width: 320px;
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--white);
  margin-bottom: 12px;
}

.footer-about p {
  font-size: 14px;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-link-group h5 {
  font-family: var(--font-sans);
  color: var(--white) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

.footer-link-group ul {
  list-style: none;
}

.footer-link-group li {
  margin-bottom: 8px;
}

.footer-link-group a {
  font-size: 14px;
  color: #94a3b8 !important;
  background: none !important;
  padding: 0 !important;
}

.footer-link-group a:hover {
  color: var(--white) !important;
}

.footer-bottom {
  border-top: 1px solid #1e293b;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-icon:hover {
  color: var(--white);
}

/* Category/Archive Templates */
.archive-header {
  margin-bottom: 40px;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 16px;
}

.archive-title {
  font-size: 40px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.archive-description {
  font-size: 16px;
  color: #64748B;
}

.category-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.filter-btn {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9999px;
  color: var(--body);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-btn:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

.filter-btn.active {
  background-color: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}

/* Search Template */
.search-input-wrapper {
  max-width: 600px;
  margin: 0 auto 48px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 18px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--border);
  background-color: var(--white);
  color: var(--heading);
  outline: none;
  transition: var(--transition-smooth);
}

.search-input:focus {
  border-color: var(--primary);
}

.search-results-info {
  margin-bottom: 24px;
  font-size: 14px;
  color: #64748B;
  font-weight: 500;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.search-suggestions.active {
  display: block;
}

.suggestion-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: var(--bg);
}

.suggestion-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--heading);
  margin-bottom: 2px;
}

.suggestion-meta {
  font-size: 11px;
  color: #64748B;
}

/* Mobile Navigation Overlay Drawer */
.hamburger-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh;
  background-color: var(--white);
  z-index: 10001;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08);
  transition: var(--transition-smooth);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}

.hamburger-drawer.open {
  left: 0;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

.drawer-link {
  font-size: 18px;
  font-weight: 600;
  color: var(--heading);
}

.drawer-link:hover {
  color: var(--secondary);
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.3);
  z-index: 10000;
  display: none;
}

.drawer-overlay.active {
  display: block;
}

/* Comments section */
.comments-section {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  padding-top: 36px;
}

.comments-title {
  font-size: 24px;
  margin-bottom: 24px;
}

.comment-form {
  margin-bottom: 32px;
}

.comment-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 1px;
  outline: none;
  font-family: var(--font-sans);
  font-size: 15px;
  resize: vertical;
  margin-bottom: 12px;
}

.comment-textarea:focus {
  border-color: var(--primary);
}

.submit-btn {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.submit-btn:hover {
  background-color: var(--secondary);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 6px;
}

.comment-date {
  color: #64748B;
  font-weight: 400;
}

.comment-text {
  font-size: 15px;
  color: var(--body);
  line-height: 1.5;
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 48px 0;
  font-size: 16px;
  color: #64748B;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.page-numbers {
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--body);
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.page-numbers:hover,
.page-numbers.current {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Ad slots */
.ad-slot-header,
.ad-slot-footer,
.ad-slot-article {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  background-color: transparent;
}

/* Responsive Media Queries */
@media (max-width: 968px) {
  .hero-newsroom-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .hero-left-col {
    order: 3;
    border-right: none;
    padding-right: 0;
  }

  .hero-middle-col {
    order: 1;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 24px;
  }
  
  .hero-right-col {
    order: 2;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 24px;
  }
  
  .category-editorial-section {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .category-lead-col {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 24px;
  }

  .header-container {
    padding: 12px 20px;
  }

  .nav-desktop {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }
}

@media (max-width: 640px) {
  .lead-card-title,
  .lead-hero-heading-title {
    font-size: 20px !important;
  }

  .lead-thumbnail-img,
  .lead-hero-bottom-img {
    height: 180px !important;
  }

  .stacked-item-thumb-wrapper,
  .hero-right-item-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 50px;
  }
}

/* Search Overlay Styles */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.search-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.search-overlay-close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 48px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  transition: var(--transition-smooth);
}

.search-overlay-close:hover {
  color: var(--white);
}

.search-overlay-content {
  width: 90%;
  max-width: 680px;
}

.search-input-wrapper {
  position: relative;
  border-bottom: 2px solid var(--white);
  padding-bottom: 12px;
  display: flex;
  align-items: center;
}

.search-input-wrapper input[type="search"] {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-size: 32px;
  color: var(--white);
  font-family: var(--font-sans);
  padding-right: 48px;
}

.search-submit-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 16px;
  padding: 0;
  transition: var(--transition-smooth);
}

.search-submit-btn:hover {
  color: var(--white);
}

/* Style for AJAX search suggestions inside overlay */
.search-input-wrapper .search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.search-input-wrapper .search-suggestions.active {
  display: flex;
}

.search-input-wrapper .suggestion-item {
  padding: 14px 20px;
  border-bottom: 1px solid #1f2937;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: left;
}

.search-input-wrapper .suggestion-item:last-child {
  border-bottom: none;
}

.search-input-wrapper .suggestion-item:hover {
  background: #1f2937;
}

.search-input-wrapper .suggestion-title {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.search-input-wrapper .suggestion-meta {
  font-size: 12px;
  color: #94a3b8;
}

/* Category Page Two-Column Row List Layout (inspired by ET Education) */
.archive-layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 32px;
  margin-top: 24px;
}

.archive-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.archive-list-item {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
  margin-bottom: 0;
}

.archive-item-image {
  flex: 0 0 220px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 1px;
  background-color: #f1f5f9;
}

.archive-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.archive-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.archive-sidebar {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .archive-layout {
    grid-template-columns: 1fr;
  }
  .archive-list-item {
    flex-direction: column;
    gap: 16px;
  }
  .archive-item-image {
    flex: none;
    width: 100%;
    aspect-ratio: 16/9;
  }
}

@media (max-width: 480px) {
  .homepage-action-strip {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Layout Section B: 2x2 Grid Layout */
.grid-2x2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.grid-card-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.grid-card-item:nth-child(3),
.grid-card-item:nth-child(4) {
  border-bottom: none;
  padding-bottom: 0;
}

.grid-card-thumb-wrapper {
  flex: 0 0 110px;
  width: 110px;
  height: 72px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f1f5f9;
}

.grid-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.grid-card-item:hover .grid-thumb-img {
  transform: scale(1.02);
}

.grid-card-content {
  flex: 1;
}

.grid-card-title {
  font-family: var(--font-sans), sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px 0;
  letter-spacing: -0.015em;
}

.grid-card-title a {
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.grid-card-title a:hover {
  color: #DA251C;
}

.grid-card-meta {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* Floating Share Bar (Desktop-only) */
.floating-share-container {
  position: fixed;
  top: 180px;
  left: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}

@media (max-width: 1260px) {
  .floating-share-container {
    display: none; /* Hide on smaller viewports and rely on inline buttons */
  }
}

.floating-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.floating-share-btn:hover {
  background-color: #DA251C;
  color: #ffffff;
  border-color: #DA251C;
  transform: translateY(-2px);
}

.floating-share-btn svg {
  width: 16px;
  height: 16px;
}

/* Single Article TOC Sidebar layout (Desktop-only) */
.article-toc-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  width: 250px;
  padding: 20px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-left: 28px;
}

@media (max-width: 1200px) {
  .article-toc-sidebar {
    display: none; /* Hide on smaller screens */
  }
}

.toc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  margin-top: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 6px;
}

.toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toc-item a {
  font-size: 13px;
  line-height: 1.4;
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
}

.toc-item a:hover,
.toc-item.active a {
  color: #DA251C;
  font-weight: 600;
}

@media (max-width: 768px) {
  .grid-2x2-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .grid-card-item {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
  }
  .grid-card-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   YOUTHWIRE REDESIGNED HERO, CARD, COOKIE BANNER & COMPLIANCE STYLES
   ========================================================================== */

/* Main Containers */
.yw-container {
  max-width: var(--max-width-site);
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}
@media (max-width: 992px) {
  .yw-container {
    padding: 0 24px;
  }
}
@media (max-width: 576px) {
  .yw-container {
    padding: 0 16px;
  }
}

/* Redesigned Hero Container */
.yw-hero-container {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 24px;
}

.yw-hero-main {
  position: relative;
  width: 100%;
  height: 480px; /* Fixed height container to prevent reflow */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.yw-hero-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.yw-hero-content {
  position: relative;
  z-index: 2;
  padding: 36px;
  width: 100%;
  box-sizing: border-box;
}

.yw-hero-category {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--white);
  margin-bottom: 14px;
  text-decoration: none;
}

.yw-hero-title {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 400;
}

.yw-hero-title a {
  color: var(--white);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition-smooth);
}

.yw-hero-title a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.yw-hero-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #d1d5db;
  display: flex;
  align-items: center;
  gap: 8px;
}

.yw-hero-meta-dot {
  color: #9ca3af;
}

/* Secondary Row of 3 Cards & Homepage Section Grids */
.yw-hero-secondary-row,
.yw-grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px; /* 24px - 32px gap max */
  margin-bottom: 40px;
}

/* Labeled Section Headers */
.homepage-section {
  border-top: 1px solid var(--border);
  padding-top: 40px;
  margin-top: 40px;
}

.homepage-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Reusable Card Component Across Entire Site */
.yw-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--transition-smooth);
  text-align: left;
}

.yw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.yw-card-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Fixed 16:9 Aspect Ratio */
  background-color: #f1f5f9;
  overflow: hidden;
}

.yw-card-image-wrapper img,
.yw-card-fallback-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.yw-card-fallback-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, #1f2937 100%);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: bold;
}

.yw-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
}

.yw-card-category-row {
  margin-bottom: 10px;
}

.yw-card-category-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--white);
  text-decoration: none;
}

.yw-card-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.35;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
}

.yw-card-title a {
  color: var(--primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--transition-smooth);
}

.yw-card-title a:hover {
  color: var(--secondary);
}

.yw-card-excerpt {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-card-meta {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: #64748B;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.yw-card-author a {
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition-smooth);
  display: inline-block;
  min-height: 20px; /* target spacing */
}

.yw-card-author a:hover {
  color: var(--secondary);
}

.yw-card-meta-dot {
  color: #94a3b8;
}

/* Tap targets rule */
.yw-card-author a,
.yw-card-category-pill,
.yw-hero-category,
.view-more-link,
.cookie-consent-btn {
  min-width: 44px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* Author Profile Card styling */
.author-profile-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  gap: 28px;
  margin-bottom: 40px;
  align-items: center;
}

.author-profile-avatar {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--border);
}

.author-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-profile-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: bold;
}

.author-profile-details {
  flex-grow: 1;
}

.author-profile-name {
  font-family: var(--font-serif);
  font-size: 28px;
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--primary);
}

.author-profile-beat {
  font-family: var(--font-sans);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.author-profile-bio {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
  margin-bottom: 14px;
}

.author-profile-socials {
  display: flex;
  gap: 16px;
}

.author-profile-social-link {
  color: #64748B;
  transition: var(--transition-smooth);
}

.author-profile-social-link:hover {
  color: var(--secondary);
}

/* Cookie Consent Banner Styling */
.cookie-consent-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  max-width: 360px;
  background-color: #1f2937;
  color: #f3f4f6;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  animation: slide-up-cookie 0.4s ease-out;
}

@keyframes slide-up-cookie {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.cookie-consent-text {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
}

.cookie-consent-text a {
  color: #f3f4f6;
  text-decoration: underline;
  font-weight: 600;
}

.cookie-consent-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.cookie-consent-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}

.cookie-accept-btn {
  background-color: var(--secondary);
  color: var(--white);
}

.cookie-accept-btn:hover {
  background-color: #b91c1c;
}

.cookie-decline-btn {
  background-color: #4b5563;
  color: #f3f4f6;
}

.cookie-decline-btn:hover {
  background-color: #374151;
}

/* Archive 2-column grid container */
.archive-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

/* Hero section 3-column layout grid rules */
.yw-hero-newsroom-grid {
  display: grid;
  grid-template-columns: 3.2fr 6.8fr;
  gap: 32px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.yw-hero-latest-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border);
  padding-right: 24px;
}
.yw-hero-main-area {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Redesigned Lead Featured Story (420x236) */
.yw-lead-featured-story {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  align-items: flex-start;
  text-align: left;
}

.yw-lead-image-wrapper {
  width: 420px;
  height: 236px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f1f5f9;
  flex-shrink: 0;
}

.yw-lead-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Redesigned Supporting text cards side-by-side */
.yw-hero-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  align-items: stretch;
}

.yw-hero-text-card {
  padding: 20px;
  border: 1px solid #EAEAEA;
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Responsiveness adjustments */
@media (max-width: 992px) {
  .yw-hero-secondary-row,
  .yw-grid-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .yw-hero-main {
    height: 360px;
  }
  .yw-hero-content {
    padding: 24px;
  }
  .yw-hero-title {
    font-size: 26px;
  }
  .yw-hero-secondary-row,
  .yw-grid-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .author-profile-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
  .author-profile-socials {
    justify-content: center;
  }
  .cookie-consent-banner {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: none !important;
  }
  
  /* Redesign split layouts responsiveness */
  .yw-hero-newsroom-grid,
  .yw-split-category-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .yw-hero-stacked-col,
  .yw-split-list-col {
    border-left: none !important;
    padding-left: 0 !important;
  }
  .yw-hero-latest-col {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 24px !important;
  }
  .yw-lead-featured-story {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .yw-lead-image-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
  .yw-hero-secondary-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .yw-boards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .yw-expert-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .archive-grid-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 480px) {
  .yw-boards-grid,
  .yw-expert-row {
    grid-template-columns: 1fr !important;
  }
}

/* YouthWire 4.0 Layout & Card Styles */
.yw-homepage-grid-card,
.yw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-bg);
  transition: var(--transition-smooth);
}

.yw-homepage-grid-card:hover,
.yw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.yw-medium-card-image-wrapper,
.yw-card-image-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background-color: #f1f5f9;
}

.yw-medium-card-image-wrapper img,
.yw-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.yw-homepage-grid-card:hover .yw-medium-card-image-wrapper img,
.yw-card:hover .yw-card-image-wrapper img {
  transform: scale(1.02);
}

.yw-expert-card {
  display: flex;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  background-color: var(--card-bg);
  height: 100%;
  align-items: flex-start;
  transition: var(--transition-smooth);
  box-sizing: border-box;
}

.yw-expert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.yw-expert-photo-wrapper {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f1f5f9;
}

.yw-expert-photo-fallback {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: bold;
}

/* Section Grid & Responsive Settings */
.yw-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.yw-section-grid-expert {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

@media (max-width: 1024px) {
  .yw-section-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .yw-section-grid-expert {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .yw-section-grid,
  .yw-section-grid-expert {
    grid-template-columns: 1fr !important;
  }
}

/* Redesigned Expert Speaks Showcase Cards */
.yw-expert-homepage-card {
  border: 1px solid #EAEAEA !important;
  padding: 32px 24px !important;
  border-radius: 12px !important;
  background-color: #FFFFFF !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.yw-expert-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.yw-expert-card-link:hover .yw-expert-homepage-card {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.02) !important;
  border-color: #DA251C !important;
}

.yw-expert-card-link:hover .yw-expert-read-link {
  color: #b51f17 !important;
}

/* ============================================================
   YOUTHWIRE UNIFIED TYPOGRAPHY SYSTEM
   Single source of truth — applies to every page & component
   Do not add font-size rules anywhere else in the codebase.
   ============================================================ */

/* ── Navigation ──────────────────────────────────────────── */
.nav-desktop .nav-link,
.drawer-link {
  font-family: var(--font-sans);
  font-size: var(--type-nav);      /* 16px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-primary);
}
.nav-desktop .nav-link:hover,
.nav-desktop .nav-link.current-menu-item,
.drawer-link:hover {
  color: var(--color-accent);
}

/* ── Section Headings (DM Serif Display) ─────────────────── */
.section-headline,
.homepage-section h2,
.yw-section-head {
  font-family: var(--font-serif) !important;
  font-size: var(--type-section-head) !important;  /* 34px */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-primary) !important;
  text-transform: uppercase;
}

/* ── Category / Archive Page Heading ────────────────────── */
.archive-title {
  font-family: var(--font-serif) !important;
  font-size: var(--type-category-h) !important;    /* 40px */
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--color-primary) !important;
}

/* ── Hero Headline ───────────────────────────────────────── */
.yw-hero-primary-headline,
.hero-title,
.yw-hero-head {
  font-family: var(--font-serif) !important;
  font-size: var(--type-hero-h1) !important;       /* 42px */
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--color-primary) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Featured Story Headline ─────────────────────────────── */
.featured-title,
.yw-featured-head {
  font-family: var(--font-serif) !important;
  font-size: var(--type-featured) !important;      /* 32px */
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ── Article Title (Single Post H1) ─────────────────────── */
.single-article-title,
.entry-title,
.article-headline {
  font-family: var(--font-serif) !important;
  font-size: var(--type-article-h1) !important;    /* 44px */
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--color-primary) !important;
  max-width: var(--max-width-reading-max);
}

/* ── Story Cards — Homepage, Category, Search (all unified) ── */
.yw-homepage-grid-card h3,
.yw-archive-list-card h3,
.yw-card-title,
.yw-card h3,
.yw-card h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-story-card) !important;    /* 18px */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--color-primary) !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Sidebar & Latest News Headlines ────────────────────── */
.sidebar-widget h4,
.yw-latest-headline-item h4,
.yw-archive-sidebar h4,
.yw-latest-headlines-list h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-sidebar-story) !important; /* 18px */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--color-primary) !important;
}

/* ── Metadata — universal ────────────────────────────────── */
.yw-card-meta,
.yw-card-date,
.yw-card-read-time,
.yw-card-author,
.meta-row,
.yw-latest-headline-item div,
.yw-card-meta span {
  font-family: var(--font-sans) !important;
  font-size: var(--type-meta) !important;          /* 13px */
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--color-meta) !important;
}

/* ── Category Pill / Badge ───────────────────────────────── */
.yw-card-category-pill,
.yw-card-category-row a,
.badge {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ── Article Body Typography ─────────────────────────────── */
.entry-content,
.article-body-content,
.single-post-content {
  font-family: var(--font-sans);
  font-size: var(--type-article-body);             /* 16px */
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-primary);
  max-width: var(--max-width-reading);
}

.entry-content h2,
.article-body-content h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-subheading) !important;    /* 30px */
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-top: var(--sp-4) !important;
  margin-bottom: var(--sp-2) !important;
}

.entry-content h3,
.article-body-content h3 {
  font-family: var(--font-sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-top: var(--sp-3) !important;
  margin-bottom: var(--sp-2) !important;
}

.entry-content p,
.article-body-content p {
  font-size: var(--type-article-body);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
  color: var(--color-primary);
}

/* Article standfirst / intro paragraph */
.article-standfirst,
.entry-content > p:first-of-type,
.article-intro {
  font-size: var(--type-article-intro) !important; /* 20px */
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--color-secondary) !important;
}

/* Blockquote */
.entry-content blockquote,
.article-body-content blockquote {
  font-family: var(--font-sans) !important;
  font-size: var(--type-quote) !important;         /* 22px */
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-secondary);
  border-left: 4px solid var(--color-accent);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
}

/* Captions */
figcaption,
.wp-caption-text,
.article-caption {
  font-family: var(--font-sans) !important;
  font-size: var(--type-caption) !important;       /* 14px */
  font-weight: 400 !important;
  color: var(--color-meta) !important;
  line-height: 1.5;
  margin-top: var(--sp-1);
}

/* ── Buttons ─────────────────────────────────────────────── */
button,
.btn,
.yw-btn,
input[type="submit"] {
  font-family: var(--font-sans);
  font-size: var(--type-btn);                      /* 15px */
  font-weight: 600;
  line-height: 1;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  font-family: var(--font-sans);
}
.footer-logo .logo-text {
  font-family: var(--font-serif) !important;
}
.footer-links-list a,
.footer-links-list li {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--color-primary);
}
.footer-about-desc {
  font-family: var(--font-sans) !important;
  font-size: var(--type-body) !important;
  color: var(--color-secondary) !important;
  line-height: 1.7;
}
.footer-copyright p,
.footer-copyright {
  font-family: var(--font-sans) !important;
  font-size: var(--type-meta) !important;          /* 13px */
  color: var(--color-meta) !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.yw-breadcrumbs,
.yw-breadcrumbs a,
.yw-breadcrumbs span {
  font-family: var(--font-sans) !important;
  font-size: var(--type-meta) !important;
  font-weight: 500 !important;
  color: var(--color-meta) !important;
}
.yw-breadcrumbs a:hover { color: var(--color-accent) !important; }

/* ── Search ──────────────────────────────────────────────── */
.search-input,
.search-form input {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 400;
  color: var(--color-primary);
}

/* ── Universal Card Rules ────────────────────────────────── */
.yw-homepage-grid-card,
.yw-archive-list-card,
.yw-archive-featured-card,
.yw-card {
  border-radius: var(--card-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yw-homepage-grid-card:hover,
.yw-archive-list-card:hover,
.yw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.yw-homepage-grid-card img,
.yw-archive-featured-card img,
.yw-archive-list-card img,
.yw-card img {
  aspect-ratio: var(--card-image-ratio);
  object-fit: cover;
  width: 100%;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* ── Expert Name in Cards (DM Serif) ─────────────────────── */
.yw-expert-name,
.yw-expert-homepage-card h3 {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
.yw-expert-designation {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--color-accent) !important;
  text-transform: uppercase !important;
}

/* ── Mobile Typography ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --type-hero-h1:      26px;
    --type-featured:     22px;
    --type-article-h1:   30px;
    --type-section-head: 20px;
    --type-story-card:   15px;
    --type-article-body: 17px;
    --type-article-intro:18px;
    --type-subheading:   22px;
    --type-quote:        19px;
    --type-category-h:   28px;
    --type-nav:          15px;
  }
  .entry-content,
  .article-body-content {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    --type-hero-h1:      24px;
    --type-article-h1:   26px;
    --type-section-head: 20px;
    --type-story-card:   15px;
  }
}

/* ── Card Image-to-Text Ratio Enforcement (40/60) ─────────── */
.yw-homepage-grid-card > div:first-child,
.yw-section-grid > article > div:first-child {
  max-height: var(--card-img-max-h);
  overflow: hidden;
  flex-shrink: 0;
}
.yw-homepage-grid-card > div:first-child img,
.yw-section-grid > article > div:first-child img {
  width: 100%;
  height: 100%;
  max-height: var(--card-img-max-h);
  object-fit: cover;
  display: block;
}

/* ── Homepage Grid Card Text Area ────────────────────────── */
.yw-homepage-grid-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yw-homepage-grid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Enforce 3-line clamp on ALL story headlines site-wide */
.yw-homepage-grid-card h3,
.yw-archive-list-card h3,
.yw-archive-featured-card h2,
.yw-card-title {
  font-family: var(--font-sans) !important;
  font-size: var(--type-story-card) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--color-primary) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Category story h3 override */
.archive-main-content h3 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-story-card) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Latest news feed items */
.latest-news-item h4,
.yw-latest-headlines-list h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-latest-news, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Sidebar headlines */
.yw-archive-sidebar h4 a,
.sidebar-widget h4 a {
  font-family: var(--font-sans) !important;
  font-size: var(--type-sidebar-story) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Body text color */
body, p, li, td, .entry-content, .article-body-content {
  color: var(--color-body);
}

/* Metadata — tighten globally */
.yw-card-meta,
.yw-card-meta span,
.meta-row {
  font-size: var(--type-meta) !important;
  color: var(--color-meta) !important;
  line-height: 1.5 !important;
}
/* ── Card Image-to-Text Ratio Enforcement (40/60) ─────────── */
.yw-homepage-grid-card > div:first-child,
.yw-section-grid > article > div:first-child {
  max-height: var(--card-img-max-h);
  overflow: hidden;
  flex-shrink: 0;
}
.yw-homepage-grid-card > div:first-child img,
.yw-section-grid > article > div:first-child img {
  width: 100%;
  height: 100%;
  max-height: var(--card-img-max-h);
  object-fit: cover;
  display: block;
}

/* ── Homepage Grid Card Text Area ────────────────────────── */
.yw-homepage-grid-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yw-homepage-grid-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Enforce 3-line clamp on ALL story headlines site-wide */
.yw-homepage-grid-card h3,
.yw-archive-list-card h3,
.yw-archive-featured-card h2,
.yw-card-title {
  font-family: var(--font-sans) !important;
  font-size: var(--type-story-card) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--color-primary) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Category story h3 override */
.archive-main-content h3 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-story-card) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Latest news feed items */
.latest-news-item h4,
.yw-latest-headlines-list h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--type-latest-news, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Sidebar headlines */
.yw-archive-sidebar h4 a,
.sidebar-widget h4 a {
  font-family: var(--font-sans) !important;
  font-size: var(--type-sidebar-story) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Body text color */
body, p, li, td, .entry-content, .article-body-content {
  color: var(--color-body);
}

/* Metadata — tighten globally */
.yw-card-meta,
.yw-card-meta span,
.meta-row {
  font-size: var(--type-meta) !important;
  color: var(--color-meta) !important;
  line-height: 1.5 !important;
}

/* ============================================================
   YOUTHWIRE FINAL UI/UX REFINEMENT & GLOBAL TYPOGRAPHY FIX
   ============================================================ */

/* Enforce font stack rules site-wide */
h1, h2, h3, h4, h5, h6, .yw-section-head, .section-headline, .hero-title, .featured-title, .yw-hero-primary-headline, .main-featured-content h1, .yw-archive-featured-card h2, .article-header h1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 1 & 2. Font Family Assignments ── */
/* Playfair Display - headlines only */
.yw-hero-primary-headline,
.hero-title,
.main-featured-content h1,
.yw-lead-featured-story h1,
.yw-archive-featured-card h2,
.yw-archive-featured-card h1,
.featured-title,
.section-headline,
.homepage-section > div > h2,
.yw-section-head,
.sidebar-widget-title,
.archive-title,
.article-header h1,
.entry-content h2,
.article-body-content h2,
.entry-content h3,
.article-body-content h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* Montserrat - everything else */
body, p, li, td, span, div, a, button, input, select, textarea,
.yw-homepage-grid-card h3,
.yw-archive-list-card h3,
.yw-card-title,
.yw-card h3,
.yw-card h2,
.archive-main-content h3,
.card-editorial h3,
.yw-expert-homepage-card h3,
.yw-expert-name,
.card-expert h3,
.search-results-list h3,
.latest-news-item h4,
.latest-news-item a,
.yw-latest-headline-item h4,
.yw-hero-supporting-col h4,
.sidebar-widget h4,
.yw-archive-sidebar h4,
.yw-latest-headlines-list h4,
.related-stories-section h4,
.yw-grid-row h4,
.nav-link,
.nav-desktop .nav-link,
.drawer-link,
.site-footer,
.site-footer *,
.yw-breadcrumbs,
.yw-breadcrumbs * {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}

/* Exception for Logo font */
.logo-text, .logo-text *, .footer-logo .logo-text, .footer-logo .logo-text * {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* ── 3. High Density Typography Scale & Clamping (Fully Visible) ── */

/* Hero Headline (Playfair Display · 32px · w700 · lh 1.15 · fully visible) */
.yw-hero-primary-headline,
.hero-title,
.main-featured-content h1,
.yw-lead-featured-story h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  height: auto !important;
  min-height: 73.6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 99 !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 0 12px 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* Article H1 (Playfair Display · 36px · w700 · lh 1.15) */
.article-header h1,
.yw-article-title {
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #111111 !important;
  margin: 0 0 12px 0 !important;
}

/* Featured Story / Category Featured (Playfair Display · 26px · w700 · lh 1.2 · fully visible) */
.yw-archive-featured-card h2,
.yw-archive-featured-card h1,
.featured-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 62.4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 99 !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 0 8px 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* Section Headings (Playfair Display · 26px · w700 · lh 1.2 · 1 line max · fixed height 32px) */
.section-headline,
.homepage-section > div > h2,
.yw-section-head,
.sidebar-widget-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  height: 32px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* Homepage Story / Category Story / Expert Name (Montserrat · 16px · w700 · lh 1.4 · fully visible) */
.yw-homepage-grid-card h3,
.yw-archive-list-card h3,
.yw-card-title,
.yw-card h3,
.yw-card h2,
.archive-main-content h3,
.card-editorial h3,
.search-results-list h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 44.8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 99 !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 0 6px 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* Latest News / Supporting Stories / Sidebar Stories / Related Stories (Montserrat · 15px · w700 · lh 1.4 · fully visible) */
.latest-news-item h4,
.latest-news-item a,
.yw-latest-headline-item h4,
.yw-hero-supporting-col h4,
.sidebar-widget h4,
.yw-archive-sidebar h4,
.yw-latest-headlines-list h4,
.related-stories-section h4,
.yw-grid-row h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 99 !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 0 4px 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

/* Article Body Subheadings (Playfair Display · 26px · w700 · lh 1.2) */
.entry-content h2,
.article-body-content h2,
.entry-content h3,
.article-body-content h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #111111 !important;
  margin: 24px 0 12px 0 !important;
}

/* Article Body Text (Montserrat · 15px · w400 · lh 1.7) */
.entry-content p,
.article-body-content p,
.entry-content li,
.article-body-content li {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #333333 !important;
  margin-bottom: 18px !important;
}

/* Metadata (Montserrat · 12px · w500 · lh 1.4 · #666666) */
.yw-card-meta,
.yw-card-meta span,
.meta-row,
.yw-card-meta a,
.meta-row a,
.meta-author,
.meta-date,
.article-meta-box,
.article-meta-box * {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #666666 !important;
}

/* Navigation (Montserrat · 14px · w600 · lh 1) */
.nav-link,
.nav-desktop .nav-link,
.drawer-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Buttons (Montserrat · 13px · w600 · lh 1) */
.btn,
.button,
.yw-view-more,
.yw-btn,
.share-btn {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Align card metadata automatically to bottom in flexible layouts */
.yw-card-meta,
.meta-row {
  margin-top: auto !important;
  padding-top: 6px !important;
}

/* ── 5 & 6. Aspect Ratios & Image Restrictions (Slightly Reduced Height) ── */
/* Hero primary: 420x200 (Reduced from 420x236) */
.yw-hero-lead-col img,
.yw-hero-image-wrapper img {
  aspect-ratio: 2.1 / 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 200px !important;
}

/* Homepage Cards: 300x140 (Reduced from 300x168) */
.yw-homepage-grid-card img {
  aspect-ratio: 2.14 / 1 !important;
  width: 300px !important;
  height: 140px !important;
  object-fit: cover !important;
}

/* Horizontal Cards: 220x105 (Reduced from 220x124) */
.yw-archive-list-card img,
.yw-card-image img {
  aspect-ratio: 2.1 / 1 !important;
  width: 220px !important;
  height: 105px !important;
  object-fit: cover !important;
}

/* Expert CPT photos: 80x80 (Reduced from 96x96) */
.yw-expert-homepage-card img,
.card-expert img,
.expert-photo img,
.expert-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Card layout text priority (40/60 image to text ratio) */
.yw-homepage-grid-card > div:first-child {
  height: 140px !important;
  max-height: 140px !important;
  overflow: hidden !important;
}
.yw-homepage-grid-card > div:last-child {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* Redesigned Archive Pages Layout & Styles */
.archive-layout {
  display: grid !important;
  grid-template-columns: 3fr 1fr !important;
  gap: 32px !important;
  align-items: stretch !important;
}
@media (max-width: 1024px) {
  .archive-layout {
    grid-template-columns: 1fr !important;
  }
}
.yw-archive-sidebar {
  width: 100% !important;
  position: sticky !important;
  top: 96px !important;
  height: fit-content !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
}
.yw-archive-list-card, .yw-archive-featured-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.yw-archive-list-card:hover, .yw-archive-featured-card:hover {
  transform: translateY(-2px) !important;
}
.yw-archive-list-card img, .yw-archive-featured-card img {
  transition: transform 0.2s ease !important;
}
.yw-archive-list-card:hover img, .yw-archive-featured-card:hover img {
  transform: scale(1.03) !important;
}
.yw-archive-list-card:hover h3 a, .yw-archive-featured-card:hover h2 a {
  color: var(--primary) !important;
}
.yw-numbered-pagination {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.yw-numbered-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: 'Montserrat', sans-serif !important;
  border: 1px solid var(--border) !important;
  color: #333333 !important;
  background: #ffffff !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.yw-numbered-pagination .page-numbers.current {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}
.yw-numbered-pagination .page-numbers:hover:not(.current) {
  border-color: var(--primary) !important;
  background-color: #f1f5f9 !important;
  color: var(--primary) !important;
}

/* Center-align expert speaks names */
.yw-expert-homepage-card h3,
.yw-expert-name,
.card-expert h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 44.8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 99 !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 0 6px 0 !important;
  align-self: center !important;
  text-align: center !important;
}

/* Global styling for author and expert social links */
.yw-profile-social-link {
  color: #64748b !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.2s !important;
}

.yw-profile-social-link:hover {
  color: var(--primary) !important;
}

.yw-profile-social-link svg {
  flex-shrink: 0 !important;
}

/* Responsive Layout Cards & Helper Components */

/* Featured Archive Card */
.yw-archive-featured-card {
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  gap: 24px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 24px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

.yw-archive-featured-card-image {
  width: 420px !important;
  height: 236px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: #f1f5f9 !important;
  flex-shrink: 0 !important;
}

.yw-archive-featured-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Standard Archive/CPT Profile List Card */
.yw-archive-list-card {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 24px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 24px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

.yw-archive-list-card-image {
  width: 240px !important;
  height: 135px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: #f1f5f9 !important;
  flex-shrink: 0 !important;
}

.yw-archive-list-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Author Box Biography block at bottom of single post */
.yw-author-box {
  display: flex !important;
  gap: 24px !important;
  padding: 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  background-color: #f8fafc !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.yw-author-box-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background-color: #e2e8f0 !important;
}

.yw-author-box-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Responsive Table Wrapper */
.wp-block-table,
.table-wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 24px !important;
  display: block !important;
}

.article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
}

/* Responsive Scaling Rules for smaller viewports */
@media (max-width: 768px) {
  .yw-archive-featured-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .yw-archive-featured-card-image {
    width: 100% !important;
    height: 200px !important;
  }
  .yw-archive-list-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .yw-archive-list-card-image {
    width: 100% !important;
    height: 180px !important;
  }
  .yw-author-profile-hero {
    padding: 24px 16px !important;
    margin-bottom: 32px !important;
  }
  .yw-author-profile-hero h1 {
    font-size: 24px !important;
  }
}

@media (max-width: 640px) {
  .yw-author-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .yw-hero-primary-headline {
    font-size: 24px !important;
  }
}

.yw-author-avatar-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: bold !important;
  color: var(--white) !important;
  background-color: var(--primary) !important;
  width: 100% !important;
  height: 100% !important;
}

.yw-author-box-details h4 {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
}

/* =========================================================
   COMPREHENSIVE MOBILE-FIRST RESPONSIVE SYSTEM
   YouthWire — Full audit 2026-07
   Breakpoints: 1200 | 992 | 768 | 640 | 480 | 375
   ========================================================= */

/* ── Global overflow guard ──────────────────────────────── */
html, body {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* Base images: always fluid */
img {
  max-width: 100%;
  height: auto;
}

/* ── Container horizontal padding ────────────────────────── */
.yw-container {
  padding-left: 40px;
  padding-right: 40px;
}

/* ── Authors box wrapper spacing ─────────────────────────── */
.yw-authors-boxes-wrapper {
  margin-top: 36px;
  margin-bottom: 24px;
}

/* ── .yw-section-grid default override via inline style ──── */
/* The inline style on front-page.php uses repeat(4,1fr) —
   we override here via class-level specificity for smaller screens. */

/* ── Inline hero layout: 3-col newsroom ──────────────────── */
/* The inline style on front-page.php uses 4.5fr 4.5fr 3fr.
   .yw-hero-newsroom-grid already has !important overrides at 768px,
   but we also add a tablet intermediate step: */
@media (max-width: 1024px) {
  .yw-hero-newsroom-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .yw-hero-lead-col {
    grid-column: 1 / -1 !important;
  }
  .yw-hero-latest-col {
    grid-column: 1 / -1 !important;
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 24px !important;
  }
}

/* ── Homepage Section Grid ───────────────────────────────── */
/* Override the inline repeat(4,1fr) from front-page.php */
@media (max-width: 1024px) {
  .yw-section-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .yw-section-grid-expert {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  /* Inline style on div.yw-section-grid overrides class; add important */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* Section header: stack at narrow widths */
@media (max-width: 480px) {
  .section-header,
  .yw-section-head-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .section-headline {
    font-size: 20px !important;
    height: auto !important;
  }
}

/* ── Hero section image ──────────────────────────────────── */
@media (max-width: 768px) {
  .yw-hero-image-wrapper {
    max-height: none !important;
    aspect-ratio: 16/9 !important;
  }
  .yw-hero-primary-headline {
    font-size: 22px !important;
    min-height: auto !important;
  }
  .yw-hero-lead-col {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 28px !important;
  }
  .yw-hero-supporting-col {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* ── Container padding narrowing ─────────────────────────── */
@media (max-width: 768px) {
  .yw-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .yw-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Archive / Category Page ─────────────────────────────── */
@media (max-width: 768px) {
  .archive-controls .section-search-form {
    max-width: 100% !important;
  }
  .archive-title {
    font-size: 22px !important;
  }
}

/* ── Single Article Page ─────────────────────────────────── */
.single-article-layout-grid {
  /* Handled by inline style; ensure TOC hides itself. */
}

@media (max-width: 1024px) {
  .article-main-body-container {
    max-width: 100% !important;
  }
}

/* Breadcrumbs */
.yw-breadcrumbs {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Hero image on single post */
.article-featured-image img,
.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Inline share buttons (tablet/mobile bar) */
@media (max-width: 768px) {
  .share-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Key Takeaways / Quick Facts boxes */
@media (max-width: 480px) {
  .aeo-key-takeaways,
  .aeo-important-facts {
    padding: 16px !important;
  }
}

/* Related Stories grid */
@media (max-width: 640px) {
  .yw-grid-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Post navigation links */
.post-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

@media (max-width: 640px) {
  .post-navigation .nav-links {
    flex-direction: column;
  }
  .post-nav-item {
    width: 100%;
  }
}

/* ── Profile Pages (Author & Expert) ─────────────────────── */
@media (max-width: 768px) {
  /* Hero profile card */
  .yw-author-profile-hero,
  .author-profile-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 16px !important;
  }
  .author-profile-socials {
    justify-content: center !important;
  }
  /* Profile avatar */
  .author-profile-avatar,
  .expert-profile-avatar {
    margin: 0 auto 16px !important;
  }
  /* Profile info */
  .yw-author-profile-info h1,
  .author-profile-card h1 {
    font-size: 24px !important;
  }
}

/* Article list cards on profile pages */
@media (max-width: 768px) {
  .yw-archive-list-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .yw-archive-list-card-image {
    width: 100% !important;
    height: 180px !important;
  }
}

/* ── Expert Homepage Cards ───────────────────────────────── */
/* The expert cards use inline flex + padding. On tiny screens,
   reduce padding to avoid squishing. */
@media (max-width: 480px) {
  .yw-expert-homepage-card {
    padding: 20px 16px !important;
  }
}

/* ── Article Body Content Typography ─────────────────────── */
@media (max-width: 640px) {
  .article-body {
    font-size: 15px;
    line-height: 1.7;
  }
  .article-body h2 {
    font-size: 20px !important;
  }
  .article-body h3 {
    font-size: 18px !important;
  }
  .article-body blockquote {
    font-size: 18px !important;
    padding-left: 16px !important;
    margin: 24px 0 !important;
  }
}

/* Tables — always scrollable horizontally */
.article-body table,
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
}

.article-body table th,
.article-body table td,
.entry-content table th,
.entry-content table td {
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid var(--border);
  font-size: 14px;
}

/* Embedded iframes (YouTube, Google Maps, etc.) */
.article-body iframe,
.entry-content iframe {
  max-width: 100% !important;
  height: auto !important;
  min-height: 200px;
}

/* ── Footer ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .footer-links-list {
    gap: 12px !important;
  }
  .footer-about-desc {
    font-size: 13px !important;
    padding: 0 8px;
  }
}

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 480px) {
  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* ── Search results ──────────────────────────────────────── */
@media (max-width: 640px) {
  .search-results-list {
    gap: 16px !important;
  }
}

/* ── Inline styles on supporting column cards ────────────── */
/* Hero supporting article: image thumbnail */
@media (max-width: 480px) {
  .yw-hero-supporting-col article {
    gap: 10px !important;
  }
  .yw-hero-supporting-col article [style*="width: 80px"] {
    width: 64px !important;
    height: 48px !important;
  }
}

/* ── Cookie Banner ───────────────────────────────────────── */
@media (max-width: 640px) {
  .cookie-consent-banner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cookie-consent-buttons {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .cookie-consent-btn {
    flex: 1;
  }
}

/* ── Minimum tap-target sizes for interactive elements ───── */
.icon-btn,
.hamburger-btn,
.share-btn,
.nav-link,
.drawer-link,
.cookie-consent-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link,
.drawer-link {
  min-width: unset;
}

/* ── Archive featured card: mobile ──────────────────────── */
@media (max-width: 640px) {
  .yw-archive-featured-card {
    grid-template-columns: 1fr !important;
  }
  .yw-archive-featured-card-image {
    width: 100% !important;
    height: 200px !important;
  }
}

/* ── Single article: max width for readability ───────────── */
@media (min-width: 1400px) {
  .article-main-body-container {
    max-width: 820px !important;
  }
}

/* ── Expert Speaks page: responsive grid fixes ─────────────
   The expert profile grid uses inline style minmax(240px,1fr).
   On phones <600px wide, 240px min causes cards to be 240px
   (not full-width), leaving blank space on the right.
   We override with 2-col at small sizes, 1-col at very small.
   ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .expert-speaks-directory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 360px) {
  .expert-speaks-directory-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Compact expert profile cards on small screens */
@media (max-width: 600px) {
  .yw-expert-homepage-card {
    padding: 20px 12px !important;
  }
  .yw-expert-homepage-card h3 {
    font-size: 14px !important;
  }
  .yw-expert-read-link {
    font-size: 10px !important;
  }
}

/* ── Expert Speaks articles (editorial-grid) on mobile ──────
   Cards must be 2-col on tablet (≤900px) and 1-col on mobile (≤560px).
   Already handled in the editorial-grid definition above — but if
   there are conflicting overrides from later blocks, these !importants
   act as the final authority.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .editorial-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Hero Supporting Story Cards — Mobile Redesign
   Reference: headline-dominant layout, compact thumbnail,
   single-line meta, zero truncation. Applies on mobile when
   the hero grid stacks to a single full-width column.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Column wrapper: remove built-in gap (cards use padding) */
  .yw-hero-supporting-col {
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── CARD ────────────────────────────────────────────────── */
  .yw-hero-support-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 13px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .yw-hero-support-item:last-child {
    border-bottom: none !important;
    padding-bottom: 6px !important;
  }

  /* ── TEXT COLUMN (~72% of card width) ────────────────────── */
  .yw-hero-support-text {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Category: tiny, unobtrusive label — keeps YouthWire branding */
  .yw-hero-support-category {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--secondary) !important;
    margin-bottom: 3px !important;
    display: block !important;
    text-decoration: none !important;
    line-height: 1 !important;
  }

  /* ── HEADLINE — FULL DISPLAY, NO TRUNCATION AT ALL ────────── */
  .yw-hero-support-headline,
  .yw-hero-support-item h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Hard reset all clamp / overflow / ellipsis */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ── META: Date | Read time — always single line ─────────── */
  .yw-hero-support-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    gap: 0 !important;
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 0 !important;
  }

  .yw-hero-support-meta .yw-meta-sep {
    color: #cbd5e1 !important;
    margin: 0 5px !important;
    flex-shrink: 0 !important;
  }

  /* ── THUMBNAIL (~28% of card width, percentage-based) ──────
     Using width: 28% ensures it scales properly on every
     phone from 320px to 768px without needing fixed pixels.
     aspect-ratio controls height automatically.
     ─────────────────────────────────────────────────────────── */
  .yw-hero-support-thumb {
    flex-shrink: 0 !important;
    width: 28% !important;
    min-width: 72px !important;
    max-width: 108px !important;
    height: auto !important;       /* let aspect-ratio drive height */
    aspect-ratio: 4 / 3 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    align-self: flex-start !important;
    margin-top: 1px !important;    /* optical alignment with category label */
    background-color: #f1f5f9 !important;
  }

  .yw-hero-support-thumb a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .yw-hero-support-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-ONLY HOMEPAGE REDESIGN
   YouthWire — July 2026
   ───────────────────────────────────────────────────────────────
   !! DESKTOP IS LOCKED !!
   Every rule is scoped to max-width: 767px.
   Nothing above 768px is affected.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ────────────────────────────────────────────────────────────
     1. HERO NEWSROOM GRID — stack to single column
     ──────────────────────────────────────────────────────────── */
  .yw-hero-newsroom-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 16px !important;
    margin-bottom: 28px !important;
    padding-bottom: 24px !important;
  }

  /* ────────────────────────────────────────────────────────────
     2. HERO LEAD STORY — Careers360-inspired: image first
     ──────────────────────────────────────────────────────────── */
  .yw-hero-lead-col {
    border-right: none !important;
    padding-right: 0 !important;
  }

  .yw-lead-featured-story {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Image: FULL WIDTH, top of card, 16:9, no max-height cap */
  .yw-hero-image-wrapper {
    order: -1 !important;       /* image above headline */
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
  }

  .yw-hero-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Headline: large, readable */
  .yw-hero-primary-headline {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Excerpt: 2 lines, subtle */
  .yw-lead-featured-story > p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    -webkit-line-clamp: 2 !important;
    color: #555 !important;
  }

  /* Meta line */
  .yw-lead-featured-story > .yw-card-meta {
    font-size: 12px !important;
    gap: 6px !important;
  }

  /* ────────────────────────────────────────────────────────────
     3. SUPPORTING STORIES — compact headline-first cards
     (The yw-hero-support-* rules from the previous block
      above already handle these. We reinforce and tighten.)
     ──────────────────────────────────────────────────────────── */
  .yw-hero-supporting-col {
    gap: 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--border) !important;
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Tighter card padding */
  .yw-hero-support-item {
    padding: 12px 0 !important;
  }

  /* Headline: full display, never truncated */
  .yw-hero-support-item h4,
  .yw-hero-support-headline {
    font-size: 15px !important;
    line-height: 1.4 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Thumbnail: small, ~88px */
  .yw-hero-support-thumb {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 4px !important;
  }

  /* ────────────────────────────────────────────────────────────
     4. LATEST NEWS COLUMN — clean compact list
     ──────────────────────────────────────────────────────────── */
  .yw-hero-latest-col {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
  }

  .yw-latest-headline-item {
    padding-bottom: 10px !important;
  }

  .yw-latest-headline-item h4 {
    font-size: 14px !important;
    line-height: 1.45 !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin-bottom: 4px !important;
  }

  /* ────────────────────────────────────────────────────────────
     5. HOMEPAGE SECTION HEADER — tighter, stacked
     ──────────────────────────────────────────────────────────── */
  .homepage-section {
    margin-bottom: 32px !important;
    padding-bottom: 28px !important;
  }

  .section-header {
    margin-bottom: 16px !important;
    padding-bottom: 6px !important;
  }

  .section-headline {
    font-size: 20px !important;
    height: auto !important;
  }

  /* ────────────────────────────────────────────────────────────
     6. CATEGORY SECTION GRID CARDS — horizontal compact layout
     Inspired by Careers360: on mobile, the first card gets a
     full-width image-on-top treatment, remaining cards become
     compact horizontal text+thumb rows.
     ──────────────────────────────────────────────────────────── */
  .yw-section-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* All cards: reset to horizontal row */
  .yw-homepage-grid-card {
    flex-direction: row !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 14px 0 !important;
    gap: 12px !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .yw-homepage-grid-card:last-child {
    border-bottom: none !important;
  }

  /* FIRST CARD: full-width image-on-top (Careers360 hero style) */
  .yw-section-grid > .yw-homepage-grid-card:first-child {
    flex-direction: column !important;
    gap: 0 !important;
    padding-top: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }

  /* First card image: full width 16:9 */
  .yw-section-grid > .yw-homepage-grid-card:first-child > div:first-child {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }

  .yw-section-grid > .yw-homepage-grid-card:first-child > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* First card text */
  .yw-section-grid > .yw-homepage-grid-card:first-child > div:last-child {
    padding: 0 !important;
  }

  .yw-section-grid > .yw-homepage-grid-card:first-child h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* REMAINING CARDS: horizontal text+thumb */
  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) {
    align-items: flex-start !important;
  }

  /* Text column in remaining cards: takes priority */
  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) > div:last-child {
    order: -1 !important;
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) h3 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin-bottom: 5px !important;
  }

  /* Image column in remaining cards: small thumbnail */
  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) > div:first-child {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
  }

  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) > div:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Category badge in remaining cards: tiny */
  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) > div:last-child > a:first-child {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  /* Meta in remaining cards */
  .yw-section-grid > .yw-homepage-grid-card:not(:first-child) > div:last-child > div:last-child {
    font-size: 12px !important;
    gap: 4px !important;
    margin-top: 4px !important;
  }

  /* ────────────────────────────────────────────────────────────
     7. EXPERT CARDS SECTION — 2-col compact grid
     ──────────────────────────────────────────────────────────── */
  .yw-expert-homepage-card {
    padding: 20px 14px !important;
  }

  .yw-expert-homepage-card h3 {
    font-size: 14px !important;
  }

  .yw-expert-read-link {
    font-size: 10px !important;
  }

  /* ────────────────────────────────────────────────────────────
     8. AD CONTAINERS — full width, less margin
     ──────────────────────────────────────────────────────────── */
  .yw-ad-container {
    margin: 20px 0 !important;
    padding: 0 !important;
  }

  /* ────────────────────────────────────────────────────────────
     9. GLOBAL MOBILE SPACING
     ──────────────────────────────────────────────────────────── */
  .yw-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Less vertical space between sections */
  .homepage-section + .homepage-section {
    margin-top: 24px !important;
  }

  /* Footer tighter */
  .site-footer {
    margin-top: 40px !important;
    padding: 20px 0 !important;
  }
}

/* ────────────────────────────────────────────────────────────
   10. HUMAN-READABLE HTML SITEMAP PAGE
   ──────────────────────────────────────────────────────────── */
.yw-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.yw-sitemap-articles-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 48px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.yw-sitemap-page a {
  transition: color 0.2s, outline-color 0.2s;
}
.yw-sitemap-page a:focus {
  outline: 2px solid var(--secondary) !important;
  outline-offset: 4px;
}
.yw-sitemap-search-field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}

@media (max-width: 767px) {
  .yw-sitemap-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .yw-sitemap-articles-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   11. FEATURED IMAGE CAPTION STYLING
   ──────────────────────────────────────────────────────────── */
.featured-image-caption {
  margin-top: 8px !important;
  margin-bottom: 24px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #666666 !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .featured-image-caption {
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   YOUTHWIRE PERFORMANCE & ACCESSIBILITY OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */

/* Expanded Touch Targets (Minimum 48px) */
.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 12px !important;
}

.icon-btn {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.share-btn {
  min-height: 48px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.floating-share-btn {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Keyboard Accessibility Focus Indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #DA251C !important;
  outline-offset: 2px !important;
}

/* ── Modern Branded Pagination ── */
.yw-numbered-pagination,
.pagination,
.yw-pagination-container {
  margin-top: 40px !important;
  display: flex !important;
  justify-content: center !important;
}

.yw-numbered-pagination .nav-links,
.pagination .nav-links,
.yw-pagination-container .nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
}

.yw-numbered-pagination .page-numbers,
.pagination .page-numbers,
.yw-pagination-container .page-numbers,
.yw-pagination-container a,
.yw-pagination-container span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans), 'Montserrat', sans-serif !important;
  border: 1px solid var(--border) !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border-radius: 9999px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.yw-numbered-pagination .page-numbers.current,
.pagination .page-numbers.current,
.yw-pagination-container .page-numbers.current,
.yw-pagination-container span.current {
  background-color: var(--secondary) !important;
  color: #ffffff !important;
  border-color: var(--secondary) !important;
}

.yw-numbered-pagination .page-numbers:hover:not(.current),
.pagination .page-numbers:hover:not(.current),
.yw-pagination-container .page-numbers:hover:not(.current),
.yw-pagination-container a:hover:not(.current) {
  border-color: var(--primary) !important;
  background-color: #f1f5f9 !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.yw-numbered-pagination .page-numbers:focus-visible,
.pagination .page-numbers:focus-visible,
.yw-pagination-container .page-numbers:focus-visible,
.yw-pagination-container a:focus-visible {
  outline: 3px solid var(--secondary) !important;
  outline-offset: 2px !important;
}

.yw-numbered-pagination .screen-reader-text,
.pagination .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}