/* ==========================================================================
   Torres RS – home (templates/home.php)
   Cover, author strip, curated guides, where to stay, events calendar, FAQ and closing band. Shared components
   (cards, section tiles, section heads, lists, chips, buttons, author card, CTA band, hotel search skin) are in
   trs-base.css.
   ========================================================================== */
/* Slightly tighter section rhythm than the site default (7 bands + cover): 40px on phones, 64px max. */
.trs-home { --trs-section: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); overflow-x: clip; }
.trs-home-section { padding: var(--trs-section) 0; }
.trs-home-section--alt { background: var(--trs-sand-50); }
/* Full-width heads: the intro fits in one line. */
.trs-home .trs-section-head__dek { max-width: 75ch; }

/* ---------- Cover ---------- */
.trs-hero {
	--trs-focus: var(--trs-sun);
	position: relative;
	isolation: isolate;
	padding: 72px 0 56px;
	background: var(--trs-sea-950);
	color: #fff;
}
.trs-hero .trs-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* The veil keeps its strength up to the end of the text column (left edge of the shell + 760px), so the kicker,
   title and subtitle stay at 4.5:1 or more over the bright rock at any width; the photo opens up after it. */
.trs-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, transparent 60%, rgba(11, 45, 56, .6)),
		linear-gradient(90deg, rgba(11, 45, 56, .82) 0, rgba(11, 45, 56, .66) calc(max(24px, 50% - 570px) + 760px), rgba(11, 45, 56, .25) 100%);
}
/* White wave where the cover meets the page (decorative). */
.trs-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 0;
	height: clamp(20px, 3vw, 40px);
	background: #fff;
	-webkit-mask: var(--trs-onda) bottom / 100% 100% no-repeat;
	mask: var(--trs-onda) bottom / 100% 100% no-repeat;
	pointer-events: none;
}
@supports not ((mask: url(x)) or (-webkit-mask: url(x))) {
	.trs-hero::after { display: none; }
}
.trs-hero__inner { position: relative; z-index: 1; }
.trs-hero__text { max-width: 760px; }
.trs-hero .trs-kicker { margin: 0 0 12px; color: var(--trs-sun); text-shadow: 0 1px 2px rgba(11, 45, 56, .7); }
.trs-hero .trs-hero__title {
	max-width: 15em;
	margin: 0 0 16px;
	font-family: var(--trs-serif);
	font-size: var(--trs-fs-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: var(--trs-ls-head);
	color: #fff;
	text-wrap: balance;
}
.trs-hero .trs-hero__subtitle {
	max-width: 34em;
	margin: 0;
	font-size: var(--trs-fs-dek);
	font-weight: 500;
	line-height: 1.5;
	color: #f1f5f9;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Hotel search card: destination fixed to Torres (the hidden field is still sent). */
.trs-hero__search { margin: 28px 0 0; color: var(--trs-ink); }
.trs-home .trs-hero .bhs {
	--trs-focus: var(--trs-sea-600);
	padding: 16px 20px;
	border: 0;
	border-radius: var(--trs-r-ctl);
	background: #fff;
	box-shadow: var(--trs-shadow-pop);
}
.trs-home .trs-hero .bhs__title { margin: 0 0 12px; }
.trs-home .bhs .bhs__field--dest { display: none; }
.trs-home .bhs .bhs__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trs-home .bhs .bhs__btn { grid-column: 1 / -1; }
/* One row from tablets up: check-in, check-out, adults, rooms and the button. */
@media (min-width: 768px) {
	.trs-home .trs-hero .bhs__form { grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(72px, .5fr)) auto; }
	.trs-home .trs-hero .bhs__btn { grid-column: auto; }
}

/* Facts: one line; items that do not fit wrap to a hidden second line. */
.trs-hero .trs-hero__facts {
	display: flex;
	flex-wrap: wrap;
	height: 20px;
	margin: 16px 0 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.trs-hero .trs-hero__facts li { margin: 0; white-space: nowrap; }
.trs-hero .trs-hero__facts li + li::before { content: "·"; margin: 0 .55em; }
.trs-hero.has-results .trs-hero__facts,
.trs-hero:has(.has-results) .trs-hero__facts,
.trs-hero:has(.bhs__grid) .trs-hero__facts,
.trs-hero:has(.bhs.is-loading) .trs-hero__facts { display: none; }

/* Results: the cover grows by the fixed-height carousel. The card title and the facts give way as soon as a
   search starts (skeleton, right after the click), and the skeleton and the results share the same top edge and a
   one-line status, so nothing moves when the results arrive. */
.trs-home .trs-hero .bhs { scroll-margin-top: calc(var(--trs-header-h) + 16px); }
.trs-home .trs-hero .bhs.is-loading .bhs__title,
.trs-home .trs-hero .bhs.has-results .bhs__title,
.trs-home .trs-hero .bhs:has(.bhs__grid) .bhs__title { display: none; }
.trs-home .trs-hero .bhs__status:not(:empty) { margin: 8px 2px 0; }
/* One line only while searching and with results (no shift when they arrive); errors wrap and are read in full. */
.trs-home .trs-hero .bhs:is(.is-loading, .has-results) .bhs__status { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.trs-home .trs-hero .bhs .bhs__results:not(:empty) { margin-top: 8px; }
/* A grid in both states: a block here made Chrome report the whole results box as shifted (CLS 0.45 at 390). */
.trs-home .trs-hero .bhs:not(.is-loading) .bhs__results { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 16px; }
.trs-home .trs-hero .bhs__results > .bhs__grid,
.trs-home .trs-hero .bhs__results > .bhs__all { grid-column: 1 / -1; }
.trs-home .trs-hero .bhs .bhs__grid { min-width: 0; margin-top: 0; }
.trs-home .trs-hero .bhs a.bhs__all { min-height: 44px; padding: 11px 18px; line-height: 1.25; }
@media (min-width: 600px) {
	.trs-hero:has(.bhs__grid),
	.trs-hero:has(.bhs.is-loading) { padding-bottom: 40px; }
	/* Under the carousel: price note beside the arrows (mouse only), then "see all". */
	.trs-home .trs-hero .bhs:not(.is-loading) .bhs__results { grid-template-columns: minmax(0, 1fr) auto; }
	.trs-home .trs-hero .bhs__results > .bhs__note { grid-row: 2; grid-column: 1; margin: 8px 0 0; }
	.trs-home .trs-hero .bhs__results > .trs-carousel-nav { grid-row: 2; grid-column: 2; margin: 8px 0 0; }
}
@media (min-width: 900px) {
	/* One row: note, "see all" and the arrows. */
	.trs-home .trs-hero .bhs:not(.is-loading) .bhs__results { grid-template-columns: minmax(0, 1fr) auto auto; }
	.trs-home .trs-hero .bhs__results > .bhs__all { grid-row: 2; grid-column: 2; justify-self: end; margin: 8px 0 0; }
	.trs-home .trs-hero .bhs__results > .trs-carousel-nav { grid-column: 3; }
}

/* Below 900px the text spans the whole width: an even, top-to-bottom veil. */
@media (max-width: 899px) {
	.trs-hero { padding: 48px 0; }
	.trs-hero--photo::before { background: linear-gradient(180deg, rgba(11, 45, 56, .76), rgba(11, 45, 56, .6) 45%, rgba(11, 45, 56, .82)); }
}
@media (max-width: 699px) {
	.trs-hero .trs-hero__bg { object-position: 30% 50%; }
}
@media (max-width: 599px) {
	/* The portrait crop served to phones (<picture>) is already framed on the subject. */
	.trs-hero--art .trs-hero__bg { object-position: 50% 50%; }
	.trs-hero { padding: 28px 0 32px; }
	.trs-hero .trs-kicker { margin-bottom: 8px; }
	.trs-hero .trs-hero__title { margin-bottom: 12px; }
	.trs-hero__search { margin-top: 20px; }
	.trs-home .trs-hero .bhs { padding: 16px; }
	.trs-hero .trs-hero__facts { height: 18px; font-size: 13px; line-height: 18px; }
	.trs-hero__more { display: none; }
	/* With results, the cover stays as short as the content allows (the page scrolls to the card). */
	.trs-hero:has(.bhs__grid),
	.trs-hero:has(.bhs.is-loading) { padding-bottom: 24px; }
	.trs-home .trs-hero .bhs__status:not(:empty) { font-size: 13px; line-height: 20px; }
	/* Phones scroll with overlay bars: the room kept under the carousel for a scrollbar is not needed. */
	.trs-home .trs-hero .bhs .bhs__grid,
	.trs-home .trs-hero .bhs.is-loading .bhs__results { padding-bottom: 4px; }
	.trs-home .trs-hero .bhs .bhs__note { margin: 8px 2px 0; }
	.trs-home .trs-hero .bhs a.bhs__all { margin-top: 10px; }
}

/* ---------- Explore: landscape tiles on wide screens (4 × 2 fits one screen) ---------- */
@media (min-width: 1100px) {
	.trs-home a.trs-section-card { aspect-ratio: 3 / 2; }
}

/* ---------- Author strip ---------- */
/* Right under the wave. The rule of the "Explore" head separates them (a second, thin rule 40px above it read as a
   leftover), so that band starts closer. */
.trs-home-trust .trs-author--trust { border-bottom: 0; }
.trs-home-trust + .trs-home-section { padding-top: clamp(2rem, 1.2rem + 2vw, 2.5rem); }
@media (max-width: 599px) {
	/* Two lines at most on phones: the revision count stays for wider screens. */
	.trs-home-trust .trs-author__nowrap,
	.trs-home-trust .trs-author__nowrap + .trs-author__sep { display: none; }
}

/* ---------- Comece por aqui: lead + list ---------- */
.trs-feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* Side by side from tablets up: half and half, then 7/5 once the list is wide enough for its titles. */
@media (min-width: 768px) {
	.trs-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); align-items: start; }
	.trs-feature__list > .trs-card--row:first-child { padding-top: 0; }
}
@media (min-width: 900px) {
	.trs-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 767px) {
	.trs-feature__list { border-top: 1px solid var(--trs-line); }
}

/* ---------- Onde ficar ---------- */
.trs-stay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* Text beside the guides from tablets up: half and half, then 5/7. */
@media (min-width: 768px) {
	.trs-stay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 56px); align-items: start; }
	/* Same rule as the section head on the left. */
	.trs-stay__posts { padding-top: 2px; border-top: 2px solid var(--trs-ink); }
}
@media (min-width: 900px) {
	.trs-stay { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* One column of guides with a two-line summary (it fits beside the 112px photo); phones keep title only. */
.trs-stay__posts .trs-card p.trs-card__excerpt { -webkit-line-clamp: 2; }
@media (max-width: 599px) {
	.trs-stay__posts .trs-card p.trs-card__excerpt { display: none; }
}
.trs-stay .trs-stay__p { max-width: 42ch; margin: 0 0 12px; font-size: var(--trs-fs-body); line-height: 1.7; color: var(--trs-ink); }
/* Only the top margin: on phones the rail keeps its negative side margins (edge-to-edge scroll). */
.trs-stay .trs-chips { margin-top: 20px; }
.trs-stay .trs-chips__label { margin: 0 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--trs-ink-2); }
.trs-stay .trs-chip__icon { width: 14px; height: 14px; color: var(--trs-muted); }
.trs-stay__cta { margin: 24px 0 0; }
.trs-stay__all { margin-top: 8px; }
@media (max-width: 599px) {
	.trs-stay__cta .trs-btn--booking { width: 100%; }
}

/* ---------- Agenda: evergreen calendar ---------- */
.trs-home .trs-cal {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.trs-home .trs-cal li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--trs-line);
	border-radius: var(--trs-r-img);
	background: #fff;
}
/* Balloon stripe: one color of the header stripe on top of each date. */
.trs-home .trs-cal li::before {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	left: -1px;
	height: 3px;
	border-radius: var(--trs-r-img) var(--trs-r-img) 0 0;
	background: var(--trs-cal-c, #1f7fa0);
}
.trs-home .trs-cal li:nth-child(5n+1) { --trs-cal-c: #d0543c; }
.trs-home .trs-cal li:nth-child(5n+2) { --trs-cal-c: #e59a2f; }
.trs-home .trs-cal li:nth-child(5n+3) { --trs-cal-c: #7aa64a; }
.trs-home .trs-cal li:nth-child(5n+4) { --trs-cal-c: #1f7fa0; }
.trs-home .trs-cal li:nth-child(5n) { --trs-cal-c: #7a2d4f; }
/* Ember stays for the kickers: the colored stripe is the accent of each date. */
.trs-cal__mes { font-size: var(--trs-fs-xs); font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--trs-sea-700); }
.trs-home .trs-cal__nome { font-family: var(--trs-serif); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--trs-ink); text-decoration: none; }
/* The whole date is the link. */
.trs-home a.trs-cal__nome::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.trs-home a.trs-cal__nome:hover { color: var(--trs-sea-700); text-decoration: underline; text-decoration-thickness: 2px; }
.trs-home a.trs-cal__nome:focus-visible { outline: 0; }
.trs-home a.trs-cal__nome:focus-visible::after { outline: 3px solid var(--trs-focus); outline-offset: 2px; }
.trs-cal__icon.trs-icon { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; color: var(--trs-ember); }
@media (max-width: 899px) {
	.trs-home .trs-cal {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 31%;
		padding: 2px 2px 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
	}
	.trs-home .trs-cal li { scroll-snap-align: start; }
}
@media (max-width: 599px) {
	.trs-home .trs-cal { grid-auto-columns: 70%; }
}
.trs-agenda__posts { margin-top: 24px; }
@media (min-width: 900px) {
	.trs-agenda__posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.trs-agenda__posts > .trs-card--row { border-top: 0; }
}

/* ---------- Novos e atualizados: 2 columns from tablets up, 3 on wide screens (2 rows instead of 3) ---------- */
@media (min-width: 768px) {
	.trs-home-latest.trs-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trs-home-latest > .trs-card--row:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
	.trs-home-latest.trs-list--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.trs-home-latest > .trs-card--row:nth-child(3) { border-top: 0; }
}

/* ---------- FAQ ---------- */
@media (min-width: 768px) {
	.trs-home-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(24px, 3vw, 48px); align-items: start; }
	.trs-faq { border-top: 2px solid var(--trs-ink); }
}
.trs-faq__item { margin: 0; border: 0; border-bottom: 1px solid var(--trs-line); border-radius: 0; background: #fff; }
.trs-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 12px 20px;
	color: var(--trs-ink);
	list-style: none;
	cursor: pointer;
}
.trs-faq__item summary::-webkit-details-marker { display: none; }
.trs-faq__item summary:hover { color: var(--trs-sea-700); }
.trs-faq__q { font-size: 17px; font-weight: 700; line-height: 1.35; }
/* + / – in a sand circle. */
.trs-faq__item summary::after {
	content: "";
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
		var(--trs-sand-50);
}
.trs-faq__item[open] summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		var(--trs-sand-50);
}
.trs-faq__a { padding: 0 20px 20px; }
.trs-faq__a p { max-width: 68ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--trs-ink-2); }
.trs-faq__a a { color: var(--trs-sea-600); text-decoration: underline; text-underline-offset: 3px; }
.trs-faq__a a:hover { color: var(--trs-sea-700); text-decoration-thickness: 2px; }

/* ---------- Closing band with the hotel search ---------- */
/* The footer cliff rises from the band instead (band and footer read as one dark block). */
.trs-cta-band.trs-home-close { position: relative; padding-bottom: clamp(32px, 3vw, 40px); }
.trs-home-close::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: clamp(22px, 3vw, 42px); /* peaks stay 20px+ clear of the band above (inside its bottom padding) */
	background: var(--trs-sea-950);
	-webkit-mask: var(--trs-falesia) bottom / 100% 100% no-repeat;
	mask: var(--trs-falesia) bottom / 100% 100% no-repeat;
	pointer-events: none;
}
@supports not ((mask: url(x)) or (-webkit-mask: url(x))) {
	.trs-home-close::before { display: none; }
}
.trs-home-page .site-footer { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.trs-home-page .site-footer::before { display: none; }
@media (min-width: 768px) {
	.trs-home .trs-home-close .bhs__form { grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(72px, .5fr)) auto; }
	.trs-home .trs-home-close .bhs__btn { grid-column: auto; }
}
@media (min-width: 1100px) {
	.trs-home-close .trs-cta-band__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(24px, 3vw, 48px); }
	.trs-home-close .trs-cta-band__content { grid-column: auto; }
}
.trs-home .trs-home-close .bhs {
	--trs-focus: var(--trs-sea-600);
	padding: 16px 20px;
	border: 0;
	border-radius: var(--trs-r-ctl);
	background: #fff;
	box-shadow: none;
	color: var(--trs-ink);
}
.trs-home-close__search .trs-partner { margin-top: 10px; color: var(--trs-on-dark-muted); }