/**
 * Hotel101 Blog.
 *
 * Scoped under .h101-blog so nothing here can leak into the borrowed header
 * and footer, which are styled by the live site's own stylesheets.
 *
 * Spacing and type below are a working baseline. Replace the token values with
 * the live design system's before release; the structure does not change.
 */

.h101-blog {
	/* Read from the live site's DaisyUI theme on hotel101.com:
	   --p #046A38, --pf #03552D, --s #86D295, --bc #333333.
	   These three are exact; everything below them is a working baseline. */
	--h101-green: #046A38;
	--h101-green-dark: #03552D;
	--h101-green-soft: #86D295;

	/* DERIVED, NOT APPROVED. The live design system has no pale surface token
	   (--pc is #AFFFD8, far too saturated for a panel). This is #046A38 mixed
	   with white at 8%, keeping the brand hue. Swap this one value once design
	   supplies the real mint. */
	--h101-mint: #EBF3EF;

	--h101-ink: #1a1a1a;
	--h101-muted: #5c5c5c;
	--h101-line: #e2e2e2;
	--h101-surface: #ffffff;
	--h101-surface-alt: #f6f7f6;

	--h101-gap: 24px;
	--h101-radius: 8px;
	--h101-wrap: 1200px;
	--h101-gutter: 16px;

	/* 44px minimum touch target, per the handoff. */
	--h101-tap: 44px;

	color: var(--h101-ink);
	background: var(--h101-surface);
}

.h101-blog *,
.h101-blog *::before,
.h101-blog *::after {
	box-sizing: border-box;
}

.h101-wrap {
	width: 100%;
	max-width: var(--h101-wrap);
	margin-inline: auto;
	padding-inline: var(--h101-gutter);
}

.h101-main {
	display: block;
}

.is-hidden {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Visible keyboard focus is a stated requirement; never remove it. */
.h101-blog a:focus-visible,
.h101-blog button:focus-visible,
.h101-blog input:focus-visible,
.h101-blog select:focus-visible {
	outline: 3px solid var(--h101-green);
	outline-offset: 2px;
	border-radius: 2px;
}

.h101-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--h101-green);
	color: #fff;
	text-decoration: none;
}

.h101-skip-link:focus {
	left: 0;
}

/* ---------- Buttons ---------- */

.h101-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--h101-tap);
	min-width: var(--h101-tap);
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--h101-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.h101-button--primary {
	background: var(--h101-green);
	color: #fff;
}

.h101-button--primary:hover {
	background: var(--h101-green-dark);
}

.h101-button--secondary {
	background: transparent;
	border-color: var(--h101-green);
	color: var(--h101-green);
}

.h101-button--secondary:hover {
	background: var(--h101-green);
	color: #fff;
}

.h101-button--outline {
	background: transparent;
	border-color: var(--h101-green);
	color: var(--h101-green);
}

.h101-button--outline:hover {
	background: var(--h101-green);
	color: #fff;
}

.h101-button--text {
	background: none;
	border: none;
	padding: 12px 8px;
	color: var(--h101-green);
	text-decoration: underline;
}

.h101-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---------- Hero ----------
   Two panels: copy on mint, photograph beside it. Text never sits on the
   image, so legibility does not depend on which photograph is chosen. */

.h101-hero {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 24px;
	background: var(--h101-mint);
	overflow: hidden;
}

.h101-hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 28px;
}

.h101-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--h101-green);
}

.h101-hero__title {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 4.5vw, 2.5rem);
	line-height: 1.15;
	color: var(--h101-ink);
}

.h101-hero__text {
	margin: 0;
	max-width: 32ch;
	color: var(--h101-ink);
	line-height: 1.6;
}

.h101-hero__media {
	min-height: 200px;
	background: var(--h101-surface-alt);
}

.h101-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Search and filters ----------
   One row: a search field and a category select. No submit button in the
   design, so the form still submits on Enter for anyone without JavaScript. */

.h101-controls {
	padding-block: 28px 4px;
}

