/* ==========================================================================
   Phones & tablets — the program and category pages (inc/responsive-fix.php).
   The same rules as responsive/tablet.css and responsive/mobile.css, which
   each page's own stylesheet was overriding (it repeats the desktop rules
   and loads later). "body" in front of each rule makes it win again,
   whatever the load order. Only inside these widths — desktop is unchanged.
   ========================================================================== */

/* Tablets and phones: two-column sections stack (text, then photo), and the
   floating badge sits under the photo instead of hanging off its corner. */
@media (max-width: 1024px) {
	body .two-col,
	body .two-col.reverse { grid-template-columns: 1fr; gap: 40px; }
	body .two-col.reverse .two-col-media { order: -1; }
	/* Same as tablet.css: keep the badge above the photo so its number
	   is never cut off. */
	body .floating-badge { position: relative; z-index: 2; margin-top: -40px; margin-left: 20px; display: inline-block; }
}

/* Phones: one column for "What Is Included" and the trek itinerary. */
@media (max-width: 780px) {
	body .includes-grid { grid-template-columns: 1fr; }
	body .itinerary-item { flex-direction: column; gap: 10px; }
	body .itinerary-day { width: auto; align-self: flex-start; }
}

/* Small phones: tighter price box and schedule table. */
@media (max-width: 520px) {
	body .price-box { padding: 24px; }
	body .schedule-table td { padding: 12px 14px; font-size: 0.9rem; }
	body .schedule-table td:first-child { width: 110px; }
}