/* Homepage responsive hardening — 2026-10-05
   Loaded after the legacy homepage styles so layout remains fluid at every
   viewport/browser zoom without changing memorial content or interactions. */

.home-page{
  overflow-x:clip;
}

.home-page main,
.home-page .index-section,
.home-page .main-title-band,
.home-page .main-title-copy,
.home-page .memorial-grid,
.home-page .memory-card{
  min-inline-size:0;
  max-inline-size:100%;
}

/* The old desktop rule forced five cards even when the right-hand content
   area was too narrow. Let the grid choose only as many columns as actually
   fit; on genuinely wide screens we keep the requested five-card rhythm. */
.home-page .memorial-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr)) !important;
  width:100% !important;
  max-width:1320px !important;
  margin-inline:auto !important;
  align-items:start !important;
}

.home-page .memory-card{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  justify-self:stretch !important;
}

/* Final safety net: a portrait can never be wider than its grid cell. */
.home-page .portrait-ring{
  inline-size:min(var(--portrait-size),100%) !important;
  max-inline-size:100% !important;
  block-size:auto !important;
  aspect-ratio:1 / 1 !important;
}

.home-page .portrait-ring img,
.home-page .portrait-ring .portrait-placeholder{
  max-inline-size:100% !important;
  max-block-size:100% !important;
}

/* Keep the main title flexible instead of letting one unbreakable line push
   outside a narrower desktop content column. */
.home-page .main-title-band{
  box-sizing:border-box !important;
  max-width:100% !important;
  flex-wrap:wrap !important;
}
.home-page .main-title-copy{
  flex:1 1 auto !important;
  max-width:100% !important;
}
.home-page .main-primary-title{
  max-width:100% !important;
  overflow-wrap:normal !important;
  text-wrap:balance;
}

/* Wide desktop: preserve the requested five portraits per row. */
@media (min-width:1400px){
  .home-page .memorial-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

/* Narrow/medium desktop: keep title and controls comfortable beside the
   sticky memorial panel instead of squeezing the main area. */
@media (min-width:900px) and (max-width:1180px){
  .home-page .index-section{
    padding-inline:clamp(14px,1.7vw,20px) !important;
  }

  .home-page .main-title-band{
    gap:8px !important;
    padding-inline:0 !important;
  }

  .home-page .main-primary-title{
    white-space:normal !important;
    font-size:clamp(2.15rem,4.1vw,3rem) !important;
    line-height:1.05 !important;
  }
}

/* Tablet: three comfortable columns rather than two oversized columns. */
@media (min-width:700px) and (max-width:899px){
  .home-page{
    --portrait-size:138px;
  }
  .home-page .memorial-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:clamp(14px,2.8vw,22px) !important;
  }
}

/* Phones: two columns, with portrait size allowed to shrink on very narrow
   screens instead of overflowing the cell. */
@media (max-width:699px){
  .home-page{
    --portrait-size:clamp(112px,34vw,138px);
  }
  .home-page .memorial-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:clamp(10px,3vw,14px) !important;
  }

  .home-page .main-title-band{
    width:100% !important;
  }

  .home-page .main-primary-title{
    white-space:normal !important;
    line-height:1.08 !important;
  }
}

/* Very narrow phones: preserve the logo/menu safe area while allowing the
   title to wrap cleanly instead of clipping or creating horizontal scroll. */
@media (max-width:380px){
  .home-page .main-title-band{
    padding-left:78px !important;
    padding-right:52px !important;
  }
  .home-page .main-primary-title{
    font-size:clamp(1.48rem,7vw,1.9rem) !important;
  }
}

/* Accessibility text enlargement needs more room per card as text grows. */
html.a11y-text-scaled body.home-page .memorial-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important;
}
@media (min-width:1600px){
  html.a11y-text-scaled body.home-page .memorial-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}

/* Popup: never exceed the usable viewport even with browser zoom. */
.home-page .lightbox-card{
  max-width:calc(100vw - 24px) !important;
}
@media (max-width:520px){
  .home-page .lightbox{
    padding:10px !important;
  }
  .home-page .lightbox-card{
    width:100% !important;
    max-width:100% !important;
    padding-inline:16px !important;
  }
}

/* v368 — compact, structured settlement layout.
   Small consecutive settlements can share a row; large settlements stay full
   width. This keeps the alphabetical grouping visible without wasting an
   entire portrait row for every short settlement. */
