/**
 * LT Stays — Elementor widgets.
 *
 * The widgets sit inside .lt-stay so they inherit the stay stylesheet's tokens
 * and typography; only what is specific to them lives here.
 *
 * Every measurement below was taken off the sections already on the site (the
 * "MY STAYS" band on the home page and "The Collection" on the About page), so
 * a widget dropped beside one of them is indistinguishable from it.
 *
 * Anything a Style control can change is a custom property, so the control can
 * set the property on the wrapper instead of fighting this file's specificity.
 */

.lt-w {
	--lt-pad-y: 90px;
	--lt-gap: 25px;
	--lt-card-bg: #F8F8F8;
	--lt-card-radius: 16px;
	--lt-card-media: 249px;
	--lt-ink: #1F1F1F;
	--lt-gold: #B8A067;
	--lt-accent: #C9BFAE;
	position: relative;
}

/* Elementor wraps a widget in a padded container, but these bands run the full
   width of the window with their own 1400px inner. */
/* --lt-page-width is the window less its scrollbar, set by widgets.js. Plain
   100vw counts the scrollbar, which made the band 15px too wide, pushed the
   cards 7px right of the site's own sections and let the page scroll sideways. */
.lt-w--full {
	width: var(--lt-page-width, 100vw);
	max-width: var(--lt-page-width, 100vw);
	margin-left: calc(50% - var(--lt-page-width, 100vw) / 2);
	margin-right: calc(50% - var(--lt-page-width, 100vw) / 2);
}

.lt-w__container {
	width: 100%;
	max-width: var(--container-width, 1400px);
	margin: 0 auto;
	padding: 0 var(--container-padding, 10px);
}

.lt-w__empty {
	padding: 40px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	text-align: center;
	color: #646970;
	font-family: var(--font-body);
}

/* Card -------------------------------------------------------------------- */

.lt-stay .lt-card {
	display: flex;
	flex-direction: column;
	background: var(--lt-card-bg);
	border-radius: var(--lt-card-radius);
	overflow: hidden;
	text-decoration: none;
	height: 100%;
	transition: transform .3s ease, box-shadow .3s ease;
}

.lt-stay .lt-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
}

.lt-stay .lt-card__media {
	display: block;
	height: var(--lt-card-media);
	overflow: hidden;
	background: #F5F1EA;
}

.lt-stay .lt-card__media img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.lt-stay .lt-card:hover .lt-card__media img {
	transform: scale(1.04);
}

/* 24/20/32/25 is the padding the cards on the site carry. */
.lt-stay .lt-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px 20px 32px 25px;
	flex: 1;
}

.lt-stay .lt-card__title {
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 34px;
	color: var(--lt-ink);
}

.lt-stay .lt-card__meta {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--lt-ink);
}

/* The outline pill and its circled arrow, matching the buttons on the cards
   already on the site. */
.lt-stay .lt-card__btn {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding-top: 20px;
}

.lt-stay .lt-card__btn-text {
	border: 1px solid var(--lt-ink);
	border-radius: 50px;
	padding: 10px 25px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--lt-ink);
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.lt-stay .lt-card__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 2px;
	padding: 12px;
	border: 1px solid var(--lt-ink);
	border-radius: 50px;
	color: var(--lt-ink);
	background: var(--lt-card-bg);
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.lt-stay .lt-card__btn-icon svg {
	width: 19px;
	height: 19px;
	display: block;
}

.lt-stay .lt-card:hover .lt-card__btn-text,
.lt-stay .lt-card:hover .lt-card__btn-icon {
	background: var(--lt-gold);
	border-color: var(--lt-gold);
	color: #fff;
}

/* The lift is a Style-tab switch, because a card that rises is wrong inside a
   tight archive grid even though it reads well in a carousel. */
.lt-w.lt-w--no-lift .lt-card:hover {
	transform: none;
	box-shadow: none;
}

.lt-w.lt-w--no-lift .lt-card:hover .lt-card__media img {
	transform: none;
}

/* Band -------------------------------------------------------------------- */

.lt-carousel,
.lt-grid-w {
	padding: var(--lt-pad-y) 0;
}

.lt-carousel--dark {
	background: #111D0C;
	--lt-card-bg: #F8F8F8;
}

.lt-carousel--light,
.lt-grid-w {
	background: #FFF9EE;
	--lt-card-bg: #FFFFFF;
}

/* Heading block ----------------------------------------------------------- */

.lt-carousel__head {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px 10px 50px;
}

.lt-carousel__head--centred {
	display: block;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
	padding: 10px 0 40px;
}

.lt-carousel__head-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	/* Narrow enough that the heading breaks onto two lines, as on the home page. */
	max-width: 480px;
}

.lt-carousel__head-right {
	display: flex;
	flex-direction: column;
	gap: 25px;
	align-items: flex-start;
	max-width: 390px;
}

