/* Layout and components. Visual tokens/primitives come from theme.css (load it first). */

/* Hidden until translations are applied (i18n.js removes it, with a timeout fallback) */
.i18n-loading body { visibility: hidden; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.75; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-light); }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 400; }
p { margin: 0 0 0.9em; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 16px; }
.section { padding-block: 56px; position: relative; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.he { font-family: var(--font-verse); }
[lang="he"] .he, .he[lang="he"] { direction: rtl; }

/* Section title in the brochure style: small gold line on top, huge gold display below */
.title-block { text-align: center; margin-bottom: 28px; }
.title-block .kicker { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 2.2rem); }
.title-block .title { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 12vw, 5.2rem); line-height: 1; }
.title-block .title + .title { margin-top: 0.05em; }
/* One-line section title, scaled to fit the width instead of wrapping */
.title-block .title--line { font-size: clamp(1rem, 4.6vw, 3.4rem); line-height: 1.2; white-space: nowrap; }
/* Translations are longer than the Hebrew: let them wrap rather than overflow */
html:not([lang="he"]) .title-block .title--line { white-space: normal; font-size: clamp(1.6rem, 6vw, 3rem); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(8, 22, 64, 0.97), rgba(13, 34, 89, 0.94));
  border-bottom: 2px solid var(--gold-dark);
  box-shadow: 0 2px 12px rgba(3, 10, 35, 0.5);
}
.site-header .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 12px; min-height: 60px; padding-block: 6px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand img { width: 64px; height: auto; }
.brand span { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.1; }
.brand small { display: block; font-family: var(--font-body); font-size: 0.75rem; color: var(--ink-on-blue-soft); }
.nav { display: flex; gap: 4px; }
.nav a {
  text-decoration: none; color: #fff; font-weight: 600; font-size: 0.95rem;
  padding: 6px 12px; border-radius: 999px;
}
.nav a[aria-current="page"] { color: var(--ink-navy); background: var(--gold-gradient); }
.lang-switch {
  display: flex; gap: 2px; width: 100%; justify-content: flex-end;
  border-top: 1px solid rgba(201, 162, 74, 0.35); padding-top: 4px;
}
.lang-switch a {
  text-decoration: none; color: var(--ink-on-blue-soft); font-size: 0.85rem; font-weight: 500;
  padding: 3px 8px; border-radius: 6px; min-width: 36px; text-align: center;
}
.lang-switch a[aria-current="true"] { color: var(--gold-light); font-weight: 800; background: rgba(246, 220, 143, 0.12); }
/* Below desktop: keep the header to one compact row (phones show the logo without the name) */
@media (max-width: 959px) {
  .site-header .container { flex-wrap: nowrap; gap: 6px; min-height: 0; padding-block: 4px; }
  .nav { margin-inline-start: auto; gap: 2px; }
  .nav a { font-size: 0.85rem; padding: 5px 9px; white-space: nowrap; }
  .lang-switch { width: auto; border-top: 0; padding-top: 0; gap: 0; }
  .lang-switch a { font-size: 0.75rem; padding: 3px 4px; min-width: 26px; }
}
@media (max-width: 639px) {
  .site-header .container { padding-inline: 10px; }
  .brand img { width: 52px; }
  .brand > span { display: none; }
}
@media (max-width: 359px) {
  .nav a { font-size: 0.8rem; padding: 4px 7px; }
  .lang-switch a { min-width: 22px; padding: 3px 2px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--ink-navy); background: #f3c9a0; }
.hero-art { position: relative; aspect-ratio: 1 / 1; max-height: 92svh; width: 100%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero-text {
  position: absolute; inset: 0 0 auto 0; padding: 24px 16px 0;
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px;
  max-width: var(--max); margin-inline: auto;
}
/* Top corner on the title side, as on the brochure cover */
.hero-text .bsd { position: absolute; top: 6px; inset-inline-start: 16px; font-size: 0.75rem; font-weight: 600; line-height: 1; }
.hero h1 {
  font-family: var(--font-display); color: var(--royal-900);
  font-size: clamp(3.4rem, 17vw, 9rem); line-height: 0.9;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}
.hero h1 span { display: block; }
html:not([lang="he"]) .hero h1 { font-size: clamp(2.2rem, 10vw, 6rem); line-height: 1; }
.hero .org {
  border-inline-start: 2px solid var(--gold-dark); padding-inline-start: 10px; margin-top: 8px;
  color: var(--royal-900);
}
.hero .org .tagline { font-size: clamp(0.7rem, 2.6vw, 0.95rem); font-weight: 700; margin: 0; }
.hero .org .name { font-family: var(--font-display); font-size: clamp(1.25rem, 5.5vw, 2.6rem); line-height: 1; margin: 0.1em 0; }
.hero .org .place { font-size: clamp(0.75rem, 2.8vw, 1rem); font-weight: 700; margin: 0; }
.hero-strip { height: 14px; background: linear-gradient(180deg, #e8cd6f, #b8932f 60%, #e8cd6f); }



/* "המצב כעת" → "הדמיה": two panels (outside + inside each) joined by a gold arrow */
.compare { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
.compare-panel {
  position: relative; padding: 26px clamp(14px, 3vw, 28px) 30px;
  border: 1px solid rgba(201, 162, 74, 0.55); box-shadow: var(--shadow-deep);
}
.compare-panel--now { background: linear-gradient(180deg, rgba(8, 22, 64, 0.75), rgba(13, 34, 89, 0.55)); }
.compare-panel--render {
  background: linear-gradient(180deg, rgba(246, 220, 143, 0.16), rgba(13, 34, 89, 0.5));
  border-color: var(--gold-dark);
}
.compare-title {
  display: table; margin: -46px auto 22px; padding: 0.3em 1.5em;
  font-family: var(--font-display); font-size: clamp(1.4rem, 4.5vw, 1.9rem); line-height: 1.2;
  color: var(--ink-navy); background: var(--gold-gradient); border: 1px solid var(--gold-deep);
  box-shadow: 0 4px 0 var(--gold-deep), var(--shadow-soft);
}
.compare-panel--now .compare-title { color: var(--gold-light); background: var(--royal-900); border-color: var(--gold-dark); box-shadow: var(--shadow-soft); }
.compare-stack { display: grid; gap: 22px; }
.compare figure { margin: 0; position: relative; }
.compare button { all: unset; cursor: zoom-in; display: block; }
.compare button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.compare img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-deep); transition: transform 0.4s; }
.compare button:hover img { transform: scale(1.02); }
.compare-panel--render .compare-stack figure:first-child img { object-position: 50% 85%; }
.compare-panel--now img { filter: saturate(0.85); }
/* small "מבחוץ / מבפנים" tag on each photo */
.compare .photo-caption {
  position: absolute; bottom: 18px; inset-inline-start: 18px; z-index: 1; margin: 0;
  padding: 0.15em 0.9em; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  color: var(--ink-navy); background: rgba(248, 230, 180, 0.92); border: 1px solid var(--gold-deep);
  -webkit-background-clip: border-box; background-clip: border-box; filter: none;
}
/* Virtual tour: its own section under "המצב כעת" / "הדמיה" */
.tour-section { padding-top: 0; }
.tour-video { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; }
.tour-video figcaption { order: -1; margin-bottom: 24px; text-align: center; color: var(--ink-on-blue-soft); font-size: 1.05rem; line-height: 1.6; }
.tour-video figcaption strong {
  display: block; margin-bottom: 8px; font-family: var(--font-verse); font-weight: 900; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.2;
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(3, 10, 35, 0.6));
}
html:not([lang="he"]) .tour-video figcaption strong { font-family: var(--font-display); font-weight: 400; }
.tour-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; box-shadow: var(--shadow-deep); }
.compare-arrow { display: grid; place-items: center; }
.compare-arrow span {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold-gradient); border: 2px solid var(--gold-deep); box-shadow: var(--shadow-soft);
}
.compare-arrow span::after {
  content: ""; width: 14px; height: 14px; margin-top: -6px;
  border-right: 4px solid var(--royal-900); border-bottom: 4px solid var(--royal-900); transform: rotate(45deg);
}
.bz-video { max-width: 960px; margin-top: 48px; margin-inline: auto; }

