/* =========================================================
   Site-specific additions on top of tooplate-barista.css
   Reuses the template's own CSS variables so everything
   matches the existing look exactly.

   NOTE: box-sizing is now set globally to border-box in
   tooplate-barista.css, so the many scattered
   `box-sizing: border-box !important` overrides that used to
   live in this file (on .timeline-container, .section-5,
   .row>*, .contact-card, .about-section>*, .record-block) are
   no longer needed and have been removed — they were a
   workaround for the content-box bug in the other file, not a
   real requirement of this layout.
   ========================================================= */

/* ---------- inner page header (template is single-page, so this is new) ---------- */
.page-header {
  position: relative;
  padding: 180px 0 90px;
  background-color: var(--dark-color);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.page-header .section-overlay { opacity: 0.72; }
.page-header .container { position: relative; z-index: 22; }
.page-header h1 { color: var(--white-color); margin-bottom: 12px; }
.page-header .breadcrumb { justify-content: center; margin: 0; flex-wrap: wrap; }
.page-header .breadcrumb a { color: var(--secondary-color); }
.page-header .breadcrumb-item.active { color: rgba(255,255,255,0.6); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }

/* ---------- gallery grid (template has no gallery section) ---------- */
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius-small);
  aspect-ratio: 4 / 4.3;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.gallery-item:hover img { transform: scale(1.12); }
.gallery-item .gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px; color: var(--white-color);
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  font-weight: var(--font-weight-bold);
}
.gallery-item .gallery-overlay {
  position: absolute; inset: 0;
  background: rgba(188,108,37,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item .gallery-overlay i { color: var(--white-color); font-size: 28px; }

.photo-tile {
  position: relative; overflow: hidden; border-radius: var(--border-radius-small);
  aspect-ratio: 4/3.2;
}
.photo-tile img { width: auto; height: auto; object-fit: cover; transition: transform .5s ease; }
.photo-tile:hover img { transform: scale(1.1); }

/* ---------- portrait circles (founders / people strips) ---------- */
.portrait { text-align: center; }
.portrait-frame {
  width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--secondary-color); margin-bottom: 14px;
  transition: transform .3s ease, border-color .3s ease;
}
.portrait-frame:hover { border-color: var(--primary-color); transform: scale(1.05); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait h6 { margin: 0; font-size: 16px; }

/* ---------- record blocks (Holy City list on the homepage) ---------- */
.record-block {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
  transition: gap 0.3s ease;
}
.record-media {
  flex: 0 0 110px; width: 110px; height: 110px; border-radius: var(--border-radius-small);
  overflow: hidden;
}
.record-media img { width: 100%; height: 100%; object-fit: cover; }
.record-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-color);
  color: var(--white-color); font-size: 13px; font-weight: var(--font-weight-bold);
  margin-bottom: 8px;
}
.record-block h6 { margin-bottom: 6px; }
.record-block small.verse { color: var(--primary-color); font-weight: var(--font-weight-bold); }

/* ---------- donation cards ---------- */
.donate-wrap {
  max-width: 680px; margin: 0 auto; background: var(--white-color);
  border-radius: var(--border-radius-medium); padding: 48px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.bank-box {
  border-left: 4px solid var(--primary-color); background: #faf6f1;
  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
  padding: 24px 28px; margin: 26px 0;
}
.acct-box {
  background: var(--white-color); border-radius: var(--border-radius-small);
  padding: 14px 18px; margin-top: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ---------- contact cards ---------- */
.contact-card {
  display: flex; gap: 16px; padding: 28px; border-radius: var(--border-radius-medium);
  background: #faf6f1; height: 100%; transition: transform .3s ease, box-shadow .3s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.1); }
.contact-card i { font-size: 26px; color: var(--primary-color); }
.contact-card h6 { margin-bottom: 6px; }
.contact-card p { margin-bottom: 0; font-size: 16px; }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px;
  border-radius: 50%; background: var(--primary-color); color: var(--white-color);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, transform .2s;
  z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--secondary-color); transform: translateY(-4px); }

/* ---------- misc ---------- */
.prose p { margin-bottom: 1.15em; }
.highlight { color: var(--primary-color); font-weight: var(--font-weight-bold); }
.eyebrow { color: var(--primary-color); }

h3.dark-background {
  background: #552902;
  padding: 20px;
}

/* =========================================================
   RESPONSIVE FIXES
   The hero-circle size and .record-block layout used to be
   redefined again at 412px/360px in this file (on top of the
   480px/360px versions in the main CSS), with different pixel
   values fighting each other. Both are now handled with a
   single fluid clamp()/flex rule in the main stylesheet, so
   only genuinely page-specific, non-duplicated tweaks remain
   here.
   ========================================================= */

@media (max-width: 991px) {
  .page-header { padding: 140px 0 70px; }
}

@media (max-width: 767px) {
  .page-header { padding: 140px 0 60px; }
  .donate-wrap { padding: 28px 22px; }
  /* Image stays beside the text (not stacked on top) — just a
     smaller fixed square so it doesn't crowd the paragraph. */
  .record-block { gap: 14px; }
  .record-media { flex-basis: 90px; width: 90px; height: 90px; }
}

@media (max-width: 480px) {
  .donate-wrap { padding: 22px 16px; }
  .bank-box { padding: 18px 20px; }
  .contact-card { padding: 18px; gap: 12px; }
  .record-block { gap: 12px; }
  .record-media { flex-basis: 76px; width: 76px; height: 76px; }
  .record-num { width: 24px; height: 24px; font-size: 11px; }
}

@media (max-width: 320px) {
  .page-header { padding: 140px 0 50px; }
  .record-media { flex-basis: 64px; width: 64px; height: 64px; }
}