/* ═══════════════════════════════════════════════════════════════
   DHALMIA — RESPONSIVE & A11Y PATCH
   ───────────────────────────────────────────────────────────────
   Placement: /css/dh-responsive-patch.css — enqueue in
   inc/enqueues.php AFTER 'dh-stacking-fix', sitewide:

     wp_enqueue_style(
       'dh-responsive-patch',
       $uri . '/css/dh-responsive-patch.css',
       [ 'dh-global', 'dh-stacking-fix' ],
       dh_asset_version( 'css/dh-responsive-patch.css' )
     );

   What it fixes:
   1. Mobile collapse for ALL inline-styled grids on project pages
      (Lorne, Mango, Crowwood, and any future page using the same
      pattern) — replaces the fragile lorne-only <style> block.
   2. Fluid-media safety net inside .dh-scope / .dhalmia-project.
   3. Touch-target padding for slider dots & lightbox nav.
   4. Portfolio/Projects hub background — replaces the JS
      parent-walking hack (delete that inline <script>).
   5. Visible keyboard focus throughout the scope.
   ═══════════════════════════════════════════════════════════════ */


/* ── 1 · UNIVERSAL GRID COLLAPSE ─────────────────────────────────
   Any element inside a Dhalmia scope that sets grid-template-columns
   inline collapses to a single column ≤768px, and 2-col max at
   tablet. Attribute selectors match the *presence* of the property,
   not its exact value — robust to spacing/edits, unlike the old
   [style*="1fr 1fr"] patch. Named grid classes are covered too.   */

