/**
 * Toba Market — Responsive Refinements
 * Base rules in every other file are mobile-first (target ~360px).
 * This file layers in the refinements needed at the specific
 * breakpoints called out in the Phase 6 brief: 320/360/375/390/414/
 * 480/768/1024/1280/1440/1920. Most of those collapse into the same
 * two or three real behavior changes — a phone is a phone from 320
 * to 480px for this layout, and no marketplace layout meaningfully
 * needs to look different at 1280 vs. 1440 vs. 1920 once a max-width
 * container is in place, so this file targets the breakpoints where
 * something ACTUALLY changes, and documents that the untouched widths
 * in between simply inherit the nearest rule below them (verified in
 * reports/PHASE_6_TEST_REPORT.md's responsive matrix).
 */

/* Smallest supported phones (320–359px): tighten spacing slightly so
   nothing forces horizontal scroll. */
@media (max-width: 359px) {
	.tts-market-container { padding-inline: var(--tts-space-3); }
	.tts-market-hero { padding: var(--tts-space-6) var(--tts-space-3); }
	.tts-market-card__title { font-size: var(--tts-font-size-xs); }
}

/* 480px+: category grid can afford 3 columns instead of 2 */
@media (min-width: 480px) {
	.tts-market-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet (768px+) already handled per-component in cards.css/forms.css/
   layout.css; this adds cross-cutting page-level adjustments. */
@media (min-width: 768px) {
	.tts-market-container { padding-inline: var(--tts-space-6); }
}

/* Small desktop (1024px+) */
@media (min-width: 1024px) {
	.tts-market-container { padding-inline: var(--tts-space-8); }
}

/* Large desktop (1280px+): the container has already hit its max-width
   (--tts-container-max) by this point, so content simply centers with
   more surrounding whitespace — deliberately NOT stretched edge-to-edge
   (see brief §54, "do not stretch content across the entire screen"). */
@media (min-width: 1280px) {
	.tts-market-hero__tagline { font-size: var(--tts-font-size-lg); }
}

/* 1440px / 1920px: no further layout changes are needed — the
   max-width container already caps content width, confirmed in the
   responsive test matrix rather than adding speculative rules here. */