/* "זה השער לה'" opening card: parchment with gold double border, ornate corners and a soft glow */
.announce {
  position: relative; max-width: 960px; margin: 0 auto; color: var(--ink-navy); text-align: center;
  padding: clamp(36px, 7vw, 64px) clamp(22px, 6vw, 72px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 252, 238, 0.95), rgba(255, 252, 238, 0) 70%),
    radial-gradient(120% 120% at 50% 50%, #fbf3dc 0%, #f4e4bb 70%, #e8cf96 100%);
  border: 2px solid var(--gold-dark);
  outline: 1px solid rgba(246, 220, 143, 0.7); outline-offset: 6px;
  box-shadow: 0 0 0 10px rgba(13, 34, 89, 0.55), 0 18px 50px rgba(3, 10, 35, 0.6), inset 0 0 60px rgba(176, 132, 52, 0.28);
}
.announce::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  --c: clamp(44px, 9vw, 76px);
  background:
    url("../images/ui/corner-tl.svg") top left / var(--c) no-repeat,
    url("../images/ui/corner-tr.svg") top right / var(--c) no-repeat,
    url("../images/ui/corner-bl.svg") bottom left / var(--c) no-repeat,
    url("../images/ui/corner-br.svg") bottom right / var(--c) no-repeat;
}
html[lang="he"] .announce { font-family: var(--font-verse); font-size: 1.15rem; line-height: 1.95; }
.announce-bsd { margin: -12px 0 10px; text-align: center; font-size: 0.85rem; font-weight: 700; }
.announce h2 {
  font-family: var(--font-verse); font-weight: 900; color: var(--royal-900);
  font-size: clamp(1.45rem, 4.6vw, 2.15rem); line-height: 1.45; margin: 0 0 22px;
}
html:not([lang="he"]) .announce h2 { font-family: var(--font-display); font-weight: 400; }
.announce h2::before, .announce h2::after { height: 2.6em; }
.announce p { margin: 0 auto 16px; max-width: 46em; }
.announce-lead strong { font-weight: 900; color: var(--royal-900); }
.announce-list {
  list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; text-align: start;
}
.announce-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; background: rgba(255, 253, 245, 0.75);
  border: 1px solid rgba(201, 162, 74, 0.6); box-shadow: 0 3px 10px rgba(120, 90, 30, 0.12);
}
.announce-ico {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 0.55em; transform: rotate(45deg);
  background: var(--gold-gradient); border: 1px solid var(--gold-deep);
}
.announce-list strong { display: block; color: var(--royal-900); font-weight: 900; font-size: 1.08em; }
.announce-call {
  display: inline-block; margin: 8px auto 18px !important; padding: 0.5em 1.4em;
  font-family: var(--font-verse); font-weight: 900; font-size: clamp(1.25rem, 4.4vw, 1.75rem); line-height: 1.4;
  color: var(--gold-light); background: linear-gradient(180deg, var(--royal-500), var(--royal-900));
  border: 1px solid var(--gold-dark); box-shadow: 0 6px 16px rgba(3, 10, 35, 0.35);
}
html:not([lang="he"]) .announce-call { font-family: var(--font-display); font-weight: 400; }
.announce-closing { font-weight: 700; color: var(--royal-700); }
@media (min-width: 960px) {
  .announce-list { grid-template-columns: repeat(3, 1fr); }
  .announce-list li { flex-direction: column; align-items: center; text-align: center; }
  .announce-ico { margin: 0 0 6px; }
}
.photo-caption {
  margin-top: 14px; text-align: center; font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2.1rem);
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(3, 10, 35, 0.6));
}

