/**
 * Intro Bleed — pengantar dua kolom, foto menyentuh tepi layar.
 *
 * Palet sengaja terang-hangat, bukan navy seperti hero. Dua section gelap
 * beruntun membuat halaman terasa berat, dan section ini duduk tepat setelah
 * beberapa blok berlatar putih. Kesinambungan dengan hero dijaga lewat tiga
 * hal lain: font judul Fraunces yang sama, eyebrow bergaris emas dengan
 * tracking yang sama, dan tombol pill emas yang sama.
 *
 * Emas TIDAK dipakai untuk teks di sini. Di atas latar terang #EDAF33 hanya
 * mencapai kontras 1.9:1 — gagal WCAG AA bahkan untuk teks besar. Emas hanya
 * mengisi garis tipis dan latar tombol, di mana keterbacaan ditanggung oleh
 * teks navy di atasnya (7.26:1).
 *
 * Reset ditulis eksplisit pada h2, p, ul, li, dan a. Tema landingpress
 * memasang aturan global yang agresif pada elemen-elemen itu; tanpa penegasan
 * di sini margin dan bullet bawaannya bocor masuk dan merusak irama vertikal.
 */

.alm-bleed {
	--alm-bleed-latar: #F2F6F9;
	--alm-bleed-navy: #0F2E40;
	--alm-bleed-aksen: #C96628;
	--alm-bleed-teks: #5B6B76;
	--alm-bleed-emas: #EDAF33;
	--alm-bleed-emas-terang: #F6D58A;
	--alm-bleed-krem: #FFF7E7;
	--alm-bleed-kontainer: 1180px;
	--alm-bleed-tinggi: 620px;
	--alm-bleed-lebar-teks: 58ch;
	--alm-bleed-judul-font: "Fraunces";
	--alm-bleed-judul-min: 30px;
	--alm-bleed-judul-max: 52px;

	/**
	 * Sisa ruang di kiri container halaman.
	 *
	 * Nilai ini WAJIB dipakai pada .alm-bleed sendiri, bukan pada kolom
	 * teks di dalamnya. Persentase di dalam custom property diukur terhadap
	 * containing block elemen yang memakainya: bila dipasang di kolom teks,
	 * 100% berarti lebar kolom itu (±758px pada layar 1440px), sehingga
	 * (758 - 1180) / 2 menjadi negatif dan max() selalu jatuh ke 20px —
	 * teks menempel ke tepi layar alih-alih lurus dengan section lain.
	 *
	 * max() menjaga agar pada layar yang lebih sempit dari container
	 * nilainya tidak negatif, yang akan menarik teks keluar layar.
	 */
	--alm-bleed-tepi: max(20px, (100% - var(--alm-bleed-kontainer)) / 2);

	/**
	 * Padding hanya di sisi teks; sisi foto dibiarkan nol supaya kolom foto
	 * tetap menyentuh tepi viewport.
	 */
	padding-left: var(--alm-bleed-tepi);

	position: relative;
	display: grid;
	/**
	 * Kolom foto sedikit lebih sempit dari kolom teks.
	 *
	 * Foto pada rasio 0.9fr terukur ~46% viewport di 1440px. Bila dibuat 1fr
	 * penuh, kolom teks menyusut sampai judul Fraunces 52px pecah jadi empat
	 * baris pendek dan iramanya rusak.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	align-items: stretch;
	background-color: var(--alm-bleed-latar);
	/* isolation: menjaga z-index gradien pelebur tetap lokal, tidak bocor
	   ke section tetangga. */
	isolation: isolate;
}

/* ---------- kolom teks ---------- */

.alm-bleed__teks {
	display: flex;
	align-items: center;
	min-width: 0;
	/**
	 * Padding kanan lebih kecil dari kiri: jarak ke foto sudah terasa lewat
	 * bidang kosong foto itu sendiri, jadi menyamakan keduanya justru
	 * membuat kolom teks tampak terdorong ke kiri.
	 */
	padding: clamp(56px, 7vh, 96px) clamp(32px, 4vw, 64px) clamp(56px, 7vh, 96px) 0;
}

/* Foto di kiri: padding tepi berpindah ke sisi kanan section. */
.alm-bleed.is-foto-kiri {
	padding-right: var(--alm-bleed-tepi);
	padding-left: 0;
}

.alm-bleed.is-foto-kiri .alm-bleed__teks {
	padding-right: 0;
	padding-left: clamp(32px, 4vw, 64px);
}

/**
 * Jarak antar-elemen diatur satu gap di kontainer, bukan margin per elemen.
 * Dengan begitu menyembunyikan salah satu bagian lewat editor tidak
 * meninggalkan celah kosong yang menggantung.
 */
.alm-bleed__isi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	max-width: var(--alm-bleed-lebar-teks);
	min-width: 0;
}

/* ---------- eyebrow ---------- */

.alm-bleed__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 7px 16px 7px 13px;
	border-radius: 999px;
	background: var(--alm-bleed-krem);
	color: var(--alm-bleed-aksen);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

/* Garis emas setelah teks — kutipan langsung dari eyebrow hero, elemen yang
   paling cepat dikenali mata sebagai satu keluarga desain. */