.home-page .main-title-band{
  margin:0 auto 2px !important;
  padding-bottom:4px !important;
}
.home-page .current-period-heading{
  width:min(100%,1080px) !important;
  margin:0 auto 14px !important;
  padding:0 12px !important;
  font-size:clamp(1.12rem,1.02rem + .45vw,1.42rem) !important;
  line-height:1.3 !important;
}
.home-page .memorial-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:18px 22px !important;
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  direction:rtl;
}
.home-page .settlement-group{
  min-width:0;
  margin:0 !important;
  padding:13px 14px 15px !important;
  border:1px solid rgba(232,240,244,.09);
  border-radius:18px;
  background:rgba(255,255,255,.018);
}
.home-page .settlement-group.is-full{
  grid-column:1 / -1;
  padding:5px 0 10px !important;
  border-color:transparent;
  background:transparent;
}
.home-page .settlement-group.is-paired{
  grid-column:span 1;
}
.home-page .settlement-divider{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  margin:0 0 11px !important;
  padding:0 2px 7px !important;
  font-size:clamp(1.08rem,1rem + .25vw,1.25rem) !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#f3f6f7 !important;
  text-align:right !important;
}
.home-page .settlement-divider::before{display:none !important;}
.home-page .settlement-divider::after{
  content:"" !important;
  display:block !important;
  height:1px !important;
  flex:1 1 auto !important;
  max-width:none !important;
  background:linear-gradient(90deg,rgba(245,240,232,.03),rgba(245,240,232,.22)) !important;
}
.home-page .settlement-divider span{
  white-space:nowrap;
  border-inline-start:3px solid rgba(85,184,212,.7);
  padding-inline-start:9px;
}
.home-page .settlement-cards{
  display:grid !important;
  align-items:start !important;
  justify-content:center !important;
  width:100% !important;
  margin:0 auto !important;
  gap:18px 14px !important;
}
.home-page .settlement-group.is-full .settlement-cards{
  grid-template-columns:repeat(auto-fit,minmax(150px,180px)) !important;
}
.home-page .settlement-group.is-paired .settlement-cards{
  grid-template-columns:repeat(auto-fit,minmax(145px,165px)) !important;
}
.home-page .settlement-cards .memory-card{
  width:100% !important;
  max-width:180px !important;
  min-height:0 !important;
  justify-self:center !important;
}
.home-page .settlement-group.is-paired .memory-card{
  max-width:165px !important;
}
.home-page .period-divider{
  grid-column:1 / -1 !important;
  width:min(100%,1100px) !important;
  margin:22px auto 0 !important;
  padding-top:4px !important;
}

/* Medium desktop/laptop: use one settlement panel per row, but keep the
   portraits dense inside it. */
@media (max-width:1240px){
  .home-page .memorial-grid{
    grid-template-columns:1fr !important;
    gap:15px !important;
  }
  .home-page .settlement-group,
  .home-page .settlement-group.is-full,
  .home-page .settlement-group.is-paired{
    grid-column:1 / -1 !important;
  }
  .home-page .settlement-cards,
  .home-page .settlement-group.is-full .settlement-cards,
  .home-page .settlement-group.is-paired .settlement-cards{
    grid-template-columns:repeat(auto-fit,minmax(145px,175px)) !important;
  }
  .home-page .settlement-group.is-paired .memory-card{max-width:175px !important;}
}

@media (max-width:699px){
  .home-page .main-title-band{
    margin-bottom:0 !important;
    padding-bottom:2px !important;
  }
  .home-page .current-period-heading{
    margin:0 auto 10px !important;
    padding-inline:8px !important;
    font-size:1.06rem !important;
  }
  .home-page .memorial-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:0 !important;
  }
  .home-page .settlement-group{
    padding:10px 8px 12px !important;
    border-radius:14px;
  }
  .home-page .settlement-divider{
    margin-bottom:8px !important;
    padding:0 3px 6px !important;
    gap:8px !important;
    font-size:1.05rem !important;
  }
  .home-page .settlement-cards,
  .home-page .settlement-group.is-full .settlement-cards,
  .home-page .settlement-group.is-paired .settlement-cards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px 8px !important;
    max-width:430px !important;
  }
  .home-page .settlement-cards .memory-card,
  .home-page .settlement-group.is-paired .memory-card{
    max-width:none !important;
  }
  .home-page .period-divider{
    margin:18px auto 0 !important;
  }
}

/* Enlarged-text mode: readability beats paired panels. */
html.a11y-text-scaled body.home-page .memorial-grid{
  grid-template-columns:1fr !important;
}
html.a11y-text-scaled body.home-page .settlement-group{
  grid-column:1 / -1 !important;
}


/* v373 — keep the memorial sprig between the main title and period heading.
   The ornament is absolutely positioned below the H1, so reserve its own
   vertical lane instead of allowing the following heading to overlap it. */
.home-page .main-title-band{
  padding-bottom:34px !important;
  margin-bottom:2px !important;
}
.home-page .main-primary-title::after{
  bottom:-30px !important;
}
.home-page .current-period-heading{
  margin-top:0 !important;
}
@media (max-width:699px){
  .home-page .main-title-band{
    padding-bottom:29px !important;
  }
  .home-page .main-primary-title::after{
    bottom:-26px !important;
  }
}