/* ============================================================
   AzNews - ORTAQ MOBIL CSS
   Butun sehifelere baglanir, movcud style bloklarindan SONRA
   ============================================================ */

/* --- Umumi qorunma: ufuqi surushmenin qarshisi --- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }
  table { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ============================================================
   PLANSHET (900px)
   ============================================================ */
@media (max-width: 900px) {
  .header-inner,
  .utility-inner,
  .footer-inner { padding-left: 14px; padding-right: 14px; }

  .hero { grid-template-columns: 1fr !important; gap: 14px; }
  .hero-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-title { font-size: 24px; line-height: 1.25; }
  .hero-excerpt { font-size: 14px; }

  .ad-slot, .header-ad-slot, .infeed-banner { max-width: 100%; overflow: hidden; }
}

/* ============================================================
   TELEFON (640px)
   ============================================================ */
@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; font-size: 15px; }

  /* --- Header --- */
  .header-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .header-ad-slot { display: none; }

  /* --- Utility bar (yuxari zolaq) --- */
  .utility-bar { font-size: 11px; }
  .utility-inner { flex-wrap: wrap; gap: 6px; padding: 6px 12px; }
  .utility-left { flex-wrap: wrap; gap: 6px; }
  .visitor-counter { font-size: 10px; }

  /* --- Ticker (xeber lenti) --- */
  .ticker-wrap { font-size: 12px; }
  .ticker-label { font-size: 10px; padding: 3px 8px; }
  .ticker-item { font-size: 12px; }

  /* --- Hero --- */
  .hero { grid-template-columns: 1fr !important; gap: 12px; }
  .hero-main { border-radius: 12px; overflow: hidden; }
  .hero-image { height: 200px; object-fit: cover; }
  .hero-title { font-size: 20px; line-height: 1.3; }
  .hero-excerpt { font-size: 13px; -webkit-line-clamp: 3; }
  .hero-side { grid-template-columns: 1fr; gap: 8px; }
  .hero-side-item { display: flex; gap: 10px; align-items: center; }
  .hero-side-image { width: 92px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: 8px; }
  .hero-side-title { font-size: 13px; line-height: 1.35; }

  /* --- Xeber kartlari --- */
  .news-grid,
  .grid,
  .cards { grid-template-columns: 1fr !important; gap: 12px; }

  .news-card,
  .card { border-radius: 12px; }
  .news-card img,
  .card img { height: 180px; object-fit: cover; }

  .article-title { font-size: 15px; line-height: 1.35; }
  .article-meta { font-size: 11px; flex-wrap: wrap; gap: 6px; }
  .article-category { font-size: 10px; padding: 2px 7px; }
  .article-image-wrap { max-height: 200px; }
  .article-body { font-size: 15px; line-height: 1.7; }
  .article-body p { margin-bottom: 14px; }
  .article-wrap { padding: 0 12px; }
  .article-attribution { font-size: 11px; }

  /* --- Trending --- */
  .trending-item { padding: 8px 0; }
  .trending-title { font-size: 13px; }
  .trending-num { font-size: 16px; min-width: 22px; }

  /* --- TV bar --- */
  .tv-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .tv-box { width: 100%; }
  .tv-scr { width: 100%; height: auto; aspect-ratio: 16/9; }
  .tv-ttl { font-size: 13px; }
  .tv-btn, .tv-live-btn { font-size: 12px; padding: 7px 12px; }

  /* --- Hava widget --- */
  .weather-widget { width: 100%; }
  .weather-dropdown {
    position: fixed !important;
    left: 8px; right: 8px;
    top: auto;
    width: auto !important;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 9999;
  }
  .weather-tabs { flex-wrap: wrap; gap: 4px; }
  .weather-tab { font-size: 11px; padding: 5px 9px; }
  .weather-row { font-size: 13px; padding: 7px 0; }
  .weather-list { max-height: 55vh; overflow-y: auto; }

  /* --- Video --- */
  .article-video-wrap,
  .video-wrap { width: 100%; }
  .article-video-wrap video,
  .video-wrap video { width: 100%; height: auto; }
  .video-download-row { flex-wrap: wrap; gap: 8px; }
  .video-download-btn { width: 100%; justify-content: center; }

  /* --- Banner karusel --- */
  .banner-carousel { border-radius: 10px; }
  .banner-slide img { height: 150px; object-fit: cover; }
  .banner-carousel-dots { gap: 5px; }
  .banner-dot { width: 7px; height: 7px; }

  /* --- Reklam bloklari --- */
  .ad-slot,
  .header-ad-slot,
  .infeed-banner,
  .interstitial-ad-box {
    max-width: 100%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
  .ad-slot-inner { max-width: 100%; }
  .interstitial-box { width: 92%; max-width: 360px; }

  /* --- Duymeler (barmaq ucun) --- */
  button,
  .btn,
  .source-visit-btn,
  .back-link,
  .weather-see-all {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* --- Form elementleri (iOS zoom qarshisi) --- */
  input, textarea, select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* --- Breadcrumb --- */
  .breadcrumb { font-size: 11px; flex-wrap: wrap; }

  /* --- Footer --- */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 18px;
    text-align: center;
    padding: 22px 14px;
  }
  .footer-links { justify-content: center; flex-wrap: wrap; gap: 10px; }
  .footer-logo { justify-content: center; }
  .footer-bottom { font-size: 11px; text-align: center; padding: 12px; }

  /* --- Kicik komponentler --- */
  .badge { font-size: 10px; padding: 2px 7px; }
  .vc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .vc-value { font-size: 16px; }
  .vc-label { font-size: 10px; }
  .empty-state { padding: 28px 14px; font-size: 14px; }
  .translate-notice { font-size: 11px; }
}

/* ============================================================
   KICHIK TELEFON (430px)
   ============================================================ */
@media (max-width: 430px) {
  .hero-title { font-size: 18px; }
  .hero-image { height: 170px; }
  .hero-side-image { width: 78px; height: 56px; }
  .hero-side-title { font-size: 12px; }
  .article-title { font-size: 14px; }
  .article-body { font-size: 14.5px; }
  .news-card img, .card img { height: 160px; }
  .banner-slide img { height: 125px; }
  .vc-grid { grid-template-columns: 1fr; }
  .footer-links { gap: 8px; font-size: 12px; }
  .ticker-item { font-size: 11px; }
  .tv-ttl { font-size: 12px; }
}

/* ============================================================
   UFUQI TELEFON
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .hero-image { height: 150px; }
  .weather-dropdown { max-height: 60vh; }
  .tv-scr { max-height: 60vh; }
}

/* ============================================================
   TOXUNMA CIHAZLARI
   ============================================================ */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: rgba(255,87,34,.18); }
  .news-card:hover, .card:hover { transform: none; }
}

/* ============================================================
   DUZELISH: heqiqi class adlari (rs-grid ve sidebar layoutlar)
   ============================================================ */
@media (max-width: 900px) {
  .rs-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* esas + sidebar -> tek sutun */
  [style*="1fr 300px"],
  [style*="1.4fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .rs-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .rs-grid > * { width: 100%; max-width: 100%; }
  .rs-grid img { width: 100%; height: 190px; object-fit: cover; }
  .vc-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* butun grid-leri tek sutuna sal (istisna: kicik statistika) */
  section > div[style*="grid"],
  main > div[style*="grid"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 430px) {
  .rs-grid img { height: 165px; }
  .vc-grid { grid-template-columns: 1fr !important; }
}