/* -----------------------------------------------------------------------------
 * Villa Antonia · Page-specific component styles
 * Source: design/villa-antonia-new/project/{Rooms,About,Contact}.html
 * --------------------------------------------------------------------------- */

/* =============================================================================
 * ROOMS LIST PAGE
 * ========================================================================== */

.va-head-visual {
	position: relative;
	height: 420px;
}

.va-filter-bar {
	margin: -46px 72px 0;
	background: var(--va-cream);
	border-radius: var(--va-radius-pill);
	padding: 14px 26px;
	box-shadow: 0 28px 70px -34px rgba(30, 42, 58, 0.4);
	display: flex;
	align-items: center;
	gap: 18px;
	position: relative;
	z-index: 5;
}
.va-chip {
	padding: 10px 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 60px;
	cursor: pointer;
	color: var(--va-ink-soft);
	border: 1px solid transparent;
	transition: background var(--va-tr-fast);
}
.va-chip.is-active { background: var(--va-ink); color: var(--va-cream); }
.va-chip:hover:not(.is-active) { background: rgba(30, 42, 58, 0.06); }
.va-filter-meta {
	margin-left: auto;
	font-size: 12px;
	color: var(--va-ink-soft);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}
.va-filter-meta strong {
	color: var(--va-coral);
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 20px;
	letter-spacing: 0;
	margin: 0 4px;
	font-weight: 600;
}

.va-rooms-list {
	padding: 130px 72px 60px;
}
.va-room-row {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	align-items: center;
	padding: 60px 0;
	border-bottom: 1px solid var(--va-line);
}
.va-room-row.va-flip {
	grid-template-columns: 1fr 1.05fr;
}
.va-room-row.va-flip .va-room-photo { order: 2; }

.va-room-photo {
	position: relative;
	height: 480px;
}
.va-room-main-ph { height: 100%; border-radius: var(--va-radius-md); }
.va-room-num {
	position: absolute;
	top: -22px; left: -22px;
	width: 74px; height: 74px;
	border-radius: 50%;
	background: var(--va-cream);
	color: var(--va-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 42px;
	font-weight: 600;
	box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.4);
	z-index: 2;
}
.va-room-badge {
	position: absolute;
	bottom: 18px; right: 18px;
	background: var(--va-ink);
	color: var(--va-cream);
	padding: 10px 18px;
	border-radius: 3px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
}
.va-room-badge-coral { background: var(--va-coral); }
.va-room-badge-cream { background: var(--va-cream); color: var(--va-ink); }

.va-room-info .va-eyebrow { margin-bottom: 14px; }
.va-room-info h2 {
	font-size: 66px;
	line-height: 1;
	margin-bottom: 12px;
}
.va-room-sub {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 22px;
	color: var(--va-ink-soft);
	margin-bottom: 20px;
}
.va-room-info p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--va-ink-soft);
	max-width: 520px;
}
.va-chips {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.va-chip-c {
	font-size: 12px;
	padding: 7px 12px;
	background: var(--va-cream);
	border-radius: 3px;
	letter-spacing: 0.04em;
	color: var(--va-ink);
	font-weight: 500;
	border: 1px solid var(--va-line);
}
.va-chip-c .ki {
	color: var(--va-coral);
	margin-right: 5px;
	font-weight: 700;
}
.va-room-pricing {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 520px;
	padding-top: 24px;
	border-top: 1px dashed var(--va-line);
}
.va-from-lbl {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--va-ink-soft);
	font-weight: 600;
}
.va-room-price-big {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 38px;
	color: var(--va-coral);
	font-weight: 600;
	line-height: 1;
}
.va-room-price-big small {
	font-size: 13px;
	font-style: normal;
	font-family: var(--va-font-sans);
	color: var(--va-ink-soft);
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-left: 6px;
}

