/* ============================================================================
   Hobart Synagogue — shared.css
   Mobile-first. Breakpoints: 640px (sm), 900px (md), 1180px (lg).

   NO ANIMATION. This is an explicit client requirement (design system
   readme: "Animation: none, by explicit request. No fades, no bounce, no
   scroll-reveal. Only an instant colour swap on hover/press.") Do not add
   `transition`, `animation`, `transform` on interaction states, or
   `scroll-behavior: smooth` anywhere in this file. The component prototypes
   in the design system JSX include a `transition` on Button — that is not
   carried over here; it is a documented deviation from the prototype in
   favour of the written brand rule, which takes precedence.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a {
  color: var(--link);
}
a:hover { color: var(--link-hover); }

/* Focus is the only state-change signal we get without animation — keep it visible everywhere. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: var(--lh-tight);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

/* Prevents a single unbroken token (email address, long place name) from
   forcing horizontal scroll at 320px — a common reflow failure on this
   kind of content-heavy page. */
.measure, .measure--narrow, p, li, dd {
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------------------
   Fluid scale. tokens.css values are preserved as the clamp CEILING — desktop
   (≥1180px, where the clamp's vw term maxes out) renders at exactly the
   design system's specified sizes. Below that, type and section spacing
   scale down smoothly. The design system specifies no mobile scale at all,
   so this is originated, not translated.

   Body sizes (--fs-body, --fs-body-sm, --fs-h4, --fs-caption) are
   deliberately left unchanged from tokens.css at every viewport — the
   congregation's audience skews older and body text must not shrink.
---------------------------------------------------------------------------- */
:root {
  --fs-h1:      clamp(2.125rem, 1.2rem + 4.6vw, 3.75rem);   /* 34px → 60px */
  --fs-h2:      clamp(1.75rem,  1.2rem + 2.8vw, 2.5rem);    /* 28px → 40px */
  --fs-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 1.625rem); /* 22px → 26px */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17px → 19px */

  --gutter:    clamp(20px, 4vw, 32px);   /* page/section side padding */
  --section-y: clamp(48px, 8vw, 96px);   /* replaces flat --space-24 vertical rhythm */
}

/* ----------------------------------------------------------------------------
   Layout primitives
---------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--sunken  { background: var(--surface-sunken); }
.section--inverse { background: var(--navy-900); color: var(--text-inverse); }
.section--inverse a { color: var(--text-inverse); }
.section--inverse p { color: var(--text-inverse-muted); }
.section--tight-top    { padding-top: var(--space-8); }
.section--no-top       { padding-top: 0; }
.section--no-bottom    { padding-bottom: 0; }

.measure         { max-width: 68ch; }
.measure--narrow { max-width: 56ch; }

.stack   { display: flex; flex-direction: column; }
.center-text { text-align: center; }

/* ----------------------------------------------------------------------------
   Buttons  (core/Button.jsx)
   Hover = one-step-darker colour swap held on press too. No transform, no transition.
---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: var(--fs-body);
  padding: 12px 22px;
  min-height: 48px; /* touch target */
}
.btn:hover { text-decoration: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--sm { font-size: var(--fs-body-sm); padding: 8px 16px; min-height: 44px; }
.btn--lg { font-size: var(--fs-body-lg); padding: 15px 28px; }

.btn--primary  { background: var(--navy-900); color: var(--text-inverse); border-color: var(--navy-900); }
.btn--primary:hover, .btn--primary:focus-visible, .btn--primary:active { background: var(--navy-700); color: var(--text-inverse); }

.btn--accent  { background: var(--accent); color: var(--text-on-brass); border-color: var(--accent); }
.btn--accent:hover, .btn--accent:focus-visible, .btn--accent:active { background: var(--accent-hover); color: var(--text-on-brass); }

.btn--outline  { background: transparent; color: var(--navy-900); border-color: var(--navy-700); }
.btn--outline:hover, .btn--outline:focus-visible, .btn--outline:active { background: var(--navy-900); color: var(--text-inverse); }

.btn--ghost  { background: transparent; color: var(--navy-900); border-color: transparent; }
.btn--ghost:hover, .btn--ghost:focus-visible, .btn--ghost:active { background: var(--stone-100); }

.btn--outline-inverse  { background: transparent; color: var(--text-inverse); border-color: var(--border-on-inverse); }
.btn--outline-inverse:hover, .btn--outline-inverse:focus-visible, .btn--outline-inverse:active { background: rgba(244,238,224,0.1); }

/* Mobile CTA rule: stacked, full width up to a comfortable cap — never edge to edge. */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
@media (max-width: 639px) {
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; max-width: 320px; }
}

