/* ==========================================================================
   UG IN THE BOX · Customer Global Responsive & Bento Spatial Tokens
   Aesthetic: Apple Inc. + Tactical HUD / Post-Apocalyptic Symmetrical Bento
   ========================================================================== */

:root {
  /* Standard Spatial Breakpoint Reference:
     Mobile: < 640px (1 col)
     Phablet/Small Tablet: 640px - 767px (2 col compact)
     Tablet Portrait: 768px - 1023px (2 col balanced)
     Desktop: 1024px - 1279px (3-4 col bento)
     Widescreen: >= 1280px (4 col wide bento)
  */

  /* Unified Gutter & Negative Space */
  --tp-gutter: 16px;
  --tp-grid-gap: 16px;
  --tp-section-gap: clamp(48px, 7vw, 96px);
  --tp-tap-target: 44px;

  /* Tactical Aspect Ratios (Symmetrical Bento Blocks) */
  --tp-aspect-merch: 4 / 5;
  --tp-aspect-wide: 16 / 9;
  --tp-aspect-editorial: 16 / 10;
  --tp-aspect-square: 1 / 1;

  /* Typography Fluid Clamp Scale */
  --tp-type-h1: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  --tp-type-h2: clamp(1.35rem, 1.1rem + 1.2vw, 2.25rem);
  --tp-type-h3: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem);
  --tp-type-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --tp-type-caption: 0.8125rem;
  --tp-type-mono: 0.75rem;

  /* Unified Corner Radii */
  --tp-radius-card: 20px;
  --tp-radius-subcard: 14px;
  --tp-radius-pill: 9999px;

  /* HUD Surface Materials */
  --tp-blur-glass: blur(24px) saturate(140%);
  --tp-border-tactical: rgba(255, 255, 255, 0.16);
  --tp-border-tactical-focus: rgba(255, 255, 255, 0.36);
}

@media (min-width: 640px) {
  :root {
    --tp-gutter: 20px;
    --tp-grid-gap: 18px;
  }
}

@media (min-width: 768px) {
  :root {
    --tp-gutter: 24px;
    --tp-grid-gap: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --tp-gutter: 32px;
    --tp-grid-gap: 22px;
    --tp-tap-target: 40px; /* Fine pointer: compact tactical HUD */
  }
}

@media (min-width: 1280px) {
  :root {
    --tp-gutter: 40px;
    --tp-grid-gap: 24px;
  }
}

/* Global Zero-Horizontal-Scroll Safety Net */
html,
body {
  max-width: 100%;
  overflow-x: clip; /* clip protects layout without breaking position:sticky */
}

/* Responsive Fluid Media Guard */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Prevent Flex/Grid Child Blowout & Preserve Bento Symmetry */
:where(
  .tp-hero-section,
  .tp-story-section,
  .tp-content-section,
  .tp-story-card,
  .tp-stacked-event-card,
  .tp-merch-card,
  .tp-artist-bento-card,
  .tp-gallery-card,
  .tp-dispatch-card,
  .tp-intel-card,
  .tp-shop-main,
  .tp-shop-sidebar
) {
  min-width: 0;
}

/* iOS Safe-Area Notch and Home-Bar Awareness */
.ah-body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Touch Targets & Minimum Action Dimensions (Apple HIG / Fitts's Law) */
@media (max-width: 767px) {
  :where(
    .tp-cta-btn,
    .tp-dock-cta-btn,
    .tp-spotlight-cta-btn,
    .tp-page-nav-btn,
    .tp-mobile-filter-btn,
    .tp-cctv-seg-btn,
    .tp-card-variant-pill,
    .tp-catalogue-heart
  ) {
    min-height: var(--tp-tap-target, 44px);
  }
}