/* =====================================================================
   SNEWS Homepage (template-snews-home.php)
   Full-width, proportional layout. Sizes are derived from the container
   width (container query units, 1cqw = 1% of the content width) so the
   wireframe proportions hold from a 1024px laptop to a 2560px monitor.
   Portal palette: #c00000. Header is not styled here.
   ===================================================================== */

.snews-home {
  --snh-red: #c00000;
  --snh-ink: #111111;
  --snh-text: #222222;
  --snh-muted: #777777;
  --snh-line: #e6e6e6;
  --snh-soft: #f7f7f7;
  --snh-font: 'Mukta', 'Noto Sans Devanagari', sans-serif;
  font-family: var(--snh-font);
  background: #ffffff;
}

/* Side gutters follow the wireframe ratio (26px at 1024px = ~2.5%) */
.snews-home-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 1.6vw, 32px) clamp(12px, 2.5vw, 56px) clamp(32px, 3vw, 64px);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: snh;
}

/* Spacing scale tied to width */
.snews-home-container {
  --snh-gap: clamp(14px, 1.4cqw, 32px);
  --snh-section-gap: clamp(24px, 2.6cqw, 56px);
}

.snews-home .snews-home-section,
.snews-home .snews-latest-section,
.snews-home .snews-breaking-ticker-bar {
  margin: 0 0 var(--snh-section-gap) 0;
}
.snews-home .snews-breaking-ticker-bar { margin-bottom: var(--snh-gap) !important; }
.snews-home .snews-home-section:last-child { margin-bottom: 0; }

.snews-home :where(h2, h3, h4) { margin-top: 0; }
.snews-home :where(ol, ul) { margin-left: 0; }

/* Section headings scale gently */
.snews-home .snews-latest-title { font-size: clamp(20px, 1.35cqw, 28px); }
.snews-home .snews-view-all { font-size: clamp(14px, 0.85cqw, 17px); }

/* Shared image fallback */
.snews-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a0000 0%, #c00000 100%);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 13px;
}

/* ---------- Hero row ----------
   Hero takes 62% of the width at a 16:9 ratio; the stacked column matches
   its height. Capped by the viewport so it never pushes everything below
   the fold on very wide, short screens. */
.snews-home .snews-section-hero-row {
  gap: var(--snh-gap);
  --snh-hero-h: clamp(320px, calc((62cqw - var(--snh-gap) / 2) * 0.5625), 78vh);
}
.snews-home .snews-hero-col {
  flex: 0 0 calc(62% - var(--snh-gap) / 2) !important;
  width: calc(62% - var(--snh-gap) / 2) !important;
}
.snews-home .snews-stacked-col {
  flex: 0 0 calc(38% - var(--snh-gap) / 2) !important;
  width: calc(38% - var(--snh-gap) / 2) !important;
}
.snews-home .snews-hero-slider-wrapper { height: var(--snh-hero-h) !important; }
.snews-home .snews-hero-bottom-container {
  left: clamp(16px, 2cqw, 40px);
  right: clamp(16px, 2cqw, 40px);
  bottom: clamp(22px, 2.2cqw, 48px);
}
.snews-home .snews-hero-title { font-size: clamp(20px, 1.75cqw, 38px); line-height: 1.3; }
.snews-home .snews-hero-cat-tag { font-size: clamp(12px, 0.75cqw, 15px); }
.snews-home .snews-hero-meta { font-size: clamp(12px, 0.7cqw, 15px); }

