/* OAN building blocks: the few rules the compiled Tailwind output cannot carry.
 *
 * Loaded after app.css on the front end and inside the editor iframe, so the
 * canvas and the live page are styled by exactly the same cascade.
 *
 * Keep this file small. Anything expressible with a class that already exists in
 * app.css belongs there, not here. These rules exist because a configurable
 * block needs values that are only known at render time.
 */

/* ---- configurable grid track list --------------------------------------
 * A custom column template is handed over as a custom property rather than
 * written straight onto grid-template-columns. An inline declaration would beat
 * the responsive stacking rule below at every width, which would quietly stop a
 * section collapsing to one column on a phone.
 */
.oan-cols {
	grid-template-columns: var(--oan-cols, 1fr);
}

/* Stacking. Matches Tailwind's lg (1024px) and md (768px) breakpoints. Declared
 * after .oan-cols and after app.css so it overrides both a custom template and
 * a grid-cols-N class. */
@media (max-width: 1023.98px) {
	.oan-stack-lg {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {
	.oan-stack-md {
		grid-template-columns: 1fr;
	}
}

/* ---- column ------------------------------------------------------------
 * Width comes from the block as a custom property so a column can be sized in
 * any unit without a utility class per value.
 */
.oan-col {
	min-width: 0; /* grid and flex children overflow without this */
}

.oan-col-w {
	flex: 0 0 var(--oan-w, auto);
	width: var(--oan-w, auto);
	max-width: 100%;
}

.oan-col-grow {
	flex: 1 1 0%;
	min-width: 0;
}

/* ---- date tile ---------------------------------------------------------
 * Size is configurable, so the square is driven by one custom property rather
 * than the w-[132px] h-[132px] pair the exported markup uses.
 */
.oan-tile {
	width: var(--oan-tile, 132px);
	height: var(--oan-tile, 132px);
}

/* ---- image -------------------------------------------------------------
 * A configurable height with width:auto, matching how the event logos and the
 * person cut-out are sized in the design (by height, so the artwork keeps its
 * proportions whatever its intrinsic size).
 */
.oan-img-h {
	height: var(--oan-img-h, auto);
	width: auto;
}

@media (max-width: 767.98px) {
	.oan-img-h[data-oan-h-sm] {
		height: var(--oan-img-h-sm, var(--oan-img-h, auto));
	}
}

/* ---- person figure -----------------------------------------------------
 * The backing block behind a cut-out photo. Height and side are configurable.
 */
.oan-person-plate {
	height: var(--oan-plate-h, 78%);
}

/* ---- flow back to a row on small screens -------------------------------
 * The inverse of stacking: a column of buttons that turns into a wrapping row
 * on a phone, which is what the event card's actions do. app.css carries
 * max-lg:flex-row but not max-md:flex-row, so both live here for symmetry.
 */
@media (max-width: 1023.98px) {
	.oan-flow-lg {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 767.98px) {
	.oan-flow-md {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---- gap at the stacking breakpoint ------------------------------------
 * A stacked row usually wants less room between its parts than the same row
 * laid out across. The design does this on the event card (32px across, 20px
 * stacked). The value is a custom property so any gap works, not only the one
 * responsive class that happens to be in the compiled CSS.
 */
@media (max-width: 1023.98px) {
	.oan-gap-at-lg {
		gap: var(--oan-gap-sm);
	}
}

@media (max-width: 767.98px) {
	.oan-gap-at-md {
		gap: var(--oan-gap-sm);
	}
}

/* Overlapping children: each one slides over the one before it by --oan-overlap.
   The hero's row of faces uses it, and any row can. */
.oan-overlap > * + * {
	margin-left: var(--oan-overlap, 0);
}

/* Speech bubble tail: a triangle hanging off the bottom edge. Two stacked
   triangles, the outer one the border colour and the inner one the fill, so a
   bubble with a visible border keeps its outline around the point. */
.oan-tail::before,
.oan-tail::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--oan-tail-offset, 28px);
	width: 0;
	height: 0;
	border-left: var(--oan-tail, 13px) solid transparent;
	border-right: var(--oan-tail, 13px) solid transparent;
	border-top: var(--oan-tail, 13px) solid var(--oan-tail-edge, var(--color-n2));
}

.oan-tail::after {
	left: calc(var(--oan-tail-offset, 28px) + var(--oan-tail-inset, 2px));
	border-left-width: var(--oan-tail-inner, 10px);
	border-right-width: var(--oan-tail-inner, 10px);
	border-top-width: var(--oan-tail-inner, 10px);
	border-top-color: var(--oan-tail-fill, var(--color-n0));
}

/* A column count that changes twice on the way down, which the single
   "stack on smaller screens" switch cannot express. The md rule comes after
   the lg rule, so below 768px it is the one that applies. */
@media (max-width: 1023.98px) {
	.oan-cols-lg {
		grid-template-columns: var(--oan-cols-lg);
	}
}

@media (max-width: 767.98px) {
	.oan-cols-md {
		grid-template-columns: var(--oan-cols-md);
	}
}

/* Tighter padding on a phone. The desktop padding is written inline, so this
   has to be !important to reach past it. */
@media (max-width: 767.98px) {
	.oan-pad-sm {
		padding: var(--oan-pad-sm) !important;
	}
}

/* Section padding on a phone, and a narrower floor for a flex cell. Both sit
   over inline values, so both need !important. */
@media (max-width: 767.98px) {
	.oan-pad-t-sm {
		padding-top: var(--oan-pad-t-sm) !important;
	}

	.oan-pad-b-sm {
		padding-bottom: var(--oan-pad-b-sm) !important;
	}

	.oan-minw-sm {
		min-width: var(--oan-minw-sm) !important;
	}
}