/**
 * Turismo Malesia - front page (front-page.php).
 *
 * Navy hero, quick-access tiles overlapping its bottom edge, then full-width
 * bands for the page body, the latest articles and the news.
 */

/* ==========================================================================
   Bands
   ========================================================================== */

.tm-band {
	padding-block: clamp(3rem, 2.4rem + 2.6vw, 4.75rem);
}

.tm-band--light {
	background: var(--tm-white);
}

.tm-band--gray {
	border-top: 1px solid var(--tm-border);
	background: var(--tm-gray-100);
}

/* Two light bands in a row: keep a seam */
.tm-band--light + .tm-band--light {
	border-top: 1px solid var(--tm-border);
}

.tm-band .tm-section-head {
	margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	padding-bottom: var(--tm-space-4);
	border-bottom: 1px solid var(--tm-border);
}

.tm-band .tm-section-head__lead {
	font-size: var(--tm-fs-lead);
}

/* ==========================================================================
   Hero (navy)
   ========================================================================== */

.tm-band--hero {
	padding-block: clamp(3rem, 2.2rem + 3.4vw, 5.5rem) clamp(5.5rem, 4.6rem + 3.6vw, 8rem);
	background: var(--tm-ink);
	color: var(--tm-on-dark);
}

.tm-home-hero {
	max-width: 46rem;
}

/* Photo background (front page featured image). The subject should sit on
   the right of the photo: the text stays on the left over a navy fade; on
   narrow screens a flat navy veil keeps it readable. */
.tm-band--hero-photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.tm-hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 45%;
}

.tm-band--hero-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11, 29, 54, 0.72);
}

.tm-band--hero-photo .tm-home-hero__lead {
	color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 1025px) {
	.tm-band--hero-photo::before {
		background: linear-gradient(90deg, rgba(11, 29, 54, 0.9) 0%, rgba(11, 29, 54, 0.82) 42%, rgba(11, 29, 54, 0.25) 62%, rgba(11, 29, 54, 0.05) 100%);
	}

	.tm-band--hero-photo .tm-home-hero {
		max-width: 38rem;
	}
}

.tm-home-hero .tm-kicker {
	color: var(--tm-accent);
}

.tm-home-hero__title {
	margin: var(--tm-space-4) 0 var(--tm-space-5);
	color: var(--tm-white);
	font-size: var(--tm-fs-hero);
	font-weight: 500;
	line-height: 1.1;
	text-wrap: balance;
}

.tm-home-hero__title .tm-text-accent {
	color: var(--tm-brand-light);
}

.tm-home-hero__lead {
	max-width: 58ch;
	margin: 0;
	color: var(--tm-on-dark-2);
	font-size: var(--tm-fs-lead);
	line-height: 1.55;
}

/* ==========================================================================
   Quick access tiles (menu "Home - Accesso rapido")
   ========================================================================== */

/* flow-root: the tiles' negative margin must not collapse through the band
   (it would pull the whole white band over the hero). */
.tm-band--access {
	display: flow-root;
	padding-block: 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
	background: var(--tm-white);
}

.tm-access {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--tm-space-4);
	margin: calc(clamp(3.5rem, 3rem + 2vw, 4.5rem) * -1) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.tm-access {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.tm-access {
		grid-template-columns: repeat(var(--tm-access-cols, 4), minmax(0, 1fr));
	}
}

.tm-access__item {
	margin: 0;
}

.tm-access__link {
	display: flex;
	flex-direction: column;
	gap: var(--tm-space-2);
	height: 100%;
	padding: var(--tm-space-6);
	border: 1px solid var(--tm-border);
	border-top: 3px solid var(--tm-red);
	border-radius: 0 0 var(--tm-radius-sm) var(--tm-radius-sm); /* square top: the accent rule stays straight */
	background: var(--tm-white);
	box-shadow: var(--tm-shadow-md);
	color: var(--tm-ink);
	text-decoration: none;
	transition: border-color var(--tm-dur) var(--tm-ease), box-shadow var(--tm-dur) var(--tm-ease);
}

.tm-access__link:hover,
.tm-access__link:focus-visible {
	border-top-color: var(--tm-brand);
	box-shadow: var(--tm-shadow-lg);
	color: var(--tm-ink);
}

.tm-access__title {
	margin: 0;
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h4);
	font-weight: 500;
	line-height: 1.25;
}

.tm-access__text {
	flex: 1;
	margin: 0;
	color: var(--tm-text-3);
	font-size: var(--tm-fs-sm);
	line-height: 1.5;
}

.tm-access__more {
	margin-top: var(--tm-space-2);
	color: var(--tm-brand-dark);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-access__link:hover .tm-access__more {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Page body (intro text written in the block editor)
   ========================================================================== */

.tm-home-content {
	max-width: var(--tm-container-narrow);
}

.tm-home-content > :first-child {
	margin-top: 0;
}

.tm-home-content > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Country facts (inc/home.php)
   ========================================================================== */

/* Follows the access tiles on the same white: less space above */
.tm-band--access + .tm-band--facts {
	padding-top: var(--tm-space-4);
}

.tm-country {
	display: grid;
	gap: 0 var(--tm-space-8);
	margin: 0;
}

@media (min-width: 600px) {
	.tm-country {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.tm-country {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tm-country__item {
	padding: var(--tm-space-5) 0;
	border-top: 1px solid var(--tm-border);
}

.tm-country__item dd {
	margin: 0;
}

.tm-country__label {
	color: var(--tm-text-muted);
	font-size: var(--tm-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--tm-ls-label);
	text-transform: uppercase;
}

.tm-country__value {
	margin-top: var(--tm-space-1);
	color: var(--tm-ink);
	font-family: var(--tm-font-display);
	font-size: var(--tm-fs-h5);
	font-weight: 500;
	line-height: 1.3;
}

.tm-country__value a {
	color: var(--tm-brand-dark);
	text-decoration: underline;
	text-decoration-color: rgba(var(--tm-brand-rgb), 0.35);
	text-underline-offset: 3px;
}

.tm-country__value a:hover {
	text-decoration-color: currentColor;
}

.tm-country__note {
	margin-top: var(--tm-space-2);
	color: var(--tm-text-3);
	font-size: var(--tm-fs-sm);
	line-height: 1.5;
}

/* ==========================================================================
   Areas of the country (inc/home.php)
   ========================================================================== */

.tm-regions {
	display: grid;
	gap: var(--tm-space-4);
}

@media (min-width: 900px) {
	.tm-regions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tm-region {
	padding: var(--tm-space-6);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-sm);
	background: var(--tm-white);
}

.tm-region__title {
	margin: 0;
	font-size: var(--tm-fs-h4);
}

.tm-region__places {
	margin: var(--tm-space-2) 0 0;
	color: var(--tm-red);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-region__text {
	margin: var(--tm-space-4) 0 0;
	color: var(--tm-text-2);
	font-size: var(--tm-fs-sm);
	line-height: 1.6;
}

/* The facts grid draws its own rules: no extra line under the head */
.tm-band--facts .tm-section-head {
	padding-bottom: 0;
	border-bottom: 0;
}