.snews-home .snews-stacked-posts-container {
  height: var(--snh-hero-h) !important;
  border: 1px solid var(--snh-line);
  border-radius: 4px;
  padding: 0 clamp(10px, 1cqw, 20px);
}
.snews-home .snews-stacked-card {
  height: 25%;
  padding: 0;
  gap: clamp(12px, 1.1cqw, 24px);
}
/* Thumbnail: 16:10, sized from the row height so 4 always fit */
.snews-home .snews-stacked-thumb {
  height: calc(var(--snh-hero-h) / 4 - clamp(16px, 1.4cqw, 28px));
  width: auto;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
}
.snews-home .snews-stacked-title {
  font-size: clamp(14px, 1cqw, 21px);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snews-home .snews-stacked-meta { font-size: clamp(11px, 0.7cqw, 14px); }

/* ---------- Topic chips ---------- */
.snews-topic-chips {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--snh-line);
  border-radius: 4px;
  padding: clamp(8px, 0.6cqw, 12px) clamp(10px, 0.8cqw, 16px);
  background: var(--snh-soft);
}
.snews-chips-label {
  flex-shrink: 0;
  background: var(--snh-red);
  color: #ffffff;
  font-size: clamp(13px, 0.8cqw, 16px);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 2px;
}
.snews-chips-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.snews-chips-track::-webkit-scrollbar { display: none; }
.snews-chip {
  flex-shrink: 0;
  font-size: clamp(14px, 0.8cqw, 16px);
  font-weight: 600;
  color: var(--snh-text);
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 999px;
  padding: 3px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.snews-chip:hover,
.snews-chip:focus-visible {
  color: #ffffff;
  background: var(--snh-red);
  border-color: var(--snh-red);
}

/* ---------- Feature block ----------
   Right side: 2x2 cards with 16:9 images. The banner stretches to the
   same height, which works out to roughly 16:9 at every width. */
.snews-feature-grid {
  display: grid;
  grid-template-columns: 56fr 44fr;
  gap: var(--snh-gap);
  align-items: stretch;
}
.snews-feature-banner {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  min-height: 320px;
  background: #000;
}
.snews-feature-banner-media,
.snews-feature-banner-media img,
.snews-feature-banner-media .snews-img-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.snews-feature-banner-media img { transition: transform .4s ease; }
.snews-feature-banner:hover .snews-feature-banner-media img { transform: scale(1.04); }
.snews-feature-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 72%, rgba(0,0,0,.95) 100%);
  pointer-events: none;
}
.snews-feature-banner-body {
  position: absolute;
  left: clamp(16px, 1.8cqw, 40px);
  right: clamp(16px, 1.8cqw, 40px);
  bottom: clamp(16px, 1.8cqw, 40px);
  z-index: 2;
  color: #ffffff;
  max-width: 900px;
}
.snews-feature-banner-title {
  font-size: clamp(20px, 1.6cqw, 34px);
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 8px;
}
.snews-feature-banner-title a { color: #ffffff !important; text-decoration: none; }
.snews-feature-banner-title a:hover { text-decoration: underline; }
.snews-feature-banner-excerpt {
  font-size: clamp(14px, 0.85cqw, 18px);
  line-height: 1.55;
  color: #e2e2e2;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snews-feature-date { font-size: clamp(12px, 0.7cqw, 14px); color: #cccccc; }

.snews-feature-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1cqw, 24px);
}
.snews-feature-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--snh-line);
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  transition: box-shadow .25s ease, transform .25s ease;
}
.snews-feature-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.snews-feature-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.snews-feature-card-media img { width: 100%; height: 100%; object-fit: cover; }
.snews-feature-card-body { padding: clamp(8px, 0.7cqw, 14px) clamp(10px, 0.8cqw, 16px); }
.snews-feature-card-cat {
  font-size: clamp(11px, 0.65cqw, 13px);
  font-weight: 700;
  color: var(--snh-red);
}
.snews-feature-card-title {
  font-size: clamp(14px, 0.95cqw, 19px);
  line-height: 1.35;
  font-weight: 700;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snews-feature-card-title a { color: var(--snh-ink); text-decoration: none; }
.snews-feature-card-title a:hover { color: var(--snh-red); }

/* ---------- Main news grid (existing shortcode) ---------- */
.snews-home .snews-latest-grid { gap: var(--snh-gap); }
.snews-home .snews-latest-thumb-wrapper {
  height: auto;
  aspect-ratio: 16 / 9;
}
.snews-home .snews-latest-card-body { padding: clamp(12px, 0.9cqw, 18px); }
.snews-home .snews-card-headline { font-size: clamp(15px, 1cqw, 20px); }
.snews-home .snews-card-headline a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snews-home .snews-card-meta { font-size: clamp(12px, 0.7cqw, 14px); }

/* ---------- Reader specials ---------- */
.snews-reader-specials {
  background: var(--snh-soft);
  border: 1px solid var(--snh-line);
  border-radius: 4px;
  padding: clamp(14px, 1.2cqw, 28px) clamp(16px, 1.4cqw, 32px);
}
.snews-specials-list {
  list-style: none;
  padding: 0 !important;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--snh-gap);
}
.snews-special-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 0.8cqw, 18px);
  min-width: 0;
}
.snews-special-rank {
  flex-shrink: 0;
  font-size: clamp(30px, 2.4cqw, 52px);
  line-height: 1;
  font-weight: 800;
  color: var(--snh-red);
  min-width: 0.7em;
}
.snews-special-thumb {
  flex-shrink: 0;
  width: clamp(78px, 6.5cqw, 150px);
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
}
.snews-special-thumb img { width: 100%; height: 100%; object-fit: cover; }
.snews-special-body { min-width: 0; }
.snews-special-title {
  font-size: clamp(14px, 0.95cqw, 19px);
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snews-special-title a { color: var(--snh-ink); text-decoration: none; }
.snews-special-title a:hover { color: var(--snh-red); }
.snews-special-meta { font-size: clamp(12px, 0.7cqw, 14px); color: var(--snh-muted); }

/* ---------- YouTube grid ---------- */
.snews-yt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--snh-gap);
}
.snews-yt-card { min-width: 0; }
.snews-yt-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.snews-yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease, opacity .3s ease;
}
.snews-yt-thumb:hover img { transform: scale(1.05); opacity: .85; }
.snews-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.snews-yt-play svg { width: clamp(46px, 3.6cqw, 80px); height: auto; }
.snews-yt-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0,0,0,.8);
  color: #ffffff;
  font-size: clamp(11px, 0.65cqw, 13px);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 2px;
}
.snews-yt-body { padding-top: clamp(8px, 0.6cqw, 12px); }
.snews-yt-title {
  font-size: clamp(14px, 0.95cqw, 19px);
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snews-yt-title a { color: var(--snh-ink); text-decoration: none; }
.snews-yt-title a:hover { color: var(--snh-red); }
.snews-yt-date { font-size: clamp(12px, 0.7cqw, 14px); color: var(--snh-muted); }

/* YouTube modal */
.snews-yt-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.snews-yt-modal[hidden] { display: none; }
.snews-yt-modal-inner {
  position: relative;
  width: min(1280px, 100%, calc((100vh - 120px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.snews-yt-modal-inner iframe { width: 100%; height: 100%; border: 0; }
.snews-yt-modal-close {
  position: absolute;
  top: -42px;
  right: 0;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* ---------- Full width: Astra content wrappers (not the header) ---------- */
.page-template-template-snews-home #content > .ast-container {
  max-width: 100% !important;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block;
}
.page-template-template-snews-home #primary {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Responsive (by container width) ---------- */
@container snh (max-width: 980px) {
  .snews-home .snews-section-hero-row {
    flex-direction: column !important;
    --snh-hero-h: clamp(240px, 56.25cqw, 70vh);
  }
  .snews-home .snews-hero-col,
  .snews-home .snews-stacked-col {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .snews-home .snews-stacked-posts-container { height: auto !important; }
  .snews-home .snews-stacked-card { height: auto; padding: 10px 0; }
  .snews-home .snews-stacked-thumb { height: auto; width: clamp(110px, 22cqw, 180px); }
  .snews-feature-grid { grid-template-columns: 1fr; }
  .snews-feature-banner { aspect-ratio: 16 / 9; min-height: 260px; }
  .snews-specials-list { grid-template-columns: repeat(2, 1fr); }
  .snews-yt-grid { grid-template-columns: repeat(2, 1fr); }
  .snews-home .snews-latest-grid { grid-template-columns: repeat(2, 1fr); }
}

@container snh (max-width: 560px) {
  .snews-home .snews-hero-title { font-size: 18px; }
  .snews-feature-banner { aspect-ratio: 4 / 3; }
  .snews-feature-banner-excerpt { display: none; }
  .snews-specials-list { grid-template-columns: 1fr; }
  .snews-home .snews-latest-grid { grid-template-columns: 1fr; }
  .snews-yt-grid { gap: 12px; }
  .snews-yt-title { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .snews-home *,
  .snews-home *::before,
  .snews-home *::after { transition: none !important; }
}