/* ==========================================================================
   Location screen (/locations/<slug>/)

   Loaded on top of locations.css, which the singular route also gets. The hero
   is the shared page-hero component, so nothing here styles it beyond the row
   of buttons it gained for this screen; the palette, the icon badges and the
   split-section skeleton all come from main.css.
   ========================================================================== */

/* 1 · The hero's action row (page-hero component)
   ========================================================================== */

/*
 * The three facts wrap, and this decides how: the address takes its own row,
 * the way an address is read, and the two single-line facts share the one
 * below. Left alone the shared component breaks after the phone, pairing the
 * address with it and orphaning the hours.
 *
 * One row was tried and measured. It is not a question of column width: the
 * widest location, Hauppauge, needs 734px for the three (309 + 161 + 200 plus two
 * 32px gaps) and widening .page-hero__content to 760 does fit them — but the
 * hero's photograph blends in from the right across that same space, and the
 * hours then sit on top of the building at every width from 992 to 1600. The
 * room the row needs is the room the picture is already using.
 *
 * Layout only: the component keeps its own type, colour and badges.
 */
@media (min-width: 576px) {
	/*
	 * Scoped to the hero: the services under "About This Location" use the same
	 * .feature-list, and this rule would put the first of them on a row of its
	 * own, as it does the address.
	 */
	.single-location .page-hero .feature-list {
		display: grid;
		/*
		 * auto, not 1fr: at equal halves the hours started at the middle of the
		 * column and its text ended 6px from the photograph, which reads as the
		 * two touching. Packed at their natural widths they finish a hundred
		 * pixels earlier, well clear of it.
		 */
		grid-template-columns: auto auto;
		justify-content: start;
	}

	.single-location .page-hero .feature-list__item:first-child {
		grid-column: 1 / -1;
	}
}

/* 2 · Services offered here
   ========================================================================== */

/*
 * The hero's own fact list — .feature-list, .icon-badge and .feature-list__label
 * from main.css — under a label, at the top of the About block. Why there and
 * why this and not cards is in template-parts/locations/location-services.php.
 * Only the spacing is this screen's: the block takes the gap the text used to
 * have under the heading, and the list follows its label at the label's own
 * distance instead of the hero's.
 */
.location-services {
	margin-top: var(--space-6);
}

/*
 * A grid rather than the hero's wrapping row, because this list is long: a
 * location ticks most of the catalogue. On a tablet or a desktop the grid
 * keeps them in columns, where a wrapping row leaves them ragged.
 *
 * Columns of at least 14rem, tried on 8 October with all thirteen names in both
 * languages from 320 to 1920px: three across in the desktop column, two on a
 * tablet, one on a phone, and no name on more than two lines, so every row keeps
 * the badge's 48px. The 10rem tried first gave four columns on a desktop with
 * three names on three lines, and two on a phone, where 103px was left for a
 * name and "Electrodiagnósticas", one word, needs 134. One per line on a phone
 * also makes each service's link a full-width target. auto-fill rather than
 * auto-fit keeps the columns in place with one service or two, instead of
 * stretching them across the block.
 */
.location-services__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	margin-top: 0;
}

/* A name longer than any in the catalogue breaks inside its cell, not out of it. */
.location-services__list .feature-list__label {
	overflow-wrap: anywhere;
}

/* 3 · About this location
   ========================================================================== */

/*
 * The room under a heading comes from the content, not from the heading.
 *
 * "About This Location" and "Take a Look Inside" are the same component
 * (section-intro) in the same column, and one breathed while the other did not:
 * the photo grid is separated with --space-6 and the About text started flush, at
 * 0. Robert spotted it.
 *
 * And the margin goes here, on the block that comes below, because that is how
 * the rest of the theme does it — .location-gallery__grid,
 * .careers-apply__actions and .careers-life__button all carry
 * margin-top: var(--space-6) — rather than the other way round. The first attempt
 * put it on section-intro itself and reached the gallery heading too, which lives
 * in this same body: 24 + 24 = 48. A margin on the element that follows cannot be
 * inherited by descent.
 */
.location-about {
	margin-top: var(--space-6);
}

.location-about > * + * {
	margin-top: var(--space-4);
}

/*
 * Its lists are the check list a service's text shares: .entry-content--checks,
 * in main.css, on the same element.
 */

