/* =========================================================================
 * Feature Accordion 003 — Rooms with Photo Pairs
 *
 * On the paper. An eyebrow; the title, a site h2 (its size, leading and
 * tracking are the site's), with a short italic line level with its foot at the right; then the rooms, with no
 * lines between them. The rows are the site's shared accordion (site.css §3e,
 * site.js) in its scroll mode: each opens as it scrolls into view and closes
 * as it leaves at the bottom, the height eased, the description rising in
 * line by line. This file sets the rows' look. In an open row the photos
 * follow the description in a row of their own, across the full width,
 * sharing it equally: two take a half each, three a third.
 *
 * The section's width, the head's row and the photos' row (a Row block,
 * not wrapping) are on the blocks (pattern.php).
 * ========================================================================= */

.feature-accordion-003 .feature-accordion-003__label {
	margin-bottom: 0;
}

/* The head: the title at the left, the italic line at the right, level with
   the title's foot (the row is a flex group on the block). */
.feature-accordion-003 .feature-accordion-003__head {
	column-gap: var(--space-lg);
	row-gap: var(--space-sm);
}

.feature-accordion-003 .feature-accordion-003__head > * {
	margin: 0;
}

.feature-accordion-003 .feature-accordion-003__title {
	font-size: var(--heading-2);
}

.feature-accordion-003 .feature-accordion-003__aside {
	max-width: 20rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--base);
	font-style: italic;
	line-height: 1.5;
}

/* The rows: no lines above or between them (the shared row's faded
   hairline is taken off); the space and the large names part them. Three
   classes: core's block gap is (0,1,0). */
.feature-accordion-003 .feature-accordion-003__rows.feature-accordion-003__rows {
	margin-top: var(--space-lg);
}

.feature-accordion-003 .feature-accordion-003__row.accordion-row {
	background: none;
}

/* With no lines, the rooms are parted by space: an lg step between rows, on
   top of the summary's own padding. Three classes: the shared row's
   `margin: 0` and core's block gap both weigh (0,1,0). */
.feature-accordion-003 .feature-accordion-003__row.accordion-row + .feature-accordion-003__row {
	margin-top: var(--space-lg);
}

/* The room's name runs as one line of text. The shared row's summary is a
   flex box (Feature Accordion 001 sets its number beside the name with it),
   which would make each italic word a flex item of its own, parted from its
   neighbours by the gap instead of a space. The plus/minus is positioned, so
   nothing else depends on the flex box here. */
.feature-accordion-003 .feature-accordion-003__row > summary {
	display: block;
	font-family: var(--font-display);
	font-size: var(--heading-3);
	line-height: 1.15; /* the site's h3, whose size it takes */
}

/* The description: a few italic lines in the display face. */
.feature-accordion-003 .feature-accordion-003__text {
	max-width: 24rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--base);
	font-style: italic;
	line-height: 1.6;
}

/* The description and the amenities: a Row block (pattern.php), the
   description at the left, the amenities at the right, on one line (the Row
   does not wrap): the amenities take the room the description leaves and
   wrap inside it only when they need to. */
.feature-accordion-003 .feature-accordion-003__lead.feature-accordion-003__lead {
	column-gap: var(--space-lg);
	row-gap: var(--space-sm);
}

/* The amenities: a Row block of tags, wrapping, pushed to the right (both on
   the block). No width cap: one held to 36rem dropped the last of five tags
   onto a line of its own however wide the screen. */
.feature-accordion-003 .feature-accordion-003__tags.feature-accordion-003__tags {
	gap: var(--space-xs);
}

/* A tag: one amenity in a small bordered field, as Feature Accordion 002's. */
.feature-accordion-003 .feature-accordion-003__tag.feature-accordion-003__tag {
	margin: 0;
	padding: calc(var(--space-xs) / 2) var(--space-sm);
	border: var(--border);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--color-text);
	background: var(--color-surface);
	white-space: nowrap;
}

/* The photos: a Row block (not wrapping), under the text. The gap between
   them is the Row's own block spacing (lg in the pattern), not set here. Each takes an equal share of the row, whatever its photo's own
   size: a Row block's children size to their content, and no block setting
   says "equal" (Fill only grows them from their content's width). Three
   classes: the flex layout's own child rules weigh (0,1,1). */
.feature-accordion-003 .feature-accordion-003__photos.feature-accordion-003__photos {
	margin-top: var(--space-md);
}

.feature-accordion-003 .feature-accordion-003__photos > .feature-accordion-003__photo.feature-accordion-003__photo {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.feature-accordion-003 .feature-accordion-003__photo img {
	display: block;
	width: 100%;
}

/* On a phone (below sm) the photos stack, one under the other at the full
   width, the Row's own block spacing between them. Core's layouts have no
   setting per screen width, so this is the stylesheet's; nothing else is
   decided here. */
@media (max-width: 40rem) {
	/* The description and the amenities, one under the other, the tags
	   starting at the left edge with the text. */
	.feature-accordion-003 .feature-accordion-003__lead.feature-accordion-003__lead {
		flex-direction: column;
		align-items: stretch;
	}

	.feature-accordion-003 .feature-accordion-003__tags.feature-accordion-003__tags {
		justify-content: flex-start;
	}

	.feature-accordion-003 .feature-accordion-003__photos.feature-accordion-003__photos {
		flex-direction: column;
		align-items: stretch;
	}

	.feature-accordion-003 .feature-accordion-003__photos > .feature-accordion-003__photo.feature-accordion-003__photo {
		flex: none;
		width: 100%;
	}
}