/*
 * Contact page.
 *
 * The address, a telephone number, a fax number, an email address, a map and
 * two tables of hours — none of them actionable, and the details drawn as two
 * <ul> elements side by side with nothing tying a label to its value.
 *
 * Every custom property carries a fallback. The plugin owns this markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

.jmns-hubungi {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * The details and the map side by side above 56rem: they answer the same
 * question — where is this place and how do I reach it — and reading one does
 * not require finishing the other.
 *
 * The map spans both rows so it can fill the column. Beside the details alone
 * it left about 170px of nothing under them, because a 4:3 embed is taller than
 * an address and three lines of contact — and it is a map, so the fix is to
 * give it the height rather than to crop it.
 *
 * Stacked below 56rem in the page's own order: address, map, hours.
 */
.jmns-hubungi__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"card"
		"map"
		"hours";
	gap: var(--wp--preset--spacing--50, 2rem);
}

@media (min-width: 56rem) {
	.jmns-hubungi__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"card map"
			"hours map";
	}

	/*
	 * The card sits at the top of its row; the map is left to stretch, which is
	 * the whole point of spanning it. `align-items: start` on the grid would
	 * have collapsed the map back to its own height and put the gap back.
	 */
	.jmns-hubungi__card {
		align-self: start;
	}

	.jmns-hubungi__frame {
		block-size: 100%;
	}
}

.jmns-hubungi__card {
	grid-area: card;
}

.jmns-hubungi__map {
	grid-area: map;
	block-size: 100%;
}

.jmns-hubungi__heading {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jmns-hubungi__address {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	font-style: normal;
	line-height: 1.7;
}

/* -------------------------------------------------------------- details -- */

/*
 * A description list, laid out as the two columns the page was drawing by hand
 * — but with the pairing stated in the markup, so it survives being read in
 * order, and reflows to stacked pairs when there is no room for two columns.
 */
.jmns-hubungi__details {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10, 0.35rem) var(--wp--preset--spacing--30, 1rem);
	margin: 0;
	/*
	 * The value carries a 44px touch target and the label does not, so the row
	 * is as tall as the target. Left to stretch, the label sat at the top of
	 * that box while the number sat in the middle of it, and every pair looked
	 * a few pixels out of true.
	 */
	align-items: center;
}

.jmns-hubungi__label {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-weight: 600;
}

.jmns-hubungi__value {
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * 44px of target on the phone number and the email — the two things somebody
 * opens this page to act on, and the ones most often reached with a thumb.
 */
.jmns-hubungi__value a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--wp--preset--color--interactive, #245746);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmns-hubungi__value a:hover,
.jmns-hubungi__value a:focus-visible {
	color: var(--wp--preset--color--interactive-hover, #173D32);
}

/* ------------------------------------------------------------------ map -- */

/*
 * The frame owns the ratio, so the embed can never be the thing that makes the
 * page scroll sideways — it had no width or height of its own at all.
 */
.jmns-hubungi__frame {
	position: relative;
	/*
	 * Width first, then the ratio for height. Given a height instead,
	 * `aspect-ratio` resolves the other way and makes the frame *wider* than its
	 * column — 503px inside 390px, and the page scrolls sideways.
	 */
	inline-size: 100%;
	/*
	 * The ratio is for the map. Until it is loaded this box holds an address,
	 * two buttons and a note, and forcing those into 4:3 on a 390px screen
	 * clipped the note and pushed the pin out of the panel entirely. So it is
	 * asked only for a floor while it is a facade, and takes the ratio once
	 * there is something in it that has one.
	 */
	min-block-size: 16rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-hubungi__frame iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* ---------------------------------------------------------------- hours -- */

/*
 * Office hours and counter hours. They sit under the details rather than across
 * the page: in the left column there is room for one at a time, and stacked
 * they are two four-line lists rather than two columns of ten characters.
 */
.jmns-hubungi__hours {
	grid-area: hours;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * A rule over each set rather than one over the pair. The two differ by an hour
 * in two places and by one word in the caption; stacked under a single rule
 * with only a gap between them they read as one table with a stray heading in
 * the middle. Per set, the rule separates them when they stack and lines up as
 * one when the column is wide enough to sit them side by side.
 */
.jmns-hubungi__set {
	padding-block-start: var(--wp--preset--spacing--40, 1.5rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

/*
 * Days and their periods, not a table. The source used `rowspan` to hang two
 * periods off one day, which is a table doing a list's work — and a table that
 * cannot reflow on a 320px screen.
 */
.jmns-hubungi__times {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
	margin: 0;
}

.jmns-hubungi__day {
	font-weight: 700;
}

.jmns-hubungi__time {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 26rem) {
	/*
	 * Stacked below 26rem: "Isnin - Khamis" and "8:00 pagi - 1:00 petang" in two
	 * columns leaves about ten characters each and breaks both over three lines.
	 */
	.jmns-hubungi__details,
	.jmns-hubungi__times {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.jmns-hubungi__label,
	.jmns-hubungi__day {
		margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
	}
}

/*
 * The sentence that introduces the details.
 *
 * Dropped by the first cut of this module, which took only the first paragraph
 * for the address — so the page went from an address straight to three bare
 * numbers with nothing saying what they were for.
 */
.jmns-hubungi__intro {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
}

/* ------------------------------------------------------- map on request -- */

/*
 * The still panel that stands in for the embed.
 *
 * It fills the same box the map will, so pressing the button swaps one thing
 * for another of the same size and nothing below it moves. The department's
 * own surface tint rather than a grey rectangle: this is a piece of the page
 * until somebody asks for a map, not a hole waiting to be filled.
 */
.jmns-hubungi__frame.is-loaded {
	aspect-ratio: 4 / 3;
	min-block-size: 0;
}

.jmns-hubungi__map-still {
	display: flex;
	block-size: 100%;
	min-block-size: 16rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	padding: var(--wp--preset--spacing--40, 1rem);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	text-align: center;
}

.jmns-hubungi__map-pin {
	inline-size: 2rem;
	block-size: 2rem;
	color: var(--wp--preset--color--interactive, #245746);
}

.jmns-hubungi__map-where {
	max-inline-size: 28rem;
	margin: 0;
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-weight: 600;
	line-height: 1.4;
}

.jmns-hubungi__map-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	margin: 0;
}

.jmns-hubungi__map-load,
.jmns-hubungi__map-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--40, 1rem);
	border-radius: var(--r-control, 8px);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jmns-hubungi__map-load {
	border: 1px solid var(--wp--preset--color--interactive, #245746);
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
}

.jmns-hubungi__map-load:hover {
	background-color: var(--wp--preset--color--interactive-hover, #173D32);
	border-color: var(--wp--preset--color--interactive-hover, #173D32);
}

.jmns-hubungi__map-open {
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	background-color: transparent;
	color: var(--wp--preset--color--interactive, #245746);
	text-decoration: none;
}

.jmns-hubungi__map-open:hover {
	background-color: var(--wp--preset--color--surface, #fff);
}

/*
 * Says who the map comes from, before it comes from them. Small, because it is
 * a note rather than a warning — but present, because the whole point of not
 * loading it was that the visitor gets to decide.
 */
.jmns-hubungi__map-note {
	max-inline-size: 30rem;
	margin: 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
}