/*
 * PropertyOwnership.co.za — Responsive CSS
 * Mobile-first breakpoints for high-earner devices
 * Desktop (>1024px) is completely unaffected by this file
 * ─────────────────────────────────────────────────────────
 * 1280px  MacBook Air, small laptops, non-maximised windows
 * 1024px  iPad Pro 12.9" landscape, Surface Pro
 *  820px  iPad Pro 11" portrait, iPad Air portrait
 *  768px  iPad Mini, standard tablet portrait
 *  430px  iPhone 15 Pro Max, Samsung S24 Ultra
 *  393px  iPhone 15 Pro, iPhone 14 Pro
 *  375px  iPhone SE, iPhone 13 Mini
 *  360px  Samsung Galaxy S24, S23, A-series
 */

/* ── GLOBAL RESETS (all breakpoints) ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
table { min-width: 100%; }

/* ── HAMBURGER BUTTON (hidden on desktop) ────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: rgba(255,255,255,0.85);
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.mobile-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1C1C1C;
  z-index: 99;
  overflow-y: auto;
  padding: 16px 0 40px;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.mobile-nav a:hover { color: #E8530A; background: rgba(255,255,255,0.03); }
.mobile-nav .mobile-nav__section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8530A;
  padding: 20px 24px 8px;
  border-bottom: none;
}
.mobile-nav .mobile-nav__sub {
  padding-left: 36px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}

/* ── 1280px — Small laptops / non-maximised MacBook windows ──────────────── */
@media (max-width: 1280px) {
  :root { --max-w: 100%; }

  .container { padding: 0 32px; }

  /* Article sidebar */
  .article-layout__inner {
    grid-template-columns: 1fr 280px;
    gap: 40px;
  }

  /* Card grids */
  .card-grid { gap: 20px; }
}

/* ── 1024px — iPad Pro landscape, Surface Pro ────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  /* Header — show hamburger, hide desktop nav */
  .nav { display: none !important; }
  .mobile-menu-btn { display: flex; }
  .header__inner { gap: 16px; }
  .header__cta .btn { display: none; }

  /* Homepage hero */
  .hero__inner {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero__sidebar { display: none !important; }
  .hero__content { padding: 40px 24px 48px !important; }
  .hero__geo, .hero__geo2 { display: none; }

  /* Stat strip */
  .stat-strip__inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .stat-item { padding: 16px 20px !important; }
  .stat-item:nth-child(3) { border-right: none !important; }
  .stat-item:nth-child(4),
  .stat-item:nth-child(5) { border-top: 1px solid rgba(255,255,255,0.2); }

  /* Featured grid */
  .featured__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .card--large {
    grid-column: span 2 !important;
  }

  /* Category rows */
  .cat-section__row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cat-section__row.cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Locations grid */
  .locations__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .loc-card { height: 200px !important; }

  /* Newsletter */
  .newsletter__inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .newsletter__title { font-size: 28px !important; }

  /* Article layout — stack sidebar below content */
  .article-layout__inner {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }
  .sidebar { position: static !important; }

  /* Related articles */
  .related__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* City grid on section pages */
  .hp-cities {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Prop card grid */
  .prop-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Advertise banner */
  .advert-banner__inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 24px !important;
  }
  .advert-banner__stats { justify-content: center !important; }
}

