/* ──────────────────────────────────────────────────────────────────────────────
   iPHONE-FIRST CSS BASE + BREAKPOINTS (Covers older SE → iPhone 16/17 families)
   ──────────────────────────────────────────────────────────────────────────────
   • Strategy: mobile-first baseline for ALL iPhones, then narrow buckets by width.
   • Units: use fluid sizing via clamp/viewport units; logical props for RTL safety.
   • Touch: ensure 44px+ targets, disable highlight flash, use safe-area insets.
   • Viewport height: prefer 100dvh with fallbacks for iOS Safari chrome changes.
   • Accessibility: respect prefers-reduced-motion; ensure readable min sizes.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root + Global Resets (safe, mobile-first) ─────────────────────────────── */
:root {
  /* Fluid typography scale (min, preferred via vw, max) */
  --font-size-base: clamp(14px, 1.8vw, 17px);
  --font-size-sm: clamp(12px, 1.6vw, 15px);
  --font-size-lg: clamp(16px, 2.2vw, 20px);

  /* Spacing system (fluid with caps) */
  --space-1: clamp(6px, 1.2vw, 10px);
  --space-2: clamp(10px, 2vw, 16px);
  --space-3: clamp(14px, 3vw, 22px);
  --space-4: clamp(18px, 4vw, 28px);

  /* Radius + shadow tokens */
  --radius: 10px;
  --shadow-soft: 0 2px 10px rgba(0,0,0,.08);
}

html {
  -webkit-text-size-adjust: 100%; /* prevent unexpected text zooming */
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  line-height: 1.45;
  
  /* Height that plays nicely with iOS Safari toolbars */
  min-height: 100dvh;
  min-height: 100vh; /* fallback */
  
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Remove gray tap highlight & selection quirks on iOS */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Wrapper divs and sections that should respect viewport */
main, section, article, aside, nav, header, footer {
  max-width: 100%;
  overflow-x: hidden;
}

/* Don't override existing container styles - they use inline max-width */

/* Safe zone wrapper — pads around the notch and home indicator on iPhone */
.safe-zone {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-2));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-2));
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--space-2));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--space-2));
}

/* Touch targets: ensure tappable components meet ~44px minimum */
button, .btn, a.button, input[type="button"], input[type="submit"] {
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Forms: larger tap targets, inner padding, accessible contrast by default */
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  padding: 12px 14px;
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}

/* Card pattern for lists/grids - minimal override */
.mobile-card {
  max-width: 100%;
  overflow: hidden;
}

/* Utility spacing (logical props = RTL friendly) */
.stack > * + * { margin-block-start: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Prevent horizontal overflow - more targeted approach */
img, video, canvas, iframe, table, pre {
  max-width: 100%;
}

/* Very small iPhones (e.g., older SE/legacy: ~320–374) */
@media (max-width: 374.98px) {
  .grid { display: block; } /* collapse any grids that feel tight */
  .hide-on-very-small { display: none !important; }
  nav, .nav { padding-inline: 1rem !important; }
}

/* 375-wide family (many base models from 6/7/8 → 15; also some 16/17 variants) */
@media (min-width: 375px) and (max-width: 389.98px) {
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .hero-title { font-size: clamp(22px, 6vw, 28px); }
}

/* 390-wide family (popular 6.1" variants including Pro / non-Pro cohorts) */
@media (min-width: 390px) and (max-width: 392.98px) {
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .hero-title { font-size: clamp(24px, 6.4vw, 30px); }
}

/* Mid bucket ~400–409 (covers certain newer Pro sizes across 16/17 cycles) */
@media (min-width: 400px) and (max-width: 409.98px) {
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
  .hero-title { font-size: clamp(24px, 6.6vw, 32px); }
}

/* 393–413 bucket (transitional sizes, certain Plus/Max or Pro generations) */
@media (min-width: 393px) and (max-width: 413.98px) {
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
}

/* 414-wide family (older Plus / XR / 11 lineage) */
@media (min-width: 414px) and (max-width: 427.98px) {
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
  .container { max-width: 640px; } /* optional comfortable line-length cap */
}

/* 428-wide family (Plus sizes in 12/13/14/15/16/17 generations) */
@media (min-width: 428px) and (max-width: 429.98px) {
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
  .container { max-width: 680px; }
}

/* 430+ family (Pro Max & newer Max sizes; allow a little headroom) */
@media (min-width: 430px) and (max-width: 459.98px) {
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--space-3) + 4px); }
  .container { max-width: 720px; }
}

/* ── Orientation-aware tweaks (iPhone landscape often short in height) ─────── */
@media (orientation: landscape) and (max-height: 430px) {
  /* Keep critical content above the fold; trim chrome */
  .sticky-actions { position: sticky; bottom: 0; }
  .hide-on-landscape { display: none !important; }
  .container { padding-block: var(--space-2); }
}

/* ── Interaction media features (iPhones are pointer: coarse, hover: none) ── */
@media (hover: none) and (pointer: coarse) {
  .hover-only { display: none !important; }
  .btn, button, a.button { /* slightly larger touch comfort */
    padding: 12px 16px;
  }
}

/* ── Motion & contrast preferences (respect user settings) ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { 
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee, .parallax { display: none !important; }
}

/* Optional dark scheme hook (iOS supports color-scheme) */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* ── Common components with fluid behavior across iPhones ──────────────────── */

/* Responsive grid helpers (compose with the buckets above) */
.grid {
  display: grid;
  gap: var(--space-2);
  max-width: 100%;
}
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.auto-fit-min {
  grid-template-columns: repeat(auto-fit, minmax(min(44%, 260px), 1fr));
}

/* Typography helpers */
.h1 { font-size: clamp(24px, 7vw, 32px); font-weight: 700; }
.h2 { font-size: clamp(20px, 6vw, 28px); font-weight: 650; }
.h3 { font-size: clamp(18px, 5.2vw, 24px); font-weight: 600; }
.lead { font-size: var(--font-size-lg); opacity: .9; }

/* Image wrappers that preserve aspect with object-fit */
.media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16; /* iPhone portrait aspect */
  overflow: hidden;
  border-radius: var(--radius);
  max-width: 100%;
}
.media > img { width: 100%; height: 100%; object-fit: cover; }

/* Sticky bottom action bar that respects home indicator */
.action-bar {
  position: sticky;
  bottom: 0;
  padding: calc(env(safe-area-inset-bottom, 0px) + var(--space-2)) var(--space-2) var(--space-2);
  background: linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,0.85) 40%, #0c0c0c 100%);
  backdrop-filter: blur(6px);
  max-width: 100%;
}

/* Pills for tags (e.g., Size, Condition) — compact, touch-friendly */
.pills { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; min-height: 32px;
  border-radius: 999px; font-size: var(--font-size-sm);
  border: 1px solid rgba(255,255,255,.14);
  background: #161616;
}

/* Toast/notice with safe-area awareness */
.toast {
  position: fixed; 
  inset-inline: var(--space-2);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
  padding: var(--space-2);
  background: #1a1a1a; 
  color: #fff; 
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  z-index: 1000;
  max-width: calc(100% - calc(var(--space-2) * 2));
}

/* ── Optional: iPad guardrail (kept minimal; focus remains iPhone) ─────────── */
/* If an iPad hits your styles by mistake, gently expand layout without desktop UI */
@media (min-width: 768px) {
  .container { max-width: 900px; }
  .grid.cols-3 { grid-template-columns: repeat(4, 1fr); }
}