/* ============================================================
   sacramentals.css — rules from styles.css used by one page, /sacramentals.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   Linked straight after styles.css (and any family sheet).
   ============================================================ */

/* ───────────────── Sacramentals: hero masthead + card grid ───────────────── */
.sacramentals-hero{
  position:relative;
  overflow:hidden;
  padding:0;
  background:var(--espresso);
  border-bottom:1px solid rgba(201,168,90,.36);
}
.sacramentals-hero-art{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--sac-hero-image);
  background-size:var(--sac-hero-size,cover);
  background-position:var(--sac-hero-position,center 45%);
  background-repeat:no-repeat;
  transform:scale(1.03);
}
.sacramentals-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(15,12,10,.58) 0%,rgba(20,14,9,.70) 52%,rgba(26,18,11,.93) 100%);
}
.sacramentals-hero::after{
  content:"";
  position:absolute;
  inset:18px;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(201,168,90,.22);
}
.sacramentals-hero .a-emblem{filter:drop-shadow(0 0 18px rgba(201,168,90,.45)) brightness(1.08);}
.sacramentals-hero h1{color:#f5ecd6;font-size:clamp(38px,6.4vw,74px);letter-spacing:.07em;}
.sacramentals-hero .dbl{max-width:520px;margin:20px auto 14px;}
.sacramentals-hero .dbl .bot{height:1px;background:var(--champagne);opacity:.5;margin-top:3px;}

.sac-predella{
  position:relative;
  padding:56px 24px 64px !important;
  background:var(--espresso);
  border-bottom:1px solid rgba(201,168,90,.34);
}
.sac-predella::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(780px 320px at 50% -10%,rgba(201,168,90,.14),transparent 72%);
}
.sac-predella-head{position:relative;z-index:1;text-align:center;margin:0 auto 34px;}
.sac-predella-head h2{margin-top:8px;color:#efe4cf;font-size:clamp(24px,3.4vw,38px);letter-spacing:.06em;}
.sac-grid{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px 24px;
}
.sac-card{display:grid;justify-items:center;align-content:start;gap:6px;color:#e9ddc4;text-align:center;}
.sac-card:hover{color:var(--champagne);}
.sac-frame{
  width:100%;
  /* the plates are square or near-square artwork; a portrait frame would crop them */
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid rgba(201,168,90,.54);
  border-radius:90px 90px 6px 6px;
  background:#0f0a06;
  box-shadow:inset 0 0 0 5px var(--espresso),inset 0 0 0 6px rgba(201,168,90,.25),0 20px 46px rgba(0,0,0,.36);
}
.sac-frame img{width:100%;height:100%;object-fit:cover;opacity:.95;transition:transform .55s ease,opacity .3s ease;}
.sac-card:hover .sac-frame img{transform:scale(1.045);opacity:1;}
.sac-num{margin-top:10px;font-family:var(--head);font-size:21px;line-height:1;color:var(--champagne);letter-spacing:.14em;}
.sac-card strong{font-family:var(--head);font-size:22px;line-height:1.12;color:#f1e6cc;}
.sac-card em{color:#a8946f;font-size:15px;line-height:1.35;}

@media(max-width:1080px){.sac-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;}}
@media(max-width:760px){.sac-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;}}
@media(max-width:460px){
  .sac-grid{grid-template-columns:1fr;max-width:300px;}
  .sacramentals-hero::after{inset:10px;}
  .sac-predella{padding:44px 18px 50px !important;}
}

/* Inline source links inside the sacramental cards (/sacramentals#rosary).
   Underlined at rest so they read as links within the body text. */
.sac-source{color:var(--gold-deep);text-decoration:underline;text-decoration-color:rgba(125,98,36,.4);text-underline-offset:3px;}
.sac-source:hover{color:var(--gold-deep);text-decoration-color:currentColor;}
.sac-source:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;}

/* ── Single-element styles, once written inline on the page ──
   Each class carries what one style="" attribute said. They sit last in
   the page's cascade, as the attributes did; where a rule elsewhere
   matched the same element more specifically, the class is doubled so it
   still wins, exactly as the attribute won. */
.u-pt-20{padding-top:20px;}
.u-bb-none-pb-20{border-bottom:none;padding-bottom:20px;}
.u-mt-12{margin-top:12px;}
.u-m-24-0-10{margin:24px 0 10px;}
.u-m-8-0-40{margin:8px 0 40px;}
.u-m-20-0-8{margin:20px 0 8px;}
.u-m-12-0-8{margin:12px 0 8px;}
.u-m-60-0-20{margin:60px 0 20px;}
.u-bb-none-pb-0{border-bottom:none;padding-bottom:0;}
.u-mb-20{margin-bottom:20px;}
.u-mb-10{margin-bottom:10px;}
.u-fs-17-lh-1p6{font-size:17px;line-height:1.6;}
.u-m-20-0-10{margin:20px 0 10px;}
.u-mt-40{margin-top:40px;}
.u-ta-center-mt-24{text-align:center;margin-top:24px;}