/* =============================================================================
   Guadalupe LA — Design System
   Palette drawn directly from the 2026 procession + tardeada posters:
   deep rose-reds, gold rays, Guadalupe teal, parchment cream.
   ========================================================================== */
:root{
  --rose-900:#5e0d0d;
  --rose-800:#7d1313;
  --rose-700:#9d1b1b;
  --rose-600:#b23a2e;
  --gold-500:#c99a2e;
  --gold-400:#e0b64a;
  --gold-300:#e9cd7f;
  --gold-100:#f4e6c2;
  --teal-800:#14463f;
  --teal-600:#1f6b5f;
  --teal-400:#2f8f9d;
  --cream:#faf4ea;
  --cream-2:#f4e9d6;
  --parch:#f7eede;
  --ink:#2a1712;
  --ink-soft:#6b5a44;
  --line:#e6d6b8;
  --shadow:0 18px 50px -22px rgba(70,20,15,.45);
  --shadow-sm:0 8px 24px -14px rgba(70,20,15,.4);
  --radius:18px;
  --maxw:1120px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --title:'Cinzel',Georgia,serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ui);color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(1200px 500px at 50% -180px, rgba(201,154,46,.16), transparent 70%),
    radial-gradient(900px 500px at 100% 0, rgba(31,107,95,.08), transparent 60%);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--rose-700)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---- Type ---------------------------------------------------------------- */
h1,h2,h3{font-family:var(--title);font-weight:700;line-height:1.12;color:var(--rose-800);margin:0 0 .4em}
.script{font-family:var(--serif);font-style:italic;font-weight:600}
.eyebrow{font-family:var(--ui);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;font-weight:700;color:var(--gold-500)}
.lead{font-family:var(--serif);font-size:1.32rem;color:var(--ink-soft)}