/* Shared amenities (Rooms page bottom) */
.va-shared {
	background: var(--va-cream);
	padding: 110px 72px;
	margin-top: 60px;
}
.va-shared-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: end;
	margin-bottom: 56px;
}
.va-shared-head h2 {
	font-size: 54px;
	line-height: 1.05;
	margin: 14px 0 0;
	max-width: 520px;
}
.va-shared-head p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--va-ink-soft);
	max-width: 440px;
}
.va-shared-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius-lg);
	background: var(--va-paper);
	overflow: hidden;
}
.va-shared-item {
	aspect-ratio: 1 / 1;
	padding: 20px 12px;
	text-align: center;
	border-right: 1px solid var(--va-line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.va-shared-item:last-child { border-right: 0; }
.va-shared-ic { width: 36px; height: 36px; color: var(--va-teal); }
.va-shared-ic svg { width: 100%; height: 100%; }
.va-shared-t {
	font-family: var(--va-font-serif);
	font-size: 20px;
	color: var(--va-ink);
	font-weight: 600;
	line-height: 1.1;
}

/* =============================================================================
 * ABOUT PAGE
 * ========================================================================== */
.va-story {
	padding: 130px 72px 100px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 80px;
	align-items: center;
}
.va-story-visual {
	position: relative;
	height: 600px;
}
.va-story-v1 {
	position: absolute;
	top: 0; left: 0;
	width: 70%;
	height: 60%;
}
.va-story-v2 {
	position: absolute;
	bottom: 0; right: 0;
	width: 60%;
	height: 56%;
	border: 8px solid var(--va-paper);
}
.va-story-stamp {
	position: absolute;
	bottom: 40px; left: -10px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: var(--va-coral);
	color: var(--va-cream);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(-8deg);
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.4);
	z-index: 5;
	border: 2px dashed rgba(251, 245, 233, 0.5);
}
.va-story-stamp .va-y {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
}
.va-story-stamp .va-l {
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 6px;
	font-family: var(--va-font-sans);
}
.va-story h2 {
	font-size: 60px;
	line-height: 1.02;
	margin: 14px 0 24px;
}
.va-story p {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--va-ink-soft);
	max-width: 520px;
}
.va-story p + p { margin-top: 16px; }

.va-timeline {
	padding: 100px 72px;
	background: var(--va-cream);
}
.va-timeline-head { margin-bottom: 56px; }
.va-timeline-head h2 {
	font-size: 54px;
	line-height: 1.05;
	margin-top: 14px;
}
.va-timeline-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	position: relative;
}
.va-timeline-grid::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 24px;
	right: 24px;
	height: 1px;
	background: var(--va-line);
}
.va-tl-step { position: relative; padding-top: 36px; }
.va-tl-dot {
	position: absolute;
	top: 7px; left: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--va-coral);
	border: 3px solid var(--va-cream);
	z-index: 2;
}
.va-tl-yr {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 28px;
	color: var(--va-coral);
	font-weight: 600;
	margin-bottom: 8px;
}
.va-tl-ttl {
	font-family: var(--va-font-serif);
	font-size: 24px;
	color: var(--va-ink);
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 1.15;
}
.va-tl-txt {
	font-size: 14px;
	line-height: 1.65;
	color: var(--va-ink-soft);
}

.va-reno {
	padding: 110px 72px;
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 70px;
	align-items: start;
}
.va-reno-lead h2 {
	font-size: 54px;
	line-height: 1.05;
	margin: 14px 0 22px;
}
.va-reno-lead p {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--va-ink-soft);
	max-width: 360px;
}
.va-reno-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.va-reno-col {
	background: var(--va-cream);
	padding: 32px 30px;
	border-radius: var(--va-radius-lg);
}
.va-reno-col h4 {
	font-family: var(--va-font-serif);
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 18px;
	color: var(--va-coral);
}
.va-reno-col ul { list-style: none; padding: 0; margin: 0; }
.va-reno-col li {
	padding: 14px 0;
	border-bottom: 1px solid var(--va-line);
	font-size: 13.5px;
	color: var(--va-ink-soft);
	line-height: 1.55;
}
.va-reno-col li:last-child { border-bottom: 0; }
.va-reno-col li strong {
	display: block;
	color: var(--va-ink);
	font-weight: 600;
	margin-bottom: 4px;
}

