/* Mobile-first visual system for the parish homepage. Desktop is unaffected. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
 :root{--mobile-gap:16px;--mobile-radius:14px;--mobile-navy:#102735;--mobile-gold:#b18a50}
 html{scroll-padding-top:78px}
 body{background:#f5f3ef;line-height:1.55;-webkit-text-size-adjust:100%}
 html[data-theme=dark] body{background:#0d1c27}
 main .container,footer .container{width:calc(100% - 32px);max-width:100%;margin-inline:auto}
 /* Keep the existing parish header, clock, logo, navigation and icons unchanged. */
 /* Hero is a compact visual masthead, not a second full-screen header. */
 .hero,.hero.hero-video-playing{height:268px;min-height:268px;max-height:268px;overflow:hidden}
 .hero .hero-image,.hero .hero-video{object-position:60% center}
 .hero .hero-shade{background:linear-gradient(90deg,#071722ed 0%,#071722d5 42%,#07172235 100%),linear-gradient(0deg,#0717228c,transparent 70%)}
 .hero .hero-content{width:calc(100% - 40px);padding:35px 0 30px}
 .hero .eyebrow{font-size:9px;letter-spacing:.13em;margin:0 0 15px;color:#e2c38e}
 .hero h1{font-size:clamp(25px,7.1vw,33px);line-height:1.25;max-width:330px;margin:0;letter-spacing:0}
 .hero h1 span{font-size:.77em;color:#f2e6ce}
 .hero .hero-motion-toggle{right:12px;bottom:10px;padding:7px 10px;min-height:36px;font-size:11px}
 /* New vertical reading flow: each section is a distinct cohesive card. */
 #homepage-sections.homepage-builder-active{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%;padding:18px 0 28px;margin:0}
 #homepage-sections.homepage-builder-active>.homepage-builder-row{display:block;flex:0 0 auto;order:initial;width:calc(100% - 32px);max-width:calc(100% - 32px);height:auto!important;min-height:0!important;max-height:none!important;margin:0 auto!important;grid-row:auto!important;grid-column:auto!important;padding:0;overflow:visible}
 #homepage-sections.homepage-builder-active>.homepage-builder-row>.homepage-block{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:auto;min-height:0;max-height:none;margin:0;padding:0!important;overflow:visible!important;background:transparent;border:0;box-shadow:none}
 #homepage-sections.homepage-builder-active .section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;width:100%;height:auto;min-height:0;padding:0 2px;margin:0 0 12px}
 #homepage-sections.homepage-builder-active .section-heading h2{font-size:clamp(24px,6vw,28px);line-height:1.22;margin:0;overflow-wrap:anywhere;color:var(--ink)}
 #homepage-sections.homepage-builder-active .section-heading .eyebrow{margin-bottom:5px}
 #homepage-sections.homepage-builder-active .section-heading>.text-link,
 #homepage-sections.homepage-builder-active .section-heading .news-heading-links .text-link{font-size:12px;max-width:140px;line-height:1.35;text-align:right;white-space:normal;color:var(--gold)}
 #homepage-sections.homepage-builder-active :is(.news-section,.intentions-panel,.home-weekly,.daily-liturgy-tile,.event-schedule-tile,.parish-home-gallery,.parish-services,.parish-useful){min-width:0}
 #homepage-sections.homepage-builder-active :is(.weekly-intentions-card,.home-announcements-card,.daily-liturgy-card,.event-schedule-card){background:#fff;border:1px solid #ded8cd;border-top:3px solid #b99354;border-radius:var(--mobile-radius);box-shadow:0 8px 24px #172b3910;padding:20px 18px;min-width:0}
 html[data-theme=dark] #homepage-sections.homepage-builder-active :is(.weekly-intentions-card,.home-announcements-card,.daily-liturgy-card,.event-schedule-card){background:#162633;border-color:#355065;border-top-color:#b99354;box-shadow:none}
 /* Intentions and official announcements have their own stable, readable
    mobile preview height. Expansion stays controlled by the existing buttons. */
 #homepage-sections.homepage-builder-active .weekly-intentions-card{height:auto;min-height:0;max-height:none;overflow:visible}
 #homepage-sections.homepage-builder-active .home-announcements-card{height:auto;min-height:0;max-height:none;overflow:visible}
 #homepage-sections.homepage-builder-active .home-weekly>.section-heading{height:auto;flex:0 0 auto;margin:0 0 12px}
 #homepage-sections.homepage-builder-active :is(.home-intentions-actions,.home-announcements-actions){margin-top:auto;padding-top:13px;gap:8px;min-height:43px}
 #homepage-sections.homepage-builder-active .home-intentions-actions{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between}
 #homepage-sections.homepage-builder-active .home-intentions-actions :is(button,a){font-size:15px;white-space:normal;line-height:1.4}
 #homepage-sections.homepage-builder-active .home-weekly .weekly-announcement .weekly-body{font-size:14px;line-height:1.65}
 #homepage-sections.homepage-builder-active #home-announcements{max-height:345px;overflow:hidden;flex:0 1 auto}
 #homepage-sections.homepage-builder-active #home-announcements[data-expanded="true"]{overflow-y:auto}
 /* Main sections that are meant to be read should grow naturally. */
 #homepage-sections.homepage-builder-active .daily-liturgy-card{height:auto;min-height:210px;max-height:none;overflow:visible}
 #homepage-sections.homepage-builder-active .daily-liturgy-card :is(.daily-metadata,.daily-cycles,.daily-reading-summary,.daily-review-note){display:block;white-space:normal;overflow:visible;text-overflow:clip}
 #homepage-sections.homepage-builder-active .daily-liturgy-card h3{display:block;font-size:18px;line-height:1.35;margin:8px 0 12px;overflow:visible}
 #homepage-sections.homepage-builder-active .event-schedule-card{height:auto;min-height:180px;max-height:none;overflow:visible}
 #homepage-sections.homepage-builder-active .event-schedule-card-body{max-height:460px;min-height:90px;overflow-y:auto;scrollbar-width:thin}
 #homepage-sections.homepage-builder-active .home-event-row{grid-template-columns:74px minmax(0,1fr);gap:10px;padding:12px 0}
 #homepage-sections.homepage-builder-active .home-event-time{font-size:13px;line-height:1.5;white-space:normal}
 #homepage-sections.homepage-builder-active .home-event-name{font-size:15px}
 /* News: a single full-width editorial card, with native horizontal swipe. */
 #homepage-sections.homepage-builder-active .news-section .carousel{height:auto;min-height:0;max-height:none;padding-bottom:40px;overflow:hidden}
 #homepage-sections.homepage-builder-active #news-track{height:405px;min-height:405px;flex:none;min-width:0}
 #homepage-sections.homepage-builder-active #news-track>.news-slide{height:405px;min-height:405px;border:1px solid #ded8cd;border-radius:var(--mobile-radius);background:#fff;box-shadow:none}
 #homepage-sections.homepage-builder-active #news-track>.news-slide>.news-photo{height:47%;flex:0 0 47%;min-height:0}
 #homepage-sections.homepage-builder-active #news-track>.news-slide .news-content{padding:14px 16px}
 /* All foregrounds must match the mobile news-card surface in both themes. */
 #homepage-sections.homepage-builder-active #news-track>.news-slide,
 #homepage-sections.homepage-builder-active #news-track>.news-slide .news-content{background:#fff;color:#253138}
 #homepage-sections.homepage-builder-active #news-track>.news-slide :is(h3,h3 button,.news-plain-body,.news-plain-body p){color:#253138!important}
 #homepage-sections.homepage-builder-active #news-track>.news-slide .news-meta{color:#7c684d!important}
 html[data-theme=dark] #homepage-sections.homepage-builder-active #news-track>.news-slide,
 html[data-theme=dark] #homepage-sections.homepage-builder-active #news-track>.news-slide .news-content{background:#162633!important;color:#f0f3f5!important;border-color:#355065}
 html[data-theme=dark] #homepage-sections.homepage-builder-active #news-track>.news-slide :is(h3,h3 button,.news-plain-body,.news-plain-body p){color:#f0f3f5!important}
 html[data-theme=dark] #homepage-sections.homepage-builder-active #news-track>.news-slide .news-meta{color:#d9be91!important}
 /* Intentions get their own readable viewport; do not let the card shrink. */
 #homepage-sections.homepage-builder-active .intentions-panel>.weekly-intentions-card{flex:none;height:auto!important;min-height:0!important;max-height:none!important}
 #homepage-sections.homepage-builder-active .weekly-intentions-card>#home-intentions{flex:1 1 auto;min-height:0;max-height:440px;overflow-y:auto!important;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:auto;opacity:1;visibility:visible}
 #homepage-sections.homepage-builder-active .weekly-intentions-card>#home-intentions .home-intentions-day{display:block}
 #homepage-sections.homepage-builder-active .weekly-intentions-card .home-intention-row{display:block;visibility:visible;opacity:1}
 html[data-theme=dark] #homepage-sections.homepage-builder-active .weekly-intentions-card :is(.home-intentions-day,.home-intention-row,.home-intention-row li,.home-intention-time){color:#f0f3f5}

 #homepage-sections.homepage-builder-active #news-track>.news-slide h3{font-size:21px}
 #homepage-sections.homepage-builder-active #news-track>.news-slide .news-plain-body{font-size:18px;line-height:1.5}
 #homepage-sections.homepage-builder-active .news-swipe-controls{bottom:0}
 /* Services: independent compact actionable buttons, no nested scrolling. */
 #homepage-sections.homepage-builder-active .parish-services .section-intro{font-size:16px;margin:0 0 15px}
 #homepage-sections.homepage-builder-active .parish-service-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
 #homepage-sections.homepage-builder-active .parish-service-tiles>a{min-height:125px;padding:13px 8px;gap:5px;border-radius:12px;border:1px solid #ddd7cc;background:#fff}
 #homepage-sections.homepage-builder-active .parish-service-tiles .service-symbol{height:36px;width:36px;font-size:21px}
 #homepage-sections.homepage-builder-active .parish-service-tiles>a>span:nth-child(2){font-size:16px;line-height:1.3}
 #homepage-sections.homepage-builder-active .parish-service-tiles small{font-size:14px;line-height:1.35}
 html[data-theme=dark] #homepage-sections.homepage-builder-active .parish-service-tiles>a{background:#162633;border-color:#355065}
 /* Gallery: mobile-first swipe with more generous photos. */
 #homepage-sections.homepage-builder-active .gallery-scroll-wrap{display:flex;align-items:center;gap:7px;width:100%;margin:0}
 #homepage-sections.homepage-builder-active #parish-gallery.gallery-scroll-track{flex:1 1 auto;height:214px;min-width:0;gap:10px}
 #homepage-sections.homepage-builder-active #parish-gallery.gallery-scroll-track>:is(.gallery-placeholder,.gallery-thumb){flex:0 0 86%;height:100%;border-radius:12px}
 #homepage-sections.homepage-builder-active .gallery-scroll-arrow{width:30px;min-width:30px;height:42px;border-radius:9px}
 #homepage-sections.homepage-builder-active .gallery-hint{font-size:13px}
 #homepage-sections.homepage-builder-active .parish-useful-list{margin:0;border-radius:12px;border:1px solid #ded8cd}
 #homepage-sections.homepage-builder-active .parish-useful-list a{padding:15px 16px;font-size:16px;line-height:1.4}
 #homepage-sections.homepage-builder-active .privacy-note{font-size:15px;margin-top:18px}
 #homepage-sections.homepage-builder-active .homepage-custom{border:1px solid #ded8cd;border-radius:var(--mobile-radius);background:#fff;padding:20px!important}
 html[data-theme=dark] #homepage-sections.homepage-builder-active .homepage-custom{background:#162633;border-color:#355065}
 /* Footer mirrors mobile column widths and avoids squeezed columns. */
 footer{padding-top:28px}
 footer .footer-grid{width:calc(100% - 36px);grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px;padding-bottom:24px}
 footer .footer-brand{grid-column:1/-1;display:flex;gap:13px}
 footer .footer-grid>div:last-child{grid-column:auto}
 footer .footer-grid h3{font-size:14px}
 footer .footer-bottom{width:calc(100% - 36px);font-size:11px;gap:12px;padding:18px 0}
}
@media(max-width:350px){
 .hero h1{font-size:25px}
 #homepage-sections.homepage-builder-active .section-heading h2{font-size:20px}
 #homepage-sections.homepage-builder-active :is(.weekly-intentions-card,.home-announcements-card,.daily-liturgy-card,.event-schedule-card){padding:17px 15px}
}

/* Phone landscape: keep the mobile presentation, with shallower masthead. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
 .hero,.hero.hero-video-playing{height:190px;min-height:190px;max-height:190px}
 .hero .hero-content{padding:18px 0 15px}
 .hero .eyebrow{margin-bottom:8px;font-size:9px}
 .hero h1{font-size:clamp(23px,3.3vw,29px);line-height:1.18;max-width:430px}
 #homepage-sections.homepage-builder-active{gap:14px;padding:14px 0 28px}
 #homepage-sections.homepage-builder-active>.homepage-builder-row{width:min(100% - 32px,680px);max-width:min(100% - 32px,680px)}
 #homepage-sections.homepage-builder-active .weekly-intentions-card{height:auto;min-height:0;max-height:none}
 #homepage-sections.homepage-builder-active .home-announcements-card{height:auto;min-height:0;max-height:none}
}