/**
 * Layouts of An Nam containers and the type scale of the modules (inc/elementor/container.php,
 * inc/elementor/module-base.php).
 *
 * A container's An Nam settings add classes (an-l-<layout>, an an--<palette>, an-cols-…,
 * an-rules-…, an-weave-yes). The rules below give the Figma values as Elementor's own container
 * variables (--padding-*, --row-gap, --flex-direction…), at a lower weight than the values an
 * editor sets in Elementor, so those always win. Child rules use :where() for the same reason.
 *
 * Breakpoints match Elementor's: tablet <= 1024px, phone <= 767px.
 */

/* ------------------------------------------------------------------ */
/* Section shells: the 1200 column inside the screen's gutters         */
/* ------------------------------------------------------------------ */

/* The padding puts the content in the 1200 column (main.css .an-container) while the
   background runs across the screen. */
.e-con.an-l-section,
.e-con.an-l-hero,
.e-con.an-l-page,
.e-con.an-l-band {
	--an-inline: max(var(--an-gutter), calc((100% - var(--an-max)) / 2));
	--padding-left: var(--an-inline);
	--padding-right: var(--an-inline);
}

/* A palette adds .an, whose "position: relative" (main.css) must not undo Elementor's
   Advanced > Position on a container. */
.e-con.an {
	position: var(--position);
}

/* Section: padding 80 / 56 / 32 (main.css --an-section-pad), blocks 32 apart. */
.e-con.an-l-section {
	--padding-top: var(--an-pad-t, var(--an-section-pad));
	--padding-bottom: var(--an-pad-b, var(--an-section-pad));
	--row-gap: 32px;
	--column-gap: 32px;
}

/* Hero (Figma Home "Hero"): 900 / 900 / 844 high, the text at the bottom, 184 / 168 / 256 above
   the foot (room for the booking bar, and on phones for the fixed one). */
.e-con.an-l-hero {
	--min-height: var(--an-hero-h, 900px);
	--justify-content: flex-end;
	--padding-top: var(--an-pad-t, 0px);
	--padding-bottom: var(--an-pad-b, 184px);
	--row-gap: 0px;
	--column-gap: 0px;
	--overflow: hidden;
}

/* Page header (Figma Menu / Reservations "Hero", the "page" style): 640 / 520 / 460 high, the
   title at the bottom, the section padding above and below. */
.e-con.an-l-page {
	--min-height: 640px;
	--justify-content: flex-end;
	--padding-top: var(--an-pad-t, var(--an-section-pad));
	--padding-bottom: var(--an-pad-b, var(--an-section-pad));
	--row-gap: 0px;
	--column-gap: 0px;
	--overflow: hidden;
}

/* Photo band (Figma Home "Band"): 700 / 620 / 680 high, the text at the bottom. */
.e-con.an-l-band {
	--min-height: 700px;
	--justify-content: flex-end;
	--padding-top: var(--an-pad-t, var(--an-section-pad));
	--padding-bottom: var(--an-pad-b, var(--an-section-pad));
	--row-gap: 0px;
	--column-gap: 0px;
	--overflow: hidden;
}

