/* ============================================================
   RUMMEL MINISTRY. Page-specific blocks on top of rummel-page.css
   and rummel-blocks.css: the founder, the prayers, the photo
   strips, and the Campus Ministry team. Everything else on the
   page is the shared block library.
   ============================================================ */

/* ---- PHOTO STRIPS ----
   Grids of photographs from the school's own events. Every strip
   ends on a full row (three across, or two), and every tile is the
   same 4:3 so a portrait frame crops rather than breaking the row.
   Tiles dissolve softly at the corners rather than sitting as hard
   rectangles on the page. */
.mstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.8rem;}
.mstrip.two{grid-template-columns:repeat(2,1fr);}
.mstrip .g{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:12px;
  box-shadow:0 1px 3px rgba(11,34,64,.06),0 22px 44px -30px rgba(11,34,64,.55);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;position:relative;overflow:hidden;}
.mstrip .g::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,64,0) 62%,rgba(11,34,64,.35));opacity:0;transition:opacity .35s ease;}
.mstrip .g:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(11,34,64,.06),0 30px 54px -30px rgba(11,34,64,.6);}
.mstrip .g:hover::after{opacity:1;}
.mstrip .g.tall{background-position:center 30%;}
.mstrip-cap{margin-top:.9rem;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rb-deep);}
.on-dark .mstrip-cap{color:var(--rb-type);}
@media(max-width:820px){ .mstrip{grid-template-columns:repeat(2,1fr);gap:.8rem;} }
@media(max-width:520px){ .mstrip,.mstrip.two{grid-template-columns:1fr;} }

/* the event pair: two strips side by side with their own captions */
.mevents{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:2.2rem;}
.mevents h3{font-family:var(--slab);text-transform:uppercase;font-size:1.15rem;color:var(--navy);margin-bottom:.35rem;}
.mevents .when{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.4rem;}
.mevents p.b{font-size:1rem;line-height:1.6;color:var(--ink-soft);max-width:52ch;}
.mevents .mstrip{margin-top:1.2rem;}
@media(max-width:920px){ .mevents{grid-template-columns:1fr;gap:3rem;} }

/* ---- THE PRAYERS ----
   Two prayers, set the way they are said: slowly, in a quiet room.
   Cream paper is out (never brown); this is a cool white card with a
   Columbia wash at the top edge and a hairline. */
.prayers{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.2rem;align-items:stretch;}
.pray{position:relative;background:#fff;border-radius:16px;padding:2.4rem 2.4rem 2.2rem;
  box-shadow:0 1px 3px rgba(11,34,64,.05),0 34px 70px -40px rgba(11,34,64,.55);
  background-image:linear-gradient(180deg,var(--rb-pale) 0,#fff 140px);overflow:hidden;}
.pray::before{content:"";position:absolute;left:50%;top:0;width:64px;height:3px;transform:translateX(-50%);
  background:var(--red);border-radius:0 0 3px 3px;}
.pray .cross{display:block;width:26px;height:26px;margin:0 auto 1.1rem;color:var(--rb-deep);}
.pray h3{font-family:var(--slab);text-transform:uppercase;font-size:1.25rem;letter-spacing:.02em;color:var(--navy);text-align:center;margin-bottom:.35rem;}
.pray .sub{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-deep);text-align:center;margin-bottom:1.5rem;}
.pray .txt{font-size:1.12rem;line-height:1.85;color:var(--ink);text-align:center;max-width:44ch;margin:0 auto;}
.pray .txt p+p{margin-top:1rem;}
.pray .txt em{font-style:italic;color:var(--navy);}
.pray .txt .resp{display:block;font-family:var(--sans);font-weight:600;font-size:.94rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-top:.15rem;}
.pray .note{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.92rem;line-height:1.55;color:var(--ink-soft);text-align:center;}
.pray.ends .txt{font-size:1.28rem;}
.pray.ends .lead{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:.5rem;}
.pray.ends .txt p+p{margin-top:1.6rem;}
@media(max-width:920px){ .prayers{grid-template-columns:1fr;} .pray{padding:2rem 1.5rem 1.8rem;} .pray .txt{font-size:1.05rem;} .pray.ends .txt{font-size:1.15rem;} }

/* ---- THE FOUNDER ----
   The statue on the left, the life on the right, and a facts card.
   Reuses .ta-wrap from the block library; only the portrait frame
   is new. */
.founder-pic{aspect-ratio:3/4;background-size:cover;background-position:center 20%;border-radius:14px;
  box-shadow:0 1px 3px rgba(11,34,64,.06),0 30px 60px -36px rgba(11,34,64,.6);}
.founder-facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem;margin-top:1.4rem;}
.founder-facts .f{border-top:1px solid var(--line);padding-top:.6rem;}
.founder-facts .f b{display:block;font-family:var(--slab);text-transform:uppercase;font-size:1.05rem;color:var(--red);line-height:1.1;}
.founder-facts .f span{font-family:var(--sans);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}

