/* ==========================================================================
   Homepage styles for teachinginbangkok.com
   Loaded only on the homepage (main.php and main-thai.php) through
   metaProperties(). Every selector is prefixed .hp so nothing here touches
   the header, the footer or any other page.

   Layout follows the Kelly Education page: a full height split panel beside
   a photo, a row of three grey cards, a tall about block with a portrait
   photo, alternating navy and pale blue split panels, a grey contact band.
   Colours: navy #00283e, pale blue #b9dcf5, headings #1b2733, text #333333,
   card grey #f4f6f8.
   ========================================================================== */

.hp {
	--hp-gutter: clamp(20px, 4.4vw, 60px);
	--hp-edge: max(var(--hp-gutter), calc((100vw - 1320px) / 2 + var(--hp-gutter)));
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
	color: #333333;
	font-size: 18px;
	line-height: 1.55;
	background: #fff;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--hp-gutter); }

.hp h1, .hp h2, .hp h3 {
	font-family: inherit;
	color: #1b2733;
	margin: 0;
	line-height: 1.2;
	letter-spacing: 0.25px;
	font-weight: 700;
	background: none;
	padding: 0;
}
.hp p { margin: 0; }
.hp ul { list-style: none; margin: 0; padding: 0; }
.hp li { background: none; margin: 0; padding: 0; }
.hp a, .hp a:link, .hp a:visited { color: #1b2733; }
.hp img { max-width: 100%; }

/* Thai text needs more air */
.hp-th { line-height: 1.7; font-family: "Noto Sans Thai", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Leelawadee UI", Tahoma, sans-serif; }
.hp-th h1, .hp-th h2, .hp-th h3 { line-height: 1.35; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Buttons and text links. Written with the a element and :link so they beat
   the theme's a:link rule.
   -------------------------------------------------------------------------- */
.hp a.hp-btn, .hp a.hp-btn:link, .hp a.hp-btn:visited {
	display: inline-block;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.25px;
	text-transform: uppercase;
	padding: 17px 34px;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.hp-th a.hp-btn { text-transform: none; font-size: 16px; letter-spacing: 0; }
.hp a.hp-btn-pale, .hp a.hp-btn-pale:link, .hp a.hp-btn-pale:visited { background: #b9dcf5; color: #00283e; }
.hp a.hp-btn-pale:hover, .hp a.hp-btn-pale:focus { background: #d2e9f9; color: #00283e; text-decoration: none; }
.hp a.hp-btn-navy, .hp a.hp-btn-navy:link, .hp a.hp-btn-navy:visited { background: #00283e; color: #fff; }
.hp a.hp-btn-navy:hover, .hp a.hp-btn-navy:focus { background: #003d5c; color: #fff; text-decoration: none; }
.hp a.hp-btn-outline, .hp a.hp-btn-outline:link, .hp a.hp-btn-outline:visited { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #b9dcf5; }
.hp a.hp-btn-outline:hover, .hp a.hp-btn-outline:focus { background: #b9dcf5; color: #00283e; text-decoration: none; }

.hp a.hp-link, .hp a.hp-link:link, .hp a.hp-link:visited {
	display: inline-block;
	font-weight: 700;
	font-size: 18px;
	color: #1b2733;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hp a.hp-link::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #00283e;
	margin-left: 9px;
	vertical-align: 1px;
}
.hp a.hp-link:hover { color: #00283e; }
.hp a.hp-link-light, .hp a.hp-link-light:link, .hp a.hp-link-light:visited { color: #fff; }
.hp a.hp-link-light::after { border-left-color: #b9dcf5; }
.hp a.hp-link-light:hover { color: #b9dcf5; }

/* --------------------------------------------------------------------------
   Split blocks: a solid panel beside a full bleed photo
   -------------------------------------------------------------------------- */
.hp-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 555px; background: #00283e; }
.hp-panel {
	background: #00283e;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 56px 64px var(--hp-edge);
}
.hp-rev .hp-panel { order: 2; padding: 64px var(--hp-edge) 64px 56px; }
.hp-rev .hp-media { order: 1; }
.hp-media { position: relative; min-height: 320px; }
.hp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.hp-panel h1 {
	color: #b9dcf5;
	font-size: clamp(2.4rem, 5vw, 3.5rem);
	line-height: 1.2;
	margin-bottom: 40px;
	max-width: 10em;
}
.hp-panel h2 { color: #fff; font-size: clamp(2rem, 4.27vw, 3rem); margin-bottom: 24px; max-width: 12em; }
.hp-panel p { color: #fff; font-size: 20px; line-height: 28px; max-width: 30em; margin: 0 0 36px; }
.hp-th .hp-panel h1 { font-size: clamp(2rem, 4.2vw, 3rem); max-width: 14em; }
.hp-th .hp-panel p { line-height: 1.75; }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }

/* Pale blue version of the panel */
.hp-pale, .hp-pale .hp-panel { background: #b9dcf5; }
.hp-pale .hp-panel h2, .hp-pale .hp-panel p { color: #00283e; }

/* --------------------------------------------------------------------------
   Three grey cards under the hero
   -------------------------------------------------------------------------- */
.hp-jobs { background: #fff; padding: 40px 0 64px; }
.hp-jobs .hp-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.hp-jobs article { background: #f4f6f8; padding: 36px 32px 40px; display: flex; flex-direction: column; min-width: 0; }
.hp-label {
	display: block;
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #00283e;
	margin-bottom: 18px;
}
.hp-th .hp-label { text-transform: none; font-size: 15px; letter-spacing: 0; }
.hp-jobs h3 { font-size: 20px; line-height: 1.25; color: #333333; letter-spacing: 0; margin-bottom: 10px; }
.hp-jobs p { font-size: 16px; line-height: 1.5; color: #5b6770; margin: 0 0 22px; }
.hp-th .hp-jobs h3 { line-height: 1.6; }
.hp-jobs a.hp-link { margin-top: auto; align-self: flex-start; font-size: 16px; }

/* --------------------------------------------------------------------------
   About: portrait photo beside the text and the three figures
   -------------------------------------------------------------------------- */
.hp-about { padding: 96px 0; background: #fff; }
.hp-about .hp-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.hp-about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-bottom: 8px solid #b9dcf5; }
.hp-about h2 { font-size: clamp(2rem, 4.27vw, 3rem); margin-bottom: 28px; max-width: 12em; }
.hp-about p { font-size: 20px; line-height: 28px; margin: 0 0 20px; max-width: 32em; }
.hp-figures { display: flex; flex-wrap: wrap; gap: 28px 56px; margin: 36px 0 40px; }
.hp-figures b { display: block; font-size: 44px; line-height: 1; color: #00283e; letter-spacing: -0.02em; margin-bottom: 8px; }
.hp-figures span { display: block; font-size: 16px; color: #5b6770; }

/* --------------------------------------------------------------------------
   Closing contact band
   -------------------------------------------------------------------------- */
.hp-band { background: #f4f6f8; padding: 64px 0; }
.hp-band .hp-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center; }
.hp-band h2 { font-size: 2rem; margin-bottom: 14px; max-width: 16em; }
.hp-band p { font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 36em; }
.hp-phone small { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6770; margin-bottom: 10px; }
.hp-th .hp-phone small { text-transform: none; font-size: 15px; letter-spacing: 0; }
.hp-band a.hp-tel, .hp-band a.hp-tel:link, .hp-band a.hp-tel:visited {
	display: block;
	font-size: clamp(2.2rem, 3.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #00283e;
	text-decoration: none;
	margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.hp-about .hp-wrap { gap: 48px; }
	.hp-jobs article { padding: 30px 26px 34px; }
}
@media (max-width: 820px) {
	.hp { font-size: 17px; }
	.hp-split { grid-template-columns: 1fr; min-height: 0; }
	.hp-panel, .hp-rev .hp-panel { padding: 48px var(--hp-gutter) 52px; order: 1; }
	.hp-media, .hp-rev .hp-media { order: 2; min-height: 0; aspect-ratio: 16 / 10; max-width: 100%; }
	.hp-panel h1 { font-size: 2.35rem; margin-bottom: 30px; }
	.hp-th .hp-panel h1 { font-size: 2rem; }
	.hp-panel h2 { font-size: 2rem; }
	.hp-panel p, .hp-about p { font-size: 18px; line-height: 27px; }
	.hp-actions a.hp-btn { width: 100%; text-align: center; }
	.hp-jobs { padding: 4px 0 48px; }
	.hp-jobs .hp-wrap { grid-template-columns: 1fr; }
	.hp-about { padding: 56px 0; }
	.hp-about .hp-wrap { grid-template-columns: 1fr; gap: 36px; }
	.hp-about-photo img { aspect-ratio: 4 / 3; }
	.hp-about h2 { font-size: 2rem; }
	.hp-figures { gap: 22px 36px; margin: 28px 0 32px; }
	.hp-figures b { font-size: 36px; }
	.hp-band { padding: 48px 0; }
	.hp-band .hp-wrap { grid-template-columns: 1fr; gap: 36px; }
}