/* Flush: across the screen, nothing around (the divider band). */
.e-con.an-l-flush {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/* ------------------------------------------------------------------ */
/* Inner containers: stacks and rows                                   */
/* ------------------------------------------------------------------ */

.e-con.an-l-stack,
.e-con.an-l-row {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 16px;
	--column-gap: 16px;
}

.e-con.an-l-stack {
	--flex-direction: column;
}

/* Row: side by side, each item's width by its share (Style > Size in a row, --an-grow), from
   its starting width (--an-basis): a share of 0 and a starting width give a fixed column. */
.e-con.an-l-row {
	--flex-direction: row;
	--flex-wrap: nowrap;
	--align-items: flex-start;
}

.e-con.an-l-row > :where(.elementor-element) {
	--flex-grow: var(--an-grow, 1);
	--flex-shrink: 1;
	--flex-basis: var(--an-basis, 0%);
	min-width: 0;
}

/* A share and a starting width belong to the element they are set on: custom properties would
   otherwise pass them on to every block inside it. */
:where(.elementor-element) {
	--an-grow: initial;
	--an-basis: initial;
}

/* Columns: one, two, three or four per line (a grid, so the gaps stay the container's); an
   odd last item takes the whole line. */
.e-con.an-l-row:is(.an-cols-1, .an-cols-2, .an-cols-3, .an-cols-4) {
	display: grid;
}

.e-con.an-cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

.e-con.an-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.e-con.an-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.e-con.an-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* An odd last item takes the whole line, with the columns of that screen (a screen without
   its own number of columns keeps the larger screen's). */
@media (min-width: 1025px) {
	.e-con.an-cols-2 > :nth-last-child(1 of .elementor-element):nth-child(2n + 1 of .elementor-element),
	.e-con.an-cols-3 > :nth-last-child(1 of .elementor-element):nth-child(3n + 1 of .elementor-element),
	.e-con.an-cols-4 > :nth-last-child(1 of .elementor-element):nth-child(4n + 1 of .elementor-element) {
		grid-column: 1 / -1;
	}
}

/* Tablets. */
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con.an-cols-2:not([class*="an-cols-tablet-"]) > :nth-last-child(1 of .elementor-element):nth-child(2n + 1 of .elementor-element),
	.e-con.an-cols-3:not([class*="an-cols-tablet-"]) > :nth-last-child(1 of .elementor-element):nth-child(3n + 1 of .elementor-element),
	.e-con.an-cols-4:not([class*="an-cols-tablet-"]) > :nth-last-child(1 of .elementor-element):nth-child(4n + 1 of .elementor-element),
	.e-con.an-cols-tablet-2 > :nth-last-child(1 of .elementor-element):nth-child(2n + 1 of .elementor-element),
	.e-con.an-cols-tablet-3 > :nth-last-child(1 of .elementor-element):nth-child(3n + 1 of .elementor-element),
	.e-con.an-cols-tablet-4 > :nth-last-child(1 of .elementor-element):nth-child(4n + 1 of .elementor-element) {
		grid-column: 1 / -1;
	}
}

/* Phones. */
@media (max-width: 767px) {
	.e-con.an-cols-2:not([class*="an-cols-tablet-"]):not([class*="an-cols-mobile-"]) > :nth-last-child(1 of .elementor-element):nth-child(2n + 1 of .elementor-element),
	.e-con.an-cols-3:not([class*="an-cols-tablet-"]):not([class*="an-cols-mobile-"]) > :nth-last-child(1 of .elementor-element):nth-child(3n + 1 of .elementor-element),
	.e-con.an-cols-4:not([class*="an-cols-tablet-"]):not([class*="an-cols-mobile-"]) > :nth-last-child(1 of .elementor-element):nth-child(4n + 1 of .elementor-element),
	.e-con.an-cols-tablet-2:not([class*="an-cols-mobile-"]) > :nth-last-child(1 of .elementor-element):nth-child(2n + 1 of .elementor-element),
	.e-con.an-cols-tablet-3:not([class*="an-cols-mobile-"]) > :nth-last-child(1 of .elementor-element):nth-child(3n + 1 of .elementor-element),
	.e-con.an-cols-tablet-4:not([class*="an-cols-mobile-"]) > :nth-last-child(1 of .elementor-element):nth-child(4n + 1 of .elementor-element),
	.e-con.an-cols-mobile-2 > :nth-last-child(1 of .elementor-element):nth-child(2n + 1 of .elementor-element),
	.e-con.an-cols-mobile-3 > :nth-last-child(1 of .elementor-element):nth-child(3n + 1 of .elementor-element),
	.e-con.an-cols-mobile-4 > :nth-last-child(1 of .elementor-element):nth-child(4n + 1 of .elementor-element) {
		grid-column: 1 / -1;
	}
}

/* Rules between items (Figma "Numbers"): left of each item but the first, 24 inside it; or
   above each item, 16 above its content. */
.e-con.an-rules-between > :where(.elementor-element + .elementor-element) {
	padding-left: 24px;
	border-left: 1px solid var(--an-line);
}

.e-con.an-rules-above > :where(.elementor-element) {
	padding-top: 16px;
	border-top: 1px solid var(--an-line);
}

/* ------------------------------------------------------------------ */
/* Modules placed over their container                                 */
/* ------------------------------------------------------------------ */

/* A photo behind the whole container (Photo > Placement): under every other block. */
.e-con:has(> .an-place-background) {
	isolation: isolate;
}

.e-con > .elementor-element.an-place-background {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.an-place-background .an-m-photo,
.an-place-background .an-m-photo__box,
.an-place-background .an-m-photo__frame {
	height: 100%;
}

.an-place-background .an-m-photo__frame {
	border-radius: 0;
	background: none;
}

/* The booking bar over the foot of its container (Booking bar > Position), 37 / 29 above it. */
.e-con > .elementor-element.an-pin-foot {
	position: absolute;
	right: 0;
	bottom: var(--an-bar-offset, 37px);
	left: 0;
	z-index: 1;
	margin: 0;
}

/* Full-width buttons (Button > Full width). */
.an-full-yes .an-m-button {
	width: 100%;
}

/* Editor only: where a module without content sits (AN_Module_Base::print_placeholder()). */
.an-m-placeholder {
	padding: 24px;
	border: 1px dashed currentColor;
	border-radius: var(--an-radius-control);
	font-size: var(--an-fs-small);
	line-height: var(--an-lh-small);
	opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Type scale of the modules (Style > Style, per screen)               */
/* ------------------------------------------------------------------ */

.an-ts-page    { font-size: 80px; line-height: var(--an-lh-tight); }
.an-ts-page-md { font-size: 64px; line-height: var(--an-lh-tight); }
.an-ts-page-sm { font-size: 44px; line-height: var(--an-lh-tight); }
.an-ts-display { font-size: var(--an-fs-display); line-height: var(--an-lh-display); }
.an-ts-h1      { font-size: var(--an-fs-h1); line-height: var(--an-lh-h1); }
.an-ts-xl      { font-size: 48px; line-height: 1.12; }
.an-ts-xl-md   { font-size: 40px; line-height: 1.12; }
.an-ts-h2      { font-size: var(--an-fs-h2); line-height: var(--an-lh-h2); }
.an-ts-xl-sm   { font-size: 32px; line-height: 1.12; }
.an-ts-menu    { font-size: var(--an-fs-h2); line-height: var(--an-lh-tight); }
.an-ts-menu-sm { font-size: 32px; line-height: var(--an-lh-tight); }
.an-ts-h3      { font-size: var(--an-fs-h3); line-height: var(--an-lh-h3); }
.an-ts-faq     { font-size: var(--an-fs-faq); line-height: var(--an-lh-faq); }
.an-ts-lead    { font-size: 20px; line-height: var(--an-lh-text); }
.an-ts-body-lg { font-size: var(--an-fs-body-lg); line-height: var(--an-lh-body-lg); }
.an-ts-text    { font-size: 17px; line-height: var(--an-lh-text); }
.an-ts-body    { font-size: var(--an-fs-body); line-height: var(--an-lh-body); }
.an-ts-small   { font-size: var(--an-fs-small); line-height: var(--an-lh-small); }
.an-ts-note    { font-size: 13px; line-height: var(--an-lh-text); }
.an-ts-label   { font-size: var(--an-fs-label); line-height: var(--an-lh-label); }
.an-ts-label-loose { font-size: var(--an-fs-label); line-height: var(--an-lh-text); }

.an-tone-heading {
	color: var(--an-heading);
}

.an-tone-muted {
	color: var(--an-muted);
}

/* ------------------------------------------------------------------ */
/* Tablet (834 frames)                                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.e-con.an-l-hero {
		--padding-bottom: var(--an-pad-b, 168px);
	}

	.e-con.an-l-page {
		--min-height: 520px;
	}

	.e-con.an-l-band {
		--min-height: 620px;
	}

	.e-con > .elementor-element.an-pin-foot {
		bottom: var(--an-bar-offset, 29px);
	}

	.e-con.an-l-row.an-cols-tablet-auto {
		display: flex;
	}

	.e-con.an-cols-tablet-auto > :where(.elementor-element) {
		grid-column: auto;
	}

	.e-con.an-l-row:is(.an-cols-tablet-1, .an-cols-tablet-2, .an-cols-tablet-3, .an-cols-tablet-4) {
		display: grid;
	}

	.e-con.an-cols-tablet-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.e-con.an-cols-tablet-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.e-con.an-cols-tablet-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.e-con.an-cols-tablet-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}


	.e-con.an-rules-tablet-none > :where(.elementor-element) {
		padding-top: 0;
		padding-left: 0;
		border-top: 0;
		border-left: 0;
	}

	.e-con.an-rules-tablet-between > :where(.elementor-element) {
		padding-top: 0;
		border-top: 0;
	}

	.e-con.an-rules-tablet-between > :where(.elementor-element + .elementor-element) {
		padding-left: 24px;
		border-left: 1px solid var(--an-line);
	}

	.e-con.an-rules-tablet-above > :where(.elementor-element) {
		padding-top: 16px;
		padding-left: 0;
		border-top: 1px solid var(--an-line);
		border-left: 0;
	}

	.an-full-tablet-yes .an-m-button {
		width: 100%;
	}

	.an-full-tablet-no .an-m-button {
		width: auto;
	}

	.an-ts-t-page    { font-size: 80px; line-height: var(--an-lh-tight); }
	.an-ts-t-page-md { font-size: 64px; line-height: var(--an-lh-tight); }
	.an-ts-t-page-sm { font-size: 44px; line-height: var(--an-lh-tight); }
	.an-ts-t-display { font-size: var(--an-fs-display); line-height: var(--an-lh-display); }
	.an-ts-t-h1      { font-size: var(--an-fs-h1); line-height: var(--an-lh-h1); }
	.an-ts-t-xl      { font-size: 48px; line-height: 1.12; }
	.an-ts-t-xl-md   { font-size: 40px; line-height: 1.12; }
	.an-ts-t-h2      { font-size: var(--an-fs-h2); line-height: var(--an-lh-h2); }
	.an-ts-t-xl-sm   { font-size: 32px; line-height: 1.12; }
	.an-ts-t-menu    { font-size: var(--an-fs-h2); line-height: var(--an-lh-tight); }
	.an-ts-t-menu-sm { font-size: 32px; line-height: var(--an-lh-tight); }
	.an-ts-t-h3      { font-size: var(--an-fs-h3); line-height: var(--an-lh-h3); }
	.an-ts-t-faq     { font-size: var(--an-fs-faq); line-height: var(--an-lh-faq); }
	.an-ts-t-lead    { font-size: 20px; line-height: var(--an-lh-text); }
	.an-ts-t-body-lg { font-size: var(--an-fs-body-lg); line-height: var(--an-lh-body-lg); }
	.an-ts-t-text    { font-size: 17px; line-height: var(--an-lh-text); }
	.an-ts-t-body    { font-size: var(--an-fs-body); line-height: var(--an-lh-body); }
	.an-ts-t-small   { font-size: var(--an-fs-small); line-height: var(--an-lh-small); }
	.an-ts-t-note    { font-size: 13px; line-height: var(--an-lh-text); }
	.an-ts-t-label   { font-size: var(--an-fs-label); line-height: var(--an-lh-label); }
	.an-ts-t-label-loose { font-size: var(--an-fs-label); line-height: var(--an-lh-text); }
}

/* ------------------------------------------------------------------ */
/* Phone (390 frames)                                                   */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.e-con.an-l-hero {
		--min-height: var(--an-hero-h, 844px);
		--padding-bottom: var(--an-pad-b, 256px);
	}

	.e-con.an-l-page {
		--min-height: 460px;
	}

	.e-con.an-l-band {
		--min-height: 680px;
	}

	.e-con.an-l-row.an-cols-mobile-auto {
		display: flex;
	}

	.e-con.an-cols-mobile-auto > :where(.elementor-element) {
		grid-column: auto;
	}

	.e-con.an-l-row:is(.an-cols-mobile-1, .an-cols-mobile-2, .an-cols-mobile-3, .an-cols-mobile-4) {
		display: grid;
	}

	.e-con.an-cols-mobile-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.e-con.an-cols-mobile-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.e-con.an-cols-mobile-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.e-con.an-cols-mobile-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}


	/* Photo after the heading: the text column (second item) lets its blocks join the row,
	   which turns into one column: its first block, the photo, then its other blocks. */
	.e-con.an-l-row.an-weave-yes {
		display: flex;
		--flex-direction: column;
		--flex-wrap: nowrap;
		--align-items: stretch;
	}

	.e-con.an-weave-yes > :where(.elementor-element) {
		--flex-grow: 0;
		--flex-basis: auto;
	}

	.e-con.an-weave-yes > .e-con:nth-child(2 of .elementor-element) {
		display: contents;
	}

	.e-con.an-weave-yes > .e-con:nth-child(2 of .elementor-element) > :nth-child(1 of .elementor-element) {
		order: 1;
	}

	.e-con.an-weave-yes > :nth-child(1 of .elementor-element) {
		order: 2;
	}

	.e-con.an-weave-yes > .e-con:nth-child(2 of .elementor-element) > .elementor-element:not(:nth-child(1 of .elementor-element)) {
		order: 3;
	}

	.e-con.an-rules-mobile-none > :where(.elementor-element) {
		padding-top: 0;
		padding-left: 0;
		border-top: 0;
		border-left: 0;
	}

	.e-con.an-rules-mobile-between > :where(.elementor-element) {
		padding-top: 0;
		border-top: 0;
	}

	.e-con.an-rules-mobile-between > :where(.elementor-element + .elementor-element) {
		padding-left: 24px;
		border-left: 1px solid var(--an-line);
	}

	.e-con.an-rules-mobile-above > :where(.elementor-element) {
		padding-top: 16px;
		padding-left: 0;
		border-top: 1px solid var(--an-line);
		border-left: 0;
	}

	.an-full-mobile-yes .an-m-button {
		width: 100%;
	}

	.an-full-mobile-no .an-m-button {
		width: auto;
	}

	.an-ts-m-page    { font-size: 80px; line-height: var(--an-lh-tight); }
	.an-ts-m-page-md { font-size: 64px; line-height: var(--an-lh-tight); }
	.an-ts-m-page-sm { font-size: 44px; line-height: var(--an-lh-tight); }
	.an-ts-m-display { font-size: var(--an-fs-display); line-height: var(--an-lh-display); }
	.an-ts-m-h1      { font-size: var(--an-fs-h1); line-height: var(--an-lh-h1); }
	.an-ts-m-xl      { font-size: 48px; line-height: 1.12; }
	.an-ts-m-xl-md   { font-size: 40px; line-height: 1.12; }
	.an-ts-m-h2      { font-size: var(--an-fs-h2); line-height: var(--an-lh-h2); }
	.an-ts-m-xl-sm   { font-size: 32px; line-height: 1.12; }
	.an-ts-m-menu    { font-size: var(--an-fs-h2); line-height: var(--an-lh-tight); }
	.an-ts-m-menu-sm { font-size: 32px; line-height: var(--an-lh-tight); }
	.an-ts-m-h3      { font-size: var(--an-fs-h3); line-height: var(--an-lh-h3); }
	.an-ts-m-faq     { font-size: var(--an-fs-faq); line-height: var(--an-lh-faq); }
	.an-ts-m-lead    { font-size: 20px; line-height: var(--an-lh-text); }
	.an-ts-m-body-lg { font-size: var(--an-fs-body-lg); line-height: var(--an-lh-body-lg); }
	.an-ts-m-text    { font-size: 17px; line-height: var(--an-lh-text); }
	.an-ts-m-body    { font-size: var(--an-fs-body); line-height: var(--an-lh-body); }
	.an-ts-m-small   { font-size: var(--an-fs-small); line-height: var(--an-lh-small); }
	.an-ts-m-note    { font-size: 13px; line-height: var(--an-lh-text); }
	.an-ts-m-label   { font-size: var(--an-fs-label); line-height: var(--an-lh-label); }
	.an-ts-m-label-loose { font-size: var(--an-fs-label); line-height: var(--an-lh-text); }
}