/*
 * Jordan Festival — Festivals page (archive-jf_festival.php only).
 * Hero (festival photograph under a navy gradient) → the next festival as
 * an editorial feature with ticket details (date stub, perforated tear line
 * with notches, keffiyeh edge) → other upcoming festivals as cards →
 * past festivals as a two-column card grid on sand.
 */

/* Display serif (SIL OFL, self-hosted), as on the homepage. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-600-0000.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.fp {
	--fp-ivory: #FBF8F2;
	--fp-ivory-line: #E6DED0;
	--fp-notch: 26px;
	--fp-pad: 52px;
}

/* Shared ------------------------------------------------------------- */
.fp-kicker,
.fp-label {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--jf-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jf-navy);
}
.fp-kicker--light { color: #fff; }
.fp-rule { flex: none; width: 28px; height: 2px; background: var(--jf-red); }

.fp-section-title {
	margin: 0 auto 40px;
	max-width: 22em;
	font-family: var(--jf-serif);
	font-size: clamp(30px, 2.6vw, 40px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jf-navy);
	text-align: center;
	text-wrap: balance;
}
/* The red rule, centred under the heading. */
.fp-section-title::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin: 16px auto 0;
	background: var(--jf-red);
}

/* "Preview Content": a quiet label (small ring + text) on demo records. */
.fp-sample {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--jf-ink-2);
}
.fp-sample::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .75;
}

.fp-cue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--jf-navy);
	white-space: nowrap;
}
.fp-cue .jf-arrow { color: var(--jf-red); transition: transform .2s ease; }

.fp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.fp-btn-navy { background: var(--jf-navy); color: #fff; letter-spacing: 0; gap: 10px; }
.fp-btn-navy:hover { background: var(--jf-red); color: #fff; }
.fp-btn-navy .jf-arrow { color: #fff; }
.fp-btn-line { background: transparent; color: var(--jf-navy); box-shadow: inset 0 0 0 2px var(--jf-navy); letter-spacing: 0; gap: 10px; }
.fp-btn-line:hover { background: var(--jf-navy); color: #fff; }
.fp-btn-line .jf-arrow { color: var(--jf-red); }
.fp-btn-line:hover .jf-arrow { color: #fff; }
.fp-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; }
.fp-text-link .jf-arrow { color: var(--jf-red); }

/* Picture box: photo, whole poster, or a branded tile. ---------------- */
.fp-media { position: absolute; inset: 0; overflow: hidden; background: var(--jf-navy); }
.fp-media img { width: 100%; height: 100%; object-fit: cover; }
.fp-media--poster { padding: 18px; background: var(--jf-navy) radial-gradient(circle at 50% 40%, #1b2f5c 0, var(--jf-navy) 70%); }
.fp-media--poster img { object-fit: contain; }
.fp-media--none {
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 55%),
		var(--jf-navy);
}
.fp-media--none::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 8px;
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat-x 0 0 / 8px 8px;
}
.fp-media__emblem { width: 56px !important; height: auto !important; object-fit: contain !important; opacity: .92; }

/* Hero --------------------------------------------------------------- */
.fp-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: clamp(420px, 38vw, 580px);
	background: var(--jf-navy);
	color: #fff;
	overflow: hidden;
}
.fp-hero__photo { position: absolute; inset: 0; z-index: -1; }
.fp-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.fp-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(13, 30, 65, .9) 0%, rgba(13, 30, 65, .72) 32%, rgba(13, 30, 65, .26) 64%, rgba(13, 30, 65, .08) 100%),
		linear-gradient(0deg, rgba(13, 30, 65, .62) 0%, rgba(13, 30, 65, 0) 42%);
}
[dir="rtl"] .fp-hero__photo::after {
	background:
		linear-gradient(-90deg, rgba(13, 30, 65, .9) 0%, rgba(13, 30, 65, .72) 32%, rgba(13, 30, 65, .26) 64%, rgba(13, 30, 65, .08) 100%),
		linear-gradient(0deg, rgba(13, 30, 65, .62) 0%, rgba(13, 30, 65, 0) 42%);
}
.fp-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	padding-top: 96px;
	padding-bottom: 76px;
}
.fp-hero__copy { max-width: 640px; }
.fp-hero__title {
	margin-top: 18px;
	font-family: var(--jf-serif);
	font-size: clamp(56px, 6vw, 92px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.01em;
	color: #fff;
}
.fp-hero__intro {
	margin-top: 22px;
	max-width: 33em;
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
	text-wrap: pretty;
}
.fp-hero__caption {
	position: absolute;
	inset-inline-end: var(--jf-gutter);
	bottom: 28px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: rgba(255, 255, 255, .72);
}
.fp-hero__caption .diamond { width: 6px; height: 6px; }
.fp-hero__selvedge {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 8px;
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat-x 0 0 / 8px 8px;
}

/* Next festival ------------------------------------------------------ */
.fp-next { padding: 80px 0 96px; background: var(--fp-ivory); }
.fp-next .fp-label { margin-bottom: 28px; }

/* The notches are real holes, not ivory discs painted on top: each half of
   the ticket is masked with a half circle at both ends of the tear line, so
   the page shows through and the shadow (a drop-shadow, which follows the cut
   shape) curves into the notch instead of being sliced off by it. */
.fp-feature {
	--fp-r: calc(var(--fp-notch) / 2);
	--fp-hole: #0000 var(--fp-r), #000 calc(var(--fp-r) + .5px);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	filter: drop-shadow(0 14px 20px rgba(13, 30, 65, .12));
}
.fp-feature__media,
.fp-feature__body {
	--fp-mask:
		radial-gradient(circle at var(--fp-x) 0, var(--fp-hole)) top / 100% 51% no-repeat,
		radial-gradient(circle at var(--fp-x) 100%, var(--fp-hole)) bottom / 100% 51% no-repeat;
	-webkit-mask: var(--fp-mask);
	mask: var(--fp-mask);
}
/* Notch centre: the middle of the 2px tear line (the body's start edge). */
.fp-feature__media { --fp-x: calc(100% + 1px); position: relative; min-height: 500px; }
.fp-feature__body { --fp-x: 1px; }
[dir="rtl"] .fp-feature__media { --fp-x: -1px; }
[dir="rtl"] .fp-feature__body { --fp-x: calc(100% - 1px); }

/* The body is the ticket: a perforated tear line on its photo side with a
   notch at each end, and a keffiyeh edge on its outer side. */
.fp-feature__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px calc(var(--fp-pad) + 14px) 48px var(--fp-pad);
	border-inline-start: 2px dashed var(--fp-ivory-line);
	background: #fff;
}
.fp-feature__edge {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 10px;
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat-y 0 0 / 10px 10px;
}

.fp-flags { margin-bottom: 14px; line-height: 1; }
.fp-feature__title {
	font-family: var(--jf-serif);
	font-size: clamp(30px, 2.7vw, 40px);
	font-weight: 600;
	line-height: 1.16;
	color: var(--jf-navy);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

/* Date stub */
.fp-stub {
	margin-top: 26px;
	padding: 24px 0 0;
	border-top: 2px dashed var(--fp-ivory-line);
}
.fp-stub__date { display: flex; align-items: center; gap: 16px; }
.fp-stub__day {
	font-family: var(--jf-serif);
	font-size: 64px;
	font-weight: 600;
	line-height: .9;
	color: var(--jf-red);
	font-variant-numeric: lining-nums;
}
.fp-stub__month {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-inline-start: 16px;
	border-inline-start: 2px solid var(--jf-red);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jf-navy);
}
.fp-stub__weekday { color: var(--jf-muted); }
.fp-stub__tba {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline-start: 16px;
	border-inline-start: 2px solid var(--jf-red);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jf-navy);
}
.fp-stub__cell--facts {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 16px 32px;
	margin-top: 24px;
}
.fp-stub__cell--facts:has(> .fp-fact:only-child) { grid-template-columns: minmax(0, 1fr); }
.fp-fact__term {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jf-muted);
}
.fp-fact__value { display: flex; flex-direction: column; font-size: 15px; line-height: 1.5; color: var(--jf-ink-2); }
.fp-fact__strong { font-weight: 700; color: var(--jf-navy); }

.fp-feature__text {
	margin-top: 22px;
	max-width: 34em;
	font-size: 16px;
	line-height: 1.7;
	color: var(--jf-ink-2);
	text-wrap: pretty;
}
.fp-feature .fp-actions { margin-top: 30px; }
.fp-feature .fp-actions .btn { min-height: 52px; }

/* No upcoming festival: a short branded note, not a blank ticket. */
.fp-soon {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px;
	padding: 40px 48px 40px 40px;
	background: #fff;
	box-shadow: 0 24px 50px -38px rgba(13, 30, 65, .35);
}
.fp-soon__seal {
	position: relative;
	display: grid;
	place-items: center;
	width: 132px;
	height: 132px;
	background: var(--jf-navy);
	overflow: hidden;
}
.fp-soon__seal::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 10px;
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat-y 0 0 / 10px 10px;
}
.fp-soon__seal img { width: 52px; height: auto; }
.fp-soon__title {
	font-family: var(--jf-serif);
	font-size: clamp(26px, 2.3vw, 34px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--jf-navy);
	text-wrap: balance;
}
.fp-soon__text { margin-top: 10px; max-width: 36em; font-size: 16px; line-height: 1.7; color: var(--jf-ink-2); }