.alm-bleed__eyebrow::after {
	content: "";
	width: clamp(18px, 3vw, 34px);
	height: 1px;
	background: linear-gradient(90deg, var(--alm-bleed-emas), transparent);
}

.alm-bleed__eyebrow .alm-bleed__svg {
	width: 15px;
	height: 15px;
	flex: none;
}

/* ---------- judul ---------- */

.alm-bleed__judul {
	margin: 0;
	padding: 0;
	color: var(--alm-bleed-navy);
	font-family: var(--alm-bleed-judul-font), Georgia, "Times New Roman", serif;
	font-size: clamp(var(--alm-bleed-judul-min), 3.6vw, var(--alm-bleed-judul-max));
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	/* text-wrap: balance meratakan panjang baris judul sehingga tidak
	   menyisakan satu kata sendirian di baris terakhir. */
	text-wrap: balance;
}

.alm-bleed__judul .is-aksen {
	color: var(--alm-bleed-aksen);
	font-style: italic;
}

/* ---------- paragraf ---------- */

.alm-bleed__paragraf {
	color: var(--alm-bleed-teks);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	text-wrap: pretty;
}

.alm-bleed__paragraf p {
	margin: 0 0 14px;
}

.alm-bleed__paragraf p:last-child {
	margin-bottom: 0;
}

.alm-bleed__paragraf strong {
	color: var(--alm-bleed-navy);
	font-weight: 600;
}

/* ---------- poin ---------- */

.alm-bleed__poin {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.alm-bleed__poin-item {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	color: var(--alm-bleed-navy);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	list-style: none;
}

/* Tema memasang bullet lewat ::marker pada li; dikosongkan di sini supaya
   tidak muncul dua penanda bersama ikon SVG. */
.alm-bleed__poin-item::marker {
	content: "";
}

/**
 * Ikon diberi cakram krem, bukan dibiarkan telanjang.
 *
 * Ikon terracotta polos di atas latar #F2F6F9 terbaca samar pada ukuran
 * 16px; cakram krem menaikkan kontras lokalnya sekaligus menyatukan poin
 * dengan eyebrow yang memakai latar sama.
 */
.alm-bleed__poin-item .alm-bleed__svg {
	width: 30px;
	height: 30px;
	flex: none;
	padding: 7px;
	border-radius: 50%;
	background: var(--alm-bleed-krem);
	color: var(--alm-bleed-aksen);
	box-sizing: border-box;
}

/* ---------- tombol ---------- */

/**
 * Pill emas, bukan tautan teks.
 *
 * Referensi memakai "Selengkapnya »" polos yang tinggi targetnya hanya
 * ~20px — di bawah ambang 44px WCAG dan bobot visualnya kalah jauh dari
 * foto setinggi 620px di sebelahnya.
 */
.alm-bleed__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	margin-top: 4px;
	padding: 0 clamp(22px, 2.4vw, 32px);
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--alm-bleed-emas-terang), var(--alm-bleed-emas));
	/* Teks navy di atas emas: 7.26:1, lolos AA untuk teks normal. */
	color: var(--alm-bleed-navy);
	box-shadow: 0 10px 26px rgb(237 175 51 / 0.3);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.alm-bleed__btn .alm-bleed__svg {
	width: 17px;
	height: 17px;
	flex: none;
	transition: transform 0.25s ease;
}

.alm-bleed__btn:hover,
.alm-bleed__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgb(237 175 51 / 0.42);
	color: var(--alm-bleed-navy);
}

.alm-bleed__btn:hover .alm-bleed__svg,
.alm-bleed__btn:focus-visible .alm-bleed__svg {
	transform: translateX(3px);
}

/**
 * Fokus keyboard diberi outline eksplisit. Tema mematikan outline default
 * pada <a>, jadi tanpa aturan ini tombol tidak terlihat saat dinavigasi Tab.
 */
.alm-bleed__btn:focus-visible {
	outline: 2px solid var(--alm-bleed-aksen);
	outline-offset: 3px;
}

/* ---------- kolom foto ---------- */

.alm-bleed__media {
	position: relative;
	min-width: 0;
	/* Tanpa min-height, kolom foto ikut menyusut mengikuti kolom teks pada
	   layar lebar dan foto potret jadi terlalu pendek. */
	min-height: var(--alm-bleed-tinggi);
	overflow: hidden;
}

/* Foto di kiri: cukup tukar urutan grid, urutan DOM tetap teks-dulu
   sehingga urutan baca dan urutan fokus keyboard tidak berubah. */
.alm-bleed.is-foto-kiri .alm-bleed__media {
	grid-row: 1;
	grid-column: 1;
}

.alm-bleed.is-foto-kiri .alm-bleed__teks {
	grid-row: 1;
	grid-column: 2;
}

