/* ===============================
   iPad-only overrides (Portrait & Landscape)
   Target: 768px–1366px (all modern iPads)
   Put this file after your main StyleSheet.css
   =============================== */

@media screen and (min-width: 768px) and (max-width: 1366px) {

  /* ---- Basics & scrolling ---- */
  html, body { overflow-x: hidden; }
  :where(h1,h2,h3,h4,h5,h6,p,li){ line-height: 1.6; }

  /* ---- Container gutters ---- */
  .container, .container-fluid, .wrap, .wrapper, .page, main {
    max-width: 100% !important;
    padding-inline: 16px !important;
  }

  /* ---- Header / topbar / nav ---- */
  header, .header, .site-header {
    position: sticky; top: 0; z-index: 1000; /* stays visible while scrolling */
  }
  /* make menus wrap nicely on iPad */
  nav ul, .nav, .menu, .main-menu {
    display: flex;
    gap: 10px !important;
    flex-wrap: wrap;
    align-items: center;
  }
  nav li, .nav > li, .menu > li { margin-inline: 0 !important; }
  .nav a, .menu a { padding: 10px 12px; display: inline-block; }

  /* hamburger / toggler hit-area */
  .nav-toggle, .menu-toggle, .hamburger, .navbar-toggler {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    touch-action: manipulation;
  }

  /* ---- RTL friendliness (site is Kurdish/RTL) ---- */
  html[dir="rtl"], body[dir="rtl"] { text-align: right; }
  .dropdown-menu { inset-inline-start: auto !important; inset-inline-end: 0 !important; }

  /* ---- Hero / Slider / Carousel ---- */
  .hero, .slider, .carousel, .swiper, .slick-slider { overflow: hidden; }
  .hero img, .slider img, .carousel img, .swiper img, .slick-slide img {
    width: 100%;
    height: 320px; /* adjust if needed */
    object-fit: cover;
  }
  .hero .caption, .slider .caption { padding: 12px 14px; font-size: 0.95rem; }

  /* If using Swiper/Slick, avoid oversized slides on iPad */
  .swiper, .slick-slider { width: 100% !important; }
  .swiper-wrapper, .slick-track { align-items: stretch; }
  .swiper-slide, .slick-slide { height: auto; }

  /* ---- Cards / News grids → 2 columns on iPad ---- */
  .grid, .cards, .news-grid, .posts, .post-grid, .latest-posts, .home-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* flex-based lists fallback */
  .card-list, .post-list, .media-list {
    display: flex; flex-wrap: wrap; gap: 16px;
  }
  .card, .post-card, .media-item {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }

  /* Single article readability */
  .article, .post, .single, .content {
    font-size: 1rem; line-height: 1.85;
  }
  .article img, .post img, .content img { max-width: 100%; height: auto; }

  /* Force very-wide images to stay inside content width */
  .content img[style*="width"], .post img[style*="width"] {
    height: auto !important; max-width: 100% !important;
  }

  /* ---- Layouts with sidebars → stack vertically ---- */
  .content-with-sidebar, .has-sidebar, .layout-sidebar, .row.has-sidebar {
    display: grid; grid-template-columns: 1fr; gap: 20px;
  }
  .sidebar, .aside { order: 2; } /* below the main content on iPad */

  /* ---- Footer widgets → 2 columns ---- */
  footer .widgets, .footer-widgets, .footer-columns {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  }

  /* ---- Buttons & inputs: better touch targets ---- */
  button, .btn, input[type="button"], input[type="submit"] {
    min-height: 44px; padding: 10px 14px;
  }
  .search input[type="search"], input[type="text"], textarea, select {
    min-height: 44px;
  }

  /* ---- Embeds / media ---- */
  iframe, video { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* ---- Tables (reports/interviews) ---- */
  table {
    width: 100%; display: block; overflow-x: auto; border-collapse: collapse;
  }
  th, td { padding: 10px; }
}

/* Optional: landscape iPad Pro toolbar space */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .hero img, .slider img { height: 380px; }
  .header .search, .nav .search { min-width: 260px; }
}