/* Location single + archive — scoped tweaks. Info cards, map, amenities live in
   assets/css/base.css and re-skin via the archetype.

   ⚠ FLEET-SHARED ENGINE CSS — ships inside the suds-digital-website-builder plugin and
   is byte-identical on EVERY site. Editing it to style ONE client restyles the whole
   fleet. A per-client look is a KNOB or a brand TOKEN, never a rule here:
     wp suds map                                 # what a section exposes
     wp suds field-set <section> tone dark       # dark band on a section
     wp suds field-set design texture_mode dots  # site-wide band texture
   The thin client theme's style.css loads BEFORE this file, so it can only supply
   :root tokens — it can never override these rules. Editing here is a CANONICAL engine
   change: run ./scripts/verify-parity.sh and re-review on the Section Review Board. */
#suds-location-hero { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---- Gallery (Fancybox lightbox) ---- column count set per location via
   the data-cols attribute; capped down on smaller viewports. ---- */
.suds-gallery { display: grid; gap: clamp(.5rem, 1.1vw, 1rem); grid-template-columns: repeat(3, 1fr); }
.suds-gallery[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.suds-gallery[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.suds-gallery[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.suds-gallery[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.suds-gallery[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 991.98px) {
	.suds-gallery[data-cols="4"],
	.suds-gallery[data-cols="5"],
	.suds-gallery[data-cols="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) { .suds-gallery { grid-template-columns: repeat(2, 1fr) !important; } }

.suds-gallery-item { display: block; overflow: hidden; border-radius: var(--suds-radius, 14px); aspect-ratio: 4 / 3; background: var(--suds-surface); cursor: zoom-in; }
.suds-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--suds-ease, ease); }
/* Preview-only placeholder tiles (section-preview route): match the gallery tile
   shape so the striped .suds-ph frame reads as a real gallery slot, not a tall box. */
.suds-gallery > .suds-ph { aspect-ratio: 4 / 3; min-height: 0; }
.suds-gallery-item:hover img { transform: scale(1.06); }
.suds-gallery-item:focus-visible { outline: 2px solid var(--suds-primary); outline-offset: 2px; }

/* Location Hours card rows: the shared .suds-hours-row border (tuned for the
   dark footer, --suds-bg mix) reads as heavy boxes on this light infocard —
   the t2 "thick borders around the hours" defect. Clean rows here: no box, one
   hairline divider between consecutive rows (none above the first / below the last). */
#suds-location-info .suds-infocard .suds-hours-row { border: 0; }
#suds-location-info .suds-infocard .suds-hours-row + .suds-hours-row { border-top: 1px solid color-mix(in srgb, var(--suds-ink) 10%, transparent); }

/* ---- Location info: intentional, well-separated blocks ------------------
   The section splits into an "at a glance" fact row, the Store-features amenity
   grid, and a "Plan your visit" hours+map block. Each block owns its heading and
   spacing so the page reads as a considered location page, not a card dump. */

/* At-a-glance quick facts — count-adaptive equal cards. */
#suds-location-info .suds-loc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--suds-gap); }
#suds-location-info .suds-loc-fact { display: flex; gap: 1rem; align-items: center; padding: var(--suds-card-pad); background: var(--suds-card-bg); border: var(--suds-card-border); border-radius: var(--suds-radius); box-shadow: var(--suds-card-shadow); }
#suds-location-info .suds-loc-fact .ic { flex: none; width: 46px; height: 46px; border-radius: var(--suds-icon-radius); display: grid; place-items: center; background: var(--suds-icon-bg); color: var(--suds-icon-fg); font-size: 1.25rem; }
#suds-location-info .suds-loc-fact-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
#suds-location-info .suds-loc-fact-t .k { font-family: var(--suds-font-header); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--suds-muted); }
#suds-location-info .suds-loc-fact-t .v { font-family: var(--suds-font-header); font-weight: 700; font-size: 1.02rem; color: var(--suds-ink); line-height: 1.2; }

/* Block separation — generous, deliberate spacing between the sub-sections. */
#suds-location-info .suds-loc-facts + *,
#suds-location-info .suds-loc-prose + *,
#suds-location-info .suds-loc-block + .suds-loc-block { margin-top: clamp(2.75rem, 5.5vw, 4.75rem); }
#suds-location-info .suds-loc-block > .suds-section-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); }

/* Plan your visit — hours panel beside the map. */
#suds-location-info .suds-loc-visit { display: grid; grid-template-columns: minmax(0, 21rem) 1fr; gap: var(--suds-gap); align-items: stretch; }
@media (max-width: 780px) { #suds-location-info .suds-loc-visit { grid-template-columns: 1fr; } }
#suds-location-info .suds-loc-hours { display: flex; flex-direction: column; }
#suds-location-info .suds-loc-hours .suds-hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
#suds-location-info .suds-loc-hours-cta { margin-top: auto; padding-top: 1rem; }
#suds-location-info .suds-loc-visit .suds-map { height: 100%; }
#suds-location-info .suds-loc-visit .suds-map iframe { height: 100%; min-height: 340px; }