/* ===== News Container (Bootstrap-like responsive) ===== */
    .news-container {
      --gutter-x: 2rem;
      width: 100%;
      padding-right: calc(var(--gutter-x) * .5);
      padding-left: calc(var(--gutter-x) * .5);
      margin-right: auto;
      margin-left: auto;
    }
    @media (min-width: 500px)  { .news-container { max-width: 540px; } }
    @media (min-width: 768px)  { .news-container { max-width: 720px; } }
    @media (min-width: 992px)  { .news-container { max-width: 960px; } }
    @media (min-width: 1200px) { .news-container { max-width: 960px; } }
    @media (min-width: 1400px) { .news-container { max-width: 1140px; } }

    /* ===== Featured Article Section ===== */
    .news-featured {
      padding-top: calc(var(--header-height) + 12px + 40px);
    }
    @media (min-width: 992px) {
      .news-featured { padding-top: calc(var(--header-height) + 12px + 64px); }
    }

    /* ===== Article Card (outer wrapper) ===== */
    .article-card {
      margin-bottom: 20px;
    }

    /* Hero area: image background + text overlay */
    .article-hero {
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 30px;
    }
    @media (min-width: 768px) {
      .article-hero {
        align-items: center;
        padding: 40px;
      }
    }
    .article-card:hover .article-hover-img img {
      opacity: .7;
    }

    /* Wide layout hero */
    .article-card.layout-wide .article-hero {
      aspect-ratio: 1 / 1;
    }
    @media (min-width: 992px) {
      .article-card.layout-wide .article-hero {
        min-height: 480px;
        aspect-ratio: auto;
      }
    }

    /* Square/half layout hero */
    .article-card.layout-half .article-hero {
      aspect-ratio: 1 / 1;
    }

    /* Article text overlay */
    .article-text-wrap {
      position: relative;
      z-index: 1;
    }
    .article-label {
      color: var(--color-light);
      font-size: 22px;
      font-weight: var(--font-weight-light);
      line-height: 22px;
      text-transform: uppercase;
    }
    @media (min-width: 768px) {
      .article-label { font-size: 28px; line-height: 36px; }
    }
    .article-title {
      margin-top: 5px;
      color: var(--color-light);
      text-transform: uppercase;
    }
    @media (min-width: 768px) {
      .article-title { margin-top: 8px; }
    }
    .article-title h2 {
      font-size: 24px;
      font-weight: var(--font-weight-bold);
      line-height: 1.15;
    }
    @media (min-width: 768px) {
      .article-title h2 { font-size: 36px; }
    }
    .article-buttons {
      margin-top: 5px;
      transform: scale(.8);
      transform-origin: left;
    }
    @media (min-width: 768px) {
      .article-buttons { margin-top: 12px; transform: scale(1); }
    }
    @media (min-width: 1200px) {
      .article-buttons { margin-top: 24px; }
    }

    /* Article button */
    .article-btn {
      display: inline-flex;
      align-items: center;
      padding: 12px 40px;
      border: 2px solid var(--color-light);
      border-radius: 31px;
      color: var(--color-primary);
      background: var(--color-surface);
      font-size: var(--font-size-base);
      text-transform: uppercase;
      font-weight: var(--font-weight-base);
      line-height: 21px;
      transition: var(--transition-base);
      cursor: pointer;
    }
    .article-btn:hover {
      background: var(--color-red);
      border-color: var(--color-red);
      color: var(--color-light);
    }

    /* Article background image */
    .article-bg {
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
    }
    .article-bg picture {
      height: 100%; width: 100%;
    }
    .article-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .article-hover-img {
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      overflow: hidden;
    }
    .article-hover-img img {
      height: 100%;
      opacity: 0;
      transition: opacity .3s linear;
    }

    /* ===== Article Expandable Content ===== */
    .article-content-wrap {
      transition: height .2s ease-in-out;
      overflow: hidden;
    }
    .article-content-wrap.collapsed {
      height: 0 !important;
    }
    .article-content {
      padding-top: 20px;
      padding-bottom: 10px;
    }
    @media (min-width: 992px) {
      .article-content { padding-top: 45px; }
    }
    .article-content > * {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .article-content p {
      font-size: 16px;
      line-height: 1.67;
      color: var(--color-primary);
    }
    .article-content p strong {
      font-weight: var(--font-weight-bold);
    }
    .article-content p em, .article-content p i {
      font-style: italic;
    }

    /* ===== Articles Grid ===== */
    .news-articles {
      padding-bottom: 54px;
    }
    @media (min-width: 992px) {
      .news-articles { padding-bottom: 80px; }
    }

    .articles-row {
      display: flex;
      flex-wrap: wrap;
      margin-right: calc(-.5 * var(--gutter-x, 2rem));
      margin-left: calc(-.5 * var(--gutter-x, 2rem));
    }
    .articles-row > * {
      box-sizing: border-box;
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      padding-right: calc(var(--gutter-x, 2rem) * .5);
      padding-left: calc(var(--gutter-x, 2rem) * .5);
    }

    /* Wide article = full width (col-12) */
    .article-col-wide {
      flex: 0 0 auto;
      width: 100%;
    }

    /* Half article = full on mobile, 50% on desktop (col-12 / col-lg-6) */
    .article-col-half {
      flex: 0 0 auto;
      width: 100%;
    }
    @media (min-width: 992px) {
      .article-col-half { width: 50%; }
    }

    /* ===== Share (for future use) ===== */
    .article-socials {
      padding: 10px 0;
    }