/* ==============================================
   CW Chu College Newsletter — Responsive Styles
   ============================================== */

@media (min-width: 1201px) {
  .two-cols {
    column-count: 2;
    gap: 25px;
  }
}

@media (max-width: 1300px) {
  .content-wrapper { width: 100%; }
}

/* --- Root font-size scaling ---
   Scales ALL font sizes proportionally at each breakpoint.
   16px desktop → 15px → 14px → 13px on small mobiles. */
@media (max-width: 1100px) {
  html { font-size: 93.75%; }
}

@media (max-width: 768px) {
  html { font-size: 87.5%; }
  .language-switcher li::before {
    margin-top: -7px;
    height: 14px;
  }
}
/*
@media (max-width: 560px) {
  html { font-size: 75%; }
}
*/

@media (max-width: 480px) {
  html { font-size: 80%; }
  .language-switcher li::before {
    margin-top: -6px;
    height: 12px;
  }
}

@media (max-width: 1000px) {
  .invitation-inner {
    flex-direction: column;
    text-align: center;
    padding: 2.1875rem 1.875rem; /* 35px 30px */
  }

  .invitation-left {
    flex-direction: column;
    gap: 10px;
  }

  .invitation-right {
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }

  .invitation-date-badge {
    left: 0;
  }

  .invitation-meta {
    align-items: center;
  }
}

@media (max-width: 768px) {
  .articles-grid,
  .articles-grid-2col,
  .related-cards {
    gap: 30px;
  }
  .article-body {
    padding: 1.125rem 1.25rem 1.375rem 1.25rem; /* 18px 20px 22px 20px */
  }
  .events-grid {
    grid-template-columns: 1fr;
  }

  /* Header title gets an extra reduction beyond root scaling
     (desktop 3rem → here effectively ~2rem visually) */
  .header-title {
    font-size: 2.25rem; /* was 36px */
  }

  .content-wrapper {
    padding: 3.125rem 1.5625rem 0 1.5625rem; /* 50px 25px 0 25px */
  }

  .invitation-title {
    font-size: 1.5rem; /* was 24px */
  }

  /* When cards stack vertically, don't force equal title heights */
  .article-header {
    --article-header-min-h: 0px;
  }

  /* Detail page adjustments */
  .article-detail-title {
    font-size: 1.875rem; /* was 30px */
  }

  .article-detail-image {
    height: 250px;
  }

  .article-detail-content p,
  .article-detail-content li {
    font-size: 1rem; /* was 16px */
  }

  .announcement-inner {
    padding: 1.875rem 1.25rem; /* 30px 20px */
  }

  .announcement-title {
    font-size: 1.625rem; /* was 26px */
  }

  .award-card {
    padding: 1.125rem 1.25rem; /* 18px 20px */
  }

  .awards-grid {
    display: block;
  }
  .award-card {
    margin-bottom: 0.625rem; /* 10px */
  }
  .header-logo img {
    height: 40px;
  }
  .header-titles {
    padding: 40px 0;
  }
}

@media (max-width: 560px) {
  .newsletter-details .content-wrapper,
  .single-story .content-wrapper {
    padding-left: 1.25rem; /* 20px */
    padding-right: 1.25rem; /* 20px */
  }
  .articles-grid,
  .articles-grid-2col {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .article-card {
    max-width: 450px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .announcement-body {
    display: block;
  }
  .announcement-image {
    width: 200px;
    max-width: 100%;
    margin: 0 auto 1.25rem auto; /* 0 auto 20px auto */
  }
  .announcement-text p {
    text-align: center;
  }
  .detail-image-two {
    display: block;
  }
  .detail-image-half {
    width: 100%;
    margin-bottom: 1.5625rem; /* 25px */
  }
  .related-cards {
    flex-direction: column;
  }
  .related-card {
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.9375rem 1.125rem; /* 15px 18px */
  }
  .language-switcher ul {
    gap: 20px;
  }
  .language-switcher li::before {
    left: -10px;
  }
  .header-logo img {
    height: 35px;
  }
}

@media (max-width: 400px) {
  .header-logo img {
    height: 29px;
  }
}