/* ==========================================================
   UB AdsMedia – Mobile overrides (safe + additive)
   Load after your page CSS. Targets <= 768px + <= 480px.
   ========================================================== */

/* ---------- Global touch targets & typography ---------- */
@media (max-width: 768px) {
  html { scroll-behavior: smooth; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  :root {
    --edge: 18px;             /* page side padding */
    --tap: 44px;              /* min touch target */
  }

  /* Side menu toggle spacing (avoid crowding the hero) */
  .menu-toggle { margin: max(12px, env(safe-area-inset-top)) 0 0 max(10px, env(safe-area-inset-left)); }

  /* Slide menu width + safe areas */
  .side-menu { width: min(86vw, 340px); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .side-menu-nav .side-link { display: block; padding: 12px 14px; font-size: 1rem; }

  /* Section rhythm */
  .section-wrap { padding: 56px 0 44px; }
  .section-wrap.alt { padding: 44px 0; }

  /* Headings shrink slightly for small devices */
  h1, .hl { font-size: clamp(1.6rem, 5.6vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 4.8vw, 1.6rem); }

  /* Generic container gutters */
  .container-narrow, .container-wide, .comm-container, .publisher-container, .brands-intro-inner, .footer-content { padding-left: var(--edge); padding-right: var(--edge); }
}

/* ---------- Footer layout & form ---------- */
@media (max-width: 768px) {
  .site-footer .footer-content { display: grid; grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .site-footer .footer-logo { justify-self: start; }
  .site-footer .input-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .site-footer input, .site-footer textarea, .site-footer button { width: 100%; }
  .site-footer button { min-height: var(--tap); }
}

/* ---------- Publishers page ---------- */
@media (max-width: 768px) {
  /* Give room near the nav toggle */
  .pub-hero-inner { padding-top: 58px; }

  .pub-hero-logos { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Tabs: make them scrollable + comfy */
  .pub-tabs { gap: 12px; padding: 10px var(--edge); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pub-tab { padding: 10px 12px; border-radius: 10px; }

  /* GEO rows: prevent overflow on small screens */
  .geo-row { grid-template-columns: 1.2fr .8fr; }
  .geo-row > div { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .geo-row { grid-template-columns: 1fr; }
}

/* Prohibited traffic block already stacks via publishers.css; add small tweaks */
@media (max-width: 768px) {
  .publisher-grid { grid-template-columns: 1fr; gap: 16px; }
  .publisher-art img { max-width: 260px; margin: 0 auto; }
}

/* ---------- Commissions page ---------- */
@media (max-width: 768px) {
  .comm-intro .comm-title { font-size: clamp(1.6rem, 5.6vw, 2rem); }
  .model-block { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 var(--edge); }
  .model-block .model-art img { width: 100%; height: auto; }
  .comm-cta, .btn-ghost { min-height: var(--tap); }
}

/* ---------- Brands page ---------- */
@media (max-width: 768px) {
  .brands-intro .brands-intro-inner { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .brands-grid { display: grid; grid-template-columns: repeat(3, minmax(84px, 1fr)); gap: 14px; }
}
@media (max-width: 540px) {
  .brands-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 12px; }
}

/* ---------- Index (general hero constraints) ---------- */
@media (max-width: 768px) {
  .page-hero-logo, .page-hero-inner img { max-width: min(64vw, 220px); height: auto; }
}

/* ---------- Buttons & links touch area ---------- */
@media (max-width: 768px) {
  .btn-dark, .btn-ghost, .cta-button, .cta-button-orange { min-height: var(--tap); line-height: 1.1; }
}

/* ---------- Tables (fallback) ---------- */
@media (max-width: 480px) {
  .geo-table { border-radius: 10px; }
  .geo-head { display: none; }
  .geo-row { grid-template-columns: 1fr; border-top: 1px solid rgba(0,0,0,.06); }
}

/* ---------- Small polish ---------- */
@media (max-width: 768px) {
  .menu-backdrop { backdrop-filter: blur(2px); }
  .site-footer .footer-bottom p { text-align: center; }
}