/*
 * media-responsive.css
 * Responsive overrides for media.php (berita/news page).
 * main.css sets 3-col grid; responsive.css jumps to 1-col at ≤768px.
 * This file adds the missing 2-col tablet layout and tightens spacing.
 * Loaded last (before </body>) so it wins cascade.
 * Grid progression: 3 col (≥1024) → 2 col (600-1023) → 1 col (≤599)
 */

/* ============================================================
   TAB BUTTONS — stay horizontal at all sizes
   main.css fixes each button at width:272px → wraps on tablet.
   Force flex row: items share space equally, no wrap.
   ============================================================ */
@media (max-width: 1200px) {

  /* Nav pill wrapper: full width, no wrapping */
  .section-media-page-content .header-tab-media .nav {
    width: 100% !important;
    flex-wrap: nowrap !important;
    column-gap: 8px !important;
  }

  /* Each nav item fills equal share */
  .section-media-page-content .header-tab-media .nav-item {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Override the hardcoded 272px width */
  .section-media-page-content .header-tab-media .nav-item .nav-link {
    width: 100% !important;
    font-size: 18px !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  .section-media-page-content .header-tab-media .nav-item .nav-link {
    font-size: 15px !important;
    padding: 9px 6px !important;
  }
}

@media (max-width: 480px) {
  .section-media-page-content .header-tab-media .nav-item .nav-link {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }

  .section-media-page-content .header-tab-media .nav {
    column-gap: 4px !important;
    padding: 6px 10px !important;
  }
}

/* ============================================================
   TABLET LANDSCAPE + PORTRAIT  (≤ 1023px)
   Switch from 3-col to 2-col grid
   ============================================================ */
@media (max-width: 1023px) {

  /* Container padding: 112px sides → 40px */
  .section-media-page-content-container {
    padding: 40px 40px 60px !important;
  }

  /* 2-column card grid */
  .section-media-page-content .body-tab-media__item-box {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-top: 28px !important;
    margin-bottom: 32px !important;
  }

  .section-media-page-content .body-tab-media__item-box .card-article {
    width: 100% !important;
  }

  /* Card image height */
  .section-media-page-content .body-tab-media__item-box .card-article-top {
    height: 180px !important;
    max-height: unset !important;
  }
}

/* ============================================================
   TABLET PORTRAIT  (≤ 768px)
   Keep 2-col, tighten further
   ============================================================ */
@media (max-width: 768px) {

  .section-media-page-content-container {
    padding: 28px 20px 48px !important;
  }

  /* Still 2-col on tablet portrait */
  .section-media-page-content .body-tab-media__item-box {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 20px !important;
    margin-bottom: 24px !important;
  }

  .section-media-page-content .body-tab-media__item-box .card-article-top {
    height: 160px !important;
  }

  .card-article-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .card-article-desc {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  /* Category tab nav */
  .section-media-page-content .header-tab-media {
    margin-bottom: 24px !important;
  }
}

/* ============================================================
   LARGE PHONE  (≤ 599px)
   Switch to 1 column + dropdown tab
   ============================================================ */
@media (max-width: 599px) {

  /* Sembunyikan nav pills, tampilkan select dropdown */
  .section-media-page-content .header-tab-media.header-tab-media-dekstop {
    display: none !important;
  }
  .section-media-page-content .header-tab-media.header-tab-media-mobile {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 16px !important;
    width: 100%;
  }
  .header-tab-media-title {
    font-family: Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #556472;
    margin: 0;
  }
  .select-tab {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #c8dcea;
    border-radius: 10px;
    font-family: Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #22313f;
    background: #fff;
    cursor: pointer;
    appearance: auto;
  }
  .select-tab:focus {
    outline: none;
    border-color: #3696d1;
  }

  .section-media-page-content-container {
    padding: 20px 16px 40px !important;
  }

  /* 1 column on phone */
  .section-media-page-content .body-tab-media__item-box {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 20px !important;
  }

  .section-media-page-content .body-tab-media__item-box .card-article-top {
    height: 200px !important;
  }

  .card-article {
    width: 100% !important;
  }

  /* Title & desc */
  .card-article-title {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .card-article-desc {
    font-size: 13px !important;
    line-height: 20px !important;
  }

  /* Hero text */
  .huruf_banner_contact h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .huruf_banner_contact p {
    font-size: 14px !important;
  }

  /* Pagination */
  .pagination-iai {
    margin-top: 8px !important;
  }

  .pagination-iai .pagination {
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ============================================================
   SMALL PHONE  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  .section-media-page-content-container {
    padding: 16px 12px 32px !important;
  }

  .section-media-page-content .body-tab-media__item-box {
    gap: 14px !important;
  }

  .section-media-page-content .body-tab-media__item-box .card-article-top {
    height: 180px !important;
  }

  .card-article {
    border-radius: 12px !important;
    padding: 10px !important;
  }

  .card-article-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .huruf_banner_contact h1 {
    font-size: 20px !important;
  }

  .pagination-iai .page-item .page-link {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }
}

/* ============================================================
   VERY SMALL PHONE  (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {

  .section-media-page-content-container {
    padding: 12px 10px 24px !important;
  }

  .section-media-page-content .body-tab-media__item-box {
    gap: 12px !important;
  }

  .section-media-page-content .body-tab-media__item-box .card-article-top {
    height: 160px !important;
  }

  .huruf_banner_contact h1 {
    font-size: 18px !important;
  }

  .pagination-iai .page-item .page-link {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }
}