/* ----------------------------------------------------------------------------
   Badge  (core/Badge.jsx) — used for Orthodox / Progressive stream labels
---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--brass-300);
  color: var(--text-primary);
}
.badge--navy    { background: var(--navy-800); color: var(--text-inverse); }
.badge--outline { background: transparent; color: var(--navy-700); border: 1px solid var(--border-subtle); }

/* ----------------------------------------------------------------------------
   Card  (core/Card.jsx)
---------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.card__image {
  aspect-ratio: 16 / 10;
  background: var(--stone-200);
  overflow: hidden;
}
.card__image img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent-hover);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.card__text {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

/* ----------------------------------------------------------------------------
   Site header / navigation  (navigation/NavBar.jsx — no mobile spec in source)

   Two structurally different layouts, swapped at `md` (900px) via CSS only:
   - < 900px: compact header + toggle button revealing a full-width drawer
     with dropdown groups rendered FULLY EXPANDED (no nested disclosure).
   - >= 900px: horizontal bar with hover/focus dropdown panels.
   nav.js supplies the interaction (aria-expanded, focus trap, Esc, arrows);
   this file supplies the show/hide, which is a plain display swap — never
   a height/opacity transition.
---------------------------------------------------------------------------- */
.site-header {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
@media (min-width: 900px) {
  .site-header__inner { height: 88px; }
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.site-header__logo svg { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
.site-header__logo .logo-full  { display: none; }
.site-header__logo .logo-short { display: inline; }
@media (min-width: 400px) {
  .site-header__logo { font-size: 1.2rem; }
  .site-header__logo .logo-full  { display: inline; }
  .site-header__logo .logo-short { display: none; }
}
@media (min-width: 900px) {
  .site-header__logo { font-size: 1.3rem; }
}

/* --- Mobile toggle (< 900px) --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  cursor: pointer;
  color: var(--text-primary);
}
.nav-toggle:hover, .nav-toggle:focus-visible, .nav-toggle[aria-expanded="true"] {
  background: var(--stone-100);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

/* --- Drawer (< 900px) --- */
.nav__drawer {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--surface-page);
  z-index: 49;
  overflow-y: auto;
  max-height: calc(100dvh - 64px);
  border-top: 1px solid var(--border-subtle);
}
.nav__drawer[data-open="true"] { display: block; }

.nav__drawer-list {
  list-style: none;
  padding: var(--space-4) var(--gutter) var(--space-8);
  display: flex;
  flex-direction: column;
}
.nav__drawer-link {
  display: block;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  min-height: 44px;
  border-bottom: 1px solid var(--border-subtle);
}
.nav__drawer-group-label {
  padding: 14px 0 4px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav__drawer-child {
  display: block;
  padding: 12px 0 12px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  text-decoration: none;
  min-height: 44px;
  border-bottom: 1px solid var(--border-subtle);
}
.nav__drawer-donate {
  margin-top: var(--space-6);
}
.nav__drawer-donate .btn { width: 100%; }

/* --- Desktop bar (>= 900px) --- */
.nav {
  display: none;
}
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
}
/* The 900px floor is the tightest fit for logo + 5 nav items + Donate button —
   the wider gap only fits once the container reaches its max width. */
@media (min-width: 1180px) {
  .nav { gap: var(--space-8); }
}

.nav__item { position: relative; flex-shrink: 0; }

.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  padding: 8px 0;
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--accent-hover); }
.nav__caret { font-size: 10px; color: var(--text-muted); }

.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) 0;
  z-index: 25;
}
.nav__dropdown[data-open="true"] { display: block; }

.nav__dropdown-link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  text-decoration: none;
  padding: 10px var(--space-4);
  min-height: 44px;
}
.nav__dropdown-link:hover, .nav__dropdown-link:focus-visible { background: var(--stone-100); color: var(--accent-hover); }

