/* facilities_grid block.
   Thumbnail strip; click-to-expand modal (see facilities_grid.php + its inline
   JS). Strip CSS ported from design-export/base.css; no literal colour, every
   value a token. Responsive: 6-up desktop, 4-up laptop band (css/responsive.css
   §3B), 3-up below 64em.

   The MODAL has no design-export treatment: design-export/base.css defines
   .facilities-grid__strip, .facility-thumb and .facility-thumb__label and
   nothing else, and no modal, dialog or overlay component exists anywhere in
   the export or the theme. It is therefore built from the design system's own
   primitives, with each choice named in-line below. */

/* Header / footer around the thumbnail strip (eyebrow now uses the shared
   .eyebrow class). These were unstyled, so the strip sat flush against the intro
   and footer. */
.facilities-grid__header { margin-bottom: 1.6rem; }
.facilities-grid__header--center { text-align: center; }
.facilities-grid__title { margin-bottom: .5rem; }
.facilities-grid__intro { color: var(--muted); max-width: 62ch; }
.facilities-grid__header--center .facilities-grid__intro { margin-inline: auto; }
.facilities-grid__footer { margin-top: 1.3rem; font-size: var(--fs-min); color: var(--muted); }

.facilities-grid__strip { display: grid; gap: .7rem; grid-template-columns: repeat(6, 1fr); }
/* The `columns` field (3, 4 or 6) emits __strip--N, which nothing consumed, so
   every strip painted 6 across whatever the editor chose. Column counts
   extracted from sites/dc/dc-child/style.css L13480-13488. */
.facilities-grid__strip--3 { grid-template-columns: repeat(3, 1fr); }
.facilities-grid__strip--4 { grid-template-columns: repeat(4, 1fr); }
.facilities-grid__strip--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 64em) {
  .facilities-grid__strip,
  .facilities-grid__strip--4,
  .facilities-grid__strip--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 40em) {
  .facilities-grid__strip,
  .facilities-grid__strip--3,
  .facilities-grid__strip--4,
  .facilities-grid__strip--6 { grid-template-columns: repeat(2, 1fr); }
}

.facility-thumb { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); text-decoration: none; border: 0; padding: 0; cursor: pointer; width: 100%; }
.facility-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility-thumb__label { position: absolute; inset: auto 0 0 0; background: rgba(var(--tint-rgb), .82); color: var(--white); font-size: var(--fs-min); font-weight: 700; padding: .5rem .7rem; }

/* Expand affordance: a small badge top-right, not the raw viewBox-sized SVG
   (which rendered ~40px black over the image). Signals click-to-expand. */
.facility-thumb__expand { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--tint-rgb), .82); color: var(--white); opacity: 0; transition: opacity var(--transition); }
.facility-thumb__expand svg { width: 15px; height: 15px; }
.facility-thumb:hover .facility-thumb__expand,
.facility-thumb:focus-visible .facility-thumb__expand { opacity: 1; }

/* ============================== MODAL ==================================== */

/* The overlay is toggled by the block's inline JS through the `hidden`
   attribute. `display: flex` on the open state out-specifies the UA's
   `[hidden] { display: none }`, so the panel would be visible over every page
   the block appears on. This is the identical fault fixed on the links block in
   Stage 6 (stage6-fix-log §11); the [hidden] reset is load-bearing, not tidy. */
.facilities-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  /* Scrim on the established rgba(var(--token-rgb), a) overlay pattern
     (decisions.md §8). --tint-rgb is the theme's scrim channel and is
     per-brand, so the scrim darkens in each brand's own key. */
  background: rgba(var(--tint-rgb), .72);
  overflow-y: auto;
  animation: fg-modal-in var(--transition) var(--ease-out);
}
.facilities-modal-overlay[hidden] { display: none; }

/* Floating UI, so it earns a shadow: the design reserves elevation for
   dropdowns, modals and the lightbox and keeps every resting surface flat
   (phase-3-prototype-summary.md §2, move 2). --radius-md rather than the card's
   --radius-sm because this is a large floating panel, not a tile. */
.facilities-modal {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(100%, 62rem);
  max-height: 90vh;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fg-modal-panel-in var(--transition) var(--ease-out);
}

/* Close sits over the image, so it cannot inherit a page ground. A solid tinted
   disc gives it a predictable dark ground on any photograph, which is the same
   correction the carousel dots took (kitchen-sink-visual-audit §3.3). 40x40
   clears the WCAG 2.2 24x24 target size with margin. No focus colour is set
   here: the global two-tone :focus-visible ring carries both light and dark
   grounds, and per-component focus colours were removed theme-wide in pass 4
   (kitchen-sink-visual-audit §3c.3). */
.facilities-modal__close {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(var(--tint-rgb), .88); color: var(--white);
  cursor: pointer;
  transition: background var(--transition);
}
.facilities-modal__close:hover { background: var(--navy); }
.facilities-modal__close svg { width: 18px; height: 18px; }

.facilities-modal__image {
  background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px);
  min-height: 100%;
}
.facilities-modal__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.facilities-modal__content {
  display: flex; flex-direction: column; gap: .9rem;
  padding: var(--pad-panel);
  overflow-y: auto;
}

/* The tag reuses the .tag pair rather than inventing a fill/label combination.
   --btn-accent-bg / --btn-accent-text is a pairing every child defines and that
   was proven to hold at AA when two mispaired accent combinations were fixed
   (kitchen-sink-visual-audit §3b.4). The markup emits __tag, not .tag, and the
   markup is not being changed here. Empty when the facility has no tag, so it
   collapses rather than painting an empty pill. */
.facilities-modal__tag:empty { display: none; }
.facilities-modal__tag {
  align-self: flex-start;
  padding: .2rem .8rem;
  font-size: var(--fs-min); font-weight: 800;
  color: var(--btn-accent-text); background: var(--btn-accent-bg);
  border-radius: var(--radius-pill);
}

.facilities-modal__title { margin: 0; font-size: 1.75rem; }

/* Facts are injected by the block's JS, so a static class scan reports these
   three as unmatched markup. They are not orphans; do not delete. */
.facilities-modal__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
  margin-top: .4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.facilities-modal__facts:empty { display: none; border-top: 0; padding-top: 0; }
.facilities-modal__fact-number {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 2rem; line-height: 1.05;
  color: var(--text-heading);
  /* Tabular figures on statistics, per the design's craft details. */
  font-variant-numeric: tabular-nums;
}
.facilities-modal__fact-text { font-size: var(--fs-min); color: var(--muted); }

/* The CTA carries `.btn .btn--primary` in the markup and takes its whole
   treatment (pill, palette, hover, icon sizing) from components/buttons.css.
   Only placement belongs here.

   It must keep `.btn`: bridge.css's light-panel protection re-colours
   `a:not(.button):not(.btn)` inside a panel, which repainted the label onto its
   own dark fill at 1.08-1.60:1 across all six brands while this block styled the
   CTA by hand. Measured, not assumed. */
.facilities-modal__cta { align-self: flex-start; margin-top: auto; }

/* Both keyframes are neutralised by the global prefers-reduced-motion reset in
   base.css (animation-duration: .001ms !important), so no per-selector reset is
   needed here. */
@keyframes fg-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fg-modal-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 40em) {
  .facilities-modal-overlay { padding: .75rem; align-items: flex-start; }
  .facilities-modal { grid-template-columns: 1fr; max-height: 94vh; }
  .facilities-modal__image { aspect-ratio: 16 / 9; min-height: 0; }
  .facilities-modal__facts { grid-template-columns: 1fr; gap: .8rem; }
}