/* ============================================================
   Rhino Boxing — Comprehensive Responsive Overrides
   Covers all widgets and theme components for tablet and mobile.

   Breakpoints:
     Tablet:  768px – 1023px
     Phone:   < 768px
     Small:   < 480px
   ============================================================ */

/* ===========================================================================
   TABLET (768px – 1023px)
   =========================================================================== */

@media (max-width: 1023px) {

	/* --- Hero --- */
	.hero { min-height: 70vh; }
	.hero-content { max-width: 500px !important; padding-bottom: 48px; }
	.hero-content h1 { font-size: 36px; }
	.hero-content .lead { font-size: 16px; }

	/* --- Page Hero --- */
	.page-hero { padding: 140px 0 60px; }
	.page-hero h1 { font-size: 32px; }
	.page-hero-lead { font-size: 15px; }

	/* --- Programs grid --- */
	.rhino-programs__grid.grid-3 { grid-template-columns: repeat(2, 1fr); }

	/* --- Feature grid --- */
	.grid.grid-4 { grid-template-columns: repeat(2, 1fr); }

	/* --- Pricing --- */
	.rhino-pricing { padding: 60px 20px; }

	/* --- Timetable --- */
	.rhino-timetable { padding: 60px 16px; }

	/* --- Contact 2-col to stack --- */
	.rhino-contact-grid { grid-template-columns: 1fr; gap: 32px; }

	/* --- Testimonials --- */
	.rhino-testimonials__grid { grid-template-columns: repeat(2, 1fr); }

	/* --- Transformations --- */
	.rhino-transformations__grid.grid-2 { grid-template-columns: 1fr; }

	/* --- Coaches --- */
	.rhino-coaches__grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   PHONE (< 768px)
   =========================================================================== */

@media (max-width: 767px) {

	/* --- Global section spacing --- */
	.section { padding: 48px 0; }
	.container { padding: 0 16px; }

	/* --- Contact page: reduce spacing so form is near full-width --- */
	.rhino-contact-grid .rhino-booking {
		margin-left: -4px;
		margin-right: -4px;
		padding: 24px 12px;
		border-radius: 10px;
	}

	/* --- Hero --- */
	.hero { min-height: 85vh; align-items: flex-end; }
	.hero-content {
		max-width: 100% !important;
		padding-top: 0;
		padding-bottom: 60px;
		text-align: left;
	}
	.hero-content h1 { font-size: 28px; line-height: 1.15; }
	/* Vietnamese diacritics need extra breathing room on mobile */
	body.locale-vi .hero-content h1 { line-height: 1.35; }
	.hero-content .lead { font-size: 14px; max-width: 100%; }
	.hero-actions { flex-direction: column; gap: 12px; }
	.hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
	.hero-bg::after {
		background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%) !important;
	}
	/* Position overrides on mobile: always bottom */
	.hero--left, .hero--right, .hero--center { align-items: flex-end; }
	.hero--left .hero-content,
	.hero--right .hero-content,
	.hero--center .hero-content {
		margin: 0;
		text-align: left;
	}

	/* --- Page Hero --- */
	.page-hero { padding: 120px 0 40px; }
	.page-hero h1 { font-size: 26px; }
	.page-hero-lead { font-size: 14px; }
	.page-hero .hero-anchors { flex-direction: column; gap: 8px; }
	.page-hero .hero-anchors .btn { width: 100%; text-align: center; }

	/* --- Programs grid --- */
	.rhino-programs { padding: 48px 0; }
	.rhino-programs .container { padding: 0 16px; }
	.rhino-programs__head { margin-bottom: 32px; }
	.rhino-programs__head h2 { font-size: 28px; }
	.rhino-programs__grid.grid-2,
	.rhino-programs__grid.grid-3 { grid-template-columns: 1fr; }
	.rhino-programs__card .card-body { padding: 18px; }
	.rhino-programs__title { font-size: 18px; }

	/* --- Program Modal --- */
	.rhino-program-modal { padding: 0; align-items: center; }
	.rhino-program-modal__dialog {
		width: 96vw !important;
		max-width: 96vw !important;
		max-height: 70vh;
		border-radius: 16px;
		overflow-y: auto;
	}
	.rhino-program-modal__close {
		position: sticky;
		top: 8px;
		float: right;
		margin: 8px 8px 0 0;
		z-index: 10;
		width: 32px;
		height: 32px;
		font-size: 18px;
	}
	.rhino-program-modal__content { padding: 16px; }
	.rhino-program-modal__title { font-size: 22px; margin-bottom: 16px; }
	.rhino-program-modal__section h4 { font-size: 12px; }
	.rhino-program-modal__section p { font-size: 14px; }
	.rhino-program-modal__gallery-section { padding: 0 12px 16px; }
	.rhino-program-modal__gallery-item {
		width: calc((100% - 8px) / 2);
		aspect-ratio: 16 / 9;
	}
	.rhino-program-modal__footer { padding: 12px 16px 20px; }

	/* --- Feature Grid --- */
	.grid.grid-4,
	.grid.grid-3,
	.grid.grid-2 { grid-template-columns: 1fr; }
	.feature { padding: 20px 16px; }
	.feat-icon { width: 60px; height: 60px; font-size: 24px; }

	/* --- Pricing --- */
	.rhino-pricing { padding: 48px 16px; }
	.rhino-pricing__title { font-size: 28px; }
	.rhino-pricing__tabs { gap: 6px; }
	.rhino-pricing__tab { padding: 10px 18px; font-size: 12px; }
	.rhino-pricing__desc { padding: 20px 16px; border-radius: 12px; }
	.rhino-pricing__desc ul { grid-template-columns: 1fr; }
	.rhino-pricing__table th,
	.rhino-pricing__table td { padding: 12px 14px; font-size: 14px; }

	/* --- Timetable --- */
	.rhino-timetable { padding: 48px 12px; }
	.rhino-timetable__title { font-size: 26px; }
	.rhino-schedule { min-width: 600px; font-size: 12px; }
	.rhino-schedule th { padding: 10px 6px; font-size: 12px; }
	.rhino-schedule td { padding: 6px 4px; }
	.rhino-timetable .class-chip { padding: 6px 4px; }
	.rhino-timetable .cc-name { font-size: 10px; }
	.rhino-timetable__notice { font-size: 12px; padding: 10px 12px; }

	/* --- Testimonials --- */
	.rhino-testimonials__grid { grid-template-columns: 1fr; gap: 10px; }
	.review-card {
		padding: 14px 12px;
	}
	.review-card p {
		font-size: 13px;
		line-height: 1.45;
		margin-bottom: 10px;
	}

	/* --- Transformations --- */
	.rhino-transformations__grid.grid-2 { grid-template-columns: 1fr; }
	.rhino-transformations__tabs { flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
	.rhino-transformations__tab { font-size: 11px; padding: 6px 12px; }
	.ba-card { border-radius: 12px; }
	.ba-images { grid-template-columns: 1fr 1fr; }
	.ba-images figure img { height: 160px; }

	/* --- Booking Form --- */
	.rhino-booking { padding: 24px 12px; border-radius: 12px; }
	.rhino-booking-form .form-row { grid-template-columns: 1fr; gap: 0; }
	.rhino-booking-form .form-field { margin-bottom: 16px; }
	.rhino-booking-form .form-field input,
	.rhino-booking-form .form-field select,
	.rhino-booking-form .form-field textarea {
		height: 46px;
		font-size: 14px;
	}
	.rhino-booking-form .form-field textarea { height: 100px; }
	.rhino-booking__title { font-size: clamp(20px, 5.5vw, 28px); line-height: 1.2; }

	/* --- Booking Modal (popup) --- */
	.rhino-modal { padding: 0; }
	.rhino-modal__dialog {
		margin: 0;
		border-radius: 0;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 100vh;
		max-height: 100dvh;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.rhino-modal__close { top: 12px; right: 12px; }
	.rhino-booking {
		padding: 20px 16px 0 !important;
		border-radius: 0 !important;
		border: none !important;
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
	}
	.rhino-booking-form {
		max-width: 100% !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex: 1;
		padding-bottom: 100px;
	}
	.rhino-booking-form .form-field input,
	.rhino-booking-form .form-field select,
	.rhino-booking-form .form-field textarea {
		height: 46px;
		font-size: 14px;
		max-width: 100%;
		box-sizing: border-box;
	}
	.rhino-booking__submit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		border-radius: 0 !important;
		padding: 16px 24px;
		margin: 0;
	}
	.rhino-booking__note { display: none; }

	/* --- Coaches --- */
	.rhino-coaches__grid.grid-3,
	.rhino-coaches__grid.grid-2 { grid-template-columns: 1fr; }

	/* --- CTA sections --- */
	.rhino-cta { padding: 48px 16px; }
	.rhino-cta h2 { font-size: 24px; }

	/* --- Media text (split sections) --- */
	.rhino-media-text__grid { grid-template-columns: 1fr !important; }
	.rhino-media-text__img { max-height: 280px; }

	/* --- Footer --- */
	.footer-grid { grid-template-columns: 1fr; gap: 32px; }

	/* --- Lightbox --- */
	.rhino-program-lightbox__content img,
	.rhino-program-lightbox__content video {
		max-width: 95vw;
		max-height: 80vh;
	}
}

/* ===========================================================================
   SMALL PHONE (< 480px)
   =========================================================================== */

@media (max-width: 479px) {
	.hero-content h1 { font-size: 24px; }
	.hero-content .overline { font-size: 11px; }
	.rhino-programs__head h2,
	.rhino-timetable__title,
	.rhino-pricing__title { font-size: 24px; }
	.section-head h2 { font-size: 24px; }
	.rhino-program-modal__title { font-size: 20px; }
	.rhino-program-modal__gallery-item { width: calc(100% - 0px); }
	.btn-lg { padding: 14px 24px; font-size: 14px; }
}