/* ==========================================================================
   Search results — ported from design/src/search.html.

   Loaded only on the page carrying [ora_zoekresultaten]. Colours come from the
   core plugin's tokens; every fallback below is the token's own value, so the
   page still looks right if ora-reizen-core is ever deactivated.

   ⚠️ Astra's inline <style> loads after this one. If a rule here does not
   land, count the opposing specificity before touching it — see
   ora-reizen-child/assets/css/woocommerce.css §11b for the pattern.
   ========================================================================== */

.ora-res {
	background: var(--ora-cream, #FDF8F0);
	padding: 40px 0 88px;
}

/* ⚠️ Astra underlines every link inside .entry-content, from its INLINE style
   block, at (0,0,2,1):

     .ast-single-post .entry-content a, … { text-decoration: underline }

   Inline means it loads after this file, so a tie loses and every hotel name,
   filter and button on the page came out underlined. Three classes plus an
   element takes it cleanly, without !important. Individual links below opt
   back into an underline where one belongs. */
.ora-res[data-ora="search-results"] .ora-wrap a {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */
.ora-res__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 24px;
}
.ora-res [data-ora] h1,
.ora-res__head h1 {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	margin: 0;
	color: var(--ora-ink, #10202F);
}
.ora-res__sub {
	margin: 8px 0 0;
	font-size: .9rem;
	color: var(--ora-muted, #76869A);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ora-res__layout {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: 30px;
	align-items: start;
}

/* ⚠️ min-width: 0 on BOTH columns, not just the list.
   A grid item defaults to min-width:auto, so it refuses to shrink below its
   content's intrinsic width. On mobile the filter rail becomes a horizontal
   strip of destination chips; without this the aside blew out to 660px inside
   a 310px column and gave the whole page a sideways scroll of 310px — which is
   how the first non-Elementor page on the site came to be the only one failing
   the overflow check. The `overflow-x: auto` further down only scrolls the rail
   once the rail itself is allowed to be narrow. */
.ora-res__filters,
.ora-res__list {
	min-width: 0;
}

.ora-res__filters {
	position: sticky;
	top: 104px;
	background: #fff;
	border: 1px solid var(--ora-line, #E4E9EF);
	border-radius: var(--ora-r-md, 14px);
	padding: 20px 20px 18px;
}
.ora-res__ftitle {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ora-muted, #76869A);
	margin: 0 0 12px;
}
.ora-res__flist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.ora-res__flist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--ora-r-xs, 6px);
	font-size: .92rem;
	font-weight: 600;
	color: var(--ora-body, #4C5C6B);
	text-decoration: none;
	transition: background-color .16s, color .16s;
}
.ora-res__flist a:hover {
	background: var(--ora-cream, #FDF8F0);
	color: var(--ora-ink, #10202F);
}
.ora-res__flist a.is-on {
	background: var(--ora-navy-800, #0B2545);
	color: #fff;
}
.ora-res__flist b {
	font-size: .78rem;
	font-weight: 700;
	color: var(--ora-muted, #76869A);
}
.ora-res__flist a.is-on b { color: rgba(255, 255, 255, .72); }

.ora-res__fnote {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ora-line-2, #EFF3F7);
	font-size: .82rem;
	line-height: 1.55;
	color: var(--ora-muted, #76869A);
}

.ora-res__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Result card
   -------------------------------------------------------------------------- */
.ora-rc {
	display: grid;
	grid-template-columns: 280px 1fr 226px;
	background: #fff;
	border: 1px solid var(--ora-line, #E4E9EF);
	border-radius: var(--ora-r-md, 14px);
	overflow: hidden;
	transition: box-shadow .3s, transform .3s, border-color .3s;
}
.ora-rc:hover {
	box-shadow: var(--ora-s-lg, 0 20px 44px -14px rgba(7, 27, 51, .2));
	transform: translateY(-3px);
	border-color: transparent;
}

.ora-rc__media {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 216px;
	background: var(--ora-cream-200, #F5EDDF);
}
.ora-rc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s;
}
.ora-rc:hover .ora-rc__media img { transform: scale(1.06); }

/* No photography from the hotels yet. An honest label beats a stretched
   placeholder graphic, and it tells the client exactly what is missing. */
.ora-rc__nophoto {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ora-gold, #B8862B);
}

.ora-rc__body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ora-rc__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 7px;
}
.ora-rc__stars .ora-icon {
	width: 13px;
	height: 13px;
	max-width: none;
	fill: var(--ora-gold-400, #D2A24B);
	stroke: none;
}
.ora-res .ora-rc__body h2 {
	font-size: 1.16rem;
	line-height: 1.25;
	margin: 0;
	color: var(--ora-ink, #10202F);
}
.ora-rc__body h2 a { color: inherit; text-decoration: none; }
.ora-rc__body h2 a:hover { color: var(--ora-navy-700, #123A6B); }

.ora-rc__loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	font-size: .83rem;
	color: var(--ora-muted, #76869A);
}
.ora-rc__loc .ora-icon { stroke: var(--ora-gold, #B8862B); max-width: none; }

.ora-rc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 0;
}
.ora-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border: 1px solid var(--ora-line, #E4E9EF);
	border-radius: var(--ora-r-full, 999px);
	font-size: .76rem;
	font-weight: 600;
	color: var(--ora-body, #4C5C6B);
	background: #fff;
}
.ora-pill--good {
	background: var(--ora-green-050, #EAF6EF);
	border-color: var(--ora-green-200, #BFE3CE);
	color: var(--ora-green, #1C7A4E);
}

.ora-rc__note {
	margin: auto 0 0;
	padding-top: 14px;
	font-size: .8rem;
	color: var(--ora-muted, #76869A);
}

/* --------------------------------------------------------------------------
   The buy column
   -------------------------------------------------------------------------- */
.ora-rc__buy {
	border-left: 1px dashed var(--ora-line, #E4E9EF);
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	background: linear-gradient(180deg, #fff, var(--ora-cream, #FDF8F0));
}
.ora-rc__for {
	font-size: .78rem;
	color: var(--ora-muted, #76869A);
}
.ora-rc__now {
	margin-top: auto;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--ora-navy-800, #0B2545);
}
.ora-rc__now .woocommerce-Price-amount { font-weight: 800; }
.ora-rc__now--ask {
	font-size: 1.02rem;
	margin-top: auto;
	color: var(--ora-ink, #10202F);
}
.ora-rc__unit {
	font-size: .76rem;
	font-weight: 600;
	color: var(--ora-muted, #76869A);
	margin-top: 2px;
}
.ora-rc__why {
	margin-top: 6px;
	font-size: .74rem;
	line-height: 1.45;
	color: var(--ora-muted, #76869A);
}
.ora-rc__buy .ora-btn {
	margin-top: 14px;
	width: 100%;
	justify-content: center;
	padding: 12px 16px;
	font-size: .85rem;
}

/* --------------------------------------------------------------------------
   Empty state and pagination
   -------------------------------------------------------------------------- */
.ora-res__empty {
	background: #fff;
	border: 1px solid var(--ora-line, #E4E9EF);
	border-radius: var(--ora-r-md, 14px);
	padding: 40px 36px;
	text-align: center;
}
.ora-res .ora-res__empty h2 {
	font-size: 1.3rem;
	margin: 0 0 10px;
	color: var(--ora-ink, #10202F);
}
.ora-res__empty p {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--ora-body, #4C5C6B);
}
.ora-res__empty-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 22px;
}

.ora-res__pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}
.ora-res__pager a,
.ora-res__pager span {
	min-width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0 12px;
	border: 1px solid var(--ora-line, #E4E9EF);
	border-radius: var(--ora-r-sm, 10px);
	background: #fff;
	font-size: .88rem;
	font-weight: 700;
	color: var(--ora-ink, #10202F);
	text-decoration: none;
}
.ora-res__pager a:hover,
.ora-res__pager .current {
	background: var(--ora-navy-800, #0B2545);
	border-color: var(--ora-navy-800, #0B2545);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
	.ora-rc { grid-template-columns: 230px 1fr 200px; }
}

@media (max-width: 1020px) {
	.ora-res__layout { grid-template-columns: 1fr; gap: 20px; }
	.ora-res__filters { position: static; }
	.ora-res__flist { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
	.ora-res__fnote { display: none; }
}

@media (max-width: 780px) {
	.ora-rc { grid-template-columns: 1fr; }
	.ora-rc__media { min-height: 190px; }
	.ora-rc__buy {
		border-left: 0;
		border-top: 1px dashed var(--ora-line, #E4E9EF);
		align-items: stretch;
		text-align: left;
	}
	.ora-rc__now { margin-top: 0; }
	.ora-res { padding: 24px 0 56px; }
}

/* ==================================================================== */
/* The release notice (#144)                                            */
/* ==================================================================== */

/*
 * Shown only when the searched ARRIVAL falls inside the release window.
 *
 * ⚠️ It exists because a search card's "vanaf" price is date-INDEPENDENT --
 * it is the cheapest stored rate, not a quote for the dates typed. So without
 * this the page listed hotels with prices for dates the booking card was
 * always going to refuse, and the visitor only found out one click later.
 * #118 names the search alongside the card and the calculator for exactly
 * this reason.
 *
 * Gold, not red: nothing has gone wrong and the hotel is not full. These
 * dates simply cannot be sold online, and there is a route that can.
 */
.ora-res__notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	margin: 0 0 24px;
	padding: 18px 22px;
	border-radius: var(--ora-radius, 12px);
	border-left: 4px solid var(--ora-gold, #c9a227);
	background: #fbf3e3;
}

.ora-res__notice p {
	margin: 0;
	max-width: 62ch;
	color: var(--ora-navy, #12233f);
	font-size: 15px;
	line-height: 1.55;
}

/* min-width: 0 so the text can shrink instead of forcing sideways scroll
   (gotcha 12 -- a flex item will not go below its intrinsic width). */
.ora-res__notice > p {
	min-width: 0;
	flex: 1 1 320px;
}

.ora-res__notice .ora-btn {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.ora-res__notice {
		flex-direction: column;
		align-items: flex-start;
	}

	/*
	 * flex-grow must go once the direction turns. In a column the 1 1 320px
	 * above makes the paragraph absorb the whole cross axis, which opened
	 * ~150px of dead space between the text and the button at 390px. Nothing
	 * measured it: check-pages.py saw no overflow and the notice reported a
	 * clean 310x424 box. Only the screenshot showed it (#102).
	 */
	.ora-res__notice > p {
		flex: 0 0 auto;
	}

	.ora-res__notice .ora-btn {
		width: 100%;
		text-align: center;
	}
}