/* ---------- "ההבטחה הנדירה" ---------- */
.promise { display: grid; gap: 28px; }
.promise .framed-grid { margin-top: -8px; }
/* Small gold heading above a photo group */
.title-block.sub-title { margin-bottom: 16px; }
.framed-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.framed-grid figure { margin: 0; }
.framed-grid button { all: unset; cursor: zoom-in; display: block; width: 100%; height: 100%; }
.framed-grid button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.framed-grid img { aspect-ratio: 3 / 2; }
/* Odd number of photos: the first one spans the full row instead of leaving a gap */
.framed-grid figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.frame-gilded { border-width: 12px; }
.paper p { text-align: justify; text-align-last: center; }

/* Letters of blessing, side by side on desktop (under the title, photos below) */
.letters { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; max-width: 1100px; width: 100%; margin-inline: auto; }
.letters figure { margin: 0; }
.letters button { all: unset; cursor: zoom-in; display: block; }
.letters button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.letters .frame-gilded { background: #fff; }
.letters img { aspect-ratio: auto; object-fit: contain; }
.letter-pdf { text-align: center; margin: 0; }

/* ---------- "בנוי בדמעות" ---------- */

/* Closing CTA */
/* Link to the dedications page */
.section-lead { text-align: center; color: var(--ink-on-blue-soft); max-width: 36em; margin: -8px auto 24px; }
.section-more { text-align: center; margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; color: #fff;
}
.lightbox::backdrop { background: rgba(5, 12, 35, 0.94); }
.lightbox figure {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 56px 16px 16px;
}
.lightbox img { max-height: calc(100vh - 120px); width: auto; border: 3px solid var(--gold-dark); }
.lightbox figcaption { text-align: center; }
.lightbox .lb-btn {
  position: absolute; background: rgba(246, 220, 143, 0.15); color: var(--gold-light); border: 1px solid var(--gold-dark);
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; font-family: inherit;
}
.lightbox .lb-close { top: 10px; inset-inline-end: 10px; }
.lightbox .lb-prev { top: 50%; inset-inline-start: 10px; }
.lightbox .lb-next { top: 50%; inset-inline-end: 10px; }

/* ---------- Dedications page ---------- */
.page-intro { text-align: center; padding-block: 40px 8px; }
.page-intro .logo { width: min(300px, 70vw); margin: 0 auto 8px; }
.page-intro .lead { color: var(--ink-on-blue-soft); max-width: 40em; margin: 0 auto; }

.progress-card { color: var(--ink-navy); max-width: 760px; margin-inline: auto; padding: 22px 24px; }
.progress-card h2 { font-family: var(--font-display); font-size: 1.5rem; text-align: center; margin-bottom: 8px; }
.progress-figures { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.progress-figures .raised { font-family: var(--font-display); font-size: 2rem; color: var(--royal-900); }
.progress-figures .goal { align-self: flex-end; font-weight: 600; }
.progress-track { height: 18px; background: rgba(19, 36, 90, 0.15); border-radius: 999px; overflow: hidden; border: 1px solid var(--gold-deep); }
.progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(to left, var(--gold-dark), var(--gold-light));
  transition: width 1.2s ease-out;
}
[dir="ltr"] .progress-fill { background: linear-gradient(to right, var(--gold-dark), var(--gold-light)); }
.progress-pct { margin-top: 6px; font-weight: 800; text-align: center; }
.general { text-align: center; margin: 18px 0 0; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 28px; }
.filters button {
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  color: var(--gold-light); background: transparent; border: 1px solid var(--gold-dark);
  border-radius: 999px; padding: 5px 18px;
}
.filters button[aria-pressed="true"] { color: var(--ink-navy); background: var(--gold-gradient); }

.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 40px 24px;
}
.card { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.card .verse { font-size: clamp(1.6rem, 7vw, 2rem); min-height: 2.8em; }
.card .frame { aspect-ratio: 4 / 5; }
.card--wide .frame { aspect-ratio: 4 / 3; }
.card .price-tag { width: min(100%, 340px); margin-inline: auto; }
.card .cta-row { display: flex; justify-content: center; }
.card .btn-gold { min-width: 180px; }
.badge-taken {
  display: inline-block; font-family: var(--font-display); font-size: 1.15rem;
  color: var(--gold-light); border: 2px solid var(--gold-dark); padding: 0.35em 1.6em; border-radius: 999px;
  background: rgba(8, 22, 64, 0.6);
}
.card.is-taken .frame img { filter: grayscale(0.35) brightness(0.85); }

.notice { background: var(--paper); color: var(--ink-navy); border: 2px solid var(--gold-dark); padding: 12px 16px; text-align: center; }

/* Donor wall */
.donor-wall { max-width: 1000px; margin-inline: auto; }
.donor-tier { margin-top: 26px; text-align: center; }
.donor-tier h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 12px; }
.donors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; padding: 0; margin: 0; }
.donors li {
  background: linear-gradient(180deg, #f8e6b4, var(--parchment)); color: var(--ink-navy);
  padding: 12px 8px; font-weight: 700; text-align: center; box-shadow: var(--shadow-soft);
}
.donor-tier:first-of-type .donors li { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }

/* Footer */
.site-footer {
  margin-top: 40px; padding-block: 28px; text-align: center; font-size: 0.95rem;
  background: rgba(5, 12, 35, 0.7); border-top: 2px solid var(--gold-dark); color: var(--ink-on-blue-soft);
}
.site-footer .logo { width: 140px; margin: 0 auto 10px; }
.site-footer p { margin: 0 0 4px; }
.org-legal {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(201, 162, 74, 0.35);
  font-size: 0.85rem; color: var(--ink-on-blue-soft);
}
.org-legal p:first-child { font-weight: 700; color: #fff; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .compare { grid-template-columns: 1fr auto 1fr; gap: 22px; }
  .compare-arrow span::after { margin: 0 0 0 6px; transform: rotate(-45deg); }
  [dir="rtl"] .compare-arrow span::after { margin: 0 6px 0 0; transform: rotate(135deg); }
  .framed-grid { gap: 18px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--hero { grid-column: 1 / -1; }
  .card--hero .frame { aspect-ratio: 16 / 9; }
  .donors { grid-template-columns: repeat(3, 1fr); }
  .hero-art { aspect-ratio: 4 / 3; }
}

@media (min-width: 960px) {
  .section { padding-block: 80px; }
  .site-header .container { flex-wrap: nowrap; }
  .lang-switch { width: auto; border-top: 0; padding-top: 0; border-inline-start: 1px solid rgba(201, 162, 74, 0.35); padding-inline-start: 8px; }
  .nav { margin-inline-start: auto; }
  /* Keep the sky in frame so the title sits above the building, as on the brochure cover */
  .hero-art { aspect-ratio: 3 / 2; }
  .hero-art img { object-position: 50% 62%; }
  .hero-text { padding-top: 36px; }
  .hero-text .bsd { top: 12px; font-size: 0.85rem; }
  /* Portrait Tammuz 5784 letter + landscape 5779 letter: columns sized so both come out about the same height */
  .letters { grid-template-columns: 5fr 7fr; }
  /* Photos under the letters: first one large (2×2), the rest around it */
  .promise .framed-grid { grid-template-columns: repeat(4, 1fr); }
  .promise .framed-grid figure:first-child { grid-column: span 2; grid-row: span 2; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* The building: image beside verse + tag */
  .card--hero {
    display: grid; grid-template-columns: 3fr 2fr; column-gap: 40px; align-items: center;
    grid-template-areas: "frame verse" "frame tag" "frame cta";
  }
  .card--hero .frame { grid-area: frame; }
  .card--hero .verse { grid-area: verse; font-size: 2.6rem; }
  .card--hero .price-tag { grid-area: tag; }
  .card--hero .price-tag .amount { font-size: 2.8rem; }
  .card--hero .cta-row { grid-area: cta; }
  .donors { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card--wide { grid-column: span 2; }
}