/* Page-specific responsive fixes. Selectors use each page's WPBakery classes, which are the same on
   the local and live sites. The ".vc_column-inner" / ".vc_row" prefixes outrank WPBakery's own
   !important rules for those elements. */

/* ---------- Dining (/dining/) ---------- */
@media (max-width: 767px) {
	/* Row 1: the empty left half shows the dining-hall photo as a banner above the text card. */
	.vc_custom_1504072867955 .vc_inner > .col-sm-6:first-child {
		min-height: 220px;
	}

	.vc_column-inner.vc_custom_1472873637026 {
		padding: 36px 22px 40px !important;
	}

	/* Row 2 text column. */
	.vc_column-inner.vc_custom_1478580333606 {
		padding: 36px 0 24px !important;
	}

	/* Justified text leaves big word gaps in a narrow column. */
	.vc_custom_1472873637026 .wpb_text_column,
	.vc_custom_1472873637026 .wpb_text_column p,
	.vc_custom_1478580333606 .wpb_text_column,
	.vc_custom_1478580333606 .wpb_text_column p {
		text-align: left !important;
		line-height: 1.75;
	}

	/* Photo grid: two per row instead of six full-width squares. WPBakery forces float:none on
	   grid items at this width, so lay the wrapper out with flexbox. */
	.page-id-10260 .vc_media_grid .vc_pageable-slide-wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	.page-id-10260 .vc_media_grid .vc_grid-item {
		width: 50%;
	}
}

/* Dining on tablets: the two columns stay side by side, but 65px side padding left ~200px for text. */
@media (min-width: 768px) and (max-width: 991px) {
	.vc_column-inner.vc_custom_1472873637026 {
		padding: 60px 32px 70px !important;
	}

	.vc_column-inner.vc_custom_1478580333606 {
		padding: 44px 24px 40px 0 !important;
	}

	.vc_custom_1472873637026 .wpb_text_column,
	.vc_custom_1472873637026 .wpb_text_column p,
	.vc_custom_1478580333606 .wpb_text_column,
	.vc_custom_1478580333606 .wpb_text_column p {
		text-align: left !important;
	}
}