/**
 * Selektor sengaja diulang (.alm-bleed .alm-bleed__media .alm-bleed__foto)
 * agar spesifisitasnya melampaui `.elementor img { height: auto }`.
 *
 * Aturan Elementor itu dimuat setelah stylesheet ini, sehingga pada
 * spesifisitas setara ia yang menang — akibatnya foto mengecil ke tinggi
 * alaminya dan menyisakan bidang kosong di bawahnya. Menaikkan spesifisitas
 * menyelesaikannya tanpa !important, yang akan menyulitkan penyesuaian
 * lewat kontrol Elementor di kemudian hari.
 */
.alm-bleed .alm-bleed__media .alm-bleed__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/**
 * Gradien pelebur di tepi dalam foto.
 *
 * Tanpa ini latar studio abu-abu bertemu latar section dalam garis vertikal
 * keras, dan foto terlihat seperti aset yang ditempel alih-alih bagian dari
 * layout. Lebar 22% cukup untuk melarutkan tepi tanpa memakan wajah subjek.
 *
 * currentColor tidak dipakai di sini karena nilainya harus sama persis
 * dengan latar section, termasuk saat diubah lewat kontrol warna.
 */
.alm-bleed__lebur {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	pointer-events: none;
}

.alm-bleed.is-lebur .alm-bleed__lebur {
	display: block;
	background: linear-gradient(
		90deg,
		var(--alm-bleed-latar) 0%,
		rgb(242 246 249 / 0.55) 10%,
		rgb(242 246 249 / 0) 22%
	);
}

.alm-bleed.is-foto-kiri.is-lebur .alm-bleed__lebur {
	background: linear-gradient(
		270deg,
		var(--alm-bleed-latar) 0%,
		rgb(242 246 249 / 0.55) 10%,
		rgb(242 246 249 / 0) 22%
	);
}

/**
 * Garis emas tipis di tepi bawah foto sebagai jangkar visual.
 *
 * Foto full-bleed tanpa pembatas apa pun terasa mengambang saat bertemu
 * section berikutnya; garis ini menutupnya sekaligus mengulang emas hero
 * di tempat yang tidak memikul beban keterbacaan.
 */
.alm-bleed__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--alm-bleed-emas) 45%,
		var(--alm-bleed-emas-terang)
	);
	pointer-events: none;
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.alm-bleed {
		/* Kolom teks diberi porsi lebih besar: pada 1024px pembagian 1:0.9
		   membuat baris teks turun ke ~30 karakter dan terasa sesak. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
		--alm-bleed-tinggi: 520px;
	}

	.alm-bleed__isi {
		gap: 18px;
	}

	.alm-bleed__paragraf {
		font-size: 15.5px;
		line-height: 1.75;
	}
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
	/**
	 * Satu kolom, teks lebih dulu.
	 *
	 * Foto setinggi 620px di posisi pertama akan mendorong judul jauh ke
	 * bawah lipatan. Karena urutan DOM memang sudah teks-dulu, tidak
	 * diperlukan order sama sekali di sini — grid satu kolom otomatis
	 * menumpuknya sesuai urutan baca.
	 */
	.alm-bleed,
	.alm-bleed.is-foto-kiri {
		grid-template-columns: minmax(0, 1fr);
		/* Padding tepi dilepas dari section: di satu kolom foto harus tetap
		   selebar penuh, dan jarak teks diatur kolom teks sendiri. */
		padding-right: 0;
		padding-left: 0;
	}

	.alm-bleed__teks,
	.alm-bleed.is-foto-kiri .alm-bleed__teks {
		grid-row: auto;
		grid-column: auto;
		padding: 48px 20px 36px;
	}

	.alm-bleed__media,
	.alm-bleed.is-foto-kiri .alm-bleed__media {
		grid-row: auto;
		grid-column: auto;
	}

	/**
	 * Rasio, bukan tinggi tetap: 4:3 menjaga foto tetap proporsional tanpa
	 * memakan hampir seluruh layar ponsel seperti yang terjadi bila tinggi
	 * desktop 620px dibiarkan berlaku.
	 */
	.alm-bleed__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	/* Di satu kolom, gradien horizontal tidak lagi masuk akal — tepi yang
	   bertemu latar sekarang adalah tepi atas, bukan tepi samping. */
	.alm-bleed.is-lebur .alm-bleed__lebur,
	.alm-bleed.is-foto-kiri.is-lebur .alm-bleed__lebur {
		background: linear-gradient(
			180deg,
			var(--alm-bleed-latar) 0%,
			rgb(242 246 249 / 0) 18%
		);
	}

	.alm-bleed__isi {
		max-width: none;
	}

	.alm-bleed__paragraf {
		font-size: 15px;
	}

	.alm-bleed__btn {
		/* Penuh selebar kolom: target sentuh terbesar yang mungkin, dan
		   menghindari tombol kecil menggantung di tengah ruang kosong. */
		width: 100%;
	}
}

/* ---------- gerakan ---------- */

@media (prefers-reduced-motion: reduce) {
	.alm-bleed__btn,
	.alm-bleed__btn .alm-bleed__svg {
		transition: none;
	}

	.alm-bleed__btn:hover,
	.alm-bleed__btn:focus-visible {
		transform: none;
	}

	.alm-bleed__btn:hover .alm-bleed__svg,
	.alm-bleed__btn:focus-visible .alm-bleed__svg {
		transform: none;
	}
}