/* ── 820px — iPad Pro 11" portrait, iPad Air portrait ───────────────────── */
@media (max-width: 820px) {
  /* Featured grid goes single column */
  .featured__grid {
    grid-template-columns: 1fr !important;
  }
  .card--large { grid-column: span 1 !important; }
  .card--large .card__thumb { height: 220px !important; }
  .card--large .card__title { font-size: 20px !important; }

  /* Article hero title */
  .article-hero__title { font-size: 28px !important; }

  /* Inline newsletter */
  .inline-nl {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .inline-nl__form { width: 100% !important; }
  .inline-nl__input { flex: 1 !important; min-width: 0 !important; }

  /* Page hero */
  .page-hero__title { font-size: 28px !important; }

  /* Data tables — horizontal scroll */
  .data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }

  /* Share bar */
  .share-bar { flex-wrap: wrap !important; gap: 8px !important; }

  /* Author box */
  .author-box { flex-direction: column !important; }

  /* Locations grid single column */
  .locations__grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 768px — iPad Mini, standard tablet portrait ─────────────────────────── */
@media (max-width: 768px) {
  /* Stat strip 2 column */
  .stat-strip__inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; }
  .stat-item:last-child { border-bottom: none !important; }
  .stat-item__num { font-size: 22px !important; }

  /* Cat section rows single column */
  .cat-section__row,
  .cat-section__row.cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Card grid */
  .card-grid { grid-template-columns: 1fr !important; }

  /* Prop card grid */
  .prop-card-grid { grid-template-columns: 1fr !important; }

  /* Related section */
  .related__grid { grid-template-columns: 1fr !important; }
  .related__header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  /* Footer single column */
  .footer__grid { grid-template-columns: 1fr !important; }

  /* Byline meta hide on small tablet */
  .byline-meta { display: none !important; }

  /* Section header stack */
  .cat-section__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .hp-section-hd { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .section-hd { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

/* ── 430px — iPhone 15 Pro Max, Samsung S24 Ultra ───────────────────────── */
@media (max-width: 430px) {
  .container { padding: 0 16px; }

  /* Logo */
  .logo { font-size: 18px !important; }

  /* Hero */
  .hero__content { padding: 32px 16px 40px !important; }
  .hero__title { font-size: 26px !important; line-height: 1.2 !important; }
  .hero__excerpt { font-size: 14px !important; }

  /* Stat strip single column on phone */
  .stat-strip__inner {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-item__num { font-size: 20px !important; }
  .stat-item__label { font-size: 9px !important; }

  /* Article hero */
  .article-hero__inner { padding: 0 16px !important; }
  .article-hero__title { font-size: 24px !important; line-height: 1.2 !important; }
  .article-hero__subtitle { font-size: 15px !important; }

  /* Feature image */
  .feat-img__frame { height: 220px !important; }

  /* Prose */
  .prose p { font-size: 16px !important; }
  .prose p:first-child { font-size: 17px !important; }
  .prose h2 { font-size: 22px !important; }
  .prose h3 { font-size: 18px !important; }

  /* Cards */
  .card__thumb { height: 180px !important; }
  .card__title { font-size: 16px !important; }
  .card__excerpt { display: none; }

  /* Mini cards */
  .mini-card__thumb { height: 140px !important; }

  /* Location cards */
  .locations__grid { grid-template-columns: 1fr !important; }
  .loc-card { height: 180px !important; }

  /* City grid */
  .hp-cities { grid-template-columns: 1fr !important; }

  /* Takeaways */
  .takeaways { padding: 24px 20px !important; }

  /* Callout */
  .callout { padding: 16px 18px !important; }

  /* Pull quote */
  .pull-quote__text { font-size: 18px !important; }

  /* Newsletter */
  .newsletter { padding: 48px 0 !important; }
  .newsletter__title { font-size: 24px !important; }
  .newsletter__inner { gap: 28px !important; }

  /* Page hero */
  .page-hero { padding: 36px 0 28px !important; }
  .page-hero__title { font-size: 24px !important; }
  .page-hero__sub { font-size: 14px !important; }

  /* Tables */
  .data-table { font-size: 13px; }
  .data-table th, .data-table td { padding: 10px 12px !important; }

  /* Ad slots resize */
  .ad-slot-incontent { min-height: 60px !important; }

  /* Cookie banner */
  #po-cookie-banner { padding: 14px 16px !important; }
  #po-cookie-banner p { font-size: 12px !important; }

  /* Tools promo */
  .hp-tools { flex-direction: column !important; gap: 20px !important; }
  .hp-tools a { width: 100% !important; justify-content: center !important; }

  /* Advertise banner stats */
  .advert-banner__stats { gap: 20px !important; }
  .advert-stat__num { font-size: 20px !important; }
}

/* ── 393px — iPhone 15 Pro, iPhone 14 Pro ───────────────────────────────── */
@media (max-width: 393px) {
  .hero__title { font-size: 23px !important; }
  .article-hero__title { font-size: 22px !important; }
  .newsletter__title { font-size: 22px !important; }
  .cat-section__title { font-size: 22px !important; }
  .inline-nl__title { font-size: 17px !important; }
  .card__title { font-size: 15px !important; }
  .prop-card-grid { grid-template-columns: 1fr !important; }
  .topbar__links { display: none !important; }
}

/* ── 375px — iPhone SE, iPhone 13 Mini ──────────────────────────────────── */
@media (max-width: 375px) {
  .logo { font-size: 16px !important; }
  .hero__title { font-size: 21px !important; }
  .article-hero__title { font-size: 20px !important; }
  .feat-img__frame { height: 190px !important; }
  .container { padding: 0 14px; }
}

/* ── 360px — Samsung Galaxy S24, S23, A-series ───────────────────────────── */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .logo { font-size: 15px !important; }
  .hero__title { font-size: 20px !important; }
  .article-hero__title { font-size: 19px !important; }
  .stat-strip__inner { grid-template-columns: 1fr !important; }
  .stat-item { border-bottom: 1px solid rgba(255,255,255,0.15) !important; border-right: none !important; }
  .card__thumb { height: 160px !important; }
}

/* ── iPhone notch / Dynamic Island safe area ─────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #po-cookie-banner {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .footer__bottom {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* ── Touch targets — minimum 44px for all interactive elements ───────────── */
@media (max-width: 1024px) {
  .btn, button, .nav__link, .toc__item,
  .sidebar-rel-post, .dropdown a,
  .mobile-nav a, .footer__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer__links a { display: block; padding: 8px 0; }
  .breadcrumb a { padding: 6px 0; }
}

/* ── Smooth scrolling on iOS ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html { -webkit-overflow-scrolling: touch; }
  body { overflow-x: hidden; }
}