/* CSS Variables for consistent sizing */
:root {
  --main-content-width: 70%;
  --sidebar-width: 30%;
  --container-gap: var(--space-xl);
  --article-gap: var(--space-lg);
  --side-padding: 48px;
}

.news-section {
  width: 100%;
  background-color: var(--color-background);
  padding: var(--space-2xl) 0;
}

/* Changed to 2-column layout (70/30) with max-width for large screens */
.news-layout {
  display: grid;
  column-gap: var(--container-gap);
  grid-template-columns: calc(var(--main-content-width) - (var(--container-gap) / 2)) calc(var(--sidebar-width) - (var(--container-gap) / 2));
  max-width: 1600px;
  margin: 0 auto;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

/* Added centered layout variant for extension section */
.news-layout-centered {
  grid-template-columns: 1fr 8fr 1fr;
}

/* Removed left-sidebar styles, only right sidebar now */
.right-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}

.empty-sidebar {
  min-width: 0;
}

/* Main content area */
.content-main {
  width: 100%;
}

/* Added link wrapper styles for hero article */
.hero-article-link {
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: var(--space-2xl);
}

/* Added underline on hover for hero headline */
.hero-article-link:hover .hero-headline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Hero Article */
.hero-article {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 0;
  align-items: stretch;
  height: auto; /* allow hero to size to content (image natural ratio) */
  overflow: visible;
  margin-bottom: var(--space-2xl); /* added space below hero */
}

/* Home-page latest-section hero image — capped at a generous-but-not-
 * page-filling 72vh so a tall portrait upload doesn't dominate the
 * whole screen. Natural ratio preserved (no crop, no stretch); any
 * matte takes the white page background. */
.hero-image {
  width: 100%;
  max-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
}

.hero-image picture {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
}

.hero-image img,
.hero-image picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  /* `contain` keeps natural ratio inside the capped slot — no crop. */
  object-fit: contain;
  margin: 0 auto;
}

.hero-text {
 padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--color-background);
  position: relative; /* ensure pseudo positioning works */
  padding-bottom: calc(var(--space-md) + 8px);
}

.hero-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border, #000);
  bottom: 8px;
  pointer-events: none;
  opacity: 0.95;
}

.hero-category {
  color: var(--accent-color);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.hero-headline {
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.hero-summary {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: auto;
}

.hero-info {
  display: flex;
  gap: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--accent-color);
  margin-top: var(--space-lg);
}

/* Ensure title links in hero and grid underline on hover but do NOT change color */
.hero-headline .title-link,
.grid-title .title-link {
  text-decoration: none;
  color: inherit; /* keep the same color as surrounding text */
  transition: text-decoration var(--transition-fast), color var(--transition-fast);
}

/* underline on hover/focus only, keep color unchanged */
.hero-headline .title-link:hover,
.grid-title .title-link:hover,
.hero-headline .title-link:focus,
.grid-title .title-link:focus {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  color: inherit; /* override global a:hover color */
  outline: none;
}

/* Added link wrapper styles for grid articles */
.grid-article-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Added underline on hover for grid article titles */
.grid-article-link:hover .grid-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Article Grid - 3 columns with natural flow (masonry style) */
.article-grid {
  column-count: 3;
  column-gap: var(--article-gap);
}

.grid-article {
  display: flex;
  flex-direction: column;
  /* Prevent articles from breaking across columns */
  break-inside: avoid;
  margin-bottom: var(--article-gap);
  position: relative;
  padding-bottom: calc(var(--space-md) + 8px);
}

.grid-article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border, #000);
  bottom: 8px; /* sits inside the padding area */
  pointer-events: none;
  opacity: 0.95;
}

/* Picture wrapper around the grid image — `<picture>` is `inline` by
 * default, which collapses to its content width inside the masonry grid.
 * Forcing block on the wrapper lets the `<img class="grid-image">`
 * inside it actually stretch to its container's full width. */
.grid-article > picture {
  display: block;
  width: 100%;
  margin-bottom: var(--space-sm);
}

.grid-image {
  width: 100%;
  max-width: 100%;
  /* `height: auto` overrides the HTML `height=""` attribute coming from
   * the picture tag's variant dimensions. Without it the browser pins
   * the image to the literal variant height (e.g. 319px) regardless of
   * the column width — that's the "lengthened / stretched" look.
   * With `auto`, the browser scales using the embedded aspect ratio,
   * which is exactly what the legacy raw <img> behaviour was. */
  height: auto;
  display: block;
  margin-bottom: var(--space-sm);
}

/* When the image sits inside a <picture>, the picture already supplies
 * the bottom margin, so the image itself shouldn't double up. */
.grid-article > picture .grid-image {
  margin-bottom: 0;
}

.grid-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.grid-excerpt {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* underline below article excerpt / card */
.grid-article {
  /* ensure pseudo-element positions correctly under content */
  position: relative;
  /* provide room for the underline so it doesn't overlap the excerpt */
  padding-bottom: calc(var(--space-md) + 8px);
}

/* thin full-width underline placed just below the excerpt */
.grid-article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border, #000);
  bottom: 8px; /* sits inside the padding area */
  pointer-events: none;
  opacity: 0.95;
}

/* also add a subtle underline under the hero summary */
.hero-text {
  position: relative; /* ensure pseudo positioning works */
  padding-bottom: calc(var(--space-md) + 8px);
}

.hero-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border, #000);
  bottom: 8px;
  pointer-events: none;
  opacity: 0.95;
}