.va-values {
	padding: 110px 72px;
	background: var(--va-ink);
	color: var(--va-cream);
}
.va-values-head { margin-bottom: 50px; }
.va-values-head .va-eyebrow,
.va-values-head .eyebrow { color: var(--va-coral-soft); }
.va-values-head h2 {
	font-size: 54px;
	line-height: 1.05;
	margin-top: 14px;
	color: var(--va-cream);
}
.va-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.va-value {
	padding: 32px 28px;
	background: rgba(251, 245, 233, 0.04);
	border-radius: var(--va-radius-lg);
	border: 1px solid rgba(251, 245, 233, 0.08);
}
.va-value-num {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 56px;
	font-weight: 600;
	color: var(--va-coral);
	line-height: 1;
	margin-bottom: 16px;
}
.va-value h4 {
	font-family: var(--va-font-serif);
	font-size: 26px;
	color: var(--va-cream);
	font-weight: 600;
	margin-bottom: 14px;
}
.va-value p {
	font-size: 14px;
	color: rgba(251, 245, 233, 0.78);
	line-height: 1.65;
}

.va-location {
	padding: 110px 72px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.va-map-ph {
	height: 460px;
	border-radius: var(--va-radius-md);
	position: relative;
}
.va-map-pin {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 60px; height: 60px;
	border-radius: 50% 50% 50% 0;
	background: var(--va-coral);
	color: var(--va-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 28px;
	font-weight: 700;
	transform: translate(-50%, -50%) rotate(-45deg);
	box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.4);
	z-index: 2;
}
.va-map-pin::after {
	content: attr(class);
	transform: rotate(45deg);
}
.va-location h2 {
	font-size: 54px;
	line-height: 1.05;
	margin: 14px 0 22px;
}
.va-location p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--va-ink-soft);
	max-width: 440px;
	margin-bottom: 28px;
}
.va-location-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 440px;
}
.va-location-list li {
	display: flex;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--va-line);
	font-size: 14px;
	color: var(--va-ink-soft);
}
.va-location-list li strong {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 18px;
	color: var(--va-coral);
	font-weight: 600;
}

/* =============================================================================
 * CONTACT PAGE
 * ========================================================================== */
.va-contact-main {
	padding: 130px 72px 80px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	align-items: start;
}
.va-info-block h2 {
	font-size: 54px;
	line-height: 1.05;
	margin: 14px 0 22px;
}
.va-blurb {
	font-size: 15px;
	line-height: 1.7;
	color: var(--va-ink-soft);
	max-width: 520px;
	margin-bottom: 36px;
}
.va-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.va-info-list li {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 18px 22px;
	background: var(--va-cream);
	border-radius: var(--va-radius-md);
}
.va-info-list .va-ic {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--va-coral);
	color: var(--va-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-family: var(--va-font-serif);
	font-style: italic;
	font-weight: 700;
}
.va-info-list .va-lbl {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--va-ink-soft);
	font-weight: 700;
	margin-bottom: 4px;
}
.va-info-list .va-val {
	font-family: var(--va-font-serif);
	font-size: 22px;
	color: var(--va-ink);
	font-weight: 600;
	line-height: 1.25;
}
.va-info-list .va-sub {
	font-size: 12.5px;
	color: var(--va-ink-soft);
	margin-top: 4px;
	line-height: 1.5;
}
.va-quick-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}
.va-pill {
	padding: 12px 20px;
	background: var(--va-coral);
	color: var(--va-cream);
	border-radius: 60px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.va-pill-alt {
	background: transparent;
	color: var(--va-ink);
	border: 1px solid var(--va-line);
}

.va-book-card {
	background: var(--va-cream);
	border-radius: var(--va-radius-lg);
	padding: 44px 38px;
	position: relative;
}
.va-book-stamp {
	position: absolute;
	top: -22px; right: 30px;
	width: 90px; height: 90px;
	border-radius: 50%;
	background: var(--va-ink);
	color: var(--va-cream);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(8deg);
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4);
}
.va-book-stamp .va-y {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}
.va-book-stamp .va-l {
	font-size: 8.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 4px;
}
.va-book-card h3 {
	font-size: 38px;
	line-height: 1.1;
	margin: 12px 0 14px;
}
.va-lead {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--va-ink-soft);
	margin-bottom: 26px;
}
.va-book-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.va-book-opt {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 22px;
	background: var(--va-paper);
	border-radius: var(--va-radius-md);
	border: 1px solid var(--va-line);
	transition: transform var(--va-tr-fast), box-shadow var(--va-tr-fast);
}
.va-book-opt:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -16px rgba(30, 42, 58, 0.3);
}
.va-book-opt-featured {
	background: var(--va-ink);
	color: var(--va-cream);
	border-color: var(--va-ink);
}
.va-bo-num {
	font-family: var(--va-font-serif);
	font-style: italic;
	font-size: 28px;
	color: var(--va-coral);
	font-weight: 600;
	flex-shrink: 0;
	min-width: 36px;
}
.va-bo-body { flex: 1; }
.va-bo-title {
	font-family: var(--va-font-serif);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}