.nav__donate {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  padding: 10px 20px;
  background: var(--accent);
  color: var(--text-on-brass);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav__donate:hover, .nav__donate:focus-visible { background: var(--accent-hover); color: var(--text-on-brass); }

/* ----------------------------------------------------------------------------
   Footer  (navigation/Footer.jsx)
---------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: var(--text-inverse);
  padding: var(--section-y) var(--gutter) var(--space-10);
}
.site-footer__inner { max-width: var(--container-max); margin: 0 auto; }

.site-footer__about { margin-bottom: var(--space-10); }
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.site-footer__brand svg { width: 20px; height: 20px; }
.site-footer__about p {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-inverse-muted);
  max-width: 380px;
  line-height: var(--lh-relaxed);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-12); }
}

.site-footer__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-inverse-muted);
  margin-bottom: var(--space-3);
}
.site-footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__links a {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-inverse);
  text-decoration: none;
  line-height: var(--lh-relaxed);
}
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--brass-300); }

.site-footer__contact-value {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-inverse);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}
.site-footer__contact-value:last-child { margin-bottom: 0; }
.site-footer__contact-value a { color: var(--text-inverse); }

.site-footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-on-inverse);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-inverse-muted);
}

/* ----------------------------------------------------------------------------
   Hero  (layout/Hero.jsx)
   Fluid min-height rather than the prototype's fixed pixel heights.
   Scrim strengthens on mobile — see the two-stop gradients below.
   Art-directed crops: two <source> media queries, one per crop family.
---------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: var(--navy-900);
  min-height: clamp(420px, 76dvh, 620px);
}
.hero--short { min-height: clamp(240px, 40dvh, 360px); }

@media (orientation: landscape) and (max-height: 520px) {
  .hero        { min-height: 88dvh; }
  .hero--short { min-height: 60dvh; }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Desktop-strength scrim: text sits over the darker lower-left. */
  background: linear-gradient(0deg, rgba(18,25,42,0.66), rgba(18,25,42,0.10));
}
@media (max-width: 899px) {
  .hero__scrim {
    /* Mobile crop is tighter and centred — the whole frame needs more
       coverage to hold 4.5:1 contrast for --text-inverse. Verify per-photo;
       facade-exterior.jpg (bright sandstone) is the worst case. */
    background: linear-gradient(0deg, rgba(18,25,42,0.78), rgba(18,25,42,0.30));
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--gutter) var(--space-16);
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--brass-300);
  margin-bottom: var(--space-4);
  font-weight: var(--fw-semibold);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--text-inverse);
  margin: 0 0 var(--space-4);
  max-width: 30ch;
}
@media (min-width: 900px) {
  .hero__title { max-width: 52ch; }
}
.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  color: var(--text-inverse-muted);
  max-width: 42ch;
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-8);
}
.hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 639px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; max-width: 320px; }
}

/* Plain navy header — used only on the funeral guide page, where a
   photographic hero is inappropriate. Documented, deliberate departure
   from the every-page-hero rule (plan §3, page 11). */
.hero--plain {
  background: var(--navy-900);
  display: block;
  padding: var(--space-16) 0 var(--space-12);
}
.hero--plain .hero__inner { padding: 0 var(--gutter); position: static; }
.hero--plain .motif { width: 64px; height: auto; margin-bottom: var(--space-6); color: var(--brass-300); }

/* ----------------------------------------------------------------------------
   Section heading  (layout/SectionHeading.jsx)
---------------------------------------------------------------------------- */
.section-heading { margin-bottom: var(--space-8); }
.section-heading--center { text-align: center; }
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--accent-hover);
  margin-bottom: var(--space-3);
}
.section-heading--on-dark .eyebrow { color: var(--brass-300); }
.section-heading__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.section-heading--on-dark .section-heading__title { color: var(--text-inverse); }

/* ----------------------------------------------------------------------------
   Service block — replaces content/EventCard.jsx. No dates: per decision
   (no events system), this renders the STATIC weekly pattern only.
---------------------------------------------------------------------------- */
.service-block {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.service-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.service-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.service-block dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-4);
}
.service-block dt {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}
.service-block dd {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
@media (min-width: 640px) {
  .service-block dl { grid-template-columns: 1fr 1fr; align-items: baseline; }
  .service-block dt { grid-column: 1; }
  .service-block dd { grid-column: 2; margin-bottom: 0; padding-bottom: var(--space-2); }
}

/* ----------------------------------------------------------------------------
   Accordion  (content/Accordion.jsx) — native <details>/<summary>.
   No JS, no animation by nature, keyboard/screen-reader support is free.
---------------------------------------------------------------------------- */
.accordion-item {
  border-bottom: 1px solid var(--border-subtle);
}
.accordion-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  min-height: 44px;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--accent-hover);
  flex-shrink: 0;
}
.accordion-item[open] summary::after { content: '\2212'; }
.accordion-item summary:hover, .accordion-item summary:focus-visible { color: var(--accent-hover); }
.accordion-panel {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  padding-bottom: var(--space-5);
  max-width: 68ch;
}

