/* Info pages: Tillander Treasures. */

/*
 * Tillander Treasures (/tillander-treasures/, tools/sections/info-treasures.js), as the
 * source's Elementor page. The title overlay is 40% wide above phones and lies over the
 * hero tiles (z-index 7). Each tile is its section's opener: the label's link covers the
 * tile, the photo carries the source's overlay (a black gradient at 30%, or black at
 * 20%), and hovering the tile draws a 1px underline under the label from the left
 * (0.3s ease), 2px below the label's 16px line (the link's 1px padding under its
 * Futura Medium box).
 */
.is-style-treasures-title {
	z-index: 7;
}

@media (width > 767px) {
	.is-style-treasures-title {
		width: 40%;
	}
}

.is-style-treasures-tile,
.is-style-treasures-tile-dim {
	isolation: isolate;
	cursor: pointer;
}

.is-style-treasures-tile::before,
.is-style-treasures-tile-dim::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	pointer-events: none;
}

.is-style-treasures-tile::before {
	background-image: linear-gradient(180deg, rgb(152 152 152 / 0%) 0%, #000 100%);
	opacity: 0.3;
}

.is-style-treasures-tile-dim::before {
	background-color: #000;
	opacity: 0.2;
}

.is-style-treasures-tile a,
.is-style-treasures-tile-dim a {
	padding-bottom: 1px;
	background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat;
	color: inherit;
	text-decoration: none;
	transition: background-size 0.3s ease;
}

.is-style-treasures-tile a::after,
.is-style-treasures-tile-dim a::after {
	position: absolute;
	inset: 0;
	content: "";
}

/* The opened sections and their photo strips stay hidden until a tile opens them
   (assets/js/info-treasures.js); a section fades in over 0.4s as it opens (the source's
   fadeIn: its later opacity-only keyframes win, so nothing moves and nothing is left
   transformed, which would unfix the fixed photos inside). */
.wp-block-group.is-style-treasures-section,
.wp-block-group.is-style-treasures-strip {
	display: none;
}

.wp-block-group.is-style-treasures-section {
	animation: treasures-reveal 0.4s ease forwards;
}

@keyframes treasures-reveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* As the source's containers, the sections' groups may shrink below their content (a
   500px text box in a narrower tablet column overflows it), a heading's size includes
   its padding (a numbered title 182px wide wraps), and a plain button's words carry a
   soft 10px shadow. */
.is-style-treasures-section .wp-block-group {
	min-width: 0;
}

.is-style-treasures-section .wp-block-heading {
	box-sizing: border-box;
}

.is-style-treasures-section .wp-block-button:not(.is-style-collections-link) .wp-block-button__link {
	text-shadow: 0 0 10px rgb(0 0 0 / 30%);
}

/* The darkened VIEW layer over a photo: it fades in while the photo is hovered (0.3s) and
   a 1.5px white line grows from the left 3px under VIEW (0.4s). */
.wp-block-group.is-style-treasures-view {
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
	transition: all 0.3s ease;
}

.wp-block-group.is-style-treasures-view:hover {
	opacity: 1;
}

.is-style-treasures-view .wp-block-heading {
	position: relative;
}

.is-style-treasures-view .wp-block-heading::after {
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 1.5px;
	content: "";
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s;
}

.is-style-treasures-view:hover .wp-block-heading::after {
	transform: scaleX(1);
}

/* The hairline across the Vintage opening (335px down its photo column, 381px on
   tablets) and the 2020 & 2022 caption beside its card (290px down, 435px past its
   column's right edge; 190px and 256px on tablets), placed as the source places them
   (out of the column's flow); the photo over the hairline stays above it. The
   hairline's placement wrapper spans the column's top edge. */
.wp-block-group:has(> * > .is-style-treasures-pinned-rule),
.wp-block-group:has(> .is-style-treasures-pinned-caption) {
	position: relative;
}

.wp-block-group:has(> .is-style-treasures-pinned-rule) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.wp-block-group.is-style-treasures-pinned-rule {
	position: absolute;
	top: 335px;
	left: 0;
	width: 100%;
}

.wp-block-group:has(> .is-style-treasures-pinned-rule) ~ * {
	position: relative;
	z-index: 1;
}

.wp-block-group.is-style-treasures-pinned-caption {
	position: absolute;
	top: 290px;
	right: -435px;
	width: 100%;
}

@media (767px < width <= 1024px) {
	.wp-block-group.is-style-treasures-pinned-rule {
		top: 381px;
	}

	.wp-block-group.is-style-treasures-pinned-caption {
		top: 190px;
		right: -256px;
	}
}

/*
 * Collection tiles: each photo links to its collection. The layer over it (as tall as
 * the source sets it, clipped by the tile) holds the name at its middle, out of the flow,
 * and SHOP centred under it; on hover the layer fades to 35% white (0.45s ease) while
 * the name turns black and SHOP fades in, rising 10px and turning black (0.35s ease).
 * The name's link covers the tile.
 */
.wp-block-group.is-style-treasures-collection {
	position: relative;
	overflow: hidden;
}

.is-style-treasures-collection > .wp-block-group {
	position: absolute;
	inset: 0;
	z-index: 2;
	align-items: center;
	justify-content: center;
	background-color: rgb(255 255 255 / 0%);
	transition: background-color 0.45s ease;
}

.is-style-treasures-collection:hover > .wp-block-group {
	background-color: rgb(255 255 255 / 35%);
}

.is-style-treasures-collection > .wp-block-group > :first-child {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
}

.is-style-treasures-collection > .wp-block-group > :last-child {
	opacity: 0;
	pointer-events: none;
	transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.is-style-treasures-collection:hover > .wp-block-group > :last-child {
	opacity: 1;
}

.is-style-treasures-collection .wp-block-heading {
	color: #fff;
	transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.is-style-treasures-collection:hover .wp-block-heading {
	color: #000;
}

.is-style-treasures-collection > .wp-block-group > :last-child:is(.wp-block-heading),
.is-style-treasures-collection > .wp-block-group > :last-child .wp-block-heading {
	transform: translateY(10px);
}

.is-style-treasures-collection:hover > .wp-block-group > :last-child:is(.wp-block-heading),
.is-style-treasures-collection:hover > .wp-block-group > :last-child .wp-block-heading {
	transform: none;
}

.is-style-treasures-collection a {
	color: inherit;
	text-decoration: none;
}

.is-style-treasures-collection a::after {
	position: absolute;
	inset: -100vmax;
	content: "";
}

.is-style-treasures-tile:hover a,
.is-style-treasures-tile-dim:hover a {
	background-size: 100% 1px;
}

/*
 * The GET IN TOUCH form (inc/enquiry-form.php), as the source's Elementor form: 691px
 * wide (less 2em on its right below 1025px), white 14.4px labels 8px over 40px fields
 * framed in white on 31% black, NAME and SURNAME side by side, 25px between rows, the
 * reCAPTCHA note in 10px type 26px under the message with its links in black, SEND in
 * white 16px capitals at the left foot.
 */
.is-style-treasures-section .tillander-form {
	box-sizing: border-box;
	width: 691px;
	max-width: 100%;
	margin: 0;
}

.is-style-treasures-section .tillander-form__fields {
	margin: 0 -5px -25px;
}

.is-style-treasures-section .tillander-form__field,
.is-style-treasures-section .tillander-form__note,
.is-style-treasures-section .tillander-form__submit {
	box-sizing: border-box;
	margin: 0 0 25px;
	padding: 0 5px;
}

.is-style-treasures-section .tillander-form__field label {
	align-self: flex-start;
	padding-bottom: 8px;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 100;
	line-height: 1;
	letter-spacing: 0.4px;
}

.is-style-treasures-section .tillander-form__field :is(input, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid #fff;
	border-radius: 0;
	background: rgb(0 0 0 / 31%);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: normal;
}

.is-style-treasures-section .tillander-form__field textarea {
	display: block;
	padding: 5px 14px;
}

.is-style-treasures-section .tillander-form__note {
	margin-top: 26px;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
	letter-spacing: 0.4px;
}

.is-style-treasures-section .tillander-form__note a {
	color: #000;
	text-decoration: none;
}

.is-style-treasures-section .tillander-form .tillander-form__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 33px;
	padding: 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
}

@media (width <= 1024px) {
	.is-style-treasures-section .tillander-form {
		padding-right: 2em;
	}
}

@media (width <= 767px) {
	.is-style-treasures-section .tillander-form__field--half {
		flex-basis: 100%;
	}
}

/* QUICK VIEW cards: the back's frame is the link colour and darkens to its hover colour
   as the back fades in (0.3s); the back's words (an inline box 0.2em taller than the
   line) draw a 0.1em underline from the left meanwhile, the only underline there, as the
   source's flip boxes do; phones show the front alone, 4:5, with the photo at 130% width
   (the source kit's flip-box rules). */
.is-style-treasures-flip .tillander-flip-card__inner > .wp-block-group:nth-child(2) {
	border-color: #c36;
	transition: opacity 0.3s, border-color 0.3s;
}

.is-style-treasures-flip:hover .tillander-flip-card__inner > .wp-block-group:nth-child(2) {
	border-color: #336;
}

.is-style-treasures-flip .tillander-flip-card__inner > .wp-block-group:nth-child(2) .wp-block-heading {
	display: inline-block;
	padding-bottom: 0.2em;
	background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 0.1em no-repeat;
	transition: background-size 0.3s;
}

.is-style-treasures-flip:hover .tillander-flip-card__inner > .wp-block-group:nth-child(2) .wp-block-heading {
	background-size: 100% 0.1em;
}

.is-style-treasures-flip .tillander-flip-card__inner > .wp-block-group:nth-child(2) a {
	padding-bottom: 0;
	background: none;
	color: inherit;
}

.is-style-treasures-flip .tillander-flip-card__inner > .wp-block-group:nth-child(2) a::after {
	position: absolute;
	inset: 0;
	content: "";
}

@media (width <= 767px) {
	.is-style-treasures-flip .tillander-flip-card__inner > .wp-block-group:first-child {
		aspect-ratio: 4 / 5;
		background-size: 130% auto !important;
	}
}