/*
 * Murex Resorts — shared components (BEM, docs/design/COMPONENTS.md)
 * Semantic tokens only; no literal colour values.
 */

/* ---------------------------------------------------------------- Icons (SVG mask, colour = currentColor) */
.c-icon {
	display: inline-block;
	flex: none;
	inline-size: 24px;
	block-size: 24px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.c-icon--search {
	-webkit-mask-image: url('../svg/ic-search.svg');
	mask-image: url('../svg/ic-search.svg');
}

.c-icon--chevron {
	-webkit-mask-image: url('../svg/icon-arrow-down.svg');
	mask-image: url('../svg/icon-arrow-down.svg');
}

.c-icon--chevron-right {
	-webkit-mask-image: url('../svg/icon-arrow-down.svg');
	mask-image: url('../svg/icon-arrow-down.svg');
	transform: rotate(-90deg);
}

.c-icon--menu {
	-webkit-mask-image: url('../svg/ic-menu.svg');
	mask-image: url('../svg/ic-menu.svg');
}

.c-icon--close {
	-webkit-mask-image: url('../svg/ic-close.svg');
	mask-image: url('../svg/ic-close.svg');
}

/* ---------------------------------------------------------------- Button */
.c-button {
	--btn-bg: transparent;
	--btn-fg: var(--color-text-link);
	--btn-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-block-size: var(--touch-target);
	padding: 0 var(--space-xl);
	border: 2px solid var(--btn-border);
	border-radius: var(--radius-full);
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: var(--lh-button);
	letter-spacing: var(--ls-button);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* Solid brand pill: the header / footer / hero "Book now" (HOMEPAGE-SPEC §2.1). */
.c-button--solid {
	--btn-bg: var(--color-surface-brand);
	--btn-fg: var(--color-text-on-brand);
	--btn-border: var(--color-surface-brand);
}

.c-button--solid:hover {
	--btn-bg: var(--color-surface-brand-hover);
	--btn-border: var(--color-surface-brand-hover);
}

/* CTA: surface/accent + text/on-accent only (COLORS.md §3.2). */
.c-button--primary {
	--btn-bg: var(--color-surface-accent);
	--btn-fg: var(--color-text-on-accent);
	--btn-border: var(--color-surface-accent);
}

/* Brand-blue pill: the footer newsletter "Subscribe" (mirrors the is-style-secondary block variation). */
.c-button--secondary {
	--btn-bg: var(--color-surface-brand);
	--btn-fg: var(--color-text-on-brand);
	--btn-border: var(--color-surface-brand);
}

.c-button--secondary:hover {
	--btn-bg: var(--color-surface-brand-hover);
	--btn-border: var(--color-surface-brand-hover);
}

.c-button--outline {
	--btn-fg: var(--color-text-link);
	--btn-border: var(--color-border-strong);
}

.c-button--outline:hover,
.c-icon-button:hover {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* On an Inverse band the outline pill reads white (text/link would drop below AA on brand/primary). */
[data-mode="inverse"] .c-button--outline {
	--btn-fg: var(--color-text-primary);
}

/* White pill with brand-blue text: the sticky-header "Book now" (HOMEPAGE-SPEC §2.3). */
.c-button--inverse {
	--btn-bg: var(--color-text-primary);
	--btn-fg: var(--color-surface-brand);
	--btn-border: var(--color-text-primary);
}

.c-button--inverse:hover {
	--btn-bg: var(--color-surface-subtle);
	--btn-border: var(--color-surface-subtle);
}

/* Text variant: Josefin link with a trailing chevron ("Explore all resorts"). */
.c-button--text {
	--btn-fg: var(--color-text-link);
	padding-inline: var(--space-sm);
	border-color: transparent;
}

.c-button--text:hover {
	text-decoration: underline;
	text-underline-offset: var(--space-xs);
}

/* ---------------------------------------------------------------- Icon button (56px circle) */
.c-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	padding: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background-color: transparent;
	color: var(--color-text-primary);
	text-decoration: none;
	cursor: pointer;
}

/* Burger / close carry no outline in the mobile header. */
.c-icon-button--plain {
	border-color: transparent;
}

/* ---------------------------------------------------------------- Language switcher (same component desktop + drawer) */
.c-lang-switch {
	position: relative;
}

.c-lang-switch__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	min-block-size: var(--touch-target);
	padding: 0 var(--space-base) 0 var(--space-lg);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	background-color: transparent;
	color: var(--color-text-primary);
	font-family: var(--font-roboto);
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	cursor: pointer;
}

.c-lang-switch__trigger:hover {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.c-lang-switch__trigger[aria-expanded="true"] .c-icon {
	transform: rotate(180deg);
}

.c-lang-switch__panel {
	position: absolute;
	inset-block-start: calc(100% + var(--space-sm));
	inset-inline-start: 0;
	z-index: var(--z-dropdown);
	min-inline-size: 100%;
	margin: 0;
	padding: var(--space-sm);
	list-style: none;
	border-radius: var(--radius-base);
	box-shadow: var(--elevation-2);
}

.c-lang-switch__panel li + li {
	margin-block-start: var(--target-gap);
}

.c-lang-switch__link {
	display: flex;
	align-items: center;
	min-block-size: var(--touch-target);
	padding: 0 var(--space-base);
	border-radius: var(--radius-sm);
	color: var(--color-text-primary);
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-decoration: none;
	white-space: nowrap;
}

.c-lang-switch__link:hover {
	background-color: var(--color-surface-subtle);
}

.c-lang-switch__link[aria-current="true"] {
	color: var(--color-text-link);
	box-shadow: inset var(--space-xs) 0 0 var(--color-text-link);
}

/* ---------------------------------------------------------------- Core Button block -> button variants */
/* The default core button is the solid brand pill (theme.json styles.elements.button). */
.wp-block-buttons {
	gap: var(--space-base);
}

/*
 * Variant base + :hover styles now live in theme.json
 * (styles.blocks.core/button.variations). Only the attribute-selector context
 * below cannot be expressed there, so it stays in CSS.
 */

/* Inverse Outline button support on dark sections */
[data-mode="inverse"] .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--color-neutral-300);
	color: var(--color-text-primary);
}

