/* ============================================================================
   DCA — responsive-fixes.css  (hand-authored, mobile-only bug fixes)
   ----------------------------------------------------------------------------
   tw.css / theme.css are flattened Tailwind build artefacts: only class
   combinations actually scanned in a template get compiled in, so a handful
   of genuine mobile bugs need a few plain-CSS rules instead of new utility
   classes. Every rule here is scoped to a max-width media query that ends
   exactly at one of this theme's own breakpoints (md 768px / lg 1024px /
   xl 1280px), so desktop rendering is completely untouched — these only
   ever apply below the stated breakpoint.
   No HTML/PHP was changed to make room for this file; every selector below
   targets classes/structure that already exist in the templates.
   ============================================================================ */

/* 1 · About page — "The Convergent Mandate" diagram (#approach)
   ----------------------------------------------------------------------------
   Desktop pins a central "Outcome" box plus 3 discipline cards with absolute
   positioning (left-0/right-0/top-0/bottom-0/top-1/4) inside a relative,
   fixed-height container. Working the numbers back from the actual offsets
   (md:left-12/24, md:right-12, card width md:w-80, hub md:w-72), the cards
   only clear the central hub without collision once the canvas is roughly
   1150px+ wide — i.e. this diagram was only ever designed for genuine
   desktop widths. Every narrower viewport, including the FULL iPad portrait
   AND landscape range (not just phones), collapses all four boxes into the
   same region ("bertumpuk"). Fix: below xl (1280px), take the diagram out of
   absolute positioning entirely and let it flow as a normal, ordered,
   non-overlapping stack (existing DOM order: Outcome, Financial, Legal,
   Governance). The decorative connector-line SVG (the 5th, already
   `hidden md:block`) is force-hidden throughout this same range, since its
   coordinates only make sense once the cards are actually orbiting the hub;
   it still shows normally at 1280px+ where the true diagram resumes. The
   Outcome/black box keeps its own `flex` display (only the desktop-oriented
   position/transform/size are overridden) so its internal centering keeps
   working, and gets a taller, hero-panel-style height with slightly more
   bottom than top padding: the bold two-line headline is the visually
   heaviest element, so equal padding reads as sitting a touch high — a bit
   more room below than above brings it back to true optical balance. None
   of the md:/existing utility classes in the markup are touched, so the
   real desktop diagram (≥1280px) is pixel identical to before. */
@media (max-width: 1279.98px) {
  #approach .relative.max-w-6xl {
    height: auto;
  }
  #approach .relative.max-w-6xl > .absolute {
    position: static;
    width: 100%;
    margin: 0 0 2rem;
    transform: none; /* cancels the Outcome box's -translate-x/y-1/2 centering transform */
  }
  #approach .relative.max-w-6xl > .absolute:last-of-type {
    margin-bottom: 0;
  }
  #approach .relative.max-w-6xl > .absolute.hidden {
    display: none; /* keep the connector-line decoration off until the real diagram resumes */
  }
  #approach .relative.max-w-6xl > .absolute.bg-primary {
    height: auto;
    min-height: 22rem;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }
}

/* 2 · Insights listing — Cornerstone Insight image
   ----------------------------------------------------------------------------
   The cornerstone image wrapper carries both `aspect-video` (16:9, meant to
   govern height on mobile) and an unscoped `min-h-[280px]` (meant only for
   the desktop `md:aspect-auto` mode, where the grid row's own height takes
   over). Below md, min-height wins the CSS conflict and forces the box
   taller than a true 16:9 crop, so the image is over-cropped instead of
   showing a clean 16:9 frame. Every other Insight card image uses
   `aspect-video` alone (no min-height) and already renders correctly, so the
   fix is simply to cancel the min-height below md and let aspect-video
   govern, exactly like the rest of the grid. `min-h-[280px]` is used in
   exactly this one place site-wide, confirmed before adding this rule. */
@media (max-width: 767.98px) {
  .min-h-\[280px\] {
    min-height: 0;
  }
}

/* 3 · Contact page — spacing after the Office address
   ----------------------------------------------------------------------------
   Below lg the two-panel contact layout stacks to a single column, so the
   dark info panel's height is driven purely by its own content (no equal-
   row-height stretch from the sibling form panel), and the office address
   is the last of the three contact-detail rows. Add breathing room after it
   on mobile only; desktop keeps its existing spacing untouched. */
@media (max-width: 1023.98px) {
  #main .space-y-5.border-t.border-white\/10 > .flex.items-start.gap-3:last-child {
    margin-bottom: 2rem;
  }
}