/* ==========================================================
   Holy Cross Modern 3.1: mobile layer. Loads LAST.
   Fixes phones (320-480px), small tablets and iPhone notch.
   ========================================================== */

/* ---------- Safety net: nothing may push the page sideways ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
img,video,svg,canvas{max-width:100%;height:auto}
iframe,embed,object{max-width:100%}
.entry-content iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.entry-content pre{max-width:100%;overflow-x:auto}
.entry-content,.entry-content p,.entry-content li,.notice-list a,.ncard-body h3,h1,h2,h3{overflow-wrap:anywhere}
.entry-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* "Back to top" button: style.css uses .is-visible, script uses .show */
a.to-top.show{opacity:1!important;visibility:visible!important}

/* ---------- Grids that could overflow on 320-360px phones ---------- */
.news-grid,.event-row.wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))!important}
.event-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
.tile-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.people{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}

/* ---------- Tablet and phone: the menu ---------- */
@media (max-width:1100px){
  /* backdrop-filter on the header traps the fixed menu inside it: turn it off here */
  .site-header,.site-header.scrolled{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(255,255,255,.98)!important}
  .nav{top:var(--hdr-bottom,76px)!important;inset-block-start:var(--hdr-bottom,76px)!important;inset-inline:0;bottom:0;height:auto;z-index:99;overscroll-behavior:contain;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  body.admin-bar .nav{inset-block-start:var(--hdr-bottom,122px)!important}
  .nav-toggle{min-width:46px;min-height:46px}
  .nav .menu a{min-height:46px;display:flex;align-items:center}
}

/* ---------- Phones ---------- */
@media (max-width:640px){
  :root{--fs:16px}
  .wrap{padding-inline:max(16px,env(safe-area-inset-left,0px))}
  .ticker{font-size:.82rem}
  .ticker-tag{padding:.4em .7em}
  .brand-name strong{font-size:1.05rem}

  /* Hero */
  .hero{padding-top:28px;padding-bottom:34px}
  .hero-title{font-size:clamp(2.1rem,10.5vw,3rem);line-height:1.08}
  h1.hero-kicker{font-size:.85rem;padding:.45em .9em}
  .hero-text{font-size:1rem}
  .hero-actions{display:flex;flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center;text-align:center}
  .arch{width:min(100%,300px)}
  .arch-frame{outline-offset:6px}
  .arch::before{inset:-10px -10px 50px;filter:blur(20px)}
  .hero::before,.hero::after{filter:blur(50px);width:320px;height:320px}
  .poster{width:100%;margin-top:22px}

  /* Buttons, forms: comfortable thumbs, no iOS zoom on focus */
  .btn{min-height:46px}
  input,select,textarea{font-size:16px!important;max-width:100%}
  input[type=submit],button:not(.dot){min-height:46px}

  /* Sections */
  .sec-head h2{font-size:1.55rem}
  .news-adv-head{gap:10px}
  .notice-list li{grid-template-columns:62px 1fr;gap:4px 14px;padding:14px 0}
  .dateb{width:58px}
  .ncard-body{padding:18px}
  .messages .msg{padding:20px}
  .page-head--article h1,.page-head h1{font-size:clamp(1.5rem,7vw,2rem);line-height:1.25}
  .entry-content{font-size:1rem;line-height:1.8}
  .entry .meta{font-size:.85rem;gap:6px 12px}
  .share-btn{flex:1 1 calc(50% - 10px)}
  .pager{flex-wrap:wrap;gap:6px}
  .faq-item summary{padding:16px 56px 16px 16px}

  /* Footer */
  .site-footer .foot-grid{padding:0 16px 32px!important;gap:28px!important}
  .site-footer .foot-about{max-width:none!important}
  .site-footer .foot-base{padding:16px!important}
  .site-footer .foot-base-inner{flex-direction:column!important;align-items:flex-start!important;text-align:left}
  .site-footer .foot-menu a,.site-footer .foot-contact-list a{min-height:40px}
  a.to-top{right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;width:46px!important;height:46px!important}
}

/* ---------- Very small phones (320px) ---------- */
@media (max-width:380px){
  .brand-name strong{font-size:.98rem}
  .hero-title{font-size:2rem}
  .quick-grid{gap:10px}
  .qa{padding:14px}
  .notice-list li{grid-template-columns:54px 1fr}
  .dateb{width:52px}
}

/* ---------- Landscape phones: keep the menu usable ---------- */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding-bottom:28px}
  .nav .menu a{min-height:40px;padding-block:.5em}
}

/* ---------- Touch screens: no hover-only effects stuck on ---------- */
@media (hover:none){
  .notice-list li:hover,.tile:hover,.qa:hover,.share-btn:hover{transform:none}
}