/* With an eyebrow, the intro starts level with the heading rather than the
   pill: 38px of pill plus the 20px under it. */
.lt-carousel__head--eyebrow .lt-carousel__head-right {
	padding-top: 58px;
}

.lt-stay .lt-carousel__head :is(h1, h2, h3),
.lt-stay .lt-grid-w__head :is(h1, h2, h3) {
	font-family: var(--font-heading);
	font-size: 48px;
	line-height: 64px;
	font-weight: 400;
	margin: 0;
}

.lt-stay .lt-carousel__head :is(h1, h2, h3) span,
.lt-stay .lt-grid-w__head :is(h1, h2, h3) span {
	font-style: italic;
	color: var(--lt-accent);
}

.lt-stay .lt-carousel__head p,
.lt-stay .lt-grid-w__head p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}

/* Dark band: white type, and the eyebrow is an outlined pill. */
.lt-w.lt-carousel--dark .lt-carousel__head :is(h1, h2, h3),
.lt-w.lt-carousel--dark .lt-carousel__head p {
	color: #fff;
}

.lt-w.lt-carousel--dark .lt-carousel__head h5 {
	color: #fff;
	margin: 0;
	background-color: transparent;
	padding: 5px 12px;
	border: 1px solid #A6A29B;
	border-radius: 50px;
	display: flex;
	gap: 6px;
	align-items: center;
	width: fit-content;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
}

/* Light band: ink type, and the accent word stays the same colour, italic. */
.lt-w.lt-carousel--light .lt-carousel__head :is(h1, h2, h3),
.lt-stay .lt-grid-w__head :is(h1, h2, h3) {
	color: var(--lt-ink);
}

.lt-w.lt-carousel--light .lt-carousel__head :is(h1, h2, h3) span,
.lt-stay .lt-grid-w__head :is(h1, h2, h3) span {
	color: inherit;
}

.lt-w.lt-carousel--light .lt-carousel__head p,
.lt-stay .lt-grid-w__head p {
	color: var(--lt-ink);
}

/* Slider ------------------------------------------------------------------ */

.lt-slider {
	--lt-per-view: 4;
	position: relative;
}

.lt-slider__viewport {
	overflow: hidden;
	/* Room for the card's lift and shadow on hover. */
	margin: -10px;
	padding: 10px;
}

.lt-slider__track {
	display: flex;
	gap: var(--lt-gap);
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.lt-slider__slide {
	flex: 0 0 calc((100% - (var(--lt-per-view) - 1) * var(--lt-gap)) / var(--lt-per-view));
	min-width: 0;
}

.lt-stay .lt-slider__nav {
	position: absolute;
	top: calc(50% - 15px);
	transform: translateY(-50%);
	z-index: 3;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lt-gold);
	color: #1F1F1F;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}

.lt-stay .lt-slider__nav:hover {
	background: #fff;
	color: var(--lt-ink);
}

.lt-stay .lt-slider__nav[disabled] {
	opacity: .35;
	cursor: default;
}

.lt-slider__nav--prev { left: -65px; }
.lt-slider__nav--next { right: -65px; }

.lt-stay .lt-slider__nav svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}

.lt-slider__nav--next svg {
	transform: scaleX(-1);
}

.lt-stay .lt-slider__nav[hidden],
.lt-stay .lt-slider__dots[hidden] {
	display: none;
}

/* The viewport's negative margin gives the hover shadow room; this puts back
   the 10px the home page band has under its cards. */
.lt-carousel .lt-slider {
	margin-bottom: 10px;
}

.lt-slider__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding-top: 30px;
}

.lt-stay .lt-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #A6A29B;
	cursor: pointer;
	transition: background-color .3s ease, width .3s ease;
}

.lt-stay .lt-slider__dot.is-active {
	background: var(--lt-gold);
	width: 22px;
	border-radius: 50px;
}

/* Grid -------------------------------------------------------------------- */

.lt-grid-w__head {
	padding-bottom: 44px;
}

.lt-grid-w__head--centred {
	text-align: center;
}

.lt-grid-w__head p {
	max-width: 780px;
	margin-top: 16px;
}

.lt-grid-w__head--centred p {
	margin-left: auto;
	margin-right: auto;
}

.lt-grid-w__items {
	--lt-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--lt-cols), minmax(0, 1fr));
	gap: var(--lt-gap);
}

/* Hero -------------------------------------------------------------------- */

.lt-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.lt-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lt-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .9s ease;
}

.lt-hero__slide.is-active {
	opacity: 1;
}