.h101-controls__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.h101-search__label,
.h101-filter__label {
	/* The placeholder and the default option carry the label visually;
	   these stay for screen readers. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.h101-search__input,
.h101-filter__select {
	width: 100%;
	min-height: var(--h101-tap);
	padding: 11px 14px;
	border: 1px solid var(--h101-line);
	border-radius: 2px;
	background: var(--h101-surface);
	/* 16px minimum stops iOS zooming the page on focus. */
	font-size: 16px;
	font-family: inherit;
	color: var(--h101-ink);
}

.h101-search__input::placeholder {
	color: var(--h101-muted);
}

.h101-filter__select {
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23046A38' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* No-JS submit: present for keyboard and non-JS use, out of the way visually. */
.h101-search__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.h101-search__submit:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
}

/* ---------- Sections and grid ---------- */

.h101-section {
	padding-block: 32px;
}

.h101-section__head {
	margin-bottom: 24px;
}

.h101-section__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}

.h101-section__intro {
	margin: 8px 0 0;
	color: var(--h101-muted);
}

.h101-section__more {
	margin-top: 28px;
	text-align: center;
}

.h101-grid {
	display: grid;
	gap: var(--h101-gap);
	/* One column below 768px; the media queries below step it up. */
	grid-template-columns: 1fr;
}

/* ---------- Card ----------
   Flat: image, then text. No border or rounded corners; the grid gap does the
   separating, which keeps the photographs the loudest thing on the page. */

.h101-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
}

.h101-card__media {
	display: block;
	/* Fixed ratio keeps crops consistent across the grid. */
	aspect-ratio: 16 / 10;
	background: var(--h101-surface-alt);
	overflow: hidden;
}

.h101-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.h101-card:hover .h101-card__image {
	transform: scale(1.03);
}

.h101-card__image--placeholder {
	display: block;
	background: var(--h101-surface-alt);
}

.h101-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px 0 0;
}

/* Category and date share one line, separated by a rule. */
.h101-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 0.8125rem;
	color: var(--h101-green);
}

.h101-card__category {
	color: var(--h101-green);
	text-decoration: none;
}

.h101-card__category:hover {
	text-decoration: underline;
}

.h101-card__sep {
	color: var(--h101-line);
}

.h101-card__date {
	color: var(--h101-green);
}

.h101-card__title {
	margin: 0 0 8px;
	font-size: 1.1875rem;
	line-height: 1.3;
	/* Titles wrap rather than truncate, per the handoff. */
	overflow-wrap: break-word;
}

.h101-card__title a {
	color: var(--h101-ink);
	text-decoration: none;
}

.h101-card__title a:hover {
	color: var(--h101-green);
	text-decoration: underline;
}

.h101-card__excerpt {
	margin: 0 0 16px;
	color: var(--h101-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.h101-card__action {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--h101-tap);
	color: var(--h101-green);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.h101-card__action:hover {
	text-decoration: underline;
}

.h101-card__chevron {
	font-weight: 400;
}

/* Cards past the second are held back on mobile until More is pressed. */
.h101-card--mobile-hidden {
	display: none;
}

.h101-section.is-expanded .h101-card--mobile-hidden {
	display: flex;
}

/* ---------- Results ---------- */

.h101-results {
	padding-block: 40px;
}

.h101-results__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.h101-results__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.h101-results__count {
	margin: 0;
	color: var(--h101-muted);
}

.h101-results__empty {
	margin: 0;
	padding: 32px 0;
	color: var(--h101-muted);
	font-size: 1.0625rem;
}

.h101-results .h101-card--mobile-hidden {
	/* A results grid has no More button, so nothing is held back. */
	display: flex;
}

/* ---------- Hotel discovery CTA ----------
   A contained mint panel, not a full-bleed green band: text left,
   outlined button right, stacking on narrow screens. */

.h101-cta {
	margin-block: 40px 56px;
}

.h101-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 28px;
	background: var(--h101-mint);
}

.h101-cta__title {
	margin: 0 0 6px;
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	line-height: 1.2;
	color: var(--h101-ink);
}

.h101-cta__text {
	margin: 0;
	color: var(--h101-ink);
}

.h101-cta__action {
	background: var(--h101-surface);
	flex-shrink: 0;
}

/* ---------- Article ---------- */

.h101-breadcrumb {
	padding-block: 24px 8px;
}

.h101-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--h101-muted);
}

.h101-breadcrumb__list li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--h101-line);
}