/* ----------------------------------------------------------------------------
   Grid collapse ladder (plan §6.5) — 3-up cards, 2-up image+text, gallery
---------------------------------------------------------------------------- */
.grid-3up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px)  { .grid-3up { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3up { grid-template-columns: repeat(3, 1fr); } }

.grid-2up {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .grid-2up { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
/* Per-instance stacking order — set explicitly per page, not globally.
   Home's image+text section: image leads (the hook). Use .grid-2up on its own. */
.grid-2up--media-first .grid-2up__media { order: -1; }
/* About / Our Congregation: heading must lead — text stacks above image below md. */
.grid-2up--text-first .grid-2up__media { order: 1; }
@media (min-width: 900px) {
  .grid-2up--media-first .grid-2up__media,
  .grid-2up--text-first .grid-2up__media { order: 0; }
}
.grid-2up__media img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-md); }
@media (max-width: 639px) { .grid-2up__media img { height: 240px; } }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.gallery-grid__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  padding: 0;
  background: none;
}
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; }

.footer-link-grid-note { /* kept intentionally simple: see .site-footer__grid above */ }

/* ----------------------------------------------------------------------------
   Forms — contact/tour/membership. Inputs sized to avoid iOS zoom-on-focus
   (16px minimum; 17px = --fs-body used throughout) and 44px+ touch targets.
---------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field--full { grid-column: 1 / -1; }

.form-field label,
.form-field__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body); /* 17px — never smaller, prevents iOS zoom-on-focus */
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  width: 100%;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--focus-ring);
}

.form-hint {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.form-error {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: #B33A3A;
}

.yesno { display: flex; flex-direction: column; gap: 8px; }
.yesno__label { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-primary); }
.yesno__options { display: flex; gap: var(--space-5); }
.yesno__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  min-height: 44px;
}
.yesno__option input { width: 22px; height: 22px; accent-color: var(--accent-hover); }

.section-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
@media (min-width: 640px) { .section-card { padding: var(--space-8); } }
.section-card + .section-card { margin-top: var(--space-6); }
.section-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
}

/* Repeatable rows (children, yahrzeit dates) — one column always,
   each row is its own bordered card with a Remove control. */
.repeat-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.repeat-row__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.repeat-row__remove {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: #B33A3A;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--space-2);
}

/* Upload zone — a real file input styled as a large dashed block;
   drag-drop is a layered enhancement, never the only route. */
.dropzone {
  border: 2px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--surface-sunken);
}
.dropzone[data-dragover="true"] { border-color: var(--accent); }
.dropzone input[type="file"] {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}
.dropzone__list {
  list-style: none;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}
.dropzone__file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.dropzone__file-remove {
  background: none;
  border: none;
  color: #B33A3A;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

/* Multi-step wizard (membership application) */
.wizard__steps {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
@media (min-width: 640px) { .wizard__steps { display: flex; } }
.wizard__step-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.wizard__step-label[data-current="true"] { color: var(--accent-hover); font-weight: var(--fw-semibold); }

.wizard__progress-text {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.wizard__bar {
  height: 4px;
  background: var(--stone-200);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-8);
  overflow: hidden;
}
.wizard__bar-fill {
  height: 100%;
  background: var(--accent);
  /* Width set inline per step by membership.js — a static value, not a transition. */
}

.wizard__nav {
  position: sticky;
  bottom: 0;
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.wizard__nav .btn { flex: 1; }
@media (min-width: 640px) { .wizard__nav .btn { flex: 0 0 auto; } }

/* ----------------------------------------------------------------------------
   Lightbox (js/lightbox.js) — photo gallery only. Originated for this build:
   the plan referenced porting mrflathead's lightbox.js, but that file lives
   in a different repo not present here, so this is a fresh implementation
   against the same brand constraints (no animation — a plain display swap).
---------------------------------------------------------------------------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(18, 25, 42, 0.92);
}
.lightbox[data-open="true"] { display: flex; }
.lightbox__figure {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.lightbox__img {
  max-width: min(1200px, 90vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
}
.lightbox__caption {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-inverse-muted);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-on-inverse);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-inverse);
  cursor: pointer;
}
.lightbox__close:hover, .lightbox__close:focus-visible,
.lightbox__prev:hover, .lightbox__prev:focus-visible,
.lightbox__next:hover, .lightbox__next:focus-visible {
  background: rgba(244, 238, 224, 0.1);
}
.lightbox__close { top: var(--space-5); right: var(--space-5); }
.lightbox__prev { left: var(--space-5); top: 50%; margin-top: -24px; }
.lightbox__next { right: var(--space-5); top: 50%; margin-top: -24px; }
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 20px; height: 20px; }
@media (max-width: 639px) {
  .lightbox__prev, .lightbox__next { width: 44px; height: 44px; }
  .lightbox__prev { left: var(--space-2); }
  .lightbox__next { right: var(--space-2); }
}

/* ----------------------------------------------------------------------------
   Utility
---------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--navy-900);
  color: var(--text-inverse);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }