/**
 * Events: the home page strip, the archive and the event's own page.
 *
 * The card is taken from the staging design, which it shares with the home page
 * strip, the archive grid and the related run at the foot of an event. One card
 * drawn once, so the three places can never drift apart.
 *
 * The cover is 281 by 158, which is 16:9. That matters: of the 345 posters in
 * the programme, 306 are drawn at 16:9, so this frame crops about 2% off the
 * average one. The card's own measurements hang off these two numbers, so
 * changing the cover size moves the card and the track with it.
 */

/* ------------------------------------------------------------ the section */

/* The card's measurements, declared once at the top rather than inside the
   home page section: the archive grid and the run at the foot of an event are
   outside that section and draw the same card. */
:root {
	--diwan-event-cover-w: 281px;
	--diwan-event-cover-h: 158px;

	/* The same two numbers without units. aspect-ratio takes a ratio, not a
	   pair of lengths, so "281px / 158px" is not a value it accepts. */
	--diwan-event-cover-ratio: 281 / 158;

	/* The gap between the card's border and the poster inside it. */
	--diwan-event-pad: 12px;

	/* Between one card and the next. */
	--diwan-event-gap: 24px;

	/* The widest a single card is drawn, for the archive grid and for a run
	   with only one or two cards in it. */
	--diwan-event-card-w: calc(var(--diwan-event-cover-w) + 2 * var(--diwan-event-pad) + 24px);
}