.h101-breadcrumb__list a {
	color: var(--h101-muted);
}

.h101-article__head {
	padding-block: 16px 24px;
	max-width: 780px;
}

.h101-article__category {
	display: inline-block;
	margin-bottom: 12px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h101-green);
	text-decoration: none;
}

.h101-article__title {
	margin: 0 0 12px;
	font-size: clamp(1.875rem, 4.5vw, 3rem);
	line-height: 1.15;
}

.h101-article__date {
	color: var(--h101-muted);
}

.h101-article__hero {
	margin: 0 0 32px;
}

.h101-article__hero-image {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	display: block;
}

.h101-article__hero-caption {
	max-width: var(--h101-wrap);
	margin: 8px auto 0;
	padding-inline: var(--h101-gutter);
	font-size: 0.875rem;
	color: var(--h101-muted);
}

.h101-article__body {
	max-width: 720px;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.h101-article__body > * + * {
	margin-top: 1.25em;
}

.h101-article__body h2 {
	margin-top: 2em;
	font-size: 1.625rem;
	line-height: 1.25;
}

.h101-article__body h3 {
	margin-top: 1.75em;
	font-size: 1.25rem;
}

.h101-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--h101-radius);
}

.h101-article__body a {
	color: var(--h101-green);
}

.h101-article__cta {
	margin-block: 48px;
	padding-block: 40px;
	background: var(--h101-surface-alt);
	text-align: center;
}

.h101-article__cta-inner {
	max-width: 620px;
	margin-inline: auto;
	padding-inline: var(--h101-gutter);
}

.h101-article__cta-title {
	margin: 0 0 8px;
	font-size: 1.5rem;
}

.h101-article__cta-text {
	margin: 0 0 24px;
	color: var(--h101-muted);
}

.h101-notfound {
	padding-block: 80px;
	text-align: center;
}

.h101-notfound__title {
	margin: 0 0 12px;
}

.h101-notfound__text {
	margin: 0 0 28px;
	color: var(--h101-muted);
}

/* ---------- Breakpoints ----------
   Proposed in the handoff: 3 columns at 1024px and up, 2 at 768-1023px,
   1 below 768px. */

@media (min-width: 768px) {
	.h101-blog {
		--h101-gutter: 32px;
		--h101-gap: 28px;
	}

	.h101-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Above mobile every card is shown; the More button pages in new ones
	   rather than revealing held-back ones. */
	.h101-card--mobile-hidden {
		display: flex;
	}

	/* A curated section is fixed at three cards, all of which are already
	   visible at this width, so its More button has nothing left to do.
	   Latest keeps its button because it pages in further articles. */
	.h101-section[data-curated="true"] .h101-section__more {
		display: none;
	}

	/* Hero splits into copy + photograph side by side. */
	.h101-hero {
		grid-template-columns: 5fr 7fr;
		min-height: 300px;
	}

	.h101-hero__panel {
		padding: 40px 36px;
	}

	.h101-hero__media {
		min-height: 0;
	}

	/* Search takes the room; the category select stays compact. */
	.h101-controls__row {
		grid-template-columns: 1fr minmax(200px, 260px);
		gap: 16px;
	}

	.h101-section {
		padding-block: 48px;
	}
}

@media (min-width: 1024px) {
	.h101-blog {
		--h101-gutter: 40px;
		--h101-gap: 32px;
	}

	.h101-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.h101-hero {
		min-height: 340px;
	}

	.h101-hero__panel {
		padding: 48px 44px;
	}

	.h101-cta__inner {
		padding: 32px 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.h101-blog *,
	.h101-blog *::before,
	.h101-blog *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.h101-card:hover .h101-card__image {
		transform: none;
	}
}

/* ---------- Bare mode ----------
   No borrowed header or footer: whatever embeds this page supplies them.
   The hero sits at the very top, so it needs no extra offset, but the page
   should not look decapitated if the hero is ever removed. */

.h101-blog.h101-chrome-bare .h101-main > .h101-wrap:first-child {
	padding-top: 24px;
}

/* Skip link has nothing above it to skip past in bare mode. */
.h101-blog.h101-chrome-bare .h101-skip-link {
	display: none;
}