/* Homepage layout (Nov 2026 reorganization).
   Order: hero · find your next step · one seasonal campaign · coming up · pathways · support · people + contact · photos · quote.
   Only loaded by /index.html. Reuses the existing blocks (cu-card, sw-row, cbn-home, home-prayer-feature, give-band, person, shp-slide)
   and only adjusts how they sit together. Brand tokens come from the page (:root). */

/* shared bits */
.hx-head-row{display:flex!important;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 24px}
.hx-head-row>div:first-child{display:grid;gap:14px}
.hx-all,.hx-head-links a{font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--teal);border-bottom:2px solid var(--gold);padding-bottom:4px;white-space:nowrap}
.hx-head-links{display:flex;gap:22px;flex-wrap:wrap}
.hx-all-foot{margin-top:clamp(24px,4vw,36px);display:flex;justify-content:center}

/* 1 · hero: tighter on phones so the button sits well above the fold */
@media (max-width:560px){
  .hero .wrap{padding-block:36px 40px;gap:28px}
  .hero h1{margin-block:14px 16px}
  .hero .ctas{margin-top:24px}
}

/* 2 · find your next step */
.hx-finder{background:var(--white);border-bottom:1px solid var(--line);padding-block:clamp(48px,7vw,88px)}
.hx-finder h2{color:var(--teal)}
.hx-who{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hx-who-card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s,transform .2s}
.hx-who-card:hover,.hx-who-card:focus-visible{border-color:var(--teal);box-shadow:0 12px 28px rgba(19,30,41,.12);transform:translateY(-2px)}
.hx-who-card img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.hx-who-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.hx-who-body small{font:600 .72rem/1.3 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.hx-who-body b{font:600 1.12rem/1.3 var(--f-display);color:var(--teal)}
.hx-go{margin-top:auto;padding-top:8px;font-weight:800;font-size:.86rem;color:var(--teal);display:inline-flex;gap:.4em;align-items:center}
.hx-who-card:hover .arrow{transform:translateX(4px)}
@media (max-width:980px){.hx-who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .hx-who{grid-template-columns:1fr;gap:12px}
  .hx-who-card{display:grid;grid-template-columns:104px minmax(0,1fr);flex-direction:row}
  .hx-who-card img{aspect-ratio:auto;height:100%;min-height:118px}
  .hx-who-body{padding:14px 14px 14px 16px;gap:5px}
  .hx-who-body b{font-size:1rem}
  .hx-go{padding-top:4px;font-size:.8rem}
}

/* 3 · seasonal campaign slot (cbn-home) */
.cbn-home .cbn-badge{white-space:normal}

/* 4 · coming up */
.coming .head h2{color:var(--teal)}
.hx-feature{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);flex-direction:row}
.hx-feature>img{aspect-ratio:auto;height:100%;max-height:520px;object-position:50% 8%}
.hx-feature .cu-body h3{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.hx-dates{list-style:none;margin:clamp(20px,3vw,28px) 0 0;padding:0;border-top:1px solid var(--line)}
.hx-dates li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line)}
.hx-dates time{display:grid;justify-items:center;align-content:center;width:64px;height:64px;border-radius:10px;background:var(--teal);color:var(--white)}
.hx-dates time small{font:600 .66rem/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hx-dates time b{font:600 1.6rem/1.05 var(--f-display)}
.hx-dates h3{font-size:1.2rem;line-height:1.25}
.hx-dates h3 a{color:var(--teal);text-decoration:none}
.hx-dates h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.hx-dates p{color:var(--muted);font-size:.93rem;margin-top:4px}
.hx-row-cta{font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);text-decoration:none;border:1.5px solid var(--teal);border-radius:99px;padding:10px 16px;white-space:nowrap;display:inline-flex;gap:.45em;align-items:center}
.hx-row-cta:hover{background:var(--teal);color:var(--white)}
.hx-week{margin-top:clamp(28px,4vw,40px);background:var(--mist);border-radius:12px;padding:clamp(20px,3vw,32px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:clamp(16px,3vw,40px);align-items:start}
.hx-week-head{display:grid;gap:10px}
.hx-week-head p{color:var(--muted);font-size:.95rem}
.hx-week .sw-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;border-top:0}
.hx-week .sw-list li{list-style:none}
.hx-week .sw-row{border-top:1px solid var(--line);border-bottom:0}
@media (max-width:860px){
  .hx-feature{grid-template-columns:1fr}
  .hx-feature>img{aspect-ratio:16/10;height:auto;max-height:none;object-position:50% 12%}
  .hx-week{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hx-dates li{grid-template-columns:52px minmax(0,1fr);gap:4px 14px;padding:14px 0}
  .hx-dates time{width:52px;height:56px}
  .hx-dates time b{font-size:1.35rem}
  .hx-dates h3{font-size:1.05rem}
  .hx-row-cta{grid-column:2;justify-self:start;margin-top:8px;padding:9px 14px}
  .hx-week .sw-list{grid-template-columns:1fr}
}

/* 5 · pathways: compact path to priesthood inside the Priesthood tab */
#pathways .panel{align-items:start}
.hx-road{display:grid;gap:14px;padding-top:6px;scroll-margin-top:110px}
.hx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;counter-reset:none}
.hx-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:center}
.hx-steps .n{grid-row:1/span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--gold);font:600 .9rem/1 var(--f-display)}
.hx-steps li:last-child .n{background:var(--gold);color:var(--ink)}
.hx-steps b{font:600 1rem/1.2 var(--f-display);color:var(--teal)}
.hx-steps small{font-size:.78rem;color:var(--muted);line-height:1.3}
.hx-road-links{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:4px}
.hx-road-links .more{font-weight:700;color:var(--teal)}
@media (max-width:420px){.hx-steps{grid-template-columns:1fr}}