/* ---- Top bar ------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(94,13,13,.96);backdrop-filter:blur(6px);
  color:var(--gold-100);border-bottom:2px solid var(--gold-500)}
.topbar .container{display:flex;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold-100);font-family:var(--title);font-size:1.02rem;letter-spacing:.04em}
.brand .edition{background:var(--gold-500);color:#3a2408;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-weight:700;flex:none}
.topnav{margin-left:auto;display:flex;align-items:center;gap:6px}
.topnav a{color:var(--gold-100);text-decoration:none;font-size:.9rem;padding:8px 12px;border-radius:20px;opacity:.9}
.topnav a:hover{background:rgba(255,255,255,.1);opacity:1}
.langtoggle{display:inline-flex;border:1px solid var(--gold-400);border-radius:20px;overflow:hidden}
.langtoggle a{padding:6px 12px;font-size:.8rem;font-weight:700}
.langtoggle a.active{background:var(--gold-500);color:#3a2408}

/* ---- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:var(--gold-100);
  background:
    radial-gradient(circle at 50% 32%, rgba(233,205,127,.35), transparent 45%),
    linear-gradient(180deg,#6d0f0f 0%,#7d1313 45%,#5e0d0d 100%);}
.hero::before{content:"";position:absolute;inset:0;
  background:conic-gradient(from 0deg at 50% 38%,
     rgba(233,205,127,.0) 0deg, rgba(233,205,127,.14) 6deg, rgba(233,205,127,0) 12deg);
  background-size:100% 100%;opacity:.6;pointer-events:none}
.hero .container{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  padding-top:56px;padding-bottom:56px}
.hero-copy .eyebrow{color:var(--gold-300)}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);margin-top:.35em;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero h1 .accent{color:var(--gold-300)}
.hero .theme{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--gold-100);opacity:.95;margin:.2em 0 1.2em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero-figure{position:relative;justify-self:center}
.hero-figure img{width:min(360px,80vw);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  border:3px solid rgba(233,205,127,.55)}
.hero-figure .halo{position:absolute;inset:-30px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,205,127,.5),transparent 62%);filter:blur(8px);z-index:-1}
/* Mobile: San Juan Diego stands at Our Lady's lower-left, mirrored to face her */
/* San Juan Diego at Our Lady's lower-left; hidden until the walk cycle reveals him */
.hero-figure{overflow:visible}
.hero-figure .hero-juandiego{display:block;position:absolute;z-index:2;pointer-events:none;
  left:-8%;bottom:-1%;height:clamp(170px,44vw,260px);width:auto;max-width:none;
  border:0;border-radius:0;box-shadow:none;background:transparent;
  opacity:0;visibility:hidden;transition:opacity .7s ease;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.hero-figure .hero-juandiego.is-shown{opacity:1;visibility:visible}
.hero-wave{display:block;width:100%;height:40px;color:var(--cream)}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;
  text-decoration:none;border:none;cursor:pointer;padding:12px 22px;border-radius:30px;font-size:.95rem;
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-400),var(--gold-500));color:#3a2408;box-shadow:var(--shadow-sm)}
.btn-outline{background:transparent;border:1.5px solid var(--gold-300);color:var(--gold-100)}
.btn-rose{background:var(--rose-700);color:var(--gold-100)}
.btn-teal{background:var(--teal-600);color:#eafaf3}
.btn-ghost{background:#fff;color:var(--rose-800);border:1.5px solid var(--line)}
.btn-sm{padding:8px 15px;font-size:.85rem}
.btn-danger{background:#fff;color:#a11;border:1.5px solid #e3b7b7}

/* ---- Sections ------------------------------------------------------------ */
section{padding:64px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 40px}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.divider-rose{width:70px;height:3px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);margin:14px auto 18px}

/* ---- Key events cards ---------------------------------------------------- */
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.event-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.event-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:1}
.event-card.k-sendoff::before{background:var(--teal-600)}
.event-card.k-tardeada::before{background:var(--gold-500)}
.event-card.k-procession::before{background:var(--rose-700)}
/* Real rose garland frame for the key celebrations (assets/img/rose-border.png).
   Tune two numbers to taste: border-width (rose size) and the slice % (band). */
.event-card.rose-frame{border:42px solid transparent;border-radius:0;padding:14px 16px 16px;
  border-image:url("../img/rose-border.png") 19% round}
.event-card.rose-frame::before{display:none}
.event-card.has-detail{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.event-card.has-detail:hover,.event-card.has-detail:focus-visible{transform:translateY(-3px);
  box-shadow:0 22px 48px -20px rgba(70,20,15,.5);outline:none}
.event-card .date-badge{font-family:var(--title);font-size:1.02rem;color:var(--rose-800);
  white-space:nowrap;font-weight:700;letter-spacing:.01em}
.event-card h3{font-size:1.3rem;margin:.3em 0 .1em}
.event-card .ev-time{color:var(--gold-500);font-weight:700}
.event-card .place{font-weight:600}
.event-card .addr{color:var(--ink-soft);font-size:.92rem}
.event-card .detail{font-family:var(--serif);font-style:italic;color:var(--teal-800);margin-top:10px}
.event-card .ev-more{margin-top:12px;font-family:var(--ui);font-weight:700;font-size:.82rem;
  letter-spacing:.04em;color:var(--rose-700);text-transform:uppercase}
@media(max-width:520px){.event-card .date-badge{white-space:normal;font-size:.96rem}}

/* Event detail modal */
.ev-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.ev-modal[hidden]{display:none}
.ev-modal-backdrop{position:absolute;inset:0;background:rgba(42,23,18,.62);backdrop-filter:blur(2px)}
.ev-modal-panel{position:relative;background:var(--cream);border-radius:16px;max-width:640px;width:100%;
  max-height:86vh;overflow:auto;box-shadow:var(--shadow);border:1px solid var(--line)}
.ev-modal-close{position:absolute;top:10px;right:12px;z-index:2;border:0;background:rgba(255,255,255,.85);
  width:38px;height:38px;border-radius:50%;font-size:1.6rem;line-height:1;color:var(--rose-800);cursor:pointer;box-shadow:var(--shadow-sm)}
.ev-modal-body{padding:26px 28px}
.ev-modal-body h3{font-family:var(--title);color:var(--rose-800);font-size:1.55rem;margin:0 0 .2em}
.ev-modal-body .ev-meta{color:var(--ink-soft);margin-bottom:14px;line-height:1.5}
.ev-modal-body .ev-meta .ev-time{color:var(--gold-500);font-weight:700}
.ev-info{line-height:1.65;color:var(--ink)}
.ev-info img{max-width:100%;height:auto;border-radius:8px}
.ev-info table{border-collapse:collapse;width:100%;margin:10px 0}
.ev-info td,.ev-info th{border:1px solid var(--line);padding:7px 10px;text-align:left}
.ev-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:18px}
.ev-media a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;text-decoration:none}
.ev-media img{width:100%;height:120px;object-fit:cover;display:block}
.ev-media .ev-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;
  color:var(--rose-800);font-weight:700;gap:6px;font-size:.85rem;padding:8px;text-align:center}