.grid-divider {
  border: none;
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-md) 0 0 0;
  width: 100%;
}

/* Added article-link styles for extension section */
.article-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Updated to match other hover styles with proper underline styling */
.article-link:hover .grid-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* category badge shown under images */
.grid-category,
.hero-image-meta .hero-category {
  display: inline-block;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Editors' Picks title (shared desktop + mobile)
   Updated to match tag-title visual style: large uppercase, heavy weight, decorative underline */
.editors-picks-title {
  font-size: var(--fs-3xl);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  margin: 0 0 30px 0;
  color: var(--color-text);
  position: relative;
  padding-bottom: 20px;
}

/* full-width decorative underline like .tag-title */
.editors-picks-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-text);
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .editors-picks-title {
    font-size: 48px;
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .editors-picks-title {
    font-size: 36px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
}

/* Mobile-only container for editors picks (hidden by default on desktop)
   kept hidden to avoid duplicate when mobile-right-sidebar is used */
.mobile-editors-pick {
  display: none;
  margin-top: var(--space-2xl);
}

/* Mobile-right-sidebar copy is hidden by default (only shown on very small screens) */
.mobile-right-sidebar {
  display: none;
  margin-top: var(--space-2xl);
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* Show the editors-pick widget on ALL viewports below the desktop
 * breakpoint (the desktop right-sidebar hides at 1000px), so tablets
 * and phones both get editors picks under the article grid instead
 * of "no editors picks at all" between 500px and 1000px. */
@media (max-width: 1000px) {
  .mobile-editors-pick {
    display: none;
  }

  .mobile-right-sidebar {
    display: block;
  }

  .mobile-right-sidebar .right-sidebar {
    display: block;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-right-sidebar .editors-picks-title {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .news-layout {
    padding: 0 var(--space-md);
  }

  .hero-article {
    grid-template-columns: 1fr;
    height: auto;
  }

  .hero-headline {
    font-size: var(--fs-3xl);
  }

  .article-grid {
    column-count: 2;
  }

  .grid-image { height: auto; }

  .hero-image {
    width: 100%;
    max-height: none;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 9;
  }

  .hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero-image img,
  .hero-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-height: none;
    display: block;
    margin: 0;
  }

  /* Show editors picks below the grid on phones */
  .mobile-right-sidebar {
    display: block !important;
    margin-top: var(--space-2xl);
  }

  .mobile-right-sidebar .right-sidebar {
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-right-sidebar .editors-picks-title {
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  /* Changed to 1 column for masonry layout on mobile */
  .article-grid {
    column-count: 2; /* keep 2 columns on mobile per request */
    column-gap: calc(var(--space-md) );
  }

  /* images scale to column width; no forced heights */
  .grid-image { height: auto; }
  .hero-image img { height: auto; }

  /* slightly smaller hero max-height on very small screens */
  .hero-image {
    max-height: 45vh;
    overflow: visible;
  }

  .hero-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 45vh;
    object-fit: contain;
    display: inline-block;
    margin: 0 auto;
  }

  /* tighten spacing so two columns fit nicely */
  .news-layout {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-text {
    padding: 12px;
  }

  .grid-title {
    font-size: 1rem;
  }
}

/* ensure hero-image-meta sits below the hero image and is centered on small screens */
.hero-image-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.hero-image-meta .hero-category {
  color: var(--accent-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-image-meta .hero-date {
  color: var(--accent-color);
  font-weight: 600;
}

/* grid meta (make category span full width under image; date on its own line) */
.grid-meta {
  /* switch from inline-flex to block so category occupies the full row under the image */
  display: block; /* changed from flex */
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* category becomes a full-width block under the image */
.grid-meta .grid-category {
  display: block;         /* changed from inline-block */
  width: 100%;            /* stretch left-to-right under the image */
  text-align: left;
  color: var(--accent-color);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;     /* small gap before the date */
}

/* remove any top-positioned date styling (date now lives in the bottom block) */
.grid-meta .grid-date {
  display: none; /* date moved to bottom; keep this hidden to avoid duplicates */
}

/* New: bottom meta block so date sits above the bottom underline and is right aligned */
.grid-bottom-meta {
  width: 100%;
  display: block;
  text-align: right;
  margin-top: 12px;   /* space above the date */
  margin-bottom: 12px;/* space between date and the underline pseudo-element */
  font-size: var(--fs-sm);
  color: var(--accent-color);
  font-weight: 600;
  white-space: nowrap;
}

/* Keep grid-date styling consistent (applies to the .grid-date inside .grid-bottom-meta) */
.grid-bottom-meta .grid-date {
  color: var(--accent-color);
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* Mobile: ensure bottom meta remains full-width and right-aligned on mobile */
@media (max-width: 480px) {
  .grid-bottom-meta {
    text-align: right; /* stays right on its own line; keep spacing */
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 0.82rem;
  }

  /* category still left under image (stacked) */
  .grid-meta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .grid-meta .grid-category {
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
  }
}

/* Keep the tablet/desktop layout collapse (hide desktop right-sidebar for narrower layouts)
   but do NOT make mobile-only widgets visible at this breakpoint. */
@media (max-width: 1000px) {
  .news-layout {
    grid-template-columns: 1fr;
    max-width: 100vw;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .news-layout-centered {
    grid-template-columns: 1fr;
  }

  .right-sidebar {
    display: none;
  }

  .empty-sidebar {
    display: none;
  }
}

/* Mobile-only adjustments (max-width: 480px) */
@media (max-width: 480px) {
  /* ...existing mobile styles... */
}