/* Slide across instead of cross-fading. */
.lt-hero--slide .lt-hero__slide {
	opacity: 1;
	transform: translateX(100%);
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.lt-hero--slide .lt-hero__slide.is-active {
	transform: translateX(0);
}

.lt-hero--slide .lt-hero__slide.is-past {
	transform: translateX(-100%);
}

/* A slow drift, so a still photograph does not feel frozen. */
.lt-hero--zoom .lt-hero__slide.is-active {
	animation: lt-hero-zoom 12s ease-out forwards;
}

@keyframes lt-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* A gradient rather than a flat wash: the copy sits at the bottom, so that is
   where the photograph needs darkening. */
.lt-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .8) 100%);
	pointer-events: none;
}

.lt-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
	padding-bottom: 80px;
}

.lt-hero__text {
	position: relative;
	flex: 1 1 55%;
	min-width: 0;
}

.lt-hero__copy {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
}

.lt-hero__copy.is-active {
	display: flex;
}

.lt-stay .lt-hero__copy h1 {
	color: #fff;
	margin: 0;
}

.lt-stay .lt-hero__copy h1 span {
	font-style: italic;
}

.lt-stay .lt-hero__sub {
	color: #E4DED4;
	font-size: 26px;
	line-height: 32px;
	margin: 0;
}

.lt-hero__aside {
	flex: 0 1 460px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lt-hero__thumbs {
	display: flex;
	gap: 14px;
}

/* Scoped through .lt-stay: the stay stylesheet dresses every bare <button>,
   and its padding would otherwise squeeze the picture to half its width. */
.lt-stay .lt-hero__thumb {
	flex: 1;
	min-width: 0;
	padding: 6px;
	border: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, .18);
	cursor: pointer;
	overflow: hidden;
	transition: background-color .3s ease, transform .3s ease;
}

.lt-stay .lt-hero__thumb img {
	width: 100%;
	max-width: none;
	/* A fixed height rather than an aspect ratio: the stay stylesheet sets
	   height:auto on every image, which wins and collapses the thumbnail. */
	height: 92px;
	object-fit: cover;
	border-radius: 9px;
	display: block;
}

.lt-stay .lt-hero__thumb.is-active,
.lt-stay .lt-hero__thumb:hover {
	background: var(--lt-gold);
	transform: translateY(-3px);
}

/* Scoped, for the same reason as the thumbnails: the stay stylesheet colours
   every paragraph, and over a photograph the note has to stay white. */
.lt-stay .lt-hero__note {
	color: #fff;
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1560px) {

	.lt-slider__nav--prev { left: 6px; }
	.lt-slider__nav--next { right: 6px; }
}

@media (max-width: 1024px) {

	.lt-w {
		--lt-pad-y: 64px;
		--lt-gap: 20px;
	}

	.lt-stay .lt-carousel__head :is(h1, h2, h3),
	.lt-stay .lt-grid-w__head :is(h1, h2, h3) {
		font-size: 38px;
		line-height: 50px;
	}

	.lt-carousel__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		padding-bottom: 34px;
	}

	.lt-carousel__head-left,
	.lt-carousel__head-right {
		max-width: none;
	}

	.lt-carousel__head--eyebrow .lt-carousel__head-right {
		padding-top: 0;
	}

	.lt-grid-w__head {
		padding-bottom: 34px;
	}

	.lt-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding-bottom: 56px;
	}

	.lt-hero__aside {
		flex-basis: auto;
		width: 100%;
		max-width: 460px;
	}
}

@media (max-width: 767px) {

	.lt-w {
		--lt-pad-y: 56px;
		--lt-gap: 16px;
	}

	.lt-stay .lt-carousel__head :is(h1, h2, h3),
	.lt-stay .lt-grid-w__head :is(h1, h2, h3) {
		font-size: 30px;
		line-height: 40px;
	}

	/* Full-size arrows would sit on top of the card at this width. */
	.lt-stay .lt-slider__nav {
		width: 40px;
		height: 40px;
	}

	.lt-stay .lt-card__body {
		padding: 20px 18px 26px 20px;
	}

	.lt-hero__thumbs {
		gap: 10px;
	}

	.lt-stay .lt-hero__thumb img {
		height: 70px;
	}

	.lt-stay .lt-hero__sub {
		font-size: 20px;
		line-height: 26px;
	}

	.lt-hero__inner {
		padding-bottom: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.lt-hero--zoom .lt-hero__slide.is-active {
		animation: none;
	}

	.lt-slider__track,
	.lt-hero__slide,
	.lt-card,
	.lt-card__media img {
		transition-duration: .01ms !important;
	}
}

/* The eyebrow mark. WordPress marks widget images loading="lazy", and the stay
   stylesheet sizes images to fit their content, so an image that has not
   loaded yet is 0px wide and never comes into view to start loading. */
.lt-w .lt-carousel__head h5 img {
	width: 14px;
	height: 14px;
	max-width: none;
	flex: 0 0 14px;
}