/* ==========================================================================
   Torres RS – listings: category hubs, /blog/, search (templates/listing.php)
   Shared components (chips, cards, grids, section head, pagination, search form, CTA band) are in trs-base.css.
   ========================================================================== */

/* ---------- Page ---------- */
.trs-listing .featured-item,
.trs-listing .entry-item { display: none; } /* Theme loop leftovers, if a hook prints them. */
.trs-listing-page:not(.category) .site-main { padding-bottom: 0; } /* Blog, search, author/date: ends with the full-width CTA band. */
.trs-listing > .trs-cta-band { margin-top: var(--trs-gap-bottom); }
.trs-listing__slot { margin: 0 auto 24px; }
.trs-listing__slot--grid { grid-column: 1 / -1; margin: 0; }

/* ---------- Head: breadcrumbs, kicker, H1, standfirst, chips ---------- */
.trs-listing__head { padding-top: var(--trs-gap-top); padding-bottom: 24px; }
.trs-listing__head .trs-kicker { margin: 0 0 4px; }
.trs-listing__head .trs-h1 {
	max-width: 20em;
	margin: 0;
	font-family: var(--trs-serif);
	font-weight: 700;
	font-size: var(--trs-fs-h1);
	line-height: var(--trs-lh-head);
	letter-spacing: var(--trs-ls-head);
	color: var(--trs-ink);
	text-wrap: balance;
}
.trs-listing-page:not(.category) .trs-listing__head .trs-h1 { font-size: var(--trs-fs-h1-sm); }
.trs-listing__head .trs-dek {
	max-width: 680px;
	margin: 12px 0 0;
	font-size: var(--trs-fs-dek);
	line-height: 1.55;
	color: var(--trs-ink-2);
}
.trs-listing__head .trs-chips { margin-top: 16px; }
.trs-listing__head .trs-search { max-width: 680px; margin-top: 20px; }
@media (max-width: 599px) {
	.trs-listing__head .trs-dek { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 600px) { /* Same breakpoint as the chips rail in trs-base.css. */
	/* Last section current (Dicas): the rail is scrolled to its end, nothing more on the right to hint at. */
	.trs-listing__head .trs-chips--rail:has(> .trs-chip.is-current:last-child) { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Hotel search: top of Onde ficar, and inside the grid of the other hubs ---------- */
.trs-listing__search {
	margin: 8px auto 32px;
	padding: 20px;
	border-radius: var(--trs-r-ctl);
	background: #fff;
	box-shadow: var(--trs-shadow-pop);
}
.trs-listing__search .bhs { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.trs-listing__search .bhs__title { margin: 0 0 12px; }
.trs-listing__search > .trs-kicker { margin: 0 0 4px; }
/* One row from 1000px (at 900-999px the dates would be clipped). Narrow number fields, so the city fits at 1000px. */
@media (min-width: 1000px) {
	.trs-listing__search .bhs--compact .bhs__form { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 88px 88px auto; }
	.trs-listing__search .bhs--compact .bhs__field--dest { grid-column: auto; }
}
@media (max-width: 599px) {
	.trs-listing__search { padding: 16px; }
	.trs-listing__search .bhs__field--dest { display: none; } /* The city is pre-filled and still sent. */
}

/* Onde ficar: Booking searches by region, right under the widget. */
.trs-listing__top .trs-listing__search { margin-bottom: 16px; }
.trs-listing__regions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 32px; }
.trs-listing__regions .trs-chips__label { margin: 0; }
.trs-listing__regions .trs-chip .trs-icon { width: 14px; height: 14px; color: var(--trs-muted); }
.trs-listing__regions .trs-partner { flex-basis: 100%; margin: 0; }
/* Phones (rail breakpoint of trs-base.css): one block per line, so the rail bleeds to both screen edges with its own
   negative margins (a flex item would stay at the content width). Harmless if the rail is not active. */
@media (max-width: 600px) {
	.trs-listing__regions { display: block; }
	.trs-listing__regions .trs-chips__label { margin: 0 0 8px; }
	.trs-listing__regions .trs-partner { display: block; margin-top: 8px; }
}

/* Other hubs: full row after the 6th card; on phones a button unfolds it (:target). */
.trs-listing__hotels { grid-column: 1 / -1; }
.trs-listing__hotels .trs-listing__search {
	margin: 0;
	border-top: 2px solid var(--trs-sea-600);
	border-radius: 0 0 var(--trs-r-ctl) var(--trs-r-ctl);
	background: var(--trs-sea-50);
	box-shadow: none;
}
/* Same edge as the 2-column grid (600px): folded only while the cards are in rows. */
@media (max-width: 599px) {
	.trs-listing__hotels { padding: 12px 0; border-top: 1px solid var(--trs-line); }
	.trs-listing__hotels .trs-listing__search:not(:target) { display: none; }
	.trs-listing__hotels:has(:target) .trs-bhs-teaser { display: none; }
	a.trs-bhs-teaser { width: 100%; }
}
@media (max-width: 359px) {
	a.trs-bhs-teaser { padding-inline: 12px; } /* One line at 320px. */
}
@media (min-width: 600px) {
	a.trs-bhs-teaser { display: none; }
}

/* ---------- "Comece por aqui": lead guide + 2 pillars ---------- */
.trs-listing__lead { margin-top: 16px; }
.trs-lead-grid { display: grid; gap: 32px var(--trs-grid-gap); }
@media (min-width: 900px) {
	.trs-lead-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
	.trs-lead-grid > .trs-card--lead { grid-row: 1 / span 2; }
	.trs-lead-grid > .trs-card--lead:only-child { grid-row: auto; }
	.trs-lead-grid > .trs-card:not(.trs-card--lead) { grid-column: 2; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.trs-lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trs-lead-grid > .trs-card--lead { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.trs-lead-grid { row-gap: 0; }
	.trs-lead-grid > .trs-card--lead { margin-bottom: 12px; }
	.trs-lead-grid .trs-card--lead p.trs-card__excerpt { font-size: var(--trs-fs-sm); }
}

/* ---------- Grid of guides ---------- */
.trs-listing__list,
.trs-listing__empty { margin-top: 48px; }
.trs-listing__head + .trs-listing__list,
.trs-listing__head + .trs-listing__empty { margin-top: 16px; }
.trs-listing__list .navigation.pagination { margin: 40px 0 0; }
/* Last card alone in its row (class from templates/listing.php): a whole-row card, the photo in the first column
   (same width as the photos above) and the text across the others. */
@media (min-width: 900px) {
	.trs-listing__grid > .trs-card.trs-card--solo-3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--trs-grid-gap); align-items: center; }
	.trs-listing__grid > .trs-card--solo-3 > .trs-card__body { grid-column: 2 / -1; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.trs-listing__grid > .trs-card.trs-card--solo-2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--trs-grid-gap); align-items: center; }
}

/* ---------- Guide of the section (term description) ---------- */
.trs-listing__closing > :first-child { margin-top: 48px; }
.trs-guide {
	margin: 48px 0 0;
	padding: 24px 28px;
	border-top: 2px solid var(--trs-ink);
	background: var(--trs-sand-50);
	font-size: var(--trs-fs-body);
	line-height: var(--trs-lh-body);
	color: var(--trs-ink);
}
/* Only text (no list of links): from the 3-column layout the box ends with the text (68ch + padding). Below that it
   keeps the shell width, it would stop just short of the grid edge. */
@media (min-width: 900px) {
	.trs-guide:not(.trs-guide--links) { max-width: calc(68ch + 56px); }
}
.trs-guide::before {
	content: 'Guia da seção';
	display: block;
	margin: 0 0 4px;
	font-size: var(--trs-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--trs-ls-kicker);
	color: var(--trs-ember);
}
.trs-guide p,
.trs-guide ul,
.trs-guide ol { max-width: 68ch; margin: 0 0 16px; }
.trs-guide > :last-child { margin-bottom: 0; }
.trs-guide h2 {
	margin: 32px 0 12px;
	font-family: var(--trs-serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: var(--trs-ls-head);
	color: var(--trs-ink);
}
.trs-guide > h2:first-child { margin-top: 0; }
.trs-guide h3 { margin: 24px 0 8px; font-size: var(--trs-fs-h3); line-height: 1.3; color: var(--trs-ink); }
.trs-guide li { margin: 0 0 6px; }
/* Lists made only of links (class from TRS_Archive::guide()): two columns of 44px rows with an arrow. */
.trs-guide ul.trs-guide__links {
	display: grid;
	gap: 0 24px;
	max-width: none;
	padding: 0;
	list-style: none;
}
.trs-guide ul.trs-guide__links > li { margin: 0; border-top: 1px solid var(--trs-sand-200); }
.trs-guide ul.trs-guide__links > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 8px 0;
	font-weight: 600;
	line-height: 1.35;
	color: var(--trs-sea-700);
	text-decoration: none;
}
.trs-guide ul.trs-guide__links > li > a::after { content: '→'; flex: 0 0 auto; color: var(--trs-sea-600); }
.trs-guide ul.trs-guide__links > li > a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 600px) {
	.trs-guide ul.trs-guide__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.trs-guide { padding: 20px 16px; }
}

/* ==========================================================================
   Legacy layout (trs_layout_v2 off): theme archive.php / home.php
   ========================================================================== */
.category .entry-content > p { font-size: 1.05rem; line-height: 1.7; color: var(--trs-text); max-width: 760px; }
.trs-archive-tools { margin: 1rem 0 2rem; }
.trs-chips--archive { margin: 0 0 1.25rem; }
.trs-archive-search { margin-top: 1rem; }
.entry-content > .archive-description { margin: 2.5rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--trs-border); line-height: 1.75; }
.entry-content > .archive-description h2 { font-size: 1.45rem; margin: 1.6em 0 .6em; }
.entry-content > .archive-description h3 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
.trs-blog-header { flex-basis: 100%; margin: 0 0 1.5rem; }
.trs-blog-header__title { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.2; margin: 0 0 .5rem; }