.ev-media .ev-pdf span{font-size:2rem}

/* ---- Schedule ------------------------------------------------------------ */
.schedule{background:linear-gradient(180deg,var(--cream),var(--parch))}
.region-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:24px;padding:8px 16px;
  font-size:.86rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.chip .dot{width:11px;height:11px;border-radius:50%}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.all[aria-pressed="true"]{background:var(--rose-800);border-color:var(--rose-800)}

.region-block{margin-bottom:40px}
.region-title{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.region-title .swatch{width:16px;height:34px;border-radius:5px;flex:none}
.region-title h3{margin:0;font-size:1.5rem}
.region-range{color:var(--ink-soft);font-family:var(--serif);font-style:italic;font-size:1.05rem;margin:0 0 16px 30px}

.stops{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.stop{background:#fff;border:1px solid var(--line);border-left:5px solid var(--region-color,var(--rose-700));
  border-radius:12px;padding:15px 17px;box-shadow:0 6px 16px -12px rgba(70,20,15,.35);position:relative}
.stop.is-pending{background:repeating-linear-gradient(135deg,#fffdf8,#fffdf8 10px,#fbf4e6 10px,#fbf4e6 20px);
  border-style:dashed}
.stop .stop-date{font-family:var(--title);font-size:.98rem;color:var(--rose-800);font-weight:700}
.stop.is-pending .stop-date{color:var(--ink-soft)}
.stop .stop-parish{font-weight:700;font-size:1.05rem;margin:3px 0 1px}
.stop .stop-city{color:var(--ink-soft);font-size:.9rem}
.stop .stop-addr{color:var(--ink-soft);font-size:.84rem;margin-top:6px}
.stop .stop-addr a{color:var(--teal-600);text-decoration:none}
.badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;vertical-align:middle;margin-left:6px}
.badge-pending{background:#fff2d6;color:#8a5a00;border:1px solid #ecd08a}
.badge-special{background:var(--gold-500);color:#3a2408}
.stop-star{position:absolute;top:12px;right:12px;color:var(--gold-500);font-size:1.1rem}

/* Special stops get the same rose garland frame as the key celebrations */
.stop.is-special{border:28px solid transparent;border-radius:0;
  border-image:url("../img/rose-border.png") 19% round;
  box-shadow:0 10px 26px -16px rgba(70,20,15,.5)}
.stop.is-special .stop-star{display:none}
@media(max-width:520px){.stop.is-special{border-width:20px}}

/* ---- Poster feature ------------------------------------------------------ */
.posters{background:#fff}
.poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.poster-card{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.poster-card img{width:100%;transition:transform .4s ease}
.poster-card:hover img{transform:scale(1.03)}
.poster-card .cap{padding:14px 16px;font-family:var(--serif);font-style:italic;color:var(--ink-soft)}

/* ---- Links / involvement ------------------------------------------------- */
.involve{background:linear-gradient(180deg,var(--teal-800),#0f342e);color:#eafaf3}
.involve h2{color:#fff}
.involve .lead{color:#cfeee4}
.involve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.involve-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  padding:26px 22px;text-align:center}
.involve-card h3{color:var(--gold-300);font-size:1.2rem}
.involve-card p{color:#cfeee4;font-size:.94rem;min-height:60px}

/* ---- Contact / footer ---------------------------------------------------- */
.contact{background:var(--cream)}
.contact-card{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:38px;box-shadow:var(--shadow-sm)}
footer{background:var(--rose-900);color:#e8cfa2;padding:40px 0;text-align:center;font-size:.9rem}
footer a{color:var(--gold-300)}
.footer-logos{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.footer-logos img{height:54px;filter:brightness(0) invert(1);opacity:.85}

/* ---- Flash / alerts ------------------------------------------------------ */
.alert{border-radius:12px;padding:12px 16px;margin:12px 0;font-size:.94rem}
.alert-success{background:#e8f6ee;color:#166534;border:1px solid #bfe3cd}
.alert-error{background:#fdeaea;color:#9b1c1c;border:1px solid #f2c2c2}
.alert-info{background:#eef4fb;color:#1e40af;border:1px solid #c9dbf3}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;text-align:center;padding-top:40px}
  .hero-cta{justify-content:center}
  .hero-figure{order:-1}
  .events-grid,.poster-grid,.involve-grid{grid-template-columns:1fr}
  .topnav a.hide-sm{display:none}
}
@media (max-width:560px){
  .topbar .container{height:auto;padding:10px 16px;flex-wrap:wrap}
  section{padding:46px 0}
}

/* ---- Parish search ------------------------------------------------------- */
.parish-search{max-width:640px;margin:0 auto 34px;position:relative}
.ps-label{display:block;text-align:center;font-family:var(--title);color:var(--rose-800);font-size:1.15rem;margin-bottom:12px}
.ps-box{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:40px;padding:6px 8px 6px 18px;box-shadow:var(--shadow-sm)}
.ps-box:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(201,154,46,.16)}
.ps-icon{opacity:.5;font-size:1rem}
#psInput{flex:1;border:0;outline:0;background:transparent;font-family:var(--ui);font-size:1.02rem;padding:10px 4px;color:var(--ink)}
.ps-help{text-align:center;color:var(--ink-soft);font-size:.9rem;margin:.5rem 0 0}
.ps-suggest{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-height:340px;overflow:auto}
.ps-suggest li{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;cursor:pointer}
.ps-suggest li:hover,.ps-suggest li.is-active{background:var(--cream-2)}
.ps-suggest .ps-name{font-weight:600;color:var(--rose-800)}
.ps-suggest .ps-city{font-size:.82rem;color:var(--ink-soft)}
.ps-result{margin-top:16px}
.ps-loading{text-align:center;color:var(--ink-soft);padding:14px;font-family:var(--serif);font-size:1.1rem}
.ps-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm)}
.ps-card h4{font-family:var(--title);color:var(--rose-800);font-size:1.3rem;margin:.1rem 0 .6rem}
.ps-card p{margin:.4rem 0;line-height:1.6}
.ps-yes{border-top:5px solid var(--teal-400)}
.ps-badge{display:inline-block;background:var(--teal-800);color:#eafaf4;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:10px}
.ps-visits{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ps-visits li{display:flex;justify-content:space-between;gap:14px;background:var(--parch);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px}
.ps-when{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--rose-800)}
.ps-reg{color:var(--ink-soft);font-size:.9rem;align-self:center;text-align:right}
.ps-pending{border-top:5px solid var(--gold-400)}
.ps-none{border-top:5px solid var(--rose-700)}
.ps-invite-lead{color:var(--ink-soft)}
.ps-contact{margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ps-row{display:flex;justify-content:space-between;gap:16px;padding:9px 14px;font-size:.94rem}
.ps-row:nth-child(odd){background:var(--parch)}
.ps-row span:first-child{color:var(--ink-soft);flex:none;min-width:96px}
.ps-row span:last-child{text-align:right;word-break:break-word}
.ps-invite-btn{margin-top:6px}
.ps-noemail{color:var(--ink-soft);font-size:.9rem}
.ps-invite-form{margin-top:16px;border-top:1px dashed var(--line);padding-top:16px}
.ps-form-note{color:var(--ink-soft);font-size:.92rem}
.ps-invite-form label{display:block;font-size:.86rem;color:var(--ink-soft);margin:10px 0 0}
.ps-invite-form .req{color:var(--rose-700)}
.ps-invite-form input{width:100%;box-sizing:border-box;margin-top:5px;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:10px;font-family:var(--ui);font-size:1rem}
.ps-invite-form input:focus{outline:0;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,154,46,.16)}
.ps-form-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ps-form-msg{min-height:1.1em;margin:.6rem 0 0;font-size:.9rem}
.ps-form-msg.err{color:var(--rose-600)}
.ps-sent{background:#f0f8f2;border:1px solid #bfe0c8;color:#245c34;border-radius:12px;padding:16px 18px;font-weight:600}
@media(max-width:560px){.ps-row{flex-direction:column;gap:2px}.ps-row span:last-child{text-align:left}
  .ps-reg{text-align:left}.ps-visits li{flex-direction:column;gap:2px}}

/* ---- Clickable schedule stops ------------------------------------------- */
.stop.has-detail{cursor:pointer}
.stop.has-detail:hover{border-color:var(--gold-500);box-shadow:0 12px 30px -18px rgba(70,20,15,.5)}
.stop .stop-more{margin-top:8px;font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--rose-700)}

/* ---- Main event card (December procession) ------------------------------- */
.main-event{margin-top:44px;position:relative}
.main-event.gold-rose-frame{
  position:relative;overflow:hidden;background:#fdf8ee;border-radius:5px;
  border:2px solid #c4a03a;
  box-shadow:inset 0 0 0 4px #fdf8ee, inset 0 0 0 6px #e6c463,
             0 28px 64px -34px rgba(94,13,13,.5);
}
/* large rose clusters at two opposite corners, matching the reference frame */
.main-event.gold-rose-frame::before,
.main-event.gold-rose-frame::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  width:clamp(190px,34%,400px);height:clamp(190px,34%,400px);
  background-repeat:no-repeat;background-size:contain}
.main-event.gold-rose-frame::before{top:-2px;right:-2px;
  background-image:url("../img/rose-corner-tr.png");background-position:top right;z-index:4}
.main-event.gold-rose-frame::after{bottom:-2px;left:-2px;
  background-image:url("../img/rose-corner-bl.png");background-position:bottom left;z-index:4}
/* San Juan Diego with the tilma, standing at the right, roses at his feet */
.me-figure{position:absolute;z-index:3;right:3%;bottom:0;height:97%;width:auto;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 8px 10px rgba(70,20,15,.18))}
.main-event.has-detail{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.main-event.has-detail:hover,.main-event.has-detail:focus-visible{transform:translateY(-3px);outline:none}
.main-event-inner{position:relative;z-index:1;text-align:center;padding:60px 70px 64px;padding-right:clamp(70px,20%,240px)}
.me-eyebrow{font-family:var(--ui);text-transform:uppercase;letter-spacing:.32em;font-size:.8rem;font-weight:800;color:var(--gold-500)}
.me-title{font-family:var(--title);color:var(--rose-800);font-size:2.6rem;margin:.12em 0 .12em;line-height:1.08}
.me-date{font-family:var(--serif);font-size:1.55rem;color:var(--teal-800);font-weight:600;margin-bottom:18px}
.me-times{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:10px 0 18px}
.me-time{background:var(--parch);border:1px solid var(--line);border-radius:14px;padding:14px 26px;min-width:160px}
.me-time-lbl{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700;color:var(--gold-500)}
.me-time-val{display:block;font-family:var(--title);font-size:1.7rem;color:var(--rose-800);margin-top:3px}
.me-place{font-family:var(--title);font-size:1.28rem;color:var(--ink);font-weight:700}
.me-addr{color:var(--ink-soft)}
.me-detail{font-family:var(--serif);font-style:italic;color:var(--teal-800);margin-top:8px;font-size:1.15rem}
.me-more{margin-top:14px;font-family:var(--ui);font-weight:700;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--rose-700)}
@media(max-width:820px){
  .me-figure{display:none}
  .main-event-inner{padding-right:clamp(56px,10%,70px)}
}
@media(max-width:640px){
  .main-event.gold-rose-frame::before,.main-event.gold-rose-frame::after{width:120px;height:120px}
  .main-event-inner{padding:30px 20px 34px}
  .me-title{font-size:1.7rem}.me-date{font-size:1.15rem}.me-time-val{font-size:1.4rem}
}
@media(max-width:520px){.event-card.rose-frame{border-width:30px}}

/* ---- Mobile safety: modal + embedded media fit the viewport ------------- */
@media (max-width:560px){
  .ev-modal-card{max-width:94vw;max-height:88vh;overflow:auto}
  .ev-media img{max-width:100%;height:auto}
  .me-times{gap:10px}
  .me-time{min-width:130px;padding:10px 16px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* ---- San Juan Diego walking across the bottom of the viewport ------------ */
.jd-walk-track{position:fixed;left:0;right:0;bottom:0;height:clamp(100px,15vh,150px);
  overflow:hidden;pointer-events:none;z-index:35}
.jd-walk-track.revealing{overflow:visible}
.jd-walker{position:absolute;left:0;bottom:0;height:100%;width:auto;
  transform:translateX(-200px);will-change:transform;pointer-events:auto;cursor:pointer}
.jd-miracle{position:absolute;left:0;bottom:0;height:100%;width:auto;
  visibility:hidden;opacity:0;transform:scale(.9);transform-origin:bottom center;
  transition:opacity .3s ease, transform .3s ease;will-change:opacity,transform;pointer-events:none}
.jd-miracle.show{opacity:1;transform:scale(1)}

/* ---- Language picker (carousel + native-name dropdown) ------------------- */
.langpick{position:relative}
.langpick-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);
  border:1px solid rgba(233,205,127,.55);color:#f3e6c8;border-radius:22px;padding:6px 14px;cursor:pointer;
  font-family:var(--ui);font-size:.85rem;line-height:1}
.langpick-btn:hover{background:rgba(255,255,255,.18)}
.lp-ico{font-size:1rem}
.lp-en{font-weight:700;letter-spacing:.02em}
.lp-carousel{display:inline-block;min-width:78px;text-align:left;color:#e6c463;overflow:hidden}
.lp-word{display:inline-block;transition:opacity .22s ease;opacity:1}
.lp-caret{opacity:.7;font-size:.7em}
.langpick-menu{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid #e6d6b8;
  border-radius:14px;box-shadow:0 24px 55px -18px rgba(0,0,0,.55);padding:8px;z-index:60;
  grid-template-columns:1fr 1fr;gap:2px;min-width:320px;max-height:70vh;overflow:auto}
.langpick-menu:not([hidden]){display:grid}
.langpick-menu a{display:block;padding:9px 13px;border-radius:9px;color:#2a1712;text-decoration:none;font-size:.92rem;white-space:nowrap}
.langpick-menu a:hover{background:#f4ecdd}
.langpick-menu a.active{background:#7d1313;color:#fff;font-weight:700}
[dir=rtl] .langpick-menu{left:0;right:auto}
[dir=rtl] .lp-carousel{text-align:right}
@media(max-width:520px){.langpick-menu{min-width:250px;grid-template-columns:1fr}.lp-carousel{min-width:64px}}

/* ---- Route map ----------------------------------------------------------- */
.routemap{padding:64px 0;background:linear-gradient(180deg,#fff,#faf4ea)}
.route-caption{background:#fff;border:1px solid var(--line);border-left:5px solid var(--rose-700);
  border-radius:12px;padding:14px 18px;font-size:1.05rem;color:var(--ink);margin:8px 0 4px;line-height:1.5}
.route-datebar{display:flex;gap:14px;align-items:center;margin:14px 0 16px}
.route-datebar input[type=range]{flex:1;accent-color:#7d1313;height:6px}
.route-datelabel{font-family:var(--ui);font-weight:800;color:var(--rose-800);min-width:170px;text-align:right}
.route-map{position:relative;z-index:0;height:470px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 20px 45px -25px rgba(70,20,15,.5)}
.route-map .leaflet-container{font-family:var(--ui);background:#eef1f0}
.route-map a{color:#7d1313}
[dir=rtl] .route-datelabel{text-align:left}
@media(max-width:560px){.route-map{height:370px}.route-datelabel{min-width:0;font-size:.82rem}}

/* rose marker = Our Lady's current position on the route map */
.rose-marker{animation:roseGlow 2.6s ease-in-out infinite}
@keyframes roseGlow{0%,100%{filter:drop-shadow(0 3px 4px rgba(70,20,15,.5))}50%{filter:drop-shadow(0 2px 10px rgba(125,19,19,.9))}}

/* ---- Poster thumbnails + lightbox ---------------------------------------- */
.poster-grid .poster-card{padding:0;border:1px solid var(--line);background:#fff;cursor:pointer;
  text-align:left;font:inherit;color:inherit;display:block;width:100%}
.poster-thumb{position:relative;width:100%;aspect-ratio:816/1363;overflow:hidden;background:#faf4ea}
.poster-thumb picture,.poster-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.poster-card:hover .poster-thumb img{filter:brightness(.97)}

.poster-modal[hidden]{display:none}
.poster-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.pmod-backdrop{position:absolute;inset:0;background:rgba(30,10,8,.72)}
.pmod-dialog{position:relative;background:#faf4ea;border-radius:16px;box-shadow:0 30px 80px -20px #000;
  max-width:min(94vw,520px);width:100%;max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
.pmod-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pmod-title{font-family:var(--serif);font-weight:700;color:var(--rose-800)}
.pmod-x{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:#7a6a58}
.pmod-stage{flex:1;overflow:auto;background:#e9e2d3;display:flex;justify-content:center;padding:14px}
.pmod-canvas{position:relative;width:100%;max-width:440px;aspect-ratio:816/1363;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.3);align-self:flex-start}
.pmod-canvas iframe{position:absolute;top:0;left:0;width:816px;height:1363px;border:0;transform-origin:top left}
.pmod-controls{display:flex;gap:10px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pmod-langwrap{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--ink);flex:1;min-width:0}
.pmod-langwrap select{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit}
#pmodDownload{white-space:nowrap}

/* visitor count in the footer */
.visit-count{font-family:var(--serif);font-style:italic;opacity:.75;margin-bottom:10px;font-size:.9rem}

/* Tardeada thumbnail/modal use the flyer's own proportions */
.poster-thumb.tardeada{aspect-ratio:816/1363}          /* object-fit:cover crops the wider flyer to match */