.va-bo-sub {
	font-size: 12.5px;
	color: var(--va-ink-soft);
	margin-top: 4px;
}
.va-book-opt-featured .va-bo-sub { color: rgba(251, 245, 233, 0.7); }
.va-bo-arrow {
	font-size: 20px;
	color: var(--va-coral);
	font-weight: 700;
}

.va-map-strip {
	padding: 0 72px 80px;
}
.va-map-strip iframe {
	border-radius: var(--va-radius-lg);
	display: block;
}

/* =============================================================================
 * MOBILE RESPONSIVE — page-specific
 * ========================================================================== */
@media (max-width: 900px) {
	.va-head-visual { display: none !important; }

	.va-filter-bar {
		margin: -20px 16px 0 !important;
		flex-wrap: wrap;
		padding: 12px 14px !important;
		gap: 6px !important;
	}
	.va-chip { padding: 8px 12px !important; font-size: 10px !important; letter-spacing: 0.08em !important; }
	.va-filter-meta { width: 100%; margin-left: 0 !important; text-align: center; margin-top: 8px; }

	.va-rooms-list { padding: 60px 20px 30px !important; }
	.va-room-row,
	.va-room-row.va-flip {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		padding: 30px 0 !important;
	}
	.va-room-row.va-flip .va-room-photo { order: -1 !important; }
	.va-room-photo { height: 280px !important; }
	.va-room-num { width: 56px !important; height: 56px !important; font-size: 30px !important; top: -16px !important; left: -8px !important; }
	.va-room-info h2 { font-size: 40px !important; }
	.va-room-pricing { flex-direction: column; align-items: flex-start !important; gap: 16px; max-width: 100% !important; }
	.va-room-pricing .va-btn { width: 100%; justify-content: center; }

	.va-shared { padding: 60px 20px !important; }
	.va-shared-head {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		margin-bottom: 28px !important;
	}
	.va-shared-head h2 { font-size: 32px !important; }
	.va-shared-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.va-shared-item:nth-child(2n) { border-right: 0; }
	.va-shared-item { border-bottom: 1px solid var(--va-line); }
	.va-shared-t { font-size: 16px !important; }

	.va-story {
		grid-template-columns: 1fr !important;
		padding: 60px 20px !important;
		gap: 40px !important;
	}
	.va-story-visual { height: 320px !important; }
	.va-story h2 { font-size: 36px !important; }

	.va-timeline { padding: 60px 20px !important; }
	.va-timeline-head h2 { font-size: 32px !important; }
	.va-timeline-grid {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
	}
	.va-timeline-grid::before { display: none; }
	.va-tl-step { padding-top: 0; padding-left: 24px; border-left: 2px solid var(--va-line); }
	.va-tl-dot { top: 5px; left: -7px; }

	.va-reno {
		grid-template-columns: 1fr !important;
		padding: 60px 20px !important;
		gap: 32px !important;
	}
	.va-reno-lead h2 { font-size: 32px !important; }
	.va-reno-cols { grid-template-columns: 1fr !important; }

	.va-values { padding: 60px 20px !important; }
	.va-values-head h2 { font-size: 32px !important; }
	.va-values-grid { grid-template-columns: 1fr !important; }

	.va-location {
		grid-template-columns: 1fr !important;
		padding: 60px 20px !important;
		gap: 30px !important;
	}
	.va-location h2 { font-size: 32px !important; }
	.va-map-ph { height: 280px !important; }

	.va-contact-main {
		grid-template-columns: 1fr !important;
		padding: 60px 20px !important;
		gap: 40px !important;
	}
	.va-info-block h2 { font-size: 32px !important; }
	.va-info-list li { padding: 14px 16px !important; gap: 12px !important; }
	.va-info-list .va-val { font-size: 17px !important; }
	.va-book-card h3 { font-size: 28px !important; }
	.va-map-strip { padding: 0 16px 40px !important; }
}