/* ---- THE TEAM ----
   Three people, three cards, on the dark band. Portraits from the
   faculty roster's own set, so a staff photograph has one source on
   the site. Names in Oswald sentence case, never slab (a name is not
   a header). Email and extension shown, tappable, and readable. */
.mteam{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem;}
.mteam .person{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:1.8rem 1.6rem 1.6rem;display:flex;flex-direction:column;align-items:center;text-align:center;
  backdrop-filter:blur(6px);transition:background .3s ease,transform .3s ease;}
.mteam .person:hover{background:rgba(255,255,255,.1);transform:translateY(-3px);}
.mteam .face{width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--rb-pale);
  box-shadow:0 0 0 4px rgba(255,255,255,.14),0 18px 34px -18px rgba(0,0,0,.6);}
.mteam .face img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.mteam .role{margin-top:1.1rem;font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rb-type);opacity:.85;}
.mteam .name{margin-top:.2rem;font-family:var(--sans);font-weight:600;font-size:1.32rem;line-height:1.2;color:#fff;letter-spacing:.005em;}
.mteam .name .y{color:#fff;}   /* the year is part of the name, same colour, always */
.mteam .bio{margin-top:.8rem;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:36ch;}
.mteam .links{margin-top:1.1rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;}
.mteam .links a{font-family:var(--sans);font-weight:500;font-size:.94rem;letter-spacing:.02em;color:var(--rb);text-decoration:none;
  min-height:36px;display:inline-flex;align-items:center;transition:color .18s ease;}
.mteam .links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:920px){ .mteam{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;} }

/* the chapel gets a small third row of the room's details */
.chapel-strip{margin-top:1.8rem;}

/* ---- SERVICE HOURS ACCORDION ----
   Replaces the grade table (Kelly, 2026-08-15: the chart layout read
   wonky and she wanted a grade to be clickable). The 130 total sits
   above as a fixed summary; the five grades open one at a time. Rows
   are real buttons so the keyboard and a screen reader get the same
   thing the mouse does. */
.svc-total{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:1.2rem 1.4rem;border-radius:14px;margin-bottom:1.1rem;
  background:linear-gradient(140deg,rgba(117,178,221,.16),rgba(117,178,221,.05));
  border:1px solid rgba(117,178,221,.34);}
.svc-total .n{font-family:var(--slab);text-transform:uppercase;font-size:2.5rem;line-height:1;color:var(--red);}
.svc-total .k{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);}
.svc-total .d{flex:1 1 100%;font-size:.95rem;line-height:1.5;color:var(--ink-soft);}

.svc{border-top:1px solid var(--line);}
.svc-row{border-bottom:1px solid var(--line);}
/* font-family:inherit, same button rule as .tl-card and .ritem-btn. */
.svc-head{display:flex;align-items:center;gap:1rem;width:100%;
  font-family:inherit;font-size:inherit;color:inherit;
  padding:1.05rem .45rem;background:none;border:0;cursor:pointer;text-align:left;
  border-radius:10px;transition:background .3s ease,padding-left .3s ease;}
.svc-head:hover,.svc-head:focus-visible{background:rgba(117,178,221,.10);padding-left:.9rem;}
.svc-head:focus-visible{outline:2px solid var(--rb-deep);outline-offset:2px;}
.svc-head .g{flex:1;font-family:var(--slab);text-transform:uppercase;font-size:1.05rem;
  letter-spacing:.02em;color:var(--navy);}
.svc-head .h{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rb-deep);white-space:nowrap;}
/* the marker: a plus that rotates into a minus, no glyph to go stale */
.svc-head .mk{position:relative;width:15px;height:15px;flex:0 0 15px;
  transition:transform .38s cubic-bezier(.2,.7,.2,1);}
.svc-head .mk::before,.svc-head .mk::after{content:"";position:absolute;background:var(--red);
  border-radius:2px;transition:opacity .3s ease;}