.diwan-events {
	color: var(--diwan-text, #000);
	margin-block: 44px;
}

/* Named on the card link rather than on every link in the section: a blanket
   ".diwan-events a" outranks a single class and would repaint the View all
   events button with the section's own text colour, which is black, on a black
   button. */
.diwan-event-card__link {
	color: inherit;
}

.diwan-events__frame {
	position: relative;
}

/* No padding here on purpose. The cards have to line up with the header and
   the offers strip above them, and any padding on this section moves them out
   of that line. The arrows hang half outside the track instead, into the 20px
   the site box already reserves either side of its content. */

.diwan-events__head {
	margin-block-end: 26px;
	text-align: center;
}

.diwan-events__title {
	color: var(--diwan-heading, #246b8f);
	font-family: var(--diwan-font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

/* The short rule under the heading, which is what marks a section on this site
   rather than a full width border. */
.diwan-events__rule {
	background: var(--diwan-black, #000);
	block-size: 3px;
	display: block;
	inline-size: 42px;
	margin: 10px auto 0;
}

/* What the arrows are positioned against. The section starts at the heading, so
   measuring from there put them above the cards rather than level with them. */
.diwan-events__run {
	position: relative;
}

/* The track scrolls rather than being a slider: it swipes natively on a phone,
   works with the script absent, and the arrows only move the scroll position.
   Same engine as the offers strip. */
.diwan-events__track {
	-ms-overflow-style: none;
	display: grid;
	/* Four cards with 24 between them, and the cards take what is left. The
	   cover keeps the proportions it was drawn at, 281 by 158, and grows with
	   the card: at 1360 that comes out around 298 by 168. Fixing the card
	   instead would leave an uneven gap, and the gap is the thing that was
	   asked for. */
	gap: var(--diwan-event-gap);
	grid-auto-columns: calc((100% - 3 * var(--diwan-event-gap)) / 4);
	grid-auto-flow: column;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.diwan-events__track::-webkit-scrollbar {
	display: none;
}

.diwan-events__track > * {
	scroll-snap-align: start;
}

/* The square, the chevron and the colours are in arrows.css, shared with the
   offers strip above and both loop carousels, so all four runs on the page are
   driven by the same control. What is left here is where this run puts them:
   either side of the cards rather than underneath, because an arrow under a row
   of cards is a long way from the thing it moves. */
.diwan-events__arrow {
	/* Level with the middle of the poster, not the middle of the whole card:
	   the card is taller than its image, so centring on the card would put the
	   arrows down beside the title. */
	inset-block-start: calc(var(--diwan-event-pad, 12px) + var(--diwan-event-cover-render, 168px) / 2 + 1px);
	position: absolute;
	transform: translateY(-50%);
	z-index: 2;
}

/* Named on this carousel's own arrows. The attribute on its own is how every
   carousel on the site marks its previous button, so a bare [data-diwan-prev]
   here reached the offers strip on any page that carries both and pulled its
   arrows twenty pixels off the side of the screen. */
.diwan-events__arrow[data-diwan-prev] {
	inset-inline-start: -20px;
}

.diwan-events__arrow[data-diwan-next] {
	inset-inline-end: -20px;
}

.diwan-events__all {
	margin-block: 30px 0;
	text-align: center;
}

/* The button reads as a label on this site, not a sentence. */
.diwan-events__all .diwan-button {
	letter-spacing: 0.06em;
	padding: 14px 30px;
	text-transform: uppercase;
}

.diwan-events.is-single .diwan-events__track {
	justify-content: center;
}

/* ---------------------------------------------------------------- the card */

.diwan-event-card {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.diwan-event-card:hover {
	border-color: var(--diwan-border-strong, #d5d5d5);
	box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.diwan-event-card__link {
	display: grid;
	gap: 14px;
	block-size: 100%;
	grid-template-rows: auto 1fr;
	padding: var(--diwan-event-pad, 12px);
	text-decoration: none;
}

.diwan-event-card__cover {
	display: block;
	position: relative;
}

/* The ratio is stated rather than left to the image: the cards after the first
   are lazy loaded, and a box with no shape collapses until its picture lands.
   Width comes from the card, so a narrow screen shrinks the poster rather than
   overflowing with it. */
.diwan-event-card__image,
.diwan-event-card__placeholder {
	aspect-ratio: var(--diwan-event-cover-ratio, 281 / 158);
	border-radius: var(--diwan-radius-sm, 4px);
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: center;
}

.diwan-event-card__placeholder {
	align-items: center;
	background: var(--diwan-surface-sunken, #f4f3f1);
	color: var(--diwan-text-faint, #a0a0a0);
	display: flex;
	justify-content: center;
}

/* An event that has been and gone is still worth showing, but it should not
   look like something you can still come to. */
.diwan-event-card.is-past .diwan-event-card__image {
	filter: grayscale(1);
	opacity: 0.55;
}

.diwan-event-card__flag {
	background: var(--diwan-wood, #3b0f00);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-canvas, #faf7db);
	font-size: 11px;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	letter-spacing: 0.08em;
	padding: 4px 9px;
	position: absolute;
	text-transform: uppercase;
}

.diwan-event-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 2px 4px;
}

.diwan-event-card__meta {
	align-items: center;
	color: var(--diwan-text-soft, #444);
	display: flex;
	font-size: 15px;
	gap: 8px;
	line-height: 1.4;
}

.diwan-event-card__meta .diwan-icon {
	color: var(--diwan-text-muted, #6e6e6e);
	flex: none;
}

.diwan-event-card__meta span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.diwan-event-card__name {
	color: var(--diwan-text, #000);
	display: -webkit-box;
	font-family: var(--diwan-font-display);
	font-size: 16px;
	font-weight: 600;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.35;
	margin-block-start: 4px;
	overflow: hidden;
	text-transform: uppercase;
}

.diwan-event-card__link:hover .diwan-event-card__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------ the run, as an Elementor loop carousel */

/*
 * The events run on the home page is Elementor's Loop Carousel, drawing each
 * card from the event card template. Everything about it is set in the builder:
 * how many cards, how far an arrow moves, the gap, where the arrows sit. Its
 * arrows are the site's arrows, and that is in arrows.css along with every
 * other arrow on the page, so there is one place to change them.
 */

/* ------------------------------------------- the card as an Elementor loop */

/* The card built from the loop template keeps the frame the run gives it: the
   template draws the inside, the run decides how wide it is. */
.diwan-event-card--built {
	border: 0;
	overflow: visible;
}

.diwan-event-card--built > .elementor {
	block-size: 100%;
}

/* A row whose field is empty on this event, an online talk with no branch for
   instance, takes no room rather than leaving a stray icon on its own line. */
.diwan-event-card--built .elementor-icon-list-item:has(.elementor-icon-list-text:empty) {
	display: none;
}

.diwan-event-card--built .elementor-icon-list-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------------------------- the archive */

.diwan-events-archive {
	padding-block: 30px 60px;
}

.diwan-events-archive__head {
	margin-block-end: 24px;
	text-align: center;
}

.diwan-events-archive__title {
	color: var(--diwan-heading, #246b8f);
	font-family: var(--diwan-font-display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

.diwan-events-archive__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-block-end: 32px;
}

/* The events' own chips, in the archive and on an event drawn without
   Elementor. Named through their page, so they never meet the shop's chips
   of the same name (shop.css), whichever is read first (3.6.0). */
:is(.diwan-events-archive, .diwan-event) .diwan-chip {
	border: 1px solid var(--diwan-border-strong, #d5d5d5);
	color: var(--diwan-text-soft, #444);
	font-size: 14px;
	line-height: 1;
	padding: 9px 16px;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Every hover in the events is the menu's: papyrus behind, wood in front.
   The chosen chip, page or view keeps its own dark colours. */
:is(.diwan-events-archive, .diwan-event) .diwan-chip:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

:is(.diwan-events-archive, .diwan-event) .diwan-chip.is-current,
:is(.diwan-events-archive, .diwan-event) .diwan-chip.is-current:hover {
	background: var(--diwan-wood, #3b0f00);
	border-color: var(--diwan-wood, #3b0f00);
	color: var(--diwan-canvas, #faf7db);
}

/* Upcoming or past: the two halves of the programme, as a pair of tabs under
   the categories rather than a third row of chips that would read as one more
   category. */
.diwan-events-archive__when {
	border-block-end: 1px solid var(--diwan-border, #e6e6e6);
	display: flex;
	gap: 24px;
	justify-content: center;
	margin-block-end: 30px;
}

.diwan-tab {
	border-block-end: 2px solid transparent;
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 15px;
	margin-block-end: -1px;
	padding: 0 2px 12px;
	text-decoration: none;
}

.diwan-tab:hover {
	color: var(--diwan-text, #000);
}

.diwan-tab.is-current {
	border-block-end-color: var(--diwan-black, #000);
	color: var(--diwan-text, #000);
	font-weight: 600;
}

/* Four across, the same four as the home page strip, at the same 24 between
   them. Counted rather than fitted: auto-fill with a fixed maximum decides how
   many fit from the minimum and then draws them at the maximum, which put
   three on a row here while the strip beside it had four. */
.diwan-events-grid {
	display: grid;
	gap: var(--diwan-event-gap, 24px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.diwan-events-archive__empty {
	color: var(--diwan-text-muted, #6e6e6e);
	padding-block: 40px;
	text-align: center;
}

/* The class WordPress puts on the nav is the one passed to
   the_posts_pagination, which replaces its default rather than adding to it. */
.diwan-events-archive__pages {
	display: flex;
	justify-content: center;
	margin-block-start: 40px;
}

.diwan-events-archive .nav-links {
	display: flex;
	gap: 6px;
}

.diwan-events-archive .page-numbers {
	border: 1px solid var(--diwan-border, #e6e6e6);
	color: var(--diwan-text, #000);
	line-height: 1;
	padding: 10px 14px;
	text-decoration: none;
}

.diwan-events-archive .page-numbers.current,
.diwan-events-archive .page-numbers:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* ------------------------------------------------------------- one event */

.diwan-event {
	padding-block: 24px 60px;
}

.diwan-event__back {
	font-size: 14px;
	margin-block-end: 18px;
}

.diwan-event__back a {
	color: var(--diwan-text-muted, #6e6e6e);
	text-decoration: none;
}

.diwan-event__back a:hover {
	color: var(--diwan-text, #000);
}

.diwan-event__head {
	margin-block-end: 22px;
	max-inline-size: 820px;
}

.diwan-event__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.diwan-event__title {
	font-family: var(--diwan-font-display);
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 600;
	line-height: 1.18;
	margin: 0;
}

.diwan-event__closed {
	background: var(--diwan-surface-sunken, #f4f3f1);
	border-inline-start: 3px solid var(--diwan-text-muted, #6e6e6e);
	color: var(--diwan-text-soft, #444);
	font-size: 15px;
	margin-block-start: 16px;
	padding: 10px 14px;
}

/* The poster is shown whole here, not cropped to a banner. Event artwork
   carries the date, the venue and the price inside the picture, and a wide crop
   cuts exactly that off. The card in a grid has to crop because the cards have
   to line up; this page does not. */
.diwan-event__cover {
	align-items: center;
	background: var(--diwan-surface-sunken, #f4f3f1);
	display: flex;
	justify-content: center;
	margin: 0 0 34px;
	overflow: hidden;
}

.diwan-event__image {
	display: block;
	max-block-size: 520px;
	max-inline-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.diwan-event__layout {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) 340px;
}

.diwan-event__subhead {
	font-family: var(--diwan-font-display);
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.diwan-event__text {
	font-size: 16px;
	line-height: 1.75;
}

.diwan-event__text p {
	margin-block: 0 1em;
}

/* The booking button is the point of the page, so it follows the reader down
   a long description rather than being left at the top. */
.diwan-event__panel {
	align-self: start;
	border: 1px solid var(--diwan-border, #e6e6e6);
	padding: 22px;
	position: sticky;
	inset-block-start: calc(var(--diwan-header-h, 0px) + 16px);
}

.diwan-event__facts {
	display: grid;
	gap: 16px;
	margin: 0;
}

.diwan-event__fact dt {
	align-items: center;
	color: var(--diwan-text-muted, #6e6e6e);
	display: flex;
	font-size: 13px;
	gap: 7px;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.diwan-event__fact dd {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.diwan-event__map {
	display: block;
	font-size: 14px;
	margin-block-start: 4px;
}

.diwan-event__book {
	margin-block: 24px 0;
}

.diwan-event__book .diwan-button {
	display: block;
	text-align: center;
}

.diwan-event__contact {
	border-block-start: 1px solid var(--diwan-border, #e6e6e6);
	margin-block-start: 22px;
	padding-block-start: 18px;
}

.diwan-event__contact h3 {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 13px;
	letter-spacing: 0.06em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.diwan-event__contact p {
	align-items: center;
	display: flex;
	font-size: 15px;
	gap: 8px;
	margin: 0 0 7px;
	word-break: break-word;
}

.diwan-event__contact .diwan-icon {
	color: var(--diwan-text-muted, #6e6e6e);
	flex: none;
}

.diwan-event__contact-name {
	font-weight: 600;
}

.diwan-event__more {
	border-block-start: 1px solid var(--diwan-border, #e6e6e6);
	margin-block-start: 56px;
	padding-block-start: 40px;
	text-align: center;
}

.diwan-event__more .diwan-events-grid {
	margin-block-start: 26px;
	text-align: start;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.diwan-event__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

@media (max-width: 1100px) {
	/* Three across. The gap holds at 24 the whole way down, so the rhythm of
	   the page does not change with the screen. */
	.diwan-events__track {
		grid-auto-columns: calc((100% - 2 * var(--diwan-event-gap)) / 3);
	}

	.diwan-events-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.diwan-events__track {
		grid-auto-columns: calc((100% - var(--diwan-event-gap)) / 2);
	}

	.diwan-events-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.diwan-event__layout {
		gap: 30px;
		grid-template-columns: minmax(0, 1fr);
	}

	/* Nothing to stick to once the panel is a full width block under the text. */
	.diwan-event__panel {
		position: static;
	}
}

@media (max-width: 600px) {
	.diwan-events {
		margin-block: 32px;
	}

	/* A sliver of the next card, so it reads as a run that can be swiped. */
	.diwan-events__track {
		--diwan-event-gap: 16px;

		grid-auto-columns: 78%;
	}

	/* Two on a phone rather than one: the poster is wide, and one per row makes
	   a very long page out of a programme this size. */
	.diwan-events-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.diwan-events__track {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
 * The built archive, and the built event page.
 *
 * Everything below draws the two Elementor documents rather than the PHP
 * templates above: the programme read three ways, and one event. The rules are
 * written against our own classes, put on the widgets in the documents, so a
 * designer moving a widget in Elementor keeps its styling with it.
 * ========================================================================== */

/* ------------------------------------------------- the archive: the heading */

.diwan-events-head__title .elementor-heading-title {
	letter-spacing: 0.02em;
}

/* The rule under the heading is Elementor's divider, which centres itself by
   default. It belongs at the start of the line, and on the Arabic page the
   start of the line is the right. */
.diwan-events-head__rule .elementor-divider {
	justify-content: flex-start;
	padding-block: 0;
}

/* ----------------------------------------------- the archive: the whole row */

.diwan-events-bar {
	align-items: center;
	background: var(--diwan-surface-alt, #fafaf8);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 14px;
}

/* The search takes whatever the controls beside it leave, down to a width at
   which a title still fits in it. */
.diwan-events-bar__search {
	align-items: center;
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	flex: 1 1 220px;
	gap: 8px;
	min-inline-size: 180px;
	padding-inline: 10px;
}

.diwan-events-bar__search .diwan-icon {
	color: var(--diwan-text-muted, #6e6e6e);
	flex: none;
}

/* One step deeper than the theme's own input rule, and no border of its own:
   the box around it is the border. */
.diwan-events-bar .diwan-events-bar__search input[type="search"] {
	background: transparent;
	border: 0;
	color: var(--diwan-text, #000);
	font-size: 14px;
	inline-size: 100%;
	min-inline-size: 0;
	outline: 0;
	padding-block: 9px;
	padding-inline: 0;
}

/* The theme's focus rule gives a focused field a 4px white ring and its own
   padding. Inside this box the ring drew a second, larger white rectangle over
   the box's edge. The field stays flat; the box around it shows the focus. */
.diwan-events-bar .diwan-events-bar__search input[type="search"]:focus,
.diwan-events-bar .diwan-events-bar__search input[type="search"]:focus-visible {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	padding-inline: 0;
}

.diwan-events-bar__search:focus-within {
	border-color: var(--diwan-text, #000);
}

.diwan-events-bar__views {
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	display: flex;
	overflow: hidden;
}

.diwan-events-bar__view {
	align-items: center;
	color: var(--diwan-text-soft, #444);
	display: flex;
	font-size: 13px;
	gap: 6px;
	line-height: 1;
	padding: 10px 12px;
	text-decoration: none;
}

.diwan-events-bar__view + .diwan-events-bar__view {
	border-inline-start: 1px solid var(--diwan-border, #e6e6e6);
}

.diwan-events-bar__view:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* The view being read is the brand blue, and the text on it is white: the same
   pair as every other selected thing on the site. */
.diwan-events-bar__view.is-on,
.diwan-events-bar__view.is-on:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

.diwan-events-bar__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.diwan-events-bar__date {
	align-items: center;
	color: var(--diwan-text-muted, #6e6e6e);
	display: flex;
	font-size: 12px;
	gap: 6px;
	text-transform: uppercase;
}

.diwan-events-bar .diwan-events-bar__date input[type="date"] {
	background: var(--diwan-surface, #fff);
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-text, #000);
	font-size: 13px;
	padding: 8px 10px;
}

.diwan-events-bar__when {
	color: var(--diwan-blue, #246b8f);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.diwan-events-bar__when:hover {
	color: var(--diwan-black, #000);
}

/* The form sends itself when a control changes, so the button is only there for
   a reader whose browser is not running the script. */
.diwan-js .diwan-events-bar__go {
	display: none;
}

.diwan-events-bar .diwan-events-bar__go {
	background: var(--diwan-btn-bg, #000);
	border: 1px solid var(--diwan-btn-border, #000);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-btn-text, #fff);
	font-size: 13px;
	padding: 9px 16px;
}

/* ------------------------------------------------- the archive: three views */

/* All three are in the document and one is read. Which one is a class on the
   body, put there by the archive module, so a view is an address rather than a
   state of a script: a search in the calendar is a link. */
.diwan-events__view {
	display: none;
}

body.diwan-events-view-grid .diwan-events__view--grid,
body.diwan-events-view-list .diwan-events__view--list,
body.diwan-events-view-calendar .diwan-events__view--calendar {
	display: block;
}

/* No view on the body at all, which happens if the class filter has not run:
   the grid is what the archive is by default, so it is what shows. */
body:not(.diwan-events-view-list):not(.diwan-events-view-calendar) .diwan-events__view--grid {
	display: block;
}

/* ------------------------------------------------------ the tag on a poster */

/* The one tag used in all three places an event is shown: the home strip, the
   archive card and the cover of the event's own page. Brand blue on white
   rather than a red or an amber, because nothing has gone wrong - the event
   simply happened. */
.diwan-event-tag {
	background: var(--diwan-blue, #246b8f);
	border-radius: 999px;
	color: var(--diwan-white, #fff);
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 6px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------------ the list card */

.diwan-event-row__built {
	background: var(--diwan-surface, #fff);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.diwan-event-row__built:hover {
	border-color: var(--diwan-black, #000);
	box-shadow: var(--diwan-shadow-soft, 0 1px 3px rgba(0, 0, 0, 0.06));
}

/* The poster keeps the ratio it has everywhere else, so a reader switching from
   the grid to the list is looking at the same picture. */
.diwan-event-row__cover {
	flex: none;
	position: relative;
}

.diwan-event-row__cover img {
	aspect-ratio: var(--diwan-event-cover-ratio, 281 / 158);
	block-size: auto;
	inline-size: 100%;
	object-fit: cover;
}

.diwan-event-row__body {
	justify-content: center;
	min-inline-size: 0;
}

/* The excerpt is the only thing on the row that can run long, so it is the only
   thing clamped. */
.diwan-event-row__text {
	color: var(--diwan-text-soft, #444);
	font-size: 14px;
	line-height: 1.6;
}

.diwan-event-row__text .elementor-widget-container {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	overflow: hidden;
}

/* Same as the card: a field this event has nothing in leaves no stray icon. */
.diwan-event-row__built .elementor-icon-list-item:has(.elementor-icon-list-text:empty) {
	display: none;
}

/* --------------------------------------------------------------- the months */

.diwan-calendar {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	overflow: hidden;
}

.diwan-calendar__head {
	align-items: center;
	background: var(--diwan-surface-alt, #fafaf8);
	border-block-end: 1px solid var(--diwan-border, #e6e6e6);
	display: flex;
	gap: 14px;
	justify-content: center;
	padding: 12px;
}

.diwan-calendar__step {
	align-items: center;
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: 50%;
	block-size: 32px;
	color: var(--diwan-black, #000);
	display: inline-flex;
	font-size: 18px;
	inline-size: 32px;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
}

.diwan-calendar__step:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* The chevrons point the way the reader reads, so on the Arabic page the month
   before is on the right. */
[dir="rtl"] .diwan-calendar__step span {
	display: inline-block;
	transform: scaleX(-1);
}

.diwan-calendar__month {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	min-inline-size: 190px;
	text-align: center;
	text-transform: uppercase;
}

.diwan-calendar__grid {
	background: var(--diwan-border, #e6e6e6);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.diwan-calendar__weekday {
	background: var(--diwan-surface-alt, #fafaf8);
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 8px 6px;
	text-align: center;
	text-transform: uppercase;
}

.diwan-calendar__day {
	background: var(--diwan-surface, #fff);
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-block-size: 104px;
	padding: 6px;
}

.diwan-calendar__day--empty {
	background: var(--diwan-surface-alt, #fafaf8);
}

.diwan-calendar__number {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 12px;
	font-weight: 600;
}

.diwan-calendar__day.is-today .diwan-calendar__number {
	align-items: center;
	background: var(--diwan-blue, #246b8f);
	block-size: 22px;
	border-radius: 50%;
	color: var(--diwan-white, #fff);
	display: inline-flex;
	inline-size: 22px;
	justify-content: center;
}

.diwan-calendar__event {
	background: var(--diwan-surface-sunken, #f4f3f1);
	border-inline-start: 3px solid var(--diwan-blue, #246b8f);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-black, #000);
	display: block;
	font-size: 12px;
	line-height: 1.35;
	overflow: hidden;
	padding: 4px 6px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.diwan-calendar__event:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* An event that has been and gone, in the month it was in. */
.diwan-calendar__event.is-past {
	border-inline-start-color: var(--diwan-text-faint, #a0a0a0);
	color: var(--diwan-text-muted, #6e6e6e);
}

/* ----------------------------------------------- the event page: the poster */

.diwan-event-cover .elementor-widget-theme-post-featured-image {
	position: relative;
}

/*
 * The poster in two layers (Diwan, 15 October 2026): in front, the poster
 * whole, at the home page header's height, never cropped, because a poster
 * carries its date and its place in its corners; behind it, filling the
 * banner, the same poster blurred (a small copy, set on the page as
 * --diwan-event-poster by Events::print_poster). A poster of any shape sits
 * on a banner of one height, and nothing of it is cut away.
 *
 * The numbers are here to change: the height on a computer and on a tablet
 * (the home header's, 478 and 413), how hard the blur is, and the veil over
 * it that lets the poster stand out.
 */
.diwan-event-cover__image {
	--diwan-event-poster-h: 478px;
	--diwan-event-poster-blur: 40px;
	--diwan-event-poster-veil: rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	isolation: isolate;
	overflow: hidden;
}

.diwan-event-cover__image::before,
.diwan-event-cover__image::after {
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.diwan-event-cover__image::before {
	background: var(--diwan-event-poster, none) center / cover no-repeat;
	filter: blur(var(--diwan-event-poster-blur)) saturate(1.1);
	/* Larger than the banner, so the blur's soft edge falls outside it. */
	transform: scale(1.2);
}

.diwan-event-cover__image::after {
	background: var(--diwan-event-poster-veil);
}

.diwan-event-cover__image img {
	aspect-ratio: auto;
	block-size: var(--diwan-event-poster-h);
	display: block;
	inline-size: auto;
	margin-inline: auto;
	max-inline-size: 100%;
	object-fit: contain;
	object-position: center;
}

/* -------------------------------------------------- the event page: the bar */

.diwan-event-when__cell {
	min-inline-size: 0;
}

.diwan-event-when__label .elementor-heading-title {
	margin-block-end: 2px;
}

.diwan-event-when__value .elementor-icon-list-text {
	font-size: 15px;
	font-weight: 600;
}

/* The button sits at the end of the bar, which is the right on the English
   page and the left on the Arabic one. */
.diwan-event-when__act .elementor-widget-wrap {
	align-content: center;
	justify-content: flex-end;
}

.diwan-event-register {
	background: var(--diwan-btn-bg, #000);
	border: 1px solid var(--diwan-btn-border, #000);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-btn-text, #fff);
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 12px 24px;
	text-decoration: none;
	text-transform: uppercase;
}

.diwan-event-register:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
	text-decoration: none;
}

/* Over, and saying so. Not hidden, and not something that can be pressed: the
   reader can see there was a way in and that it has closed. */
.diwan-event-register.is-closed,
.diwan-event-register.is-closed:hover {
	appearance: none;
	background: var(--diwan-surface-sunken, #f4f3f1);
	border-color: var(--diwan-border-strong, #d5d5d5);
	color: var(--diwan-text-muted, #6e6e6e);
	cursor: not-allowed;
	font-family: var(--diwan-font-button);
	/* Safari draws a shut button's words faded to almost nothing, whatever
	   colour they are given: they keep their colour, at full strength. */
	opacity: 1;
	-webkit-text-fill-color: var(--diwan-text-muted, #6e6e6e);
	/* A button that is shut, not words to be picked up and copied
	   (Diwan, 15 October 2026). */
	-webkit-user-select: none;
	user-select: none;
}

/* ------------------------------------------------- the event page: the body */

.diwan-event-body__head .elementor-heading-title {
	letter-spacing: 0.02em;
}

.diwan-event-body__rule .elementor-divider {
	padding-block: 0;
}

.diwan-event-body__text {
	color: var(--diwan-text-soft, #444);
	font-size: 15px;
	line-height: 1.75;
}

/* The two boxes of practical detail, under the reading. */
.diwan-event-facts {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	margin-block-start: 26px;
	padding: 18px 20px;
}

.diwan-event-facts__head {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.diwan-event-facts__name {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
}

.diwan-event-facts__list {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.diwan-event-facts__line {
	align-items: flex-start;
	color: var(--diwan-text-soft, #444);
	display: flex;
	font-size: 14px;
	gap: 8px;
	line-height: 1.5;
	margin: 0;
}

.diwan-event-facts__line .diwan-icon {
	color: var(--diwan-blue, #246b8f);
	flex: none;
	margin-block-start: 2px;
}

.diwan-event-facts__line a {
	color: var(--diwan-link, #000);
	text-decoration: none;
}

.diwan-event-facts__line a:hover {
	color: var(--diwan-hover-text, #3b0f00);
	text-decoration: underline;
}

/* The map is the heaviest thing on the page, so it is the last thing on it and
   it is loaded late. A stated ratio, so nothing jumps when it arrives. */
/* A stated height rather than a ratio: a ratio takes its width from its height
   in this box and draws a narrow map in a wide card, and the height is the
   thing that matters anyway — at the width of the reading column 16:9 would be
   over four hundred pixels of map under two lines of address. */
.diwan-event-facts__map {
	block-size: 260px;
	border-radius: var(--diwan-radius-sm, 4px);
	inline-size: 100%;
	margin-block-start: 14px;
	overflow: hidden;
}

.diwan-event-facts__map-link {
	font-size: 13px;
	margin: 10px 0 0;
}

.diwan-event-facts__map-link a {
	color: var(--diwan-blue, #246b8f);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.diwan-event-facts__map iframe {
	block-size: 100%;
	border: 0;
	display: block;
	inline-size: 100%;
}

/* ------------------------------------------------ the event page: the aside */

/* The column stays with the reader as the description scrolls, because what is
   in it is what a reader does with an event once they have read about it. */
.diwan-event-body__aside .elementor-widget-wrap {
	align-content: start;
	position: sticky;
	top: 24px;
}

.diwan-event-save,
.diwan-event-share {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius, 8px);
	padding: 18px 20px;
}

.diwan-event-share {
	margin-block-start: 16px;
}

.diwan-event-save__head,
.diwan-event-share__head {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.diwan-event-save__list {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.diwan-event-save__list li {
	margin: 0;
}

.diwan-event-save__link {
	align-items: center;
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: var(--diwan-radius-sm, 4px);
	color: var(--diwan-black, #000);
	display: flex;
	font-size: 14px;
	gap: 10px;
	padding: 11px 14px;
	text-decoration: none;
}

.diwan-event-save__link .diwan-icon {
	color: var(--diwan-blue, #246b8f);
	flex: none;
}

.diwan-event-save__link:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

.diwan-event-save__link:hover .diwan-icon {
	color: var(--diwan-hover-text, #3b0f00);
}

.diwan-event-share__list {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.diwan-event-share__list li {
	margin: 0;
}

.diwan-event-share__link {
	align-items: center;
	block-size: 42px;
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: 50%;
	color: var(--diwan-black, #000);
	display: inline-flex;
	inline-size: 42px;
	justify-content: center;
}

.diwan-event-share__link:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* The band while the next reading is on its way. Faded rather than emptied, so
   the page does not jump and there is something to look at. */
.diwan-events__view.is-loading {
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.diwan-events__view.is-loading {
		transition: none;
	}
}

/* ------------------------------------------- the archive: kinds of event */

/* Under the controls rather than in them: a category is an archive of its own,
   so these are links, and a row of links reads differently from a form. */
.diwan-events-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 12px;
}

.diwan-events-cats__chip {
	border: 1px solid var(--diwan-border, #e6e6e6);
	border-radius: 999px;
	color: var(--diwan-text-soft, #444);
	font-size: 13px;
	line-height: 1;
	padding: 9px 16px;
	text-decoration: none;
}

.diwan-events-cats__chip:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

.diwan-events-cats__chip.is-on,
.diwan-events-cats__chip.is-on:hover {
	background: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
}

/* Nothing coming up is a real answer, and it is said in the middle of the band
   rather than left as a gap. */
.diwan-events__view .e-loop-nothing-found-message__text {
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 15px;
	padding-block: 40px;
}

/* --------------------------------------------------------- narrower screens */

@media (max-width: 1024px) {
	/* The home header's height on a tablet. */
	.diwan-event-cover__image {
		--diwan-event-poster-h: 413px;
	}

	.diwan-event-when__act .elementor-widget-wrap {
		justify-content: flex-start;
	}

	.diwan-calendar__day {
		min-block-size: 88px;
	}
}

@media (max-width: 767px) {
	/* Stacked, the three cells of the bar need the room between them that the
	   gutter was giving them side by side. */
	.diwan-event-when__cell + .diwan-event-when__cell,
	.diwan-event-when__act {
		margin-block-start: 14px;
	}

	/* Nothing to stick to once the aside is a block under the reading. */
	.diwan-event-body__aside .elementor-widget-wrap {
		position: static;
	}

	/* On a phone the poster fills the width at its own height, and there is
	   no room left over for a blur to fill. */
	.diwan-event-cover__image::before,
	.diwan-event-cover__image::after {
		content: none;
	}

	.diwan-event-cover__image img {
		block-size: auto;
		inline-size: 100%;
	}

	/* The list row becomes a card: a 260px poster beside two lines of text is
	   not a row on a phone, it is a squeeze. The width is the one Elementor
	   writes inline on the container, so this is the one place a rule has to
	   shout to be heard. */
	.diwan-event-row__built {
		flex-direction: column;
	}

	.diwan-event-row__cover {
		inline-size: 100% !important;
	}

	/* A month of seven columns does not fit a phone, so the days stack and the
	   weekday strip goes with them. */
	.diwan-calendar__grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.diwan-calendar__weekday,
	.diwan-calendar__day--empty {
		display: none;
	}

	.diwan-calendar__day {
		flex-direction: row;
		gap: 10px;
		min-block-size: 0;
	}

	.diwan-calendar__number {
		flex: none;
		min-inline-size: 24px;
	}

	.diwan-events-bar {
		gap: 10px;
	}

	.diwan-events-bar__views {
		inline-size: 100%;
	}

	.diwan-events-bar__view {
		flex: 1 1 0;
		justify-content: center;
	}
}

/* ------------------------------------------ a week with nothing on it */

/*
 * What stands in the run's place when the programme is empty and the shop has
 * chosen to say so rather than to take the band away. A line, centred, on the
 * band's own ground: it is a note, not a card.
 */
.diwan-events__none {
	margin: 0;
	padding-block: 18px 6px;
	color: var(--diwan-text-muted, #6e6e6e);
	font-size: 0.95rem;
	text-align: center;
}

/* --------------------------------- room for the cards' edges in a carousel */

/* A carousel clips what it holds to its own box, and a card as tall as the
   box has its bottom border on the very edge: at a height that is not a whole
   number of pixels the border falls outside and is cut off, and the card looks
   torn along the bottom. A few pixels of room inside the box keep the whole
   border, and the shadow a card takes on hover, in sight. */
.elementor-widget-loop-carousel .swiper:has(.diwan-event-card__built, .diwan-event-card) {
	padding-block: 1px 4px;
}