/* =====================================================================
   TRAVEL ESSENTIALS
   Components for the practical-information feature. Everything here is
   generic to the post type, not to SIM cards, so a visa or currency
   category added later inherits the same look with no new CSS.
   Loads after modernist-trip.css and reuses its .band-paper / .itin /
   .lead / .faqx scaffolding.
   ===================================================================== */

/* ---- fact list: the "Label :: Value" pairs ---- */
.efacts {
	margin: 0 0 var(--space-8);
	padding: 0;
}
.efacts__row {
	display: grid;
	grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-divider);
}
.efacts__row:first-child { border-top: 2px solid var(--color-text); }
.efacts dt {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	margin: 2px 0 0;
}
.efacts dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--color-text);
}
.efacts--tight { margin-bottom: var(--space-6); }
.efacts--tight .efacts__row { padding: 10px 0; }

/* ---- one entry, summarised on a category page ---- */
.ecard {
	background: var(--color-surface);
	padding: var(--space-6);
	margin-bottom: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
.ecard:hover { box-shadow: var(--shadow-md); transform: translate3d(0, -2px, 0); }
.ecard__head { margin-bottom: var(--space-4); }
.ecard__head h3 {
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: var(--space-2) 0 0;
}
.ecard__head h3 a { color: inherit; text-decoration: none; }
.ecard__head h3 a:hover { color: var(--color-accent); }
.ecard__answer {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-neutral-800);
	margin: 0 0 var(--space-6);
	max-width: 62ch;
}

/* ---- long-form body copy ---- */
.ebody { max-width: 68ch; margin-bottom: var(--space-8); }
.ebody p {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--color-neutral-800);
	margin: 0 0 var(--space-4);
}
.ebody h2 {
	font-size: clamp(20px, 2.3vw, 26px);
	letter-spacing: -.02em;
	margin: var(--space-8) 0 var(--space-3);
}
.ebody a { color: var(--color-accent); }
.eoff { margin: 0 0 var(--space-8); }

/* ---- index tiles get a footer line ---- */
.tile__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-4);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

@media (max-width: 767px) {
	.efacts__row { grid-template-columns: 1fr; gap: 2px; }
	.ecard { padding: var(--space-4); }
}

/* ---- category / sibling cards -------------------------------------
   A text card, not the photographic .tile from the homepage - that one
   is 4:5 with an absolutely-positioned caption, which left these
   stretched and empty. */
.ecats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: var(--space-4);
	align-items: start;
}
.ecat {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	padding: var(--space-6);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
.ecat:hover { box-shadow: var(--shadow-md); transform: translate3d(0, -2px, 0); }
.ecat .lbl {
	display: block;
	color: var(--color-neutral-600);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ecat h3 {
	color: var(--color-text);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: var(--space-3) 0 0;
	transition: color 200ms var(--ease);
}
.ecat:hover h3 { color: var(--color-accent); }
.ecat p {
	color: var(--color-neutral-800);
	font-size: 15px;
	line-height: 1.55;
	margin: var(--space-3) 0 0;
}
.ecat__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-6);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* ---- the add-on checkbox -------------------------------------------
   Specificity has to clear '.lead input { width: 100% }' in
   modernist-trip.css, which loads after this file for the modal and
   before it here - hence the descendant selectors rather than a bare
   class. */
.lead .lead__check,
.mfield .lead__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: var(--space-4) 0 var(--space-2);
	padding: var(--space-3);
	background: color-mix(in srgb, var(--color-accent) 8%, transparent);
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--color-text);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	font-weight: 400;
}
.lead .lead__check input[type="checkbox"],
.mfield .lead__check input[type="checkbox"] {
	width: 17px;
	min-width: 17px;
	height: 17px;
	min-height: 0;
	flex: none;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid var(--color-neutral-600);
	accent-color: var(--color-accent);
	cursor: pointer;
}
.lead .lead__check span,
.mfield .lead__check span { flex: 1 1 auto; min-width: 0; }

/* ---- the lede: direct answer + when it was checked ------------------
   This was inheriting the package pages' class names, which are not
   defined in any stylesheet the essentials pages load - so it rendered
   as loose default flow inside a full-height section. */
.ess-lede { padding-block: var(--space-8) var(--space-6); }

.ess-answer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 200px;
	gap: var(--space-8);
	align-items: start;
	padding-top: var(--space-4);
	border-top: 2px solid var(--color-text);
}
.ess-answer__main p {
	margin: var(--space-3) 0 0;
	max-width: 72ch;
	font-size: clamp(16px, 1.55vw, 19px);
	line-height: 1.6;
	color: var(--color-text);
}
.ess-answer__side .lbl {
	display: block;
	color: var(--color-neutral-600);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ess-answer__side p {
	margin: var(--space-2) 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-neutral-800);
}
@media (max-width: 860px) {
	.ess-answer { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- rhythm inside the white band ---------------------------------- */
.itin__main > .shead { margin-bottom: var(--space-6); }
.itin__main > .faqx { margin-top: var(--space-8); }
.itin__main > .faqx h2 {
	margin: 0 0 var(--space-3);
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -.02em;
}
.itin__main > *:last-child { margin-bottom: 0; }
.eoff { margin: 0 0 var(--space-8); }
.ebody > *:last-child { margin-bottom: 0; }

/* ---- outbound CTA (affiliate) ---------------------------------------
   Sits above the enquiry form in the sidebar. Deliberately quieter than
   the enquiry card: the trip is the business, this is a helpful link. */
.ecta {
	background: var(--color-bg);
	padding: var(--space-6);
	margin-bottom: var(--space-4);
	outline: 2px solid var(--color-text);
	outline-offset: -2px;
}
.ecta h3 {
	font-size: 19px;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: var(--space-3) 0 var(--space-2);
}
.ecta p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-neutral-800);
}
.ecta .btn {
	width: 100%;
	justify-content: flex-start;
	gap: 8px;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	margin-top: var(--space-4);
	font-size: 15px;
}
.ecta .btn svg { flex: none; }
.ecta__disc {
	margin-top: var(--space-3);
	font-size: 11px;
	line-height: 1.45;
	color: var(--color-neutral-700);
}

/* ---- hotel search embed: same shell as the affiliate CTA ---- */
.hsearch {
	background: var(--color-bg);
	padding: var(--space-6);
	margin-bottom: var(--space-4);
	outline: 2px solid var(--color-text);
	outline-offset: -2px;
}
.hsearch h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.15; margin: var(--space-3) 0 var(--space-2); }
.hsearch p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-800); }
.hsearch .btn { width: 100%; justify-content: flex-start; gap: 8px; min-height: 48px; padding: var(--space-3) var(--space-4); margin-top: var(--space-4); font-size: 15px; }
.hsearch .btn svg { flex: none; }
.hsearch__embed { margin-top: var(--space-4); }
.hsearch__embed iframe { max-width: 100%; }

/* ---- partner property badge ---- */
.pbadge {
	display: block;
	margin: 0 0 var(--space-6);
	padding: var(--space-3) var(--space-4);
	background: color-mix(in srgb, var(--color-accent) 8%, transparent);
	border-left: 3px solid var(--color-accent);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--color-text);
}