/* ============================================
   HARIAN JOGJA - RESPONSIVE STYLESHEET (Refactored)
   ============================================
   Perubahan utama:
   - 23 @media blocks → 5 blocks (2 breakpoint)
   - 24 selector duplikat dihapus/digabung
   - font-family inline → var(--font-ui)
   - Konflik .footer & .footer-about diselesaikan
   - .latest-news-* yang muncul 2x → 1 definisi final
   - .filter-grid / .filter-submit duplikat → dihapus
   - .latest-news-list-full konflik → diselesaikan
   ============================================ */

/* ============================================
   1. BASE - MOBILE
   ============================================ */

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* ============================================
   2. TABLET — max-width: 1024px
   ============================================ */

@media (max-width: 1024px) {
  /* Header */
  .search-form {
    display: none;
  }
  .search-form.active {
    display: flex;
    position: fixed;
    top: 95px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .logo img {
    height: 32px;
  }
  .menu-toggle {
    display: flex !important;
  }
  .header-right {
    gap: 10px;
  }
  .main-nav {
    display: none;
  }
  .mobile-nav-overlay {
    display: block;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link.active {
    background: var(--bg-tertiary);
    color: var(--accent-color);
  }

  /* Ads */
  /* Block #2 & #3 digabung: ambil nilai block #3 (lebih benar — fluid) */
  .ads-970x280 {
    width: 100%;
    height: auto;
    aspect-ratio: 970/280;
  }
  .ads-desktop-only {
    display: block;
  }
  .ads-mobile-only {
    display: none;
  }

  /* Sponsor */
  .sponsor-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Read layout */
  .read-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .read-sidebar {
    order: 1;
  }
  .author-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Indeks filter */
  .filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .filter-submit {
    grid-column: span 3;
  }
}

/* ============================================
   3. MOBILE — max-width: 768px
   ============================================ */

@media (max-width: 768px) {
  /* --- Ads --- */
  .ads-desktop-only {
    display: none;
  }
  .ads-mobile-only {
    display: block;
    padding-bottom: 20px;
  }

  /* --- Hero --- */
  .hero-section {
    padding: 20px 0;
  }
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-sidebar {
    display: block;
  }
  .hero-headline-title {
    font-size: 24px;
  }
  .hero-headline-image {
    aspect-ratio: 5/4;
  }
  .hero-sub-articles {
    grid-template-columns: 1fr;
  }
  .hero-sub-article-image {
    width: 120px;
    height: auto;
  }
  .sub-article-title {
    font-size: 16px;
    font-weight: 600;
  }

  /* --- Hero sidebar --- */
  .sidebar-title {
    font-size: 16px;
  }
  .sidebar-article {
    margin-bottom: 15px;
  }
  .sidebar-article-image {
    width: 120px;
    height: auto;
  }
  .sidebar-article-title {
    font-size: 13px;
  }

  /* --- Featured --- */
  .featured-section-inner .container {
    padding: 0;
  }
  .featured-section {
    padding: 30px 0;
  }
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .featured-card-image {
    height: 250px;
  }

  /* --- Content grid --- */
  .content-grid {
    display: flex;
    flex-direction: column;
  }
  .main-articles {
    padding-right: 0;
    border-right: none;
  }

  /* --- Section Kedua (Wisata) --- */
  .main-article-layout {
    grid-template-columns: 1fr;
  }
  .section-kedua-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .section-kedua-card-image {
    aspect-ratio: 1/1;
  }
  .section-kedua-card-title {
    font-size: 15px;
  }

  /* --- Latest News ---
     Block #9 & #21 digabung: ambil nilai #21 (lebih lengkap/final) */
  .latest-news-section {
    padding: 30px 0;
  }
  .latest-news-section .container {
    padding: 30px 0;
  }
  .latest-news-grid {
    grid-template-columns: 1fr;
  }
  .latest-news-list {
    padding-right: 0;
    border-right: none;
  }
  .latest-news-link {
    grid-template-columns: 1fr 120px;
    gap: 15px;
  }
  .latest-news-excerpt {
    display: none;
  }
  .latest-news-title {
    font-size: 16px;
  }
  .latest-news-meta {
    font-size: 9px;
  }

  .latest-news-category {
    font-family: var(--font-ui); /* Ganti inline font-family → variable */
    font-size: 10px;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .latest-news-image {
    width: 100%;
  }
  .latest-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Sponsor --- */
  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Footer ---
     Block #12 & #18 konflik pada .footer-about & .footer-logo:
     Block #12: footer-about text-align:center, footer-logo justify:flex-start
     Block #18: footer-about text-align:left,   footer-logo justify:center
     → Pakai #18 (lebih masuk akal: logo center, teks kiri) */
  .footer {
    padding: 40px 0 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-about {
    align-items: center;
    text-align: left;
  }
  .footer-logo {
    justify-content: center;
  }
  .social-links {
    justify-content: center;
  }

  /* --- Read layout --- */
  .read-layout {
    padding: 20px 0;
  }
  .read-main-content {
    padding-right: 0;
    border-right: none;
  }
  /* .read-sidebar order:1 sudah di 1024px, tidak perlu diulang */

  /* --- Article detail ---
     Block #14 & #15 digabung: ambil union, konflik diselesaikan */
  .article-detail-header {
    text-align: center;
  }
  .article-detail-title {
    font-size: 26px;
    text-align: center;
  }
  .article-detail-image {
    margin: 20px 0;
  }

  .article-detail-meta {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .author-info {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .article-font-controls {
    width: 100%;
    justify-content: center;
  }

  .article-detail-content {
    font-size: var(--article-font-size, 16px);
  }
  .article-detail-content p {
    margin-bottom: 20px;
  }
  .article-detail-content blockquote {
    margin: 30px 0;
    padding: 20px;
  }
  .article-detail-content iframe {
    width: 100%;
    aspect-ratio: 5/3;
  }

  .breadcrumb {
    justify-content: center;
    text-align: center;
  }

  /* --- Baca juga ---
     Block #14 & #15: .baca-juga-section sama → 1 definisi */
  .baca-juga-section {
    padding: 20px;
  }
  .baca-juga-title {
    font-size: 16px;
  }
  .baca-juga-item {
    padding: 10px 0;
  }
  .baca-juga-item a {
    flex-direction: column;
  }
  .baca-juga-headline {
    font-size: 14px;
  }
  .baca-juga-list {
    gap: 5px;
  }

  /* --- Share --- */
  .share-buttons {
    height: auto;
  }
  .share-btn {
    width: 40px;
    height: 40px;
  }

  /* --- Related --- */
  .related-articles-section {
    padding: 20px 0;
  }
  .related-title {
    font-size: 18px;
  }
  .related-simple-grid {
    grid-template-columns: 1fr;
  }

  /* --- Author articles --- */
  .author-articles-grid {
    grid-template-columns: 1fr;
  }

  /* --- Latest News Full Width ---
     Block #15 konflik internal: .latest-news-list-full .latest-news-link
     dideklarasi flex-direction:column lalu di-override flex-direction:row
     → Ambil nilai akhir (row) sebagai yang berlaku */
  .latest-news-list-full .latest-news-link {
    flex-direction: row;
    gap: 20px;
  }
  .latest-news-list-full .latest-news-image {
    width: 100px;
    height: 67px;
  }
  .latest-news-list-full .latest-news-excerpt {
    display: none;
  }
  .latest-news-list-full .latest-news-title {
    margin-bottom: 8px;
  }

  /* --- Indeks pagination --- */
  .indeks-pagination {
    padding: 30px 0;
  }
  .pagination-wrapper {
    flex-wrap: wrap;
    gap: 8px;
  }
  .pagination-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
  .pagination-btn span {
    display: none;
  }
  .pagination-number {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }
  .pagination-numbers {
    gap: 4px;
  }

  /* --- Indeks filter ---
     Block #17 & #23 digabung: union keduanya, tambah margin dari #23 */
  .indeks-filter-section {
    padding: 20px 0;
  }
  .filter-grid {
    grid-template-columns: 1fr;
  }
  .filter-submit {
    grid-column: span 1;
  }
  .filter-group {
    margin-bottom: 15px;
  }
  .filter-title h3 {
    font-size: 18px;
  }
  .filter-btn {
    width: 100%;
  }
}

/* ============================================
   END OF RESPONSIVE STYLES
   ============================================ */