/* Arch — every arch-topped shape is a true half circle over a square-cornered body, like the inn's windows
   (0.5.0, D1). Oversized top radii: CSS scales all four radii down together until they fit, which lands the top
   corners on exactly half the box's width whenever the box is at least half as tall as it is wide — true of
   every arch here, and asserted at 390 and 1440 by tests/verify.py (arch_half_round). One rule, so no shape
   can drift back to a flattened crown. The snapshot is a taped photo, not a window, and stays rectangular. */
.lid-card,
.is-style-li-arch-card,
.li-tile__link,
.li-tile__art,
.li-menu--sandwiches,
:is(.wp-block-image, .wp-block-post-featured-image).is-style-li-arch img,
.li-arch-art,
.wp-block-gallery.is-style-li-carousel {
	border-radius: 9999px 9999px 0 0;
}

/* The boxes that hold text get a floor in height — an aspect ratio with height:auto is a minimum, content still
   grows the box (not on iOS Safari once the box also has a max-width: drop the ratio there, see home.css
   .lid-card--events) — so the crown can never flatten on a short card or tile, and there is always a body under it:
   a box exactly half as tall as it is wide is a pure half-disc, which reads as a dome, not a window (seen on
   the afternoon and evening cards at 1440). 68 % of the width leaves roughly a fifth of the box as straight
   wall. Each is an inline-size container so what sits inside can be placed by the box's own width. */
.lid-card,
.is-style-li-arch-card,
.li-menu--sandwiches {
	aspect-ratio: 100 / 68;
	container-type: inline-size;
}

/* As grid items, a ratio would stop them stretching to the row and size their width from their height. */
.is-style-li-arch-card {
	place-self: stretch;
	min-width: 0;
}

.li-tile { container-type: inline-size; }

.li-tile__link { min-height: 68cqw; }

/* Room under the crown: the first line sits a fifth of the box's width down, where the half circle is already
   four fifths as wide as the box; headings stay inside that width. */
.lid-card > :first-child,
.is-style-li-arch-card > :first-child,
.li-menu--sandwiches > :first-child,
.li-tile__link > :first-child:not(.li-tile__art) { margin-top: max(0px, calc(20cqw - 24px)); }

/* (Selectors one step heavier than pages.css's own margin rules, which load after this file.) */
.lid-card .wp-block-heading,
.is-style-li-arch-card h3.wp-block-heading,
.li-tile__link .li-tile__title {
	max-width: 80cqw;
	margin-inline: auto;
}

/* Menu rows — the menu block (dormant since 0.4.0: the PDFs are the menu) */
.li-menu__rows {
	display: flex;
	flex-direction: column;
	gap: 13px;
	text-align: left;
	font-size: 15px;
}

.li-menu__row { gap: 9px; }

.li-menu__note {
	font-size: 12px;
	color: var(--li-ink-soft);
}


/* Happenings strip */
.li-happenings--strip {
	display: flex;
	align-items: baseline;
	gap: 34px;
	padding: 24px var(--li-pad);
	border-top: 1px solid var(--li-line);
}

.li-happenings--strip .li-happenings__label {
	font-family: var(--wp--preset--font-family--subhead);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
	line-height: 1.4;
}

.li-happenings--strip .li-happenings__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 34px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--li-ink-soft);
}

.li-happenings--strip .li-happenings__list a {
	color: inherit;
	text-decoration: none;
}

.li-happenings--strip .li-happenings__list a:hover { text-decoration: underline; }

.li-happenings--strip .li-happenings__all {
	margin-left: auto;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .18em;
	text-decoration: none;
	border-bottom: 1px solid var(--li-line-strong);
	padding-bottom: 3px;
}

@media (max-width: 759px) {
	.li-happenings--strip {
		flex-direction: column;
		gap: 10px;
	}

	.li-happenings--strip .li-happenings__all { margin-left: 0; }
}

/* Quiet link — a cta block rendered as small-caps text with an arrow ("Cafe menu →"), where a pill
   would compete with the page's real buttons (0.4.1: the Home cards, the footer). */
.li-cta--link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--subhead);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .26em;
	color: var(--li-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.li-cta--link:hover,
.li-cta--link:focus-visible { text-decoration-thickness: 2px; }

.li-cta--pending-link {
	color: var(--li-ink-soft);
	text-decoration: none;
}

/* Carousel — the Gallery block's "Carousel" style (0.5.0, E2). One photo at a time in an arch-topped frame, a
   horizontal scroll-snap row the visitor swipes; logan-inn.js adds prev/next buttons and dots when there is more
   than one photo. Without the script it is still a plain swipe row. The :not(#li-slide) matches core's own
   id-weighted gallery-image width rule so a slide is always the full frame. */
.wp-block-gallery.has-nested-images.is-style-li-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.wp-block-gallery.is-style-li-carousel::-webkit-scrollbar { display: none; }

.wp-block-gallery.is-style-li-carousel:focus-visible {
	outline: 2px solid var(--li-ink);
	outline-offset: 3px;
}

.wp-block-gallery.has-nested-images.is-style-li-carousel figure.wp-block-image:not(#li-slide) {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.wp-block-gallery.has-nested-images.is-style-li-carousel figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-gallery.is-style-li-carousel :is(figcaption, .blocks-gallery-caption) { display: none; }

.li-carousel__frame { position: relative; }

.li-carousel__frame > .wp-block-gallery { margin: 0; }

.li-carousel__prev,
.li-carousel__next {
	position: absolute;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--li-btn-bg);
	color: var(--li-btn-ink);
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.li-carousel__prev { left: 12px; }

.li-carousel__next { right: 12px; }

.li-carousel__prev[aria-disabled="true"],
.li-carousel__next[aria-disabled="true"] { opacity: .4; cursor: default; }

.li-carousel__prev:focus-visible,
.li-carousel__next:focus-visible,
.li-carousel__dots button:focus-visible {
	outline: 2px solid var(--li-ink);
	outline-offset: 2px;
}

.li-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 8px;
}

.li-carousel__dots button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.li-carousel__dots button::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--li-ink);
}

.li-carousel__dots button[aria-current="true"]::before { background: var(--li-ink); }

@media (min-width: 960px) {
	.wp-block-gallery.has-nested-images.is-style-li-carousel figure.wp-block-image:not(#li-slide) { aspect-ratio: 3 / 2; }
}

/* In the block editor the carousel is a plain wrapping grid of thumbnails: the buttons and dots come from the
   front-end script, so a one-photo-wide scroller there would hide every photo after the first. */
.editor-styles-wrapper .wp-block-gallery.has-nested-images.is-style-li-carousel {
	flex-wrap: wrap;
	gap: 8px;
	overflow: visible;
	border-radius: 0;
}

.editor-styles-wrapper .wp-block-gallery.has-nested-images.is-style-li-carousel figure.wp-block-image:not(#li-slide) {
	flex: 0 0 calc(33.333% - 6px);
	width: calc(33.333% - 6px);
	aspect-ratio: 1;
}