@media (max-width: 900px) {
  .dh-scope [style*="grid-template-columns"],
  .dhalmia-project [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .dh-scope [style*="grid-template-columns"],
  .dhalmia-project [style*="grid-template-columns"],
  .dh-scope .dh-editorial-grid,
  .dh-scope .dh-transform-grid,
  .dh-scope .dh-overview-strip,
  .dhalmia-project .dp-gallery__spread,
  .dhalmia-project .dp-pillars__grid,
  .dhalmia-project .dp-related__grid,
  .dhalmia-project .dp-meta__strip,
  .dhalmia-project .dp-meta__grid {
    grid-template-columns: 1fr !important;
  }

  /* Wide-format feature figures become friendlier ratios on phones */
  .dh-scope figure[style*="aspect-ratio:21/9"],
  .dh-scope figure[style*="aspect-ratio: 21/9"] {
    aspect-ratio: 16 / 10 !important;
  }

  /* Split layouts (video + stack, copy + image) stack cleanly */
  .dh-scope .dh-split,
  .dhalmia-project .dp-story__split {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: var(--space-xl);
  }

  /* Reversed splits keep copy above imagery on mobile */
  .dhalmia-project .dp-story__split--reverse > *:first-child {
    order: 0;
  }

  /* Hero heights: never let 100vh heroes trap short viewports */
  .dhalmia-project .dp-hero,
  .dh-scope .dp-hero {
    min-height: 85svh !important;
  }
}

@media (max-width: 480px) {
  .dhalmia-project .dp-hero,
  .dh-scope .dp-hero {
    min-height: 75svh !important;
  }
  /* Glass panels: reclaim horizontal space on small phones */
  .dhalmia-project .dp-hero__glass,
  .dh-scope .dp-hero__glass {
    padding: clamp(1.25rem, 6vw, 2rem) !important;
  }
}


/* ── 2 · FLUID MEDIA SAFETY NET ─────────────────────────────── */

.dh-scope img,
.dh-scope video,
.dh-scope svg,
.dhalmia-project img,
.dhalmia-project video {
  max-width: 100%;
  height: auto;
}
/* object-fit:cover figures keep their box (height:auto would break them) */
.dh-scope figure img[style*="object-fit"],
.dhalmia-project figure img[style*="object-fit"],
.dh-scope .dp-hero__img,
.dhalmia-project .dp-hero__img,
.dh-scope .dh-hero__img {
  height: 100%;
}


/* ── 3 · TOUCH TARGETS ───────────────────────────────────────────
   Visual dot stays small; hit area grows to ≥44px via padding +
   negative margin so layout is unchanged.                        */

.dh-hero__side-dot,
.dh-srv__dot {
  position: relative;
}
.dh-hero__side-dot::after,
.dh-srv__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (hover: none) {
  .dh-lightbox__nav,
  .dh-viewer__nav,
  .dh-lightbox__close,
  .dh-viewer__close {
    min-width: 44px;
    min-height: 44px;
  }
}


/* ── 4 · HUB PAGE BACKGROUND ─────────────────────────────────────
   Replaces the inline JS that force-set #212121 on every ancestor.
   Delete that <script> from the Portfolio & Projects hub widgets. */

body:has(.dh-hub-page) {
  background-color: var(--bg-0) !important;
  background-image: none !important;
}
/* Fallback for browsers without :has() — Elementor containers only */
.dh-hub-page,
.elementor:has(.dh-hub-page) .e-con {
  background-color: var(--bg-0);
}


/* ── 5 · KEYBOARD FOCUS ───────────────────────────────────────── */

.dh-scope :focus-visible,
.dhalmia-project :focus-visible,
.dh-nav :focus-visible,
.dh-footer :focus-visible {
  outline: 2px solid var(--copper-0);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ── 6 · CAROUSEL PAUSE BUTTON (pairs with dh-quick-fixes.md) ── */

.dh-hero__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: var(--space-sm);
  color: var(--text-1);
  background: rgba(18, 18, 18, .45);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.dh-hero__pause:hover,
.dh-hero__pause:focus-visible {
  color: var(--copper-1);
  border-color: var(--copper-0);
}
.dh-hero__pause svg { width: 14px; height: 14px; }
.dh-hero__pause .ico-play { display: none; }
.dh-hero__pause[aria-pressed="true"] .ico-pause { display: none; }
.dh-hero__pause[aria-pressed="true"] .ico-play { display: block; }


/* ── 7 · REDUCED MOTION — belt & braces for inline-styled pages ─ */

@media (prefers-reduced-motion: reduce) {
  .dh-scope [data-parallax],
  .dhalmia-project [data-parallax] {
    transform: none !important;
  }
  .dh-scope .dp-story__frame-svg rect,
  .dhalmia-project .dp-story__frame-svg rect {
    stroke-dashoffset: 0 !important;
  }
}


/* ═════════════════════════════════════════════════════════════
   SITE-WIDE DEVICE HARDENING (all pages, full ladder)
   Additive guards only — page CSS keeps authority over layout.
═════════════════════════════════════════════════════════════ */

/* horizontal scroll can never leak (clip preserves position:sticky) */
html, body { overflow-x: clip; }

/* media can never overflow its container */
.dh-scope img,
.dh-scope video,
.dh-scope iframe,
.dh-scope canvas,
.dh-scope svg { max-width: 100%; }
.dh-scope img,
.dh-scope video { height: auto; }
.dh-scope iframe { aspect-ratio: 16 / 9; height: auto; width: 100%; }

/* long words / URLs never force overflow */
.dh-scope h1, .dh-scope h2, .dh-scope h3, .dh-scope h4,
.dh-scope p, .dh-scope a, .dh-scope li, .dh-scope dd {
  overflow-wrap: break-word;
}

/* data tables scroll instead of breaking layout */
.dh-scope table { display: block; max-width: 100%; overflow-x: auto; }

/* ≤1200 — laptop: 4+-column inline grids step down early */
@media (max-width: 1200px) {
  .dh-scope [style*="grid-template-columns: repeat(4"],
  .dh-scope [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ≤1024 — tablet landscape: 3-column inline grids step to 2 */
@media (max-width: 1024px) {
  .dh-scope [style*="grid-template-columns: repeat(3"],
  .dh-scope [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ≤640 — phone: every inline multi-column layout stacks */
@media (max-width: 640px) {
  .dh-scope [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .dh-scope [style*="column-count"] { column-count: 1 !important; }
}

/* ≤380 — compact phones: padding + type floors */
@media (max-width: 380px) {
  .dh-scope .dh-container,
  .dh-scope .wrap { padding-inline: 1rem; }
  .dh-scope { font-size: 15px; }
}

/* short landscape phones: full-viewport heroes release the viewport */
@media (max-height: 480px) and (orientation: landscape) {
  .dh-scope .dh-hero { min-height: 100svh; height: auto; }
}

/* very large screens: classic containers stay composed */
@media (min-width: 1800px) {
  .dh-scope .dh-container { max-width: 1560px; margin-inline: auto; }
}