/**
 * Palm Harbor Villas mobile-only layout fixes.
 *
 * mobile-carousels.js adds the phv-* hooks from nearby heading text and the
 * page body class. Keeping all layout overrides behind the mobile breakpoint
 * preserves the existing Kadence desktop presentation.
 */

.phv-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 767px) {
	/* Audit: the Move-In Special banner needs a wider, better-padded text box. */
	.bcio-flex-pay-top-banner {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: none !important;
		padding-inline:
			max(14px, env(safe-area-inset-left))
			max(14px, env(safe-area-inset-right)) !important;
		column-gap: 10px !important;
		row-gap: 8px !important;
	}

	.bcio-flex-pay-top-banner .bcio-flex-text {
		box-sizing: border-box !important;
		flex: 1 0 100% !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		padding-inline: 6px !important;
		text-align: center !important;
		text-wrap: balance;
	}

	/* Audit: add breathing room below Home's Spacious Ground-Level Homes row. */
	body.home .phv-home-spacious-section > .kt-row-column-wrap,
	body.page-id-516 .phv-home-spacious-section > .kt-row-column-wrap {
		box-sizing: border-box !important;
		padding-bottom: 40px !important;
	}

	/* Audit: restore comfortable side padding around the Home leasing form. */
	body.home .phv-home-contact-form-column,
	body.page-id-516 .phv-home-contact-form-column {
		box-sizing: border-box !important;
		padding-right: max(20px, env(safe-area-inset-right)) !important;
		padding-left: max(20px, env(safe-area-inset-left)) !important;
	}

	body.home .phv-home-contact-form-column form,
	body.page-id-516 .phv-home-contact-form-column form {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/*
	 * Audit: About's Resident-Focused Team, Ground-Level Living, and Space
	 * Coast cards need consistent side padding on narrow screens.
	 */
	body.page-id-520 .phv-mobile-copy-card {
		box-sizing: border-box !important;
		width: 100% !important;
		padding-right: max(20px, env(safe-area-inset-right)) !important;
		padding-left: max(20px, env(safe-area-inset-left)) !important;
	}

	/*
	 * Audit: About's Ground-Level Living image and the Two-Bedroom Highlights
	 * image must follow their heading/copy. The latter currently lives on the
	 * Floor Plans page (page 607), so the hook is applied by heading text rather
	 * than by a misleading page label in the audit notes.
	 */
	.phv-mobile-media-after-copy > .kt-inside-inner-col {
		display: flex !important;
		flex-direction: column !important;
	}

	.phv-mobile-media-after-copy > .kt-inside-inner-col > .wp-block-kadence-image,
	.phv-mobile-media-after-copy > .kt-inside-inner-col > figure {
		order: 30 !important;
		margin-top: 22px !important;
		margin-bottom: 0 !important;
	}

	/*
	 * Audits: Home Fast Online Applications and each Gallery tab become an
	 * independent, touch-friendly horizontal carousel. JS supplies semantic
	 * region/list/slide labels and controls; CSS supplies the scroll-snap UI.
	 */
	.phv-mobile-carousel {
		--phv-carousel-gap: 14px;
		--phv-carousel-edge: max(16px, env(safe-area-inset-left));
		box-sizing: border-box;
		position: relative;
		width: 100%;
		max-width: 100%;
		overflow: visible;
	}

	.phv-mobile-carousel .phv-carousel-list-shell {
		display: block !important;
		grid-template-columns: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	.phv-mobile-carousel .phv-carousel-track {
		display: flex !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		align-items: stretch !important;
		gap: var(--phv-carousel-gap) !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 4px var(--phv-carousel-edge) 14px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		overscroll-behavior-inline: contain;
		scroll-behavior: smooth;
		scroll-padding-inline: var(--phv-carousel-edge);
		scroll-snap-type: x mandatory;
		scrollbar-color: var(--global-palette4, #968356) transparent;
		scrollbar-width: thin;
		list-style: none !important;
		touch-action: pan-x pan-y;
		-webkit-overflow-scrolling: touch;
	}

	.phv-mobile-carousel .phv-carousel-track::-webkit-scrollbar {
		height: 5px;
	}

	.phv-mobile-carousel .phv-carousel-track::-webkit-scrollbar-track {
		background: transparent;
	}

	.phv-mobile-carousel .phv-carousel-track::-webkit-scrollbar-thumb {
		background: var(--global-palette4, #968356);
		border-radius: 999px;
	}

	.phv-mobile-carousel .phv-carousel-track:focus-visible {
		outline: 3px solid var(--global-palette4, #968356);
		outline-offset: 3px;
	}

	.phv-mobile-carousel .phv-carousel-track > .phv-carousel-slide {
		box-sizing: border-box !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		flex: 0 0 min(82vw, 340px) !important;
		grid-area: auto !important;
		width: min(82vw, 340px) !important;
		max-width: min(82vw, 340px) !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		overflow: hidden;
		border-radius: 8px;
		background: var(--global-palette9, #fff);
		box-shadow: 0 6px 20px rgba(39, 35, 28, 0.16);
	}

	.phv-mobile-carousel .phv-carousel-slide,
	.phv-mobile-carousel .phv-carousel-slide > .kadence-blocks-gallery-item,
	.phv-mobile-carousel .phv-carousel-slide .kadence-blocks-gallery-item-inner,
	.phv-mobile-carousel .phv-carousel-slide .kb-gallery-figure,
	.phv-mobile-carousel .phv-carousel-slide .kb-gallery-item-link {
		height: 100% !important;
	}

	.phv-mobile-carousel .phv-carousel-slide .kb-gallery-figure {
		margin: 0 !important;
	}

	.phv-mobile-carousel .phv-carousel-slide .kb-gallery-image-contain {
		position: relative !important;
		box-sizing: border-box !important;
		width: 100% !important;
		height: auto !important;
		padding-bottom: 75% !important;
		overflow: hidden !important;
	}

	.phv-mobile-carousel .phv-carousel-slide img {
		position: absolute !important;
		inset: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		object-fit: cover !important;
	}

	.phv-carousel-controls {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		width: 100%;
		padding: 8px var(--phv-carousel-edge) 0;
	}

	.phv-carousel-button {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 1px solid var(--global-palette4, #968356);
		border-radius: 999px;
		background: var(--global-palette9, #fff);
		color: var(--global-palette3, #2c2923);
		font: inherit;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.phv-carousel-button:hover,
	.phv-carousel-button:focus-visible {
		background: var(--global-palette4, #968356);
		color: var(--global-palette9, #fff);
	}

	.phv-carousel-button:focus-visible {
		outline: 3px solid var(--global-palette3, #2c2923);
		outline-offset: 2px;
	}

	.phv-carousel-button:disabled {
		cursor: default;
		opacity: 0.38;
	}

	.phv-carousel-status {
		min-width: 0;
		color: var(--global-palette3, #2c2923);
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-align: center;
	}

	/*
	 * Audit: rebuild Contact's Email, Location, Hours, and Call cards as a
	 * resilient one-column mobile grid (two columns on wider small screens).
	 */
	body.page-id-525 .phv-contact-info-grid > .kt-row-column-wrap {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		align-items: stretch !important;
		gap: 12px !important;
		box-sizing: border-box !important;
		padding: 28px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)) !important;
	}

	body.page-id-525 .phv-contact-info-column {
		box-sizing: border-box !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body.page-id-525 .phv-contact-info-card,
	body.page-id-525 .phv-contact-info-card > .kt-blocks-info-box-link-wrap {
		height: 100%;
	}

	body.page-id-525 .phv-contact-info-card > .kt-blocks-info-box-link-wrap {
		display: grid !important;
		grid-template-columns: 48px minmax(0, 1fr) !important;
		align-items: center !important;
		gap: 14px !important;
		box-sizing: border-box !important;
		min-height: 104px !important;
		padding: 16px !important;
		border: 1px solid rgba(68, 68, 68, 0.14) !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.88) !important;
		box-shadow: 0 5px 18px rgba(39, 35, 28, 0.1) !important;
		text-align: left !important;
	}

	body.page-id-525 .phv-contact-info-card .kt-blocks-info-box-media-container {
		grid-column: 1 !important;
		width: 48px !important;
		margin: 0 !important;
	}

	body.page-id-525 .phv-contact-info-card .kt-blocks-info-box-media,
	body.page-id-525 .phv-contact-info-card .kadence-info-box-icon-container {
		width: 48px !important;
		height: 48px !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.page-id-525 .phv-contact-info-card .kt-infobox-textcontent {
		grid-column: 2 !important;
		min-width: 0 !important;
		text-align: left !important;
	}

	body.page-id-525 .phv-contact-info-card .kt-blocks-info-box-title {
		margin: 0 0 4px !important;
		font-size: clamp(1rem, 4.8vw, 1.2rem) !important;
		line-height: 1.2 !important;
		text-transform: capitalize;
	}

	body.page-id-525 .phv-contact-info-card .kt-blocks-info-box-text {
		margin: 0 !important;
		font-size: 0.9rem !important;
		line-height: 1.45 !important;
		overflow-wrap: anywhere;
	}

	/* Audit: place Contact Us above its form even though it follows it in HTML. */
	body.page-id-525 .phv-contact-form-stack {
		display: flex !important;
		flex-direction: column !important;
	}

	body.page-id-525 .phv-contact-form-stack > .phv-contact-heading {
		order: -10 !important;
		margin-top: 0 !important;
		margin-bottom: 20px !important;
	}

	body.page-id-525 .phv-contact-form-stack > .fluentform {
		order: 0;
		width: 100%;
	}

}

@media (min-width: 560px) and (max-width: 767px) {
	body.page-id-525 .phv-contact-info-grid > .kt-row-column-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 359px) {
	.bcio-flex-pay-top-banner {
		padding-inline:
			max(10px, env(safe-area-inset-left))
			max(10px, env(safe-area-inset-right)) !important;
	}

	.phv-mobile-carousel .phv-carousel-track > .phv-carousel-slide {
		flex-basis: 86vw !important;
		width: 86vw !important;
		max-width: 86vw !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phv-mobile-carousel .phv-carousel-track {
		scroll-behavior: auto;
	}

	.phv-mobile-carousel *,
	.phv-mobile-carousel *::before,
	.phv-mobile-carousel *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}