/*
 * The "Trusted on Google" banner under the text. Its wrapper is a size
 * container because the banner picks its row or its stack by the width of the
 * screen (main.css), and here it lives in the text column, 603-823px wide on a
 * desktop. As a row in the narrowest of those columns the heading broke over
 * three lines (992px screen, 603px column). So the banner takes the stacked
 * layout phones already have until the column reaches 738px. Measured on
 * 14 October 2026 from 320 to 1920px, with the button's short label and the
 * longest location names in both languages: the heading always holds one line
 * and the sentence at most two.
 *
 * The containment sits on this wrapper alone, so nothing else in the column
 * becomes a container. The banner's own top margin is dropped as a first
 * child, so the gap is set here, the one the banner has everywhere else.
 */
.location-reviews {
	container-type: inline-size;
	margin-top: var(--space-6);
}

@container (max-width: 737.98px) {
	.location-reviews .info-banner {
		grid-template-columns: none;
		justify-items: center;
		padding: var(--space-6);
		text-align: center;
	}
}

/* 4 · Hours and directions
   ========================================================================== */

.location-visit__aside {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

/*
 * The card itself comes from .card .aside-card. Only the space under the title
 * differs: aside-card sets a small one for its single line of text, and a week
 * of opening hours needs room to start.
 */
.location-visit__card .aside-card__title {
	margin-bottom: var(--space-5);
}


/*
 * The closest locations' rows are drawn as the hours' are — the same rule
 * between them and the same height — so the column reads as one set of cards.
 */
.hours,
.closest {
	margin: 0;
}

.hours__row,
.closest__row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-2);
	border-top: 1px solid var(--color-border);
}

.hours__row:first-child,
.closest__row:first-child {
	border-top: 0;
}

/*
 * The last row has no rule under it, so no space under it either: the card's
 * own padding is the bottom margin, as it is in Get Here Easily. With it, both
 * cards ended 8px lower than that one.
 */
.hours__row:last-child,
.closest__row:last-child {
	padding-bottom: 0;
}

.hours__day {
	color: var(--color-text);
}

.hours__time {
	margin: 0;
	font-weight: 600;
	color: var(--color-navy);
}

/*
 * A closed day is information, not an absence: it loses the emphasis weight and
 * nothing else. The muted grey was tried and measured 4.40:1 on this card's
 * tint — it passes on white, which is where that token is usually read, and
 * fails here. The weight alone tells the two apart.
 */
.hours__row--closed .hours__time {
	font-weight: 400;
}

/*
 * The name is the link, on the left; the distance sits on the right in the
 * text colour, not the muted grey, for the reason given above. The longest
 * pair, "Jamaica Estates" and its miles, is 211px of the 240 a 320px phone
 * leaves. Should a longer name ever arrive, the distance moves under it whole
 * rather than breaking.
 */
.closest__row {
	flex-wrap: wrap;
	row-gap: var(--space-1);
	align-items: center;
}

.closest__distance {
	color: var(--color-text);
	white-space: nowrap;
}

/*
 * The sentence, then the link under it, at every width and in both languages.
 * They used to share a row wherever they fitted, so the link's place depended
 * on the language: "Cómo Llegar" is shorter than "Get Directions", and from
 * 1321px the Spanish link sat beside the sentence while the English one sat
 * under it (Robert, 9 October 2026). Under the text is where the English one
 * already was at every desktop width.
 */
.location-visit__directions {
	display: grid;
	gap: var(--space-4);
	justify-items: start;
}

.location-visit__address {
	margin: 0 0 var(--space-3);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-navy);
}

.location-visit__text {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--color-text);
}

/* 5 · Gallery
   ========================================================================== */

/*
 * The link sits beside the heading rather than under the photographs, where the
 * design puts it: at the end of a row of five it would look like a sixth tile.
 */
.location-gallery {
	margin-top: var(--space-8);
}

.location-gallery__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	align-items: baseline;
	justify-content: space-between;
}

.location-gallery__more {
	background: none;
	border: 0;
	cursor: pointer;
}

.location-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Every photograph occupies the same tile, whatever shape it arrives in.
 *
 * Without this the tile was as tall as each file's own proportions, and one
 * portrait photograph among landscape ones stretched its whole grid row: the
 * neighbours kept their height and gained 246px of empty space underneath.
 * Found on a real location in September 2026, when a portrait shot reached the
 * gallery by mistake — which is the point. The photographs are uploaded by the
 * practice, so the screen has to survive the wrong shape rather than depend on
 * nobody ever choosing one.
 *
 * Every other component in this theme that takes an editor's photograph already
 * does this — the cards, the home tiles, About, Careers, Testimonials, the blog.
 * This file was the only one with no object-fit in it at all.
 *
 * 3:2 rather than the 0.76 the template used to reserve, because 3:2 is what the
 * grid has actually been showing: the reservation never matched what was painted,
 * so each photograph also jumped the layout as it loaded. The two now agree, and
 * they have to be changed together — the ratio in single-location.php reserves
 * the box before the file arrives, and this rule holds it afterwards.
 */
.location-gallery__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius-tile);
}

/* 6 · Wider screens
   ========================================================================== */

@media (min-width: 992px) {
	/*
	 * Three across, not the design's five: the gallery now shares a column with
	 * the location's copy rather than running the page, and five photographs in
	 * 830px would be thumbnails. The full set is a press away.
	 */
	.location-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.location-gallery__grid--dialog {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

}


/* 7 · The full gallery dialog
   ========================================================================== */

/*
 * .modal is 460px wide, which is right for the few lines of text it was built
 * for and useless for photographs. This one takes the page's own measure.
 *
 * The fixed header follows Bootstrap 5's scrollable modal rather than anything
 * invented here, because people already know how that behaves: the container is
 * a flex column that hides its own overflow (.modal-content), the header does
 * not shrink (.modal-header, flex-shrink: 0) and the body is the only thing
 * that scrolls (.modal-body, flex: 1 1 auto + overflow-y: auto).
 *
 * The first attempt made the dialog itself the scroller with a sticky header.
 * It worked, but the scrollbar ran the whole height of the modal and the
 * photographs slid under a floating strip — neither is what a modal does
 * anywhere else, and the point of a dialog is that it needs no learning.
 */
.modal--gallery {
	display: flex;
	flex-direction: column;
	width: min(100% - 2rem, var(--container-max));
	max-height: min(90vh, 900px);
	overflow: hidden;
}

/*
 * Required, and easy to miss: display: flex above is an author rule and beats
 * the user agent's `dialog:not([open]) { display: none }`, so without this the
 * gallery would be on the page before anyone pressed anything.
 */
.modal--gallery:not([open]) {
	display: none;
}

.modal--gallery .modal__head {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-6) var(--space-8);
	border-bottom: 1px solid var(--color-border);
}

.modal--gallery .modal__body {
	flex: 1 1 auto;
	justify-items: stretch;
	overflow-y: auto;
	/* The page behind does not start scrolling when the gallery reaches its end. */
	overscroll-behavior: contain;
}

/*
 * Drawn inside its own edge and rounded, so it reads as "this area scrolls".
 * The default ring traces the body's rectangle, whose top edge lands exactly on
 * the header's separator — which looks like the line itself being selected
 * rather than a region being focused.
 */
.modal--gallery .modal__body:focus-visible {
	outline-offset: -5px;
	border-radius: var(--radius-sm);
}

/*
 * Lazy images inside a closed <dialog> do not start downloading until it opens,
 * so the first moment after pressing the button is a set of blank frames. The
 * space is already reserved by the width/height attributes; this only makes
 * that moment a tinted placeholder instead of white. Loading them eagerly would
 * remove the flash by downloading every photograph for each visitor who never
 * presses the button.
 */
.modal--gallery .location-gallery__item {
	overflow: hidden;
	background: var(--color-surface-chip);
	border-radius: var(--radius-tile);
}

.modal--gallery .location-gallery__grid {
	margin-top: 0;
}


/*
 * The two cards end level, and the slack goes to the map rather than to empty
 * tint: a week of opening hours is taller than two lines and a button, so the
 * directions card has height to spare and more map is the useful thing to do
 * with it. min-height is what it falls back to when the row is short, or when
 * the map never draws and the column has nothing to stretch.
 */
/* 8 · The location's map
   ========================================================================== */

/*
 * The space is the map's from the first paint, transparent until the map has
 * painted and then faded in, so the card never grows under the reader. Only
 * with scripts on (the `js` class is set in the head, before paint): without
 * them no map can draw, and there is no gap to explain. If the map cannot draw,
 * the script sets [hidden] and the space closes.
 */
.location-visit__map {
	display: none;
	height: 200px;
	margin-bottom: var(--space-5);
	overflow: hidden;
	background: var(--color-surface-chip);
	border-radius: var(--radius-tile);
	opacity: 0;
	transition: opacity var(--transition);
}

.js .location-visit__map {
	display: block;
}

.location-visit__map.is-ready {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.location-visit__map {
		transition: none;
	}
}