/**
 * Minh Phát Dallas Hotel — responsive breakpoints
 * Tablet: max-width 1199px | Mobile: max-width 767px
 */

/* ==========================================================================
   Tablet — max 1199px
   ========================================================================== */

@media (max-width: 1199px) {
	.mph-container {
		width: calc(100% - 48px);
	}

	.mph-header__inner {
		gap: 1.25rem;
	}

	.mph-nav__list {
		gap: 20px;
	}

	.mph-nav__list a {
		font-size: 12px;
	}

	.mph-about {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mph-about__badge {
		left: 16px;
		bottom: 16px;
	}

	.mph-amenities-bar__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px 16px;
		padding: 24px 0;
	}

	.mph-room-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.mph-social-proof {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mph-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 28px;
	}

	.mph-footer__col--brand {
		grid-column: span 2;
	}

	.mph-booking-form__bar,
	.mph-core-component .mph-booking-form__bar {
		grid-template-columns: repeat(3, 1fr);
	}

	.mph-booking-form__field:nth-child(3) {
		border-right: 0;
	}

	.mph-booking-form__field:nth-child(4) {
		border-right: 1px solid var(--mph-color-border);
	}

	.mph-booking-form__actions {
		grid-column: span 3;
		padding-left: 0;
		padding-top: 12px;
		border-right: 0;
	}

	.mph-offer-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px 32px;
	}

	.mph-room-single__layout {
		grid-template-columns: 1fr;
	}

	.mph-room-booking-card {
		position: static;
	}

	.mph-amenities-grid,
	.mph-offers-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mph-restaurant,
	.mph-contact {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Mobile — max 767px
   ========================================================================== */

@media (max-width: 767px) {
	.mph-container {
		width: calc(100% - 32px);
	}

	.mph-section {
		padding: 56px 0;
	}

	.mph-header__inner {
		grid-template-columns: 1fr auto;
	}

	.mph-nav--desktop,
	.mph-header__hotline,
	.mph-header__cta {
		display: none;
	}

	.mph-nav-toggle {
		display: flex;
	}

	.mph-hero {
		min-height: 650px;
	}

	.mph-hero__content {
		padding: calc(var(--mph-header-height) + 80px) 0 64px;
		max-width: 100%;
	}

	.mph-hero__title {
		font-size: clamp(2.25rem, 10vw, 3rem);
	}

	.mph-booking-bar {
		margin-top: -24px;
	}

	.mph-booking-bar__panel {
		padding: 20px;
	}

	.mph-booking-form__bar,
	.mph-core-component .mph-booking-form__bar {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mph-booking-form__field {
		border-right: 0;
		border-bottom: 1px solid var(--mph-color-border);
		padding: 14px 0;
	}

	.mph-booking-form__field:first-child {
		padding-left: 0;
	}

	.mph-booking-form__field:last-of-type {
		border-bottom: 0;
	}

	.mph-booking-form__actions {
		grid-column: auto;
		padding: 16px 0 0;
	}

	.mph-booking-form__submit {
		width: 100%;
		min-height: 48px;
	}

	.mph-booking-form__contact-grid {
		grid-template-columns: 1fr;
	}

	.mph-about-gallery {
		grid-template-columns: 1fr 1fr;
		min-height: 320px;
	}

	.mph-about__badge {
		position: absolute;
		left: 50%;
		bottom: 50%;
		transform: translate(-50%, 50%);
		margin-top: 0;
	}

	.mph-amenities-bar__list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 0;
		padding: 20px 0;
		min-height: 110px;
	}

	.mph-amenities-bar__item {
		flex: 0 0 128px;
		scroll-snap-align: start;
		padding: 16px 12px 14px;
		margin-right: 10px;
	}

	.mph-amenities-bar__item:last-child {
		margin-right: 0;
	}

	.mph-room-grid {
		grid-template-columns: 1fr;
	}

	.mph-section__header--split {
		flex-direction: column;
		align-items: flex-start;
	}

	.mph-offer-banner {
		padding: 24px;
		min-height: auto;
	}

	.mph-gallery-mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		height: 220px;
	}

	.mph-gallery-mosaic__item--0,
	.mph-gallery-mosaic__item--1,
	.mph-gallery-mosaic__item--2,
	.mph-gallery-mosaic__item--3 {
		grid-column: auto;
		grid-row: auto;
		display: block;
	}

	.mph-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 48px;
	}

	.mph-footer__col--brand {
		grid-column: auto;
	}

	.mph-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.mph-room-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.mph-room-gallery__item--featured {
		grid-column: span 2;
		grid-row: span 1;
	}

	.mph-amenities-grid,
	.mph-offers-grid {
		grid-template-columns: 1fr;
	}

	.mph-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mph-gallery-grid__item:nth-child(1) {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* ==========================================================================
   Small mobile — max 480px
   ========================================================================== */

@media (max-width: 480px) {
	.mph-hero__actions {
		flex-direction: column;
		width: 100%;
	}

	.mph-hero__actions .mph-btn {
		width: 100%;
		justify-content: center;
	}

	.mph-room-card__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.mph-about-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: 0;
		gap: 12px;
	}

	.mph-about-gallery__main {
		grid-row: auto;
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.mph-about-gallery__small {
		aspect-ratio: 16 / 10;
		height: auto;
	}
}