/* Card grids (upcoming and previous) --------------------------------- */
.fp-upcoming { padding: 88px 0 96px; background: #fff; }
.fp-previous { padding: 88px 0 104px; background: var(--jf-sand); }

.fp-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	max-width: 1120px;
	margin-inline: auto;
}
/* An odd last card sits centred under the pair above it. */
.fp-grid > .fp-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc(50% - 16px);
}

.fp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--jf-line);
}
.fp-upcoming .fp-card { background: var(--fp-ivory); }
.fp-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.fp-card__media .fp-media img { transition: transform .5s ease; }
.fp-card:hover .fp-media--photo img { transform: scale(1.03); }

.fp-card__stub {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 20px;
	background: var(--jf-navy);
	color: #fff;
}
.fp-card__stub::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 6px;
	background: url("../images/brand/keffiyeh-selvedge.svg") repeat-y 0 0 / 6px 6px;
}
.fp-card__day { font-family: var(--jf-serif); font-size: 28px; font-weight: 600; line-height: 1; }
.fp-card__month { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; max-width: 7em; }

.fp-card__year {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	padding: 4px 10px;
	background: rgba(13, 30, 65, .82);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #fff;
}

.fp-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 28px 32px 30px; }
.fp-card__body > :first-child { margin-top: 0; }
.fp-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jf-red);
}
.fp-card__flag { margin: 0 0 12px; line-height: 1; }
/* Date or time first, then the place on its own line (no wrapping separators). */
.fp-card__city { color: var(--jf-ink-2); }
.fp-card__title {
	font-family: var(--jf-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--jf-navy);
	overflow-wrap: break-word;
	text-wrap: pretty;
}
.fp-card__link { color: inherit; white-space: normal; }
.fp-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fp-card:hover .fp-card__link { color: var(--jf-red); }
.fp-card__text {
	display: -webkit-box;
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--jf-ink-2);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.fp-card__count { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--jf-muted); }
.fp-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
	margin-top: auto;
	padding-top: 20px;
}
.fp-card:hover .fp-cue .jf-arrow { transform: translateX(3px); }
[dir="rtl"] .fp-card:hover .fp-cue .jf-arrow { transform: scaleX(-1) translateX(3px); }
.fp-card__tickets {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: var(--jf-red);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}
.fp-card__tickets:hover { background: var(--jf-red-dark); color: #fff; }

/* Keyboard focus: the whole card, not just the title text. */
@supports selector(:has(a)) {
	.fp-card__link:focus-visible { outline: none; }
	.fp-card:has(.fp-card__link:focus-visible) { outline: 2px solid var(--jf-red); outline-offset: 4px; }
}

/* Arabic ------------------------------------------------------------- */
[dir="rtl"] .fp-kicker,
[dir="rtl"] .fp-label { font-size: 16px; letter-spacing: 0; }
[dir="rtl"] .fp-hero__title,
[dir="rtl"] .fp-section-title,
[dir="rtl"] .fp-feature__title,
[dir="rtl"] .fp-soon__title,
[dir="rtl"] .fp-card__title { font-family: var(--jf-arabic); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
[dir="rtl"] .fp-hero__title { font-size: clamp(48px, 5.4vw, 80px); line-height: 1.2; }
[dir="rtl"] .fp-hero__intro,
[dir="rtl"] .fp-feature__text,
[dir="rtl"] .fp-soon__text { font-size: 17px; line-height: 1.9; }
[dir="rtl"] .fp-hero__caption { font-size: 13px; }
[dir="rtl"] .fp-stub__day,
[dir="rtl"] .fp-card__day { font-family: var(--jf-arabic); font-weight: 700; }
[dir="rtl"] .fp-stub__month,
[dir="rtl"] .fp-stub__tba,
[dir="rtl"] .fp-fact__term,
[dir="rtl"] .fp-card__month,
[dir="rtl"] .fp-card__meta,
[dir="rtl"] .fp-card__year,
[dir="rtl"] .fp-sample { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .fp-stub__month,
[dir="rtl"] .fp-stub__tba { font-size: 16px; }
[dir="rtl"] .fp-fact__term { font-size: 14px; }
[dir="rtl"] .fp-fact__value { font-size: 16px; }
[dir="rtl"] .fp-card__month,
[dir="rtl"] .fp-card__year,
[dir="rtl"] .fp-sample { font-size: 13px; }
[dir="rtl"] .fp-card__meta { font-size: 14px; }
[dir="rtl"] .fp-card__text { font-size: 16px; line-height: 1.8; }
[dir="rtl"] .fp-cue { font-size: 15px; }

/* Large tablet ------------------------------------------------------- */
@media (max-width: 1180px) {
	.fp { --fp-pad: 40px; }
	.fp-grid { gap: 24px; }
	.fp-grid > .fp-card:last-child:nth-child(odd) { width: calc(50% - 12px); }
	.fp-feature__media { min-height: 480px; }
	.fp-stub__cell--facts { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet ------------------------------------------------------------- */
@media (max-width: 980px) {
	.fp-card__body { padding: 24px 26px 26px; }
	.fp-card__title { font-size: 23px; }
	.fp-next { padding: 72px 0 80px; }
	.fp-upcoming,
	.fp-previous { padding: 72px 0 80px; }
	.fp-soon { grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px; padding: 32px; }
	.fp-soon__actions { grid-column: 2; }
}

/* Feature stacks: label → photo → title → date, time, place → text → actions. */
@media (max-width: 860px) {
	.fp-feature { grid-template-columns: minmax(0, 1fr); }
	.fp-feature__media { min-height: 0; aspect-ratio: 3 / 2; }
	.fp-feature__body {
		padding: 40px var(--fp-pad) calc(40px + 10px);
		border-inline-start: 0;
		border-top: 2px dashed var(--fp-ivory-line);
	}
	/* Stacked: the tear line runs across, so the notches sit at its two ends. */
	.fp-feature__media,
	.fp-feature__body {
		--fp-mask:
			radial-gradient(circle at 0 var(--fp-y), var(--fp-hole)) left / 51% 100% no-repeat,
			radial-gradient(circle at 100% var(--fp-y), var(--fp-hole)) right / 51% 100% no-repeat;
	}
	.fp-feature__media { --fp-y: calc(100% + 1px); }
	.fp-feature__body { --fp-y: 1px; }
	.fp-feature__edge {
		inset-block: auto 0;
		inset-inline: 0;
		width: auto;
		height: 10px;
		background-repeat: repeat-x;
	}
	.fp-stub__cell--facts { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
}

/* Phone -------------------------------------------------------------- */
@media (max-width: 640px) {
	.fp { --fp-pad: 22px; --fp-notch: 22px; }
	.fp-hero { min-height: 460px; }
	.fp-hero__photo img { object-position: 42% 60%; }
	.fp-hero__photo::after,
	[dir="rtl"] .fp-hero__photo::after {
		background: linear-gradient(0deg, rgba(13, 30, 65, .96) 0%, rgba(13, 30, 65, .82) 42%, rgba(13, 30, 65, .3) 78%, rgba(13, 30, 65, .2) 100%);
	}
	.fp-hero__inner { padding-top: 72px; padding-bottom: 64px; }
	.fp-hero__title { font-size: 52px; }
	[dir="rtl"] .fp-hero__title { font-size: 46px; }
	.fp-hero__intro { margin-top: 16px; font-size: 16px; }
	[dir="rtl"] .fp-hero__intro { font-size: 16px; }
	.fp-hero__caption { bottom: 22px; font-size: 11px; }

	.fp-next { padding: 56px 0 64px; }
	.fp-next .fp-label { margin-bottom: 22px; }
	.fp-feature__body { padding-top: 30px; padding-bottom: 40px; }
	.fp-feature__title { font-size: 28px; }
	.fp-stub__day { font-size: 54px; }
	.fp-stub__cell--facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.fp-feature .fp-actions { flex-direction: column; align-items: stretch; }
	.fp-feature .fp-actions .btn { width: 100%; }

	.fp-soon { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
	.fp-soon__seal { width: 88px; height: 88px; }
	.fp-soon__seal img { width: 36px; }
	.fp-soon__actions { grid-column: auto; }
	.fp-soon__actions .btn { flex: 1 1 100%; }

	.fp-upcoming,
	.fp-previous { padding: 56px 0 64px; }
	.fp-section-title { margin-bottom: 28px; }
	.fp-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.fp-grid > .fp-card:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
	.fp-card__body { padding: 22px 22px 24px; }
	.fp-card__title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-card__media .fp-media img,
	.fp-cue .jf-arrow { transition: none; }
	.fp-card:hover .fp-media--photo img { transform: none; }
}