/**
 * Torneo de Invierno - Responsive Styles
 *
 * Breakpoints and responsive utilities.
 * Mobile-first approach: base styles are mobile, then scale up.
 *
 * Breakpoints:
 *   - sm:  480px  (large phones)
 *   - md:  768px  (tablets)
 *   - lg:  1024px (desktops)
 *   - xl:  1280px (large desktops)
 *
 * @package MO_Torneo_Invierno
 * @since   1.0.0
 */

/* ==========================================================================
   1. Container Adjustments
   ========================================================================== */

/* Mobile: tighter padding */
.mo-torneo-invierno-header,
.mo-torneo-invierno-footer,
.mo-torneo-invierno-content {
	padding-left: var(--mo-torneo-invierno-space-4);
	padding-right: var(--mo-torneo-invierno-space-4);
}

@media (min-width: 768px) {
	.mo-torneo-invierno-header,
	.mo-torneo-invierno-footer,
	.mo-torneo-invierno-content {
		padding-left: var(--mo-torneo-invierno-space-6);
		padding-right: var(--mo-torneo-invierno-space-6);
	}
}

@media (min-width: 1024px) {
	.mo-torneo-invierno-header,
	.mo-torneo-invierno-footer,
	.mo-torneo-invierno-content {
		padding-left: var(--mo-torneo-invierno-space-8);
		padding-right: var(--mo-torneo-invierno-space-8);
	}
}


/* ==========================================================================
   2. Typography Scale
   ========================================================================== */

/* Scale down headings on mobile */
@media (max-width: 767px) {
	h1, .mo-torneo-invierno-text-4xl { font-size: var(--mo-torneo-invierno-text-3xl); }
	h2, .mo-torneo-invierno-text-3xl { font-size: var(--mo-torneo-invierno-text-2xl); }
	h3, .mo-torneo-invierno-text-2xl { font-size: var(--mo-torneo-invierno-text-xl); }
}


/* ==========================================================================
   3. Card Grid
   ========================================================================== */

.mo-torneo-invierno-grid {
	display: grid;
	gap: var(--mo-torneo-invierno-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.mo-torneo-invierno-grid--2,
	.mo-torneo-invierno-grid--3,
	.mo-torneo-invierno-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.mo-torneo-invierno-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.mo-torneo-invierno-grid--4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.mo-torneo-invierno-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ==========================================================================
   4. Button Responsiveness
   ========================================================================== */

/* Full-width buttons on mobile when stacked */
@media (max-width: 479px) {
	.mo-torneo-invierno-btn-group--stack-mobile {
		flex-direction: column;
	}

	.mo-torneo-invierno-btn-group--stack-mobile .mo-torneo-invierno-btn {
		width: 100%;
	}
}


/* ==========================================================================
   5. Table Responsiveness
   ========================================================================== */

@media (max-width: 767px) {
	.mo-torneo-invierno-table-responsive {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* ==========================================================================
   6. Visibility Utilities
   ========================================================================== */

/* Hide on mobile (< 768px) */
@media (max-width: 767px) {
	.mo-torneo-invierno-hide-mobile {
		display: none !important;
	}
}

/* Show only on mobile (< 768px) */
@media (min-width: 768px) {
	.mo-torneo-invierno-show-mobile-only {
		display: none !important;
	}
}

/* Hide on tablet and up (>= 768px) */
@media (min-width: 768px) {
	.mo-torneo-invierno-hide-tablet-up {
		display: none !important;
	}
}

/* Hide on desktop (>= 1024px) */
@media (min-width: 1024px) {
	.mo-torneo-invierno-hide-desktop {
		display: none !important;
	}
}

/* Show only on desktop (>= 1024px) */
@media (max-width: 1023px) {
	.mo-torneo-invierno-show-desktop-only {
		display: none !important;
	}
}


/* ==========================================================================
   7. Spacing Utilities - Responsive Overrides
   ========================================================================== */

/* Reduce large spacing on mobile */
@media (max-width: 767px) {
	.mo-torneo-invierno-space-responsive {
		--mo-torneo-invierno-space-8:  1.5rem;
		--mo-torneo-invierno-space-10: 2rem;
		--mo-torneo-invierno-space-12: 2.5rem;
		--mo-torneo-invierno-space-16: 3rem;
	}
}


/* ==========================================================================
   8. Form Layout
   ========================================================================== */

.mo-torneo-invierno-form-row {
	display: flex;
	gap: var(--mo-torneo-invierno-space-4);
}

@media (max-width: 479px) {
	.mo-torneo-invierno-form-row {
		flex-direction: column;
	}

	.mo-torneo-invierno-form-row > * {
		width: 100%;
	}
}

.mo-torneo-invierno-form-row > * {
	flex: 1;
}


/* ==========================================================================
   9. Print Styles
   ========================================================================== */

@media print {
	.mo-torneo-invierno-header,
	.mo-torneo-invierno-footer,
	.mo-torneo-invierno-btn,
	.mo-torneo-invierno-badge {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 12pt;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.mo-torneo-invierno-card {
		border: 1px solid #ccc;
		box-shadow: none;
		break-inside: avoid;
	}
}