.svc-head .mk::before{left:0;top:6.5px;width:15px;height:2px;}
.svc-head .mk::after{top:0;left:6.5px;height:15px;width:2px;}
.svc-head[aria-expanded="true"] .mk{transform:rotate(180deg);}
.svc-head[aria-expanded="true"] .mk::after{opacity:0;}
.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1);}
.svc-head[aria-expanded="true"]+.svc-body{grid-template-rows:1fr;}
.svc-body>.in{overflow:hidden;}
.svc-body p{padding:0 .45rem 1.15rem;font-size:1rem;line-height:1.62;color:var(--ink-soft);max-width:56ch;}

/* ---- ALUMNI PRIESTS ----
   Kelly, 2026-08-17: "the same treatment as the former Association Presidents"
   — senior portrait plus name. This is the .pcard pattern off alumni-board.html
   ported onto Ministry's navy band, so the two pages read as one house.

   Two deliberate departures from the board page. The monogram behind a missing
   portrait is Columbia here, not the board's red: sixteen red discs on a navy
   field would shout, and this grid fills in as portraits are mined. And the
   grid is SIX across, because eighteen men land 6 x 3 exactly and every step
   down (3, then 2) also divides eighteen, so the block can never end on a
   short row.

   Grad years render in the same colour as the name; they are part of the name,
   not metadata. */
.apriests{margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid rgba(255,255,255,.16);}
.apriests h3{font-family:var(--slab);text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em;
  color:#fff;text-align:center;margin-bottom:.55rem;}
.apsub{font-family:var(--serif);font-style:italic;text-align:center;color:var(--rb-type);
  font-size:.98rem;line-height:1.6;max-width:56ch;margin:0 auto 2.1rem;}

.apgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.2rem 1rem;}
@media(max-width:900px){ .apgrid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:520px){ .apgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem .8rem;} }

.apcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;}
.ap-av{position:relative;width:104px;height:104px;max-width:100%;border-radius:50%;overflow:hidden;flex:none;
  border:2px solid rgba(117,178,221,.9);box-shadow:0 12px 26px -10px rgba(0,0,0,.6);background:var(--rb-steel);
  transition:transform .34s cubic-bezier(.2,.7,.2,1),border-color .34s ease,box-shadow .34s ease;}
.apcard:hover .ap-av{transform:translateY(-6px) scale(1.03);border-color:#8FC4E8;
  box-shadow:0 24px 40px -12px rgba(0,0,0,.75);}
.ap-av img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.12) contrast(1.03);transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .34s ease;}
.apcard:hover .ap-av img{transform:scale(1.09);filter:grayscale(0) contrast(1.05);}
.ap-av .mono{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,var(--rb-deep),var(--rb-steel));}
.ap-av .mono span{font-family:var(--slab);text-transform:uppercase;font-size:1.5rem;color:#fff;}

.apname{font-family:var(--slab);text-transform:uppercase;color:#fff;font-size:1rem;line-height:1.18;
  letter-spacing:.03em;transition:transform .34s cubic-bezier(.2,.7,.2,1);}
.apcard:hover .apname{transform:translateY(-2px);}
.apname .first,.apname .last{display:block;color:#fff;}
/* the religious order, the one piece of the name set quieter than the rest */
.apname .ord{display:block;font-family:var(--sans);font-weight:600;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.14em;color:var(--rb);margin-top:.3rem;}
.apnote{margin-top:2.2rem;text-align:center;font-size:.9rem;line-height:1.5;color:var(--rb-type);}
@media(prefers-reduced-motion:reduce){
  .ap-av,.ap-av img,.apname{transition:none;}
  .apcard:hover .ap-av,.apcard:hover .ap-av img,.apcard:hover .apname{transform:none;}
}

@media(max-width:520px){
  .svc-head{gap:.6rem;padding:.95rem .3rem;}
  .svc-head .g{font-size:.95rem;}
  .svc-head .h{font-size:.7rem;}
  .svc-total .n{font-size:2.1rem;}
}

/* ---- THE LASALLIAN GRID IS THREE, NOT FOUR ----
   Excellence came out on 2026-08-17 (Kelly), leaving Faith, Community and
   Service. The shared .prog-grid is four columns and then two at 1080, so
   three cards would sit as 3 + a hole, then 2 + 1. A grid has to end on a
   full row, so this section holds three across until the phone takes it to
   one. Scoped to #s1 on purpose: About and Academics still run four. */
#s1 .prog-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:1080px){ #s1 .prog-grid{grid-template-columns:repeat(3,1fr);gap:1.1rem;} }
@media(max-width:760px){ #s1 .prog-grid{grid-template-columns:1fr;gap:1.1rem;} }