/*
 * theme.json gap: text-underline-offset has no theme.json key, so it is the one
 * declaration the `text` variant's hover cannot carry from theme.json. The underline
 * itself now comes from the variation (styles.blocks.core/button.variations.text.":hover"),
 * because base.css no longer sets `text-decoration: none` at 0-1-0.
 */
.wp-block-button.is-style-text > .wp-block-button__link:hover {
	text-underline-offset: var(--space-xs);
}

/* ---------------------------------------------------------------- Badge (category chip on cards) */
.c-badge {
	display: inline-block;
	margin: 0;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-page);
	color: var(--color-text-primary);
	font-family: var(--font-josefin);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: var(--lh-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- Arrow link ("Explore ›") */
.c-link-arrow {
	margin: 0;
}

.c-link-arrow a,
a.c-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-block-size: var(--touch-target);
	color: var(--color-text-link);
	font-family: var(--font-josefin);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: var(--lh-button);
	letter-spacing: var(--ls-button);
	text-decoration: none;
	text-transform: uppercase;
}

.c-link-arrow a::after,
a.c-link-arrow::after {
	content: "";
	flex: none;
	inline-size: var(--space-lg);
	block-size: var(--space-lg);
	background-color: currentColor;
	-webkit-mask: url('../svg/ic-arrow-right.svg') center / contain no-repeat;
	mask: url('../svg/ic-arrow-right.svg') center / contain no-repeat;
}

.c-link-arrow a:hover,
a.c-link-arrow:hover {
	text-decoration: underline;
	text-underline-offset: var(--space-xs);
}

/* ---------------------------------------------------------------- Blog index & single post */
/*
 * There is NO Figma frame for the blog index or the single-post layout. Both are composed strictly
 * from the documented type / spacing / radius / elevation tokens and the existing `c-` component
 * conventions; there are no new tokens, no JavaScript and no new stylesheet. The exact inferences
 * (card composition, pagination style, single-post structure) are logged as an Open Question in
 * docs/ai/AI-INSTRUCTIONS.md §4.
 */

/* Blog listing: neutral gap between the page title and the grid. */
.c-blog__head {
	margin-block-end: var(--space-2xl);
}

.c-post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--grid-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.c-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.c-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Post card: surface + subtle border + radius/lg + elevation/1 (all documented tokens). */
.c-post-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-page);
	box-shadow: var(--elevation-1);
}

.c-post-card__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-surface-subtle);
}

.c-post-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.c-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-md);
	padding: var(--space-lg);
}

.c-post-card__date {
	margin: 0;
	color: var(--color-text-muted);
}

.c-post-card .c-post-card__title {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

.c-post-card__excerpt {
	margin: 0;
}

.c-post-card__excerpt p {
	margin: 0;
}

.c-post-card .c-link-arrow {
	margin-block-start: auto;
}

/* Pagination: no Figma spec — a centred pill row built from the documented tokens. */
.c-blog .wp-block-query-pagination {
	justify-content: center;
	gap: var(--space-sm);
	margin-block-start: var(--space-3xl);
}

.c-blog .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--touch-target-min);
	min-block-size: var(--touch-target-min);
	padding-inline: var(--space-base);
	border-radius: var(--radius-full);
	color: var(--color-text-link);
	text-decoration: none;
}

.c-blog .wp-block-query-pagination a.page-numbers:hover {
	background-color: var(--color-surface-subtle);
}

.c-blog .wp-block-query-pagination .page-numbers.current {
	background-color: var(--color-surface-brand);
	color: var(--color-text-on-brand);
}

/* Single post. */
.c-article__head {
	margin-block-end: var(--space-lg);
}

.c-article__title {
	margin: 0 0 var(--space-base);
}

.c-article__date {
	margin: 0;
	color: var(--color-text-muted);
}

.c-article__media {
	margin: 0 0 var(--space-2xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.c-article__media img {
	border-radius: var(--radius-lg);
}

.c-article__back {
	margin-block-start: var(--space-3xl);
}