/* ---------- Things To Do (/things-to-do/) ---------- */
@media (max-width: 767px) {
	/* Each attraction is a white card beside an empty half column that shows the photo on desktop.
	   Stacked, the empty column collapsed to 1px. Show it as a photo banner only when it sits above
	   the card, so two banners never stack between cards (and a row with no photo stays compact). */
	.page-id-10285 .vc_inner > [class*="col-sm-6"]:first-child:not(:has(.wpb_wrapper > *)) {
		min-height: 180px;
	}

	.page-id-10285 .vc_column-inner.vc_custom_1478317974867,
	.page-id-10285 .vc_column-inner.vc_custom_1478323918529 {
		padding: 34px 22px 26px !important;
	}

	/* 31px headings overflowed on long words (e.g. "Piduruthalagala"). */
	.page-id-10285 .widget-text-heading.style-7 .widget-heading {
		font-size: 24px;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.page-id-10285 .wpb_text_column,
	.page-id-10285 .wpb_text_column p {
		text-align: left !important;
		line-height: 1.75;
	}

	/* Photos: two per row (WPBakery forces float:none on grid items at this width). */
	.page-id-10285 .vc_media_grid .vc_pageable-slide-wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	.page-id-10285 .vc_media_grid .vc_grid-item {
		width: 50%;
	}
}

/* Things To Do on tablets: cards stay half width; trim the 65px side padding and justified text. */
@media (min-width: 768px) and (max-width: 991px) {
	.page-id-10285 .vc_column-inner.vc_custom_1478317974867,
	.page-id-10285 .vc_column-inner.vc_custom_1478323918529 {
		padding: 44px 30px !important;
	}

	.page-id-10285 .wpb_text_column,
	.page-id-10285 .wpb_text_column p {
		text-align: left !important;
	}
}

/* ---------- About Us (/about-us/) ---------- */
@media (max-width: 767px) {
	.page-id-9291 .wpb_text_column,
	.page-id-9291 .wpb_text_column p {
		text-align: left !important;
		line-height: 1.75;
	}

	/* "What make Villa Mount Royal special" tabs (an accordion on phones). Each panel keeps its
	   desktop layout: empty 1/12 spacer columns with 100px top padding and a white card with
	   100/55/110/70px padding and a 24px lead paragraph. */
	.page-id-9291 .vc_tta-panel-body .col-sm-1 {
		display: none;
	}

	.page-id-9291 .vc_tta-tabs {
		margin-bottom: 40px;
	}

	.page-id-9291 .shadow-box > .vc_column-inner {
		margin-right: 0 !important;
		padding: 30px 22px 26px !important;
	}

	.page-id-9291 .vc_tta-panel-body [class*="col-sm-4"] > .vc_column-inner {
		margin-left: 0 !important;
	}

	.page-id-9291 .shadow-box .widget-text-heading .widget-heading {
		font-size: 24px;
		line-height: 1.25;
	}

	.page-id-9291 .shadow-box .vc_custom_heading {
		font-size: 18px !important;
		line-height: 1.6 !important;
	}
}

/* About Us on tablets: trim the tab card padding; keep the footer card's overlap off the tabs. */
@media (min-width: 768px) and (max-width: 991px) {
	.page-id-9291 .vc_tta-tabs {
		margin-bottom: 90px;
	}

	.page-id-9291 .shadow-box > .vc_column-inner {
		padding: 50px 30px 50px 36px !important;
	}

	.page-id-9291 .shadow-box .vc_custom_heading {
		font-size: 19px !important;
		line-height: 1.55 !important;
	}

	.page-id-9291 .wpb_text_column,
	.page-id-9291 .wpb_text_column p {
		text-align: left !important;
	}
}

/* ---------- Homepage: Testimonials ---------- */
@media (max-width: 767px) {
	/* Each testimonial is a 3/9 split: avatar, name and date squeezed into ~60px on the left
	   (name and date broke one word per line). Stack it: author row on top, quote full width. */
	.testimonials-v5 .testimonials-body .row > [class*="col-xs-"] {
		float: none;
		width: 100%;
	}

	.testimonials-v5 .testimonials-body .testimonials-bio {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 12px;
		align-items: center;
		margin-bottom: 16px;
		text-align: left !important;
	}

	.testimonials-v5 .testimonials-body .testimonials-bio .testimonials-avatar {
		grid-row: span 2;
		padding: 0;
	}

	.testimonials-v5 .testimonials-body .testimonials-name {
		align-self: end;
		margin: 0;
		font-size: 15px;
	}

	.testimonials-v5 .testimonials-body .entry-date {
		align-self: start;
		margin: 2px 0 0;
		font-size: 12px;
		letter-spacing: .06em;
		color: #999;
	}

	.testimonials-v5 .testimonials-body .entry-date span {
		display: inline;
	}

	.testimonials-v5 .testimonials-body .subject {
		margin-bottom: 10px;
	}

	.testimonials-v5 .testimonials-body .testimonials-description p {
		font-size: 16px;
		line-height: 1.7;
	}
}

/* Tablets keep the side-by-side layout; just stop the date wrapping onto two lines. */
@media (min-width: 768px) and (max-width: 991px) {
	.testimonials-v5 .testimonials-body .entry-date {
		margin: 0;
		font-size: 12px;
		white-space: nowrap;
	}
}

/* ---------- Homepage: Luxury Accommodation / Book Now ---------- */
@media (max-width: 767px) {
	.vc_custom_1478328506324 .widget-text-heading .widget-heading {
		font-size: 26px;
		line-height: 1.2;
	}

	/* "BOOK NOW" has an inline text-align:right for the desktop 1/3 + 2/3 layout. */
	.vc_custom_1478328506324 .vc_inner .col-sm-4 h1 {
		margin: 10px 0 18px;
		font-size: 32px;
		text-align: center !important;
	}

	/* Booking-site logos: a 4-per-view carousel made each logo ~67px wide. Show a static 2x2 grid. */
	.vc_custom_1478328506324 .vc_images_carousel {
		width: 100% !important;
	}

	.vc_custom_1478328506324 .vc_images_carousel .vc_carousel-slideline {
		width: auto !important;
		left: 0 !important;
		transform: none !important;
	}

	.vc_custom_1478328506324 .vc_images_carousel .vc_carousel-slideline-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		left: 0 !important;
		width: auto !important;
	}

	.vc_custom_1478328506324 .vc_images_carousel .vc_item {
		float: none !important;
		width: auto !important;
		height: auto !important;
	}

	.vc_custom_1478328506324 .vc_images_carousel .vc_item .vc_inner {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 78px;
		margin: 0 !important;
		padding: 10px 14px;
		border: 1px solid #eee;
		border-radius: 8px;
		background: #fff;
	}

	.vc_custom_1478328506324 .vc_images_carousel .vc_item img {
		width: auto;
		max-width: 100%;
		max-height: 56px;
		height: auto;
	}
}