/* 6 · support: pray + give side by side */
.hx-support{background:var(--paper)}
.hx-support .head h2{color:var(--teal);max-width:22ch}
.hx-support .head h2 em{font-style:italic;color:var(--gold-ink)}
.hx-support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.hx-card{border-radius:12px;overflow:hidden}
.hx-support .home-prayer-feature{border:1px solid #d3c4aa}
.hx-support .home-prayer-feature .wrap{max-width:none;margin:0;height:100%;padding:clamp(22px,3vw,34px);grid-template-columns:96px minmax(0,1fr);align-content:start;gap:20px}
.hx-support .home-prayer-feature img{width:96px;height:118px}
.hx-support .home-prayer-feature h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:7px 0 9px}
.hx-support .home-prayer-feature h3 em{color:var(--gold-ink)}
.hx-support .home-prayer-feature .home-prayer-actions{grid-column:1/-1;align-items:flex-start}
.hx-support .home-prayer-feature.clock-unavailable .wrap{grid-template-columns:minmax(0,1fr)}
.hx-support .give-band{background:var(--white);border:1px solid var(--line)}
.hx-support .give-band .copy{padding:clamp(22px,3vw,34px);gap:16px}
.hx-support .give-band h3{font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--teal)}
.hx-support .give-band .lede{font-size:1rem}
@media (max-width:860px){.hx-support-grid{grid-template-columns:1fr}}
@media (max-width:420px){.hx-support .give-band .btn,.hx-support .home-prayer-actions .btn{width:100%;justify-content:center}}

/* 7 · people + contact */
.hx-people h2{color:var(--teal)}
.hx-people-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,4vw,48px);align-items:start}
.hx-people .people{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.hx-people .person{aspect-ratio:1/1}
.hx-people .person img{object-position:50% 20%}
.hx-people .contact-next{border-top:4px solid var(--gold);padding:clamp(22px,4vw,36px);gap:16px;align-content:start;height:auto}
.hx-people .contact-next h3{color:var(--teal);font-size:clamp(1.5rem,2.4vw,2rem)}
.hx-people .contact{margin-top:0;gap:12px}
.hx-people .contact b a{color:inherit;text-decoration:none}
.hx-people .contact b a:hover{text-decoration:underline}
.hx-people .contact-next .btn{justify-self:start}
@media (max-width:860px){.hx-people-grid{grid-template-columns:1fr}}
@media (min-width:601px) and (max-width:860px){.hx-people .people{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* 8 · photos: four recent galleries, no carousel */
.hx-photos .shp-head{margin-bottom:clamp(20px,3vw,32px)}
.hx-photos .hx-all{color:var(--white)}
.hx-photos .shp-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;overflow:visible;scroll-snap-type:none}
.hx-photos .shp-track>li{flex:none;min-width:0}
@media (max-width:860px){.hx-photos .shp-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:600px){
  .hx-photos .shp-cap{padding:12px}
  .hx-photos .shp-cap b{font-size:.95rem}
  .hx-photos .shp-cap small{font-size:.6rem;letter-spacing:.14em}
}

/* small eyebrows inside cards/panels: no animated dash (it only animates for section heads) */
.hx-week .eyebrow::before,.hx-road .eyebrow::before,.hx-card .eyebrow::before,#pathways .panel .eyebrow::before{display:none}