/* =========================================================
   OUR LADY OF FATIMA PARISH — CANDLELIGHT THEME
========================================================= */

:root {
    --vigil: #0E1B33;
    --nave: #08101F;
    --vigil-lift: #15264A;
    --candle: #E9B44C;
    --candle-dim: #B8893A;
    --cloth: #F3ECDD;
    --cloth-mute: #B9B4A6;
    --fatima: #2E5FA8;
    --ink: #1A2438;
    --ink-mute: #4D566B;
    --line: rgba(243, 236, 221, 0.14);
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.3rem;
    --fs-lg: 1.65rem;
    --fs-xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    --fs-hero: clamp(2.6rem, 1.5rem + 4vw, 4.75rem);
    --wrap: 1180px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --section-y: clamp(4.5rem, 9vw, 8rem);
}

/* =========================================================
   RESET AND GLOBAL STYLES
========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; background: var(--vigil); color: var(--cloth); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; font-variation-settings: "opsz" 144, "SOFT" 60; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--candle); outline-offset: 3px; border-radius: 4px; }
.light-band :focus-visible { outline-color: #20286d; }
.wrap { width: min(calc(100% - var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; color: var(--candle); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

/* =========================================================
   ACCESSIBILITY
========================================================= */

.skip-link { position: absolute; top: -4rem; left: 1rem; z-index: 200; padding: 0.7rem 1.1rem; border-radius: 6px; background: var(--candle); color: var(--nave); font-weight: 600; }
.skip-link:focus { top: 1rem; }

/* =========================================================
   BUTTONS AND LINKS
========================================================= */

.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.6rem; border-radius: 999px; font-size: 1rem; font-weight: 600; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.btn-gold { background: var(--candle); color: var(--nave); }
.btn-gold:hover { background: #F4C566; }
.btn-line { border: 1.5px solid var(--line); color: var(--cloth); }
.btn-line:hover { border-color: var(--candle); color: var(--candle); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 1.5px solid transparent; color: var(--candle); font-weight: 600; transition: border-color 0.2s; }
.link-arrow:hover { border-bottom-color: var(--candle); }

/* =========================================================
   HEADER AND NAVIGATION
========================================================= */

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color 0.3s, box-shadow 0.3s; }
.site-header.is-solid { background: rgba(8, 16, 31, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header-inner { display: flex; height: 5rem; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand img { width: auto; height: 3.4rem; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav a { position: relative; padding-block: 0.4rem; color: var(--cloth); font-size: 0.98rem; font-weight: 500; }
.nav a:not(.nav-login)::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--candle); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.nav a:not(.nav-login):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-login { padding: 0.55rem 1.2rem; border: 1.5px solid var(--candle); border-radius: 999px; color: var(--candle) !important; transition: background-color 0.2s, color 0.2s; }
.nav-login:hover { background: var(--candle); color: var(--nave) !important; }

/* =========================================================
   ABOUT US DROPDOWN
========================================================= */

.nav-item { position: relative; display: flex; align-items: center; }
.nav-item .nav-parent { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-item .chevron { width: 0.8rem; height: 0.8rem; transition: transform 0.2s; }
.nav-item:hover .chevron, .nav-item:focus-within .chevron, .nav-item.is-open .chevron { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 0; z-index: 120; min-width: 13rem; margin-top: 0.6rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--vigil-lift); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.65rem 0.8rem; border-radius: 6px; font-size: 0.92rem; font-weight: 500; }
.dropdown a::after { content: none; }
.dropdown a:hover { background: rgba(243, 236, 221, 0.08); color: var(--candle); }

/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-btn { display: none; width: 2.75rem; height: 2.75rem; border-radius: 8px; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: relative; display: block; width: 1.5rem; height: 2px; margin-inline: auto; background: var(--cloth); transition: transform 0.25s, background-color 0.25s; }
.menu-btn span::before, .menu-btn span::after { position: absolute; left: 0; content: ""; }
.menu-btn span::before { top: -7px; }
.menu-btn span::after { top: 7px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* =========================================================
   HOME HERO
========================================================= */

.hero { position: relative; display: flex; min-height: 100svh; align-items: flex-end; padding-block: 8rem 4rem; isolation: isolate; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; z-index: -2; background: url("../assets/images/zimage4.jpg") center 22% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 16, 31, 0.78) 0%, rgba(8, 16, 31, 0.15) 32%, rgba(8, 16, 31, 0.55) 68%, var(--vigil) 100%), linear-gradient(90deg, rgba(8, 16, 31, 0.7) 0%, rgba(8, 16, 31, 0) 65%); content: ""; }
@keyframes settle { to { transform: scale(1); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(2rem, 5vw, 5rem); }
.hero h1 { max-width: 13ch; font-size: var(--fs-hero); font-weight: 400; }
.hero-lede { max-width: 34rem; margin-top: 1.6rem; color: var(--cloth); font-size: var(--fs-md); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

/* =========================================================
   LIVE MASS PANEL
========================================================= */

.mass-panel { padding: clamp(1.4rem, 2.6vw, 2rem); border: 1px solid rgba(233, 180, 76, 0.4); border-radius: 20px; background: rgba(8, 16, 31, 0.72); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(233, 180, 76, 0.06), 0 30px 80px rgba(0, 0, 0, 0.45); }
.mass-panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; color: var(--cloth-mute); font-size: var(--fs-sm); }
.flame { width: 0.62rem; height: 0.9rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--candle); box-shadow: 0 0 12px 2px rgba(233, 180, 76, 0.65); transform-origin: bottom center; animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; transform: scaleY(1) rotate(0); } 30% { opacity: 0.82; transform: scaleY(0.92) rotate(-2deg); } 60% { opacity: 0.95; transform: scaleY(1.04) rotate(1.5deg); } }
.mass-when { color: var(--candle); font-size: var(--fs-sm); font-weight: 600; }
.mass-time { margin-top: 0.3rem; font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2.6vw, 3.8rem); line-height: 1; font-variation-settings: "opsz" 144, "SOFT" 60; }
.mass-time small { margin-left: 0.15em; color: var(--cloth-mute); font-family: var(--font-body); font-size: 0.45em; }
.mass-meta { margin-top: 0.7rem; color: var(--cloth); }
.mass-meta span { color: var(--cloth-mute); }
.mass-later { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.mass-later h2 { margin-bottom: 0.6rem; color: var(--cloth-mute); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.mass-later li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.98rem; }
.mass-later li span:last-child { color: var(--cloth-mute); }
.mass-panel .link-arrow { margin-top: 1.1rem; font-size: 0.98rem; }

/* =========================================================
   SECTION SCAFFOLD
========================================================= */

.section { padding-block: var(--section-y); }
.section-head { max-width: 40rem; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.section-head h2 { font-size: var(--fs-xl); }
.section-head p { margin-top: 1rem; color: var(--cloth-mute); font-size: var(--fs-md); line-height: 1.55; }
.light-band { background: linear-gradient(180deg, #FFFFFF 0%, #FFFDEA 30%, #FFF9C3 70%, #FFF7AF 100%); color: var(--ink); }
.light-band .cross { padding-bottom: calc(var(--section-y) * 0.6); }
.light-band .news { padding-top: calc(var(--section-y) * 0.6); }

/* =========================================================
   ANNOUNCEMENTS
========================================================= */

.announce-list { border-top: 1px solid var(--line); }
.announce-item { border-bottom: 1px solid var(--line); }
.announce-trigger { display: grid; width: 100%; grid-template-columns: 11rem 1fr auto; align-items: center; gap: 1.5rem; padding: 1.7rem 0.25rem; text-align: left; transition: background-color 0.2s; }
.announce-trigger:hover { background: rgba(243, 236, 221, 0.03); }
.announce-date { color: var(--candle); font-size: 0.98rem; font-weight: 600; white-space: nowrap; }
.announce-title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; font-variation-settings: "opsz" 72, "SOFT" 60; }
.announce-kind { display: block; margin-top: 0.35rem; color: var(--cloth-mute); font-family: var(--font-body); font-size: var(--fs-sm); }
.announce-toggle { position: relative; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; transition: border-color 0.2s, background-color 0.2s; }
.announce-toggle::before, .announce-toggle::after { position: absolute; width: 0.85rem; height: 2px; background: var(--cloth); content: ""; transition: transform 0.25s; }
.announce-toggle::after { transform: rotate(90deg); }
.announce-trigger:hover .announce-toggle { border-color: var(--candle); }
.announce-trigger[aria-expanded="true"] .announce-toggle { border-color: var(--candle); background: var(--candle); }
.announce-trigger[aria-expanded="true"] .announce-toggle::before, .announce-trigger[aria-expanded="true"] .announce-toggle::after { background: var(--nave); }
.announce-trigger[aria-expanded="true"] .announce-toggle::after { transform: rotate(0); }
.announce-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.announce-panel[data-open="true"] { grid-template-rows: 1fr; }
.announce-panel > div { overflow: hidden; }
.announce-body { max-width: calc(11rem + 1.5rem + 42rem); padding: 0 0.25rem 2rem calc(11rem + 1.5rem); color: var(--cloth); }

/* =========================================================
   ANNOUNCEMENT PAGINATION
========================================================= */

.announcement-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.announcement-pagination a { display: inline-flex; min-width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; padding-inline: 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--vigil-lift); color: var(--cloth); font-size: 0.9rem; font-weight: 600; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.announcement-pagination a:hover { border-color: var(--candle); background: rgba(233, 180, 76, 0.12); color: var(--candle); transform: translateY(-1px); }
.announcement-pagination a.active, .announcement-pagination a.active:hover { border-color: var(--candle); background: var(--candle); color: var(--nave); }
.announcement-pagination a.active:hover { transform: none; }

/* =========================================================
   WAY OF THE CROSS
========================================================= */

.cross { color: var(--ink); }
.cross-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.cross h2 { font-size: var(--fs-xl); }
.cross-copy p { max-width: 34rem; margin-top: 1.2rem; color: var(--ink-mute); }
.cross-copy p:first-of-type { margin-top: 1.5rem; color: var(--ink); font-size: var(--fs-md); line-height: 1.55; }
.cross .link-arrow { margin-top: 1.8rem; color: #7A5410; }
.cross .link-arrow:hover, .news .link-arrow:hover { border-bottom-color: #7A5410; }

/* =========================================================
   VIDEO
========================================================= */

.video-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--nave); box-shadow: 0 30px 70px rgba(14, 27, 51, 0.28); }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-frame .poster { position: absolute; inset: 0; display: grid; place-items: center; background: center / cover no-repeat; transition: opacity 0.3s; }
.video-frame .poster::before { position: absolute; inset: 0; background: rgba(8, 16, 31, 0.35); content: ""; }
.video-frame.is-playing .poster { pointer-events: none; opacity: 0; }
.play-btn { position: relative; display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.5rem 0.9rem 1.1rem; border-radius: 999px; background: var(--candle); color: var(--nave); font-weight: 600; transition: transform 0.2s, background-color 0.2s; }
.play-btn:hover { background: #F4C566; transform: scale(1.03); }
.play-btn svg { width: 1.6rem; height: 1.6rem; }

/* =========================================================
   HOME NEWS
========================================================= */

.news .link-arrow { color: #7A5410; }
.news h2, .news h3 { color: var(--ink); }
.news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.news-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.news-lead .news-img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; }
.news-img img, .news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.news-lead:hover .news-img img, .news-side-item:hover .news-thumb img { transform: scale(1.04); }
.news-date { display: block; margin-top: 1.2rem; color: #7A5410; font-size: 0.95rem; font-weight: 600; }
.news-lead h3 { margin-top: 0.4rem; font-size: var(--fs-lg); }
.news-lead p { max-width: 36rem; margin-top: 0.7rem; color: var(--ink-mute); }
.news-side { display: flex; flex-direction: column; gap: 1.6rem; }
.news-side-item { display: grid; grid-template-columns: 8.5rem 1fr; align-items: start; gap: 1.2rem; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(26, 36, 56, 0.16); }
.news-side-item:last-child { padding-bottom: 0; border-bottom: 0; }
.news-thumb { aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.news-side-item .news-date { margin-top: 0; }
.news-side-item h3 { margin-top: 0.3rem; font-size: 1.25rem; line-height: 1.2; }
.news-side-item p { margin-top: 0.5rem; color: var(--ink-mute); font-size: 0.98rem; line-height: 1.55; }

/* =========================================================
   SERVICES BAND
========================================================= */

.serve { border-block: 1px solid var(--line); background: var(--vigil-lift); }
.serve-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
.serve h2 { max-width: 18ch; font-size: var(--fs-xl); }
.serve p { max-width: 32rem; margin-top: 1.2rem; color: var(--cloth); font-size: var(--fs-md); line-height: 1.55; }
.serve-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.9rem; }
.serve-actions-wrap { display: flex; flex-direction: column; align-items: flex-start; justify-self: end; gap: 1.1rem; }
.serve-hours { max-width: none; margin-top: 0 !important; color: var(--cloth); font-size: var(--fs-md) !important; }

/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero { position: relative; display: flex; min-height: 800px; align-items: center; padding: 10rem 0 7rem; overflow: hidden; background: radial-gradient(circle at 72% 45%, rgba(46, 95, 168, 0.22), transparent 34%), linear-gradient(135deg, var(--nave), var(--vigil)); }
.about-hero .hero-glow { position: absolute; right: -220px; bottom: -280px; width: 520px; height: 520px; border-radius: 50%; background: rgba(233, 180, 76, 0.08); filter: blur(5px); pointer-events: none; }
.about-hero .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.85fr); align-items: center; gap: clamp(3rem, 7vw, 8rem); }
.about-hero .hero-copy { max-width: 670px; }
.about-hero .eyebrow { margin-bottom: 0; }
.about-hero .hero-copy h1 { margin-top: 1.25rem; color: var(--cloth); font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; }
.about-hero .hero-copy h1 em { color: var(--candle); font-style: normal; }
.about-hero .hero-copy > p { max-width: 570px; margin-top: 1.7rem; color: var(--cloth-mute); font-size: 1.08rem; line-height: 1.8; }
.about-hero .hero-meta { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.8rem; }
.about-hero .meta-item { display: flex; flex-direction: column; }
.about-hero .meta-item strong { color: var(--cloth); font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.about-hero .meta-item span { color: var(--cloth-mute); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.about-hero .meta-line { width: 1px; height: 42px; background: var(--line); }
.about-hero .hero-visual { position: relative; width: 100%; }
.about-hero .hero-frame { position: relative; padding: 0.75rem; border: 1px solid rgba(233, 180, 76, 0.32); background: rgba(243, 236, 221, 0.035); transform: rotate(2deg); transition: transform 0.5s ease; }
.about-hero .hero-frame:hover { transform: rotate(0) translateY(-4px); }
.about-hero .hero-image { position: relative; display: flex; min-height: 510px; align-items: flex-end; overflow: hidden; background: linear-gradient(180deg, rgba(14, 27, 51, 0.08), rgba(8, 16, 31, 0.94)), url("../assets/images/about4.jpg") center / cover no-repeat; }
.about-hero .image-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(233, 180, 76, 0.15), transparent 32%); pointer-events: none; }
.about-hero .hero-caption { position: relative; z-index: 2; width: 100%; padding: 2rem; }
.about-hero .hero-caption span { display: block; color: var(--candle); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; }
.about-hero .hero-caption strong { display: block; max-width: 350px; margin-top: 0.5rem; color: var(--cloth); font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; line-height: 1.15; }
.about-hero .hero-accent { position: absolute; right: -24px; bottom: -24px; display: grid; width: 90px; height: 90px; place-items: center; border: 1px solid rgba(233, 180, 76, 0.4); background: var(--candle); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }
.about-hero .hero-accent span { width: 26px; height: 26px; border: 1px solid var(--nave); border-radius: 50%; }

/* =========================================================
   HISTORY
========================================================= */

.history-section { position: relative; padding: var(--section-y) 0; overflow: hidden; background: var(--nave); }
.history-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.history-visual { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; }
.story-gallery { position: relative; display: grid; width: 100%; max-width: 570px; height: 600px; grid-template-columns: 1.35fr 0.8fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.story-image { position: relative; overflow: hidden; background: var(--vigil-lift); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(233, 180, 76, 0.12); }
.story-image-main { grid-column: 1; grid-row: 1 / 3; border-radius: 8px 65px 8px 65px; }
.story-image-top { grid-column: 2; grid-row: 1; border-radius: 55px 8px 55px 8px; }
.story-image-bottom { grid-column: 2; grid-row: 2; border-radius: 8px 55px 8px 55px; }
.story-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease, filter 0.7s ease; }
.story-image::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 31, 0) 45%, rgba(8, 16, 31, 0.4) 100%); content: ""; pointer-events: none; }
.story-image:hover img { filter: brightness(1.05); transform: scale(1.06); }
.story-image-main::before, .story-image-top::before, .story-image-bottom::before { position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(233, 180, 76, 0.28); content: ""; pointer-events: none; }
.story-image-main::before { border-radius: 5px 52px 5px 52px; }
.story-image-top::before { border-radius: 43px 5px 43px 5px; }
.story-image-bottom::before { border-radius: 5px 43px 5px 43px; }
.history-visual::before { position: absolute; bottom: -18px; left: -18px; width: 90px; height: 90px; border-bottom: 1px solid var(--candle); border-left: 1px solid var(--candle); content: ""; opacity: 0.6; pointer-events: none; }
.history-visual::after { position: absolute; top: -18px; right: 20px; width: 55px; height: 55px; border-top: 1px solid var(--candle); border-right: 1px solid var(--candle); content: ""; opacity: 0.45; pointer-events: none; }
.history-content { max-width: 680px; }
.history-content .eyebrow { position: relative; margin-bottom: 1.2rem; }
.history-content .eyebrow::before { width: 34px; height: 1px; background: var(--candle); content: ""; }
.history-content h2 { max-width: 600px; margin-bottom: 2rem; color: var(--cloth); font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 4.3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; }
.history-content h2 em { color: var(--candle); font-style: italic; }
.history-content p { max-width: 650px; margin-bottom: 1.25rem; color: var(--cloth-mute); font-family: var(--font-body); font-size: 1rem; line-height: 1.85; }
.history-content p:first-of-type { color: var(--cloth); font-size: 1.08rem; }

/* =========================================================
   MISSION AND VISION
========================================================= */

.mission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.mission-card { padding: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 14px; background: var(--vigil-lift); }
.mission-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 1.2rem; border-radius: 50%; background: rgba(233, 180, 76, 0.12); color: var(--candle); }
.mission-icon svg { width: 1.5rem; height: 1.5rem; }
.mission-card h3 { font-size: var(--fs-lg); }
.mission-card p { margin-top: 0.8rem; color: var(--cloth-mute); line-height: 1.6; }

/* =========================================================
   PARISH PRIESTS
========================================================= */

.priests-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2rem); }
.priest-card { text-align: center; }
.priest-avatar { display: grid; width: 6rem; height: 6rem; place-items: center; margin: 0 auto 1.2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--vigil-lift); color: var(--candle); }
.priest-avatar svg { width: 2.5rem; height: 2.5rem; }
.priest-avatar img, .priest-feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.priest-feature { display: flex; align-items: center; gap: clamp(1.8rem, 4vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid rgba(26, 36, 56, 0.12); }
.priest-feature-photo { display: grid; width: clamp(11rem, 22vw, 15rem); height: clamp(11rem, 22vw, 15rem); flex: 0 0 clamp(11rem, 22vw, 15rem); place-items: center; overflow: hidden; border: 1px solid rgba(26, 36, 56, 0.15); border-radius: 50%; background: rgba(122, 84, 16, 0.08); color: #7A5410; }
.priest-feature-photo svg { width: 4rem; height: 4rem; }
.priest-feature-info { flex: 1 1 auto; }
.priest-feature-info h3 { margin-top: 0.2rem; color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.priest-feature-bio { max-width: 40rem; margin-top: 0.9rem; color: var(--ink-mute); line-height: 1.7; text-align: justify; text-justify: inter-word; }
.priest-feature-year { display: block; margin-top: 0.7rem; color: #7A5410; font-size: 0.88rem; font-weight: 600; }
.priest-slider-wrap { position: relative; padding-inline: clamp(0px, 3vw, 2.6rem); }
.priest-slider { display: flex; gap: 1.6rem; overflow-x: auto; padding: 0.4rem 0 0.8rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.priest-slide { flex: 0 0 11rem; scroll-snap-align: start; text-align: center; }
.priest-slide h4 { color: var(--ink); font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; }
.priest-slide .priest-role { display: block; margin-top: 0.15rem; color: #7A5410; font-size: 0.85rem; font-weight: 600; }
.priest-slide p { margin-top: 0.4rem; color: var(--ink-mute); font-size: 0.85rem; }
.priest-slider-btn { position: absolute; top: 40%; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid rgba(26, 36, 56, 0.15); border-radius: 50%; background: rgba(26, 36, 56, 0.05); color: #7A5410; cursor: pointer; translate: 0 -50%; transition: background-color 0.15s; }
.priest-slider-btn:hover { background: rgba(26, 36, 56, 0.1); }
.priest-slider-btn svg { width: 1.1rem; height: 1.1rem; }
.priest-slider-btn.prev { left: 0; }
.priest-slider-btn.next { right: 0; }
.priest-card h3 { color: var(--ink); font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; }
.priest-card .priest-role { display: block; margin-top: 0.2rem; color: #7A5410; font-size: 0.92rem; font-weight: 600; }
.priest-card p { margin-top: 0.8rem; color: var(--ink-mute); font-size: 0.95rem; line-height: 1.55; }

/* =========================================================
   MINISTRIES
========================================================= */

.ministries-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2rem); }
.ministry-category { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ministry-category:last-child { margin-bottom: 0; }
.ministry-category-title { margin-bottom: 0.5rem; padding-left: 0.9rem; border-left: 3px solid var(--candle); color: var(--ink); font-size: 1.3rem; }
.ministry-category-desc { max-width: 44rem; margin-bottom: 1.4rem; color: var(--ink-mute); font-size: 0.95rem; line-height: 1.6; }
.ministry-card { overflow: hidden; border: 1px solid rgba(26, 36, 56, 0.12); border-radius: 14px; background: rgba(26, 36, 56, 0.03); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.ministry-card:hover { border-color: rgba(233, 180, 76, 0.45); box-shadow: 0 12px 30px rgba(14, 27, 51, 0.1); transform: translateY(-4px); }
.ministry-image { width: 100%; height: 210px; overflow: hidden; background: rgba(14, 27, 51, 0.06); }
.ministry-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; }
.ministry-card:hover .ministry-image img { transform: scale(1.04); }
.ministry-content { padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.ministry-icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; margin-bottom: 1.1rem; border-radius: 10px; background: rgba(122, 84, 16, 0.1); color: #7A5410; }
.ministry-icon svg { width: 1.5rem; height: 1.5rem; }
.ministry-card h3 { color: var(--ink); font-size: 1.15rem; }
.ministry-card p { margin-top: 0.6rem; color: var(--ink-mute); font-size: 0.95rem; line-height: 1.55; }

/* =========================================================
   VALUES
========================================================= */

.values-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.value-item { display: flex; gap: 1.1rem; }
.value-number { flex: none; color: var(--candle); font-family: var(--font-display); font-size: 1.6rem; font-variation-settings: "opsz" 72, "SOFT" 60; }
.value-item h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
.value-item p { margin-top: 0.4rem; color: var(--cloth-mute); line-height: 1.55; }

/* =========================================================
   SIMPLE CARD GRID
========================================================= */

.simple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2rem); }
.simple-card { display: block; padding: clamp(1.6rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 14px; background: var(--vigil-lift); color: inherit; transition: border-color 0.2s, transform 0.2s; }
.simple-card:hover { border-color: var(--candle); transform: translateY(-3px); }
.simple-card-icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 1.1rem; border-radius: 50%; background: rgba(233, 180, 76, 0.12); color: var(--candle); }
.simple-card-icon svg { width: 1.5rem; height: 1.5rem; }
.simple-card h3 { font-size: 1.2rem; }
.simple-card p { margin-top: 0.6rem; color: var(--cloth-mute); font-size: 0.95rem; line-height: 1.55; }
.simple-card-link { display: inline-block; margin-top: 1rem; color: var(--candle); font-size: 0.9rem; font-weight: 600; }

/* =========================================================
   NEWS AND EVENTS PAGE
========================================================= */

.news-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2rem); }
.news-event-card { display: block; overflow: hidden; border: 1px solid rgba(26, 36, 56, 0.12); border-radius: 14px; background: rgba(26, 36, 56, 0.03); color: inherit; transition: border-color 0.2s, transform 0.2s; }
.news-event-card:hover { border-color: #7A5410; transform: translateY(-3px); }
.news-event-img { height: 11rem; background-color: rgba(26, 36, 56, 0.08); background-position: center; background-size: cover; }
.news-event-body { padding: 1.3rem 1.4rem 1.5rem; }
.news-event-date { display: block; margin-bottom: 0.4rem; color: #7A5410; font-size: 0.85rem; font-weight: 600; }
.news-event-card h3 { color: var(--ink); font-size: 1.1rem; }
.news-event-card p { margin-top: 0.5rem; color: var(--ink-mute); font-size: 0.92rem; line-height: 1.55; }
.news-detail { max-width: 42rem; }
.news-detail-date { display: block; margin-bottom: 0.6rem; color: #7A5410; font-weight: 600; }
.news-detail h2 { color: var(--ink); font-size: var(--fs-lg); }
.news-detail-img { width: 100%; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: 14px; }
.news-detail p { color: var(--ink-mute); line-height: 1.7; text-align: justify; text-justify: inter-word; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; color: #7A5410; font-weight: 600; }
.back-link:hover { text-decoration: underline; }

/* =========================================================
   NEWS DETAIL — IMAGE RIGHT
========================================================= */

.news-detail-layout { display: grid; max-width: 1100px; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr); align-items: start; gap: 2.5rem; margin: 2rem auto; padding: 2rem; border-radius: 18px; background: #FFFFFF; box-shadow: 0 8px 30px rgba(11, 53, 109, 0.08); }
.news-detail-content { min-width: 0; }
.news-detail-content h2 { margin: 0.75rem 0 1.25rem; line-height: 1.25; }
.news-detail-content p { line-height: 1.9; overflow-wrap: anywhere; }
.news-detail-image-wrap { width: 100%; overflow: hidden; border-radius: 14px; background: #F3F5F8; }
.news-detail-layout .news-detail-img { display: block; width: 100%; max-height: 520px; margin: 0; border-radius: 14px; object-fit: cover; }

/* =========================================================
   FORM CARD
========================================================= */

.form-card { max-width: 52rem; margin-inline: auto; padding: clamp(1.8rem, 4vw, 3rem); border: 1px solid rgba(26, 36, 56, 0.12); border-radius: 16px; background: #FFFFFF; box-shadow: 0 20px 50px rgba(20, 20, 40, 0.08); }
.form-section + .form-section { margin-top: 2.4rem; padding-top: 2.2rem; border-top: 1px solid rgba(26, 36, 56, 0.12); }
.form-section h3 { margin-bottom: 1.3rem; color: var(--ink); font-size: 1.25rem; }
.form-section h4 { margin: 1.6rem 0 0.9rem; color: #7A5410; font-size: 1rem; font-weight: 600; }
.form-section h4:first-of-type { margin-top: 0; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; }
.field { margin-top: 1.1rem; }
.form-row .field, .form-section > .field:first-child, .form-section h3 + .field { margin-top: 1.1rem; }
.form-section h3:first-child + .form-row { margin-top: 0; }
.field-label { display: block; margin-bottom: 0.4rem; color: var(--ink); font-size: 0.86rem; font-weight: 600; }
.field-hint { display: block; margin-top: 0.35rem; color: var(--ink-mute); font-size: 0.8rem; }
.input-wrap { position: relative; display: flex; height: 2.8rem; align-items: center; overflow: hidden; border: 1.5px solid rgba(26, 36, 56, 0.3); border-radius: 10px; background: #FFFFFF; transition: box-shadow 0.15s, border-color 0.15s; }
.input-wrap:focus-within { border-color: #7A5410; box-shadow: 0 0 0 3px rgba(122, 84, 16, 0.15); }
.input-wrap input, .input-wrap select { min-width: 0; height: 100%; flex: 1; padding: 0 0.9rem; border: 0; appearance: none; background: transparent; color: var(--ink); font: inherit; }
.input-wrap input::placeholder, .field textarea::placeholder { color: #9099B0; }
.input-wrap select { cursor: pointer; }
.input-wrap input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 100px #FFFFFF inset; box-shadow: 0 0 0 100px #FFFFFF inset; }
.field textarea { width: 100%; min-height: 6rem; padding: 0.7rem 0.9rem; border: 1.5px solid rgba(26, 36, 56, 0.3); border-radius: 10px; background: #FFFFFF; color: var(--ink); font: inherit; resize: vertical; transition: box-shadow 0.15s, border-color 0.15s; }
.field textarea:focus { outline: none; border-color: #7A5410; box-shadow: 0 0 0 3px rgba(122, 84, 16, 0.15); }
.select-chevron { position: absolute; right: 0.9rem; width: 0.9rem; height: 0.9rem; color: var(--ink-mute); pointer-events: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid rgba(26, 36, 56, 0.12); }
.form-message { margin-bottom: 1.8rem; padding: 1rem 1.2rem; border-radius: 10px; font-size: 0.95rem; font-weight: 600; }
.form-message.success { background: rgba(76, 175, 80, 0.12); color: #2E7D32; }
.form-message.error { background: rgba(229, 57, 53, 0.1); color: #C62828; }

/* =========================================================
   FOOTER
========================================================= */

.footer { padding-block: 4.5rem 2rem; border-top: 1px solid var(--line); background: var(--nave); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 4rem); }
.footer h2 { margin-bottom: 1.1rem; color: var(--cloth); font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.footer h2 + .sub { margin-top: 1.8rem; }
.footer-logo { width: auto; height: 3.6rem; margin-bottom: 1.3rem; }
.footer address { max-width: 22rem; color: var(--cloth-mute); font-style: normal; }
.footer-map { margin-top: 1.4rem; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.footer-map iframe { display: block; width: 100%; height: 190px; border: 0; filter: grayscale(0.4) invert(0.92) hue-rotate(180deg) contrast(0.9); }
.footer dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.footer dt { color: var(--cloth-mute); }
.footer dd { margin-left: auto; text-align: right; }
.footer dd a:hover { color: var(--candle); text-decoration: underline; }
.hours-block { margin-top: 2rem; }
.mass-table { width: 100%; border-collapse: collapse; }
.mass-table caption { text-align: left; }
.mass-table th { padding: 1rem 0 0.4rem; color: var(--candle); font-size: 0.95rem; font-weight: 600; text-align: left; }
.mass-table td { padding: 0.32rem 0; color: var(--cloth); font-size: 0.98rem; vertical-align: top; }
.mass-table td:first-child { width: 6.5rem; white-space: nowrap; }
.mass-table td span { color: var(--cloth-mute); }
.footer-verse { max-width: 44rem; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--cloth-mute); font-family: var(--font-display); font-size: 1.1rem; font-style: italic; }
.footer-verse cite { display: block; margin-top: 0.4rem; font-family: var(--font-body); font-size: var(--fs-sm); font-style: normal; }
.footer-legal { margin-top: 2rem; color: var(--cloth-mute); font-size: var(--fs-sm); }

/* =========================================================
   PAGE HERO — shorter banner used on service forms pages
========================================================= */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 10rem 4.5rem; display: flex; align-items: flex-end; }
.page-hero-photo-baptismal{ position: absolute; inset: 0; z-index: -2; background: url("../assets/images/Baptism.jpg") center 38% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero-photo-blessing{ position: absolute; inset: 0; z-index: -2; background: url("../assets/images/Blessing.jpg") center 38% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero-photo-confession{ position: absolute; inset: 0; z-index: -2; background: url("../assets/images/Confession.jpg") center 38% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero-photo-funeral{ position: absolute; inset: 0; z-index: -2; background: url("../assets/images/Funeral.jpg") center 38% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero-photo-wedding{ position: absolute; inset: 0; z-index: -2; background: url("../assets/images/About2s.jpg") center 38% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,16,31,.82) 0%, rgba(8,16,31,.35) 45%, var(--vigil) 100%); }
.page-hero-content { max-width: 40rem; }
.page-hero-content h1 { font-size: var(--fs-xl); }
.page-hero-content p { margin-top: 1rem; color: var(--cloth); font-size: var(--fs-md); line-height: 1.55; }
.eyebrow { display: block; margin-bottom: 0.6rem; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--candle); text-transform: uppercase; }

/* =========================================================
   NEWS AND EVENTS PAGE HERO
========================================================= */

.news-events-hero { position: relative; display: flex; min-height: 410px; align-items: center; overflow: hidden; background: #FFFFFF; isolation: isolate; }
.news-events-hero-photo { position: absolute; inset: 0; z-index: -2; background: url("../assets/images/zimage3.png") center 48% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.news-events-hero::after { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.35); content: ""; pointer-events: none; }
.news-events-hero-content { position: relative; z-index: 1; padding-block: 125px 76px; color: #FFFFFF; }
.news-events-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--candle); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.news-events-eyebrow::before { width: 30px; height: 2px; background: var(--candle); content: ""; }
.news-events-hero h1 { max-width: 680px; margin-bottom: 18px; color: #FFFFFF; font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); font-weight: 500; line-height: 1.08; }
.news-events-hero p { max-width: 560px; margin: 0; color: #FFFFFF; font-size: 19px; line-height: 1.85; }

/* =========================================================
   NEWS AND EVENTS SECTION HEADING
========================================================= */

.light-band .section > .wrap > .section-head { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.light-band .section > .wrap > .section-head .eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; color: #7A5410; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.light-band .section > .wrap > .section-head .eyebrow::before { width: 30px; height: 2px; background: #F4C430; content: ""; }
.light-band .section > .wrap > .section-head h2 { margin: 0 auto 18px; color: var(--ink); font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); font-weight: 500; line-height: 1.08; }
.light-band .section > .wrap > .section-head p { max-width: 650px; margin: 0 auto; color: var(--ink-mute); font-size: 15px; line-height: 1.85; }

/* =========================================================
   SERVICES PAGE
========================================================= */

.services-page { --services-navy: #0B356D; --services-blue: #1557A6; --services-gold: #F4C430; --services-ink: #172B45; --services-muted: #65748A; --services-border: #E3E8EF; color: var(--services-ink); background: #FFFFFF; }
.services-page *, .services-page *::before, .services-page *::after { box-sizing: border-box; }
.services-page img { display: block; max-width: 100%; }
.services-page a { text-decoration: none; }
.services-page .wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

/* SERVICES HERO */

.services-hero { position: relative; display: flex; min-height: 410px; align-items: center; overflow: hidden; background: #FFFFFF; isolation: isolate; }
.services-hero::before { position: absolute; inset: 0; z-index: -2; background: url("../assets/images/zimage3.png") center 48% / cover no-repeat; content: ""; }
.services-hero::after { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.35); content: ""; pointer-events: none; }
.services-hero-content { position: relative; z-index: 1; padding-block: 125px 76px; color: #FFFFFF; }
.services-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--services-gold); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.services-eyebrow::before { width: 30px; height: 2px; background: var(--services-gold); content: ""; }
.services-hero h1 { max-width: 680px; margin-bottom: 18px; color: #FFFFFF; font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); font-weight: 500; line-height: 1.08; }
.services-hero p { max-width: 560px; margin: 0; color: #FFFFFF; font-size: 19px; line-height: 1.85; }
.services-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; color: rgba(255, 255, 255, 0.76); font-size: 13px; }
.services-breadcrumb a { color: var(--services-gold); }

/* =========================================================
   SERVICES INTRODUCTION
========================================================= */

.services-section { padding-block: 82px 90px; background: linear-gradient(180deg, #FFFFFF 0%, #FFFDEA 30%, #FFF9C3 70%, #FFF7AF 100%); color: var(--ink); }
.services-section-heading { max-width: 690px; margin: 0 auto 46px; text-align: center; }
.services-section-heading .services-eyebrow { justify-content: center; color: #7A5410; }
.services-section-heading h2 { margin-bottom: 16px; color: var(--ink); font-family: var(--font-display); font-size: clamp(31px, 4vw, 44px); font-weight: 500; line-height: 1.2; }
.services-section-heading p { margin: 0; color: var(--ink-mute); font-size: 15px; line-height: 1.85; }

/* =========================================================
   SERVICE CARDS
========================================================= */

.services-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.service-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(26, 36, 56, 0.12); border-radius: 10px; background: #FFFFFF; box-shadow: 0 7px 24px rgba(11, 53, 109, 0.045); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.service-card:hover { border-color: rgba(122, 84, 16, 0.35); box-shadow: 0 15px 35px rgba(11, 53, 109, 0.11); transform: translateY(-5px); }
.service-card-image { position: relative; height: 190px; overflow: hidden; background: #FFF9E5; }
.service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.service-card:hover .service-card-image img { transform: scale(1.045); }
.service-number { position: absolute; top: 15px; left: 15px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%; background: rgba(14, 27, 51, 0.92); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.service-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 25px 24px 27px; }
.service-card-subtitle { display: block; margin-bottom: 8px; color: #7A5410; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.6; text-transform: uppercase; }
.service-card h3 { margin-bottom: 12px; color: var(--ink); font-family: var(--font-display); font-size: 27px; font-weight: 500; line-height: 1.2; }
.service-card-description { flex: 1; margin-bottom: 20px; color: var(--ink-mute); font-size: 14px; line-height: 1.8; }
.service-card-link { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding: 11px 19px; border: 1px solid #E9B44C; border-radius: 5px; background: #E9B44C; color: #0E1B33; font-size: 13px; font-weight: 700; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.service-card-link:hover { border-color: #0E1B33; background: #0E1B33; color: #FFFFFF; }
.service-card-link span { font-size: 17px; transition: transform 0.2s ease; }
.service-card-link:hover span { transform: translateX(3px); }

/* =========================================================
   BEFORE MAKING A REQUEST
========================================================= */

.services-details { padding-block: 75px; background: #F5F7FA; }
.services-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.services-detail-item { padding: 27px; border: 1px solid var(--services-border); border-radius: 8px; background: #FFFFFF; }
.services-detail-icon { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 17px; border-radius: 50%; background: #EAF1FB; color: var(--services-blue); font-size: 21px; }
.services-detail-item h3 { margin-bottom: 10px; color: var(--services-navy); font-family: var(--font-display); font-size: 23px; font-weight: 500; }
.services-detail-item p { margin: 0; color: var(--services-muted); font-size: 14px; line-height: 1.8; }

/* =========================================================
   CONTACT CALL TO ACTION
========================================================= */

.services-contact { padding-block: clamp(3.5rem, 6vw, 5rem); border-block: 1px solid var(--line); background: var(--vigil-lift); color: var(--cloth); }
.services-contact-inner { display: grid; width: min(calc(100% - 48px), 1000px); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 2rem; margin-inline: auto; }
.services-contact-copy { max-width: 540px; }
.services-contact .services-eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; color: var(--candle); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.services-contact .services-eyebrow::before { width: 30px; height: 1px; background: var(--candle); content: ""; }
.services-contact-copy h2 { max-width: 18ch; color: var(--cloth); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; line-height: 1.08; }
.services-contact-copy p { max-width: 30rem; margin-top: 1rem; color: var(--cloth-mute); font-size: 1.05rem; line-height: 1.6; }
.services-contact-actions { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-end; justify-self: end; gap: 0.75rem; }
.services-contact-actions .btn { justify-content: center; padding: 0.85rem 1.25rem; }
.services-contact-actions .btn-gold { background: var(--candle); color: var(--nave); }
.services-contact-actions .btn-gold:hover { background: #F4C566; }
.services-contact-actions .btn-line { border: 1.5px solid var(--line); color: var(--cloth); }
.services-contact-actions .btn-line:hover { border-color: var(--candle); color: var(--candle); }

/* =========================================================
   MY PROFILE 
========================================================= */

/* ---------- Hero banner (same pattern as News and Services) ---------- */

.pf-page .site-header { background: rgba(8, 16, 31, 0.92); box-shadow: 0 1px 0 var(--line); }
.pf-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--candle); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; }
.pf-eyebrow::before { width: 30px; height: 2px; background: var(--candle); content: ""; }

/* ---------- Page body ---------- */

.pf-section { padding-block: clamp(6.5rem, 10vw, 8rem) clamp(3.5rem, 7vw, 6rem); }

.pf-message { margin-bottom: 1.5rem; padding: 1rem 1.2rem; border-radius: 10px; font-size: 0.95rem; font-weight: 600; }
.pf-message.success { background: rgba(76, 175, 80, 0.12); color: #2E7D32; }
.pf-message.error { background: rgba(229, 57, 53, 0.1); color: #C62828; }

.pf-card { min-width: 0; padding: clamp(1.4rem, 2.4vw, 1.9rem); border: 1px solid rgba(26, 36, 56, 0.12); border-radius: 14px; background: #FFFFFF; box-shadow: 0 8px 30px rgba(11, 53, 109, 0.06); }
.pf-card h2 { color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }

.pf-title { margin: 2.2rem 0 1rem; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; }

/* ---------- Profile card + personal information ---------- */

.pf-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

.pf-me { padding: 0; overflow: hidden; border-color: rgba(233, 180, 76, 0.35); box-shadow: 0 18px 44px rgba(14, 27, 51, 0.16); }
.pf-me-banner { position: relative; display: flex; min-height: 190px; align-items: flex-end; overflow: hidden; background: var(--nave); isolation: isolate; }
.pf-me-photo { position: absolute; inset: 0; z-index: -2; background: url("../assets/images/zimage3.png") center 48% / cover no-repeat; transform: scale(1.08); animation: settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.pf-me-banner::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55)); content: ""; pointer-events: none; }
.pf-me-title { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2.25rem) 2.5rem; }
.pf-me-title .pf-eyebrow { margin-bottom: 10px; }
.pf-me-title h1 { color: #FFFFFF; font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 46px); font-weight: 500; line-height: 1.08; }
.pf-me-body { display: flex; align-items: flex-end; gap: 1.4rem; padding: 0 clamp(1.4rem, 3vw, 2.25rem) 1.6rem; background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF1 100%); }
.pf-me-body .pf-avatar { flex-shrink: 0; margin: -2.6rem 0 0; width: 6.8rem; height: 6.8rem; }
.pf-me-id { min-width: 0; flex: 1; padding-top: 0.9rem; }
.pf-me-id h2 { margin-bottom: 0.5rem; font-size: 1.6rem; overflow-wrap: anywhere; }
.pf-me-id .pf-email { margin: 0.7rem 0 0; }
.pf-me-body .pf-btn { margin-bottom: 0.2rem; }

.pf-avatar { display: grid; width: 6.2rem; height: 6.2rem; place-items: center; margin-bottom: 1.2rem; border-radius: 50%; background: linear-gradient(135deg, var(--fatima), var(--vigil)); color: var(--cloth); font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: 0.02em; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5.5px rgba(233, 180, 76, 0.75); }
.pf-badge { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(233, 180, 76, 0.2); color: #7A5410; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.pf-email { max-width: 100%; margin: 0.9rem 0 1.4rem; color: var(--ink-mute); font-size: 0.95rem; overflow-wrap: anywhere; }

.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.8rem 1.4rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.pf-btn svg { width: 1.1rem; height: 1.1rem; }
.pf-btn-gold { background: var(--candle); color: var(--nave); }
.pf-btn-gold:hover { background: #F4C566; }
.pf-btn-outline { border: 1.5px solid rgba(26, 36, 56, 0.3); color: var(--ink); }
.pf-btn-outline:hover { border-color: #7A5410; color: #7A5410; }

.pf-info > h2 { padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(26, 36, 56, 0.1); }
.pf-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.pf-label { display: block; margin-bottom: 0.35rem; color: #7A5410; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pf-value { color: var(--ink); font-size: 1.02rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- Activity statistics ---------- */

.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pf-stat { padding: 1.4rem 1.6rem; border: 1px solid rgba(233, 180, 76, 0.28); border-radius: 14px; background: var(--vigil); box-shadow: 0 14px 36px rgba(14, 27, 51, 0.22); }
.pf-stat strong { display: block; color: var(--candle); font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 500; line-height: 1; }
.pf-stat span { display: block; margin-top: 0.55rem; color: var(--cloth-mute); font-size: 0.92rem; font-weight: 500; }

/* ---------- Dashboard ---------- */

.pf-dash { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); align-items: start; gap: 1.5rem; margin-top: 1.5rem; }
.pf-col { display: grid; align-content: start; gap: 1.5rem; min-width: 0; }

.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(26, 36, 56, 0.1); }
.pf-link { display: inline-flex; align-items: center; gap: 0.4rem; border-bottom: 1.5px solid transparent; color: #7A5410; font-size: 0.9rem; font-weight: 600; transition: border-color 0.2s; }
.pf-link svg { width: 1rem; height: 1rem; }
.pf-link:hover { border-bottom-color: #7A5410; }

.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(26, 36, 56, 0.08); }
.pf-row:last-child { padding-bottom: 0.2rem; border-bottom: 0; }
.pf-row > div { min-width: 0; }
.pf-row h3 { margin: 0 0 0.25rem; color: var(--ink); font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; }
.pf-row p { margin: 0; color: var(--ink-mute); font-size: 0.88rem; }

.pf-status { display: inline-flex; flex: none; align-items: center; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.pf-status.pending { background: rgba(233, 180, 76, 0.22); color: #7A5410; }
.pf-status.approved { background: #E1F3E8; color: #1E6B43; }
.pf-status.completed { background: #E3ECF8; color: #2E5FA8; }
.pf-status.rejected { background: #FBE6E6; color: #9C2525; }
.pf-amount { flex: none; color: #1E6B43; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; white-space: nowrap; }

/* ---------- Empty states ---------- */

.pf-empty { display: flex; flex-direction: column; align-items: center; padding: 1.9rem 1rem 0.6rem; text-align: center; }
.pf-empty-icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: rgba(233, 180, 76, 0.18); color: #7A5410; }
.pf-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.pf-empty h3 { margin-bottom: 0.4rem; color: var(--ink); font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; }
.pf-empty p { max-width: 20rem; margin: 0 0 1rem; color: var(--ink-mute); font-size: 0.93rem; line-height: 1.55; }

/* ---------- Dark "Parish Activities" card ---------- */

.pf-card.pf-dark { border-color: rgba(233, 180, 76, 0.28); background: var(--vigil-lift); box-shadow: 0 14px 36px rgba(14, 27, 51, 0.22); }
.pf-dark h2 { color: var(--cloth); }
.pf-dark .pf-head { border-bottom-color: var(--line); }
.pf-dark .pf-link { color: var(--candle); }
.pf-dark .pf-link:hover { border-bottom-color: var(--candle); }
.pf-dark .pf-empty-icon { background: rgba(233, 180, 76, 0.14); color: var(--candle); }
.pf-dark .pf-empty h3 { color: var(--cloth); }
.pf-dark .pf-empty p { color: var(--cloth-mute); }

/* ---------- Account settings ---------- */

.pf-settings > h2 { padding-bottom: 1rem; border-bottom: 1px solid rgba(26, 36, 56, 0.1); }
.pf-setting { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.95rem 0; border-bottom: 1px solid rgba(26, 36, 56, 0.08); color: var(--ink); font-size: 0.97rem; font-weight: 600; text-align: left; transition: color 0.2s; }
.pf-setting:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-setting > span:nth-child(2) { flex: 1; min-width: 0; }
.pf-setting-icon { display: grid; flex: none; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 10px; background: rgba(233, 180, 76, 0.18); color: #7A5410; transition: background-color 0.2s; }
.pf-setting-icon svg { width: 1.2rem; height: 1.2rem; }
.pf-chevron { flex: none; width: 1.1rem; height: 1.1rem; color: #A3A9B4; transition: color 0.2s, transform 0.2s; }
.pf-setting:hover { color: #7A5410; }
.pf-setting:hover .pf-setting-icon { background: var(--candle); }
.pf-setting:hover .pf-chevron { color: #7A5410; transform: translateX(2px); }
.pf-setting.pf-logout { color: #B42332; }
.pf-setting.pf-logout .pf-setting-icon { background: #FBE6E6; color: #B42332; }
.pf-setting.pf-logout:hover .pf-setting-icon { background: #F5CACD; }
.pf-setting.pf-logout:hover .pf-chevron { color: #B42332; }

/* ---------- Edit profile dialog ---------- */

.pf-dialog { width: min(520px, calc(100% - 2rem)); max-height: 90vh; padding: clamp(1.4rem, 3vw, 2rem); overflow-y: auto; border: 1px solid rgba(26, 36, 56, 0.12); border-radius: 16px; background: #FFFFFF; color: var(--ink); box-shadow: 0 30px 80px rgba(8, 16, 31, 0.35); }
.pf-dialog::backdrop { background: rgba(8, 16, 31, 0.6); backdrop-filter: blur(3px); }
.pf-dialog[open] { animation: pfDialogIn 0.2s ease-out; }
@keyframes pfDialogIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pf-dialog :focus-visible { outline-color: #20286d; }
.pf-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(26, 36, 56, 0.1); }
.pf-dialog-head h2 { color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; }
.pf-close { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1.5px solid rgba(26, 36, 56, 0.2); border-radius: 50%; color: var(--ink-mute); transition: border-color 0.2s, color 0.2s; }
.pf-close svg { width: 1.1rem; height: 1.1rem; }
.pf-close:hover { border-color: #B42332; color: #B42332; }

.pf-field + .pf-field { margin-top: 1rem; }
.pf-field label { display: block; margin-bottom: 0.4rem; color: var(--ink); font-size: 0.86rem; font-weight: 600; }
.pf-field input, .pf-field textarea { display: block; width: 100%; min-width: 0; padding: 0.7rem 0.9rem; border: 1.5px solid rgba(26, 36, 56, 0.3); border-radius: 10px; background: #FFFFFF; color: var(--ink); font: inherit; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; }
.pf-field input { height: 2.8rem; padding-block: 0; }
.pf-field textarea { min-height: 5.5rem; resize: vertical; }
.pf-field input:focus, .pf-field textarea:focus { outline: none; border-color: #7A5410; box-shadow: 0 0 0 3px rgba(122, 84, 16, 0.15); }
.pf-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(26, 36, 56, 0.1); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .pf-top, .pf-dash { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .pf-me-body { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .pf-me-body .pf-btn { width: 100%; margin-top: 0.4rem; }
    .pf-me-banner { min-height: 160px; }
    .pf-info-grid, .pf-stats { grid-template-columns: minmax(0, 1fr); }
    .pf-info-grid { gap: 1.2rem; }
    .pf-row { flex-wrap: wrap; align-items: flex-start; }
    .pf-row > div { flex: 1 1 10rem; }
}

@media (max-width: 480px) {
    .pf-dialog-actions { flex-direction: column-reverse; }
    .pf-dialog-actions .pf-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-dialog[open] { animation: none; }
}


/* =========================================================
   RESPONSIVE DESIGN — TABLET
========================================================= */

@media (max-width: 960px) {
    .menu-btn { display: block; }
    .nav { position: fixed; inset: 5rem 0 auto; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 5rem); padding: 0.5rem var(--gutter) 1.5rem; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line); background: var(--nave); transform: translateY(-1rem); opacity: 0; visibility: hidden; transition: transform 0.25s, opacity 0.25s, visibility 0.25s; }
    .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
    .nav a::after { display: none; }
    .nav-login { margin-top: 1rem; border: 1.5px solid var(--candle) !important; text-align: center; }
    .site-header { background: rgba(8, 16, 31, 0.92); }
    .nav-item { position: static; display: block; }
    .nav-item .nav-parent { justify-content: space-between; }
    .dropdown { position: static; max-height: 0; margin-top: 0; padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height 0.25s ease; }
    .nav-item.is-open .dropdown { max-height: 20rem; }
    .dropdown a { padding: 0.9rem 0 0.9rem 1.25rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1rem; }
    .hero { padding-block: 7rem 2.5rem; }
    .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 1.6rem; }
    .hero-copy { display: contents; }
    .hero-copy h1 { order: 1; }
    .hero-copy .hero-lede { order: 2; margin-top: 0; }
    .mass-panel { order: 3; }
    .hero-copy .hero-actions { order: 4; margin-top: 0; }
    .hero h1 { max-width: none; }
    .cross-grid, .news-grid, .serve-inner, .footer-grid, .about-hero .hero-grid, .history-grid, .news-detail-layout { grid-template-columns: 1fr; }
    .cross-grid .video-frame { order: -1; }
    .mission-grid, .priests-grid, .values-list, .simple-grid, .news-event-grid, .services-details-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-card { padding: 1.6rem; }
    .priest-feature { flex-direction: column; text-align: center; }
    .priest-feature-info { text-align: center; }
    .priest-feature-bio { margin-inline: auto; text-align: left; }
    .about-hero { min-height: auto; padding-top: 9rem; }
    .about-hero .hero-grid { gap: 4rem; }
    .about-hero .hero-copy { max-width: 760px; }
    .about-hero .hero-visual { width: 100%; max-width: 620px; margin-inline: auto; }
    .history-grid { gap: 4.5rem; }
    .history-visual { min-height: auto; justify-content: center; }
    .story-gallery { width: min(100%, 620px); height: 620px; }
    .history-content { max-width: 720px; }
    .serve-actions-wrap { justify-self: start; }
    .ministries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-card, .service-card:nth-child(4), .service-card:nth-child(5), .service-card:last-child { grid-column: auto; }
    .news-detail-layout { gap: 1.5rem; }
    .news-detail-image-wrap { grid-row: 1; }
    .news-detail-layout .news-detail-img { max-height: 350px; }
    .services-contact-inner { grid-template-columns: 1fr; gap: 1.75rem; }
    .services-contact-actions { justify-content: flex-start; justify-self: start; }
}

/* =========================================================
   RESPONSIVE DESIGN — MOBILE
========================================================= */

@media (max-width: 700px) {
    :root { --gutter: 1.25rem; }
    .about-hero { padding: 8rem 0 5rem; }
    .about-hero .hero-grid { gap: 3rem; }
    .about-hero .hero-copy h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
    .about-hero .hero-copy > p { font-size: 1rem; line-height: 1.75; }
    .about-hero .hero-meta { flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
    .about-hero .meta-item strong { font-size: 1.15rem; }
    .about-hero .meta-line { height: 35px; }
    .about-hero .hero-frame { padding: 0.55rem; transform: rotate(1deg); }
    .about-hero .hero-image { min-height: 390px; }
    .about-hero .hero-caption { padding: 1.5rem; }
    .about-hero .hero-caption strong { font-size: 1.55rem; }
    .about-hero .hero-accent { right: -10px; bottom: -10px; width: 72px; height: 72px; }
    .history-section { padding: 5rem 0; }
    .history-grid { gap: 3.5rem; }
    .story-gallery { height: 500px; grid-template-columns: 1fr 1fr; grid-template-rows: 300px 180px; gap: 10px; }
    .story-image-main { grid-column: 1 / 3; grid-row: 1; border-radius: 8px 45px 8px 45px; }
    .story-image-top { grid-column: 1; grid-row: 2; border-radius: 35px 7px 35px 7px; }
    .story-image-bottom { grid-column: 2; grid-row: 2; border-radius: 7px 35px 7px 35px; }
    .story-image-main::before { border-radius: 5px 35px 5px 35px; }
    .story-image-top::before { border-radius: 27px 4px 27px 4px; }
    .story-image-bottom::before { border-radius: 4px 27px 4px 27px; }
    .history-visual::before, .history-visual::after { display: none; }
    .history-content h2 { margin-bottom: 1.5rem; font-size: 2.5rem; }
    .history-content p { font-size: 0.96rem; line-height: 1.75; }
    .history-content p:first-of-type { font-size: 1rem; }
    .announcement-pagination { gap: 0.4rem; margin-top: 1.5rem; }
    .announcement-pagination a { min-width: 2.35rem; height: 2.35rem; padding-inline: 0.6rem; font-size: 0.85rem; }
    .announce-trigger { grid-template-columns: 1fr auto; gap: 0.4rem 1rem; }
    .announce-date, .announce-title-wrap { grid-column: 1; }
    .announce-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .announce-body { padding-left: 0.25rem; }
    .news-side-item { grid-template-columns: 6.5rem 1fr; }
    .news-events-hero { min-height: 320px; }
    .news-events-hero-content { padding-block: 60px; }
    .news-events-hero h1 { font-size: 43px; }
    .news-events-hero p { font-size: 14px; line-height: 1.8; }
    .btn { width: 100%; justify-content: center; }
    .hero-actions .btn { width: auto; flex: 1 1 auto; }
    .footer dd { white-space: normal; }
    .ministries-grid { grid-template-columns: 1fr; }
    .ministry-image { height: 220px; }
    .news-detail-layout { padding: 1.25rem; }
    .services-page .wrap { width: min(calc(100% - 36px), 1160px); }
    .services-hero { min-height: 320px; }
    .services-hero-content { padding-block: 60px; }
    .services-hero h1 { font-size: 43px; }
    .services-hero p { font-size: 14px; line-height: 1.8; }
    .services-section { padding-block: 58px 65px; }
    .services-section-heading { margin-bottom: 32px; }
    .services-section-heading h2 { font-size: 32px; }
    .services-grid { grid-template-columns: 1fr; gap: 20px; }
    .service-card, .service-card:nth-child(4), .service-card:nth-child(5), .service-card:last-child { grid-column: auto; }
    .service-card-image { height: 205px; }
    .service-card-description { min-height: 0; }
    .services-details { padding-block: 55px; }
    .services-detail-item { padding: 24px; }
    .services-contact-inner { width: calc(100% - 36px); }
    .services-contact-actions { align-items: stretch; flex-direction: column; }
    .services-contact-actions .btn { width: 100%; }
}

/* =========================================================
   RESPONSIVE DESIGN — SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
    .about-hero { padding-top: 7rem; }
    .about-hero .hero-copy h1 { font-size: 2.5rem; }
    .about-hero .hero-copy > p { font-size: 0.96rem; }
    .about-hero .hero-meta { gap: 0.75rem; }
    .about-hero .meta-item strong { font-size: 1.05rem; }
    .about-hero .meta-item span { font-size: 0.62rem; }
    .about-hero .meta-line { height: 30px; }
    .about-hero .hero-image { min-height: 340px; }
    .about-hero .hero-caption { padding: 1.3rem; }
    .about-hero .hero-caption span { font-size: 0.62rem; }
    .about-hero .hero-caption strong { font-size: 1.4rem; }
    .about-hero .hero-accent { right: -6px; bottom: -6px; width: 62px; height: 62px; }
    .story-gallery { height: 395px; grid-template-rows: 240px 145px; gap: 8px; }
    .story-image-main { border-radius: 7px 38px 7px 38px; }
    .story-image-top { border-radius: 28px 6px 28px 6px; }
    .story-image-bottom { border-radius: 6px 28px 6px 28px; }
    .history-content h2 { font-size: 2.25rem; }
    .history-content p { font-size: 0.92rem; line-height: 1.7; }
    .ministry-image { height: 190px; }
    .ministry-content { padding: 1.25rem; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .hero-photo, .news-events-hero-photo, .pf-me-photo { transform: none; }
}
/* ---------- Privacy notice ---------- */
.pn-card { max-width: 52rem; margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.8rem); color: var(--ink); line-height: 1.7; }
.pn-title { margin: 0.3rem 0 0.2rem; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; line-height: 1.1; color: var(--ink); }
.pn-meta { color: var(--ink-mute); font-size: 0.9rem; margin-bottom: 1.4rem; }
.pn-card h2 { margin: 1.8rem 0 0.5rem; font-size: 1.3rem; }
.pn-card p { margin-bottom: 0.8rem; }
.pn-card ul { margin: 0 0 0.8rem 1.2rem; display: grid; gap: 0.45rem; }
.pn-card a:not(.pf-btn) { color: #7A5410; font-weight: 600; text-decoration: underline; }
.pn-card .pf-btn { margin-top: 1.6rem; }


/* ---------- Service form consent line ---------- */
.form-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.6rem 0 0; color: var(--ink); font-size: 0.92rem; line-height: 1.55; cursor: pointer; }
.form-consent input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: #20286d; cursor: pointer; }
.form-consent a { color: #7A5410; font-weight: 600; text-decoration: underline; }
.footer-legal a { color: inherit; text-decoration: underline; }

/* ==========================================================
   Donation form pages: one centered card, yellow gradient + image
   (charity_outreach, general_church, mass_intention, feast_day)
   ========================================================== */
.don-page { padding: 132px 0 80px; } /* clears the fixed navbar */
.don-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    max-width: 1020px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(122, 84, 16, .35);
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFDEA 30%, #FFF9C3 70%, #FFF7AF 100%); /* same yellow gradient as the login/service pages */
    box-shadow: 0 28px 70px rgba(4, 9, 20, .45);
    color: var(--ink);
}
.don-card > .don-form,
.don-card > .don-info {
    min-width: 0;
    padding: 40px;
    border: 0;
    border-radius: 0;
    background: none;
}
.don-card > .don-form { order: 2; align-self: center; }

/* Form side sits on the yellow gradient: dark text, light inputs, navy buttons */
.don-card > .don-form { color: var(--ink); }
.don-card > .don-form h1, .don-card > .don-form h2 { color: var(--vigil); }
.don-card > .don-form p, .don-card > .don-form li { color: var(--ink); }
.don-card > .don-form [class$="-muted"] { color: var(--ink-mute); }
.don-card > .don-form [class$="-eyebrow"] { color: #7A5410; }
.don-card > .don-form [class$="-field"] { color: var(--vigil); }
.don-card > .don-form [class$="-input"] { border: 1px solid rgba(26, 36, 56, .28); background: #FFFFFF; color: var(--ink); }
.don-card > .don-form [class$="-input"]::placeholder { color: #8A90A0; }
.don-card > .don-form [class$="-input"]:focus { outline: 2px solid var(--fatima); outline-offset: 2px; }
.don-card > .don-form [class$="-button"] { background: var(--vigil); color: var(--cloth); }
.don-card > .don-form [class$="-button"]:hover { background: var(--vigil-lift); filter: none; }
.don-card > .don-form [class$="-amount"] { color: #7A5410; }
.don-card > .don-form [class$="-reference"] { border-color: #B8893A; background: rgba(255, 255, 255, .55); color: var(--ink); }
.don-card > .don-form [class$="-qr-wrap"] { border: 1px solid rgba(26, 36, 56, .12); box-shadow: 0 8px 22px rgba(14, 27, 51, .12); }
.don-card > .don-form [class$="-back"], .don-card > .don-form [class$="-proof-link"] { color: #7A5410; font-weight: 600; }
.don-card > .don-form [class$="-notice"] { color: var(--ink); }
.don-card > .don-form [class$="-error"] { border-color: #B84A4A; background: rgba(198, 91, 91, .14); }
.don-card > .don-form [class$="-success"] { border-color: #2F8A63; background: rgba(88, 169, 133, .18); }

/* Photo side keeps light text on the dark overlay */
.don-card > .don-info, .don-card > .don-info p, .don-card > .don-info li, .don-card > .don-info div { color: var(--cloth); }
.don-card > .don-info h1, .don-card > .don-info h2, .don-card > .don-info h3 { color: var(--cloth); }
.don-card > .don-info [class$="-muted"] { color: rgba(243, 236, 221, .82); }
.don-card > .don-info [class$="-eyebrow"] { color: var(--candle); }

/* Image side: one class per photo (path is relative to this file) */
.don-img-Blessing  { --don-img: url('../assets/images/Blessing.jpg'); }
.don-img-zimage4   { --don-img: url('../assets/images/zimage4.jpg'); }
.don-img-about4    { --don-img: url('../assets/images/about4.jpg'); }
.don-img-about3    { --don-img: url('../assets/images/about3.jpg'); }

.don-card > .don-info {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    background:
        linear-gradient(180deg, rgba(8, 16, 31, .55) 0%, rgba(8, 16, 31, .72) 40%, rgba(8, 16, 31, .93) 80%, rgba(8, 16, 31, .97) 100%),
        linear-gradient(145deg, rgba(46, 95, 168, .28), rgba(14, 27, 51, .15)),
        var(--don-img) center top / cover no-repeat;
    border-right: 1px solid rgba(233, 180, 76, .2);
}

@media (max-width: 860px) {
    .don-page { padding: 108px 0 56px; }
    .don-card { grid-template-columns: 1fr; }
    .don-card > .don-form { order: 1; }
    .don-card > .don-info { order: 2; min-height: 0; border-right: 0; border-top: 1px solid rgba(233, 180, 76, .2); }
    .don-card > .don-form,
    .don-card > .don-info { padding: 26px 22px; }
}

/* Yellow form side: dark text, light inputs (the photo side keeps its cream-on-navy text) */
.don-card > .don-form { color: var(--nave); }
.don-form h1, .don-form h2, .don-form h3 { color: var(--nave); }
.don-form p, .don-form li, .don-form label { color: var(--nave); }
.don-form [class$="-eyebrow"] { color: #5C3F08; }
.don-form [class$="-muted"], .don-form small { color: rgba(8, 16, 31, .74); }
.don-form [class$="-input"] { border: 1px solid rgba(8, 16, 31, .3); background: rgba(255, 255, 255, .92); color: var(--nave); }
.don-form [class$="-input"]::placeholder { color: rgba(8, 16, 31, .5); }
.don-form [class$="-input"]:focus { outline: 2px solid var(--nave); outline-offset: 2px; }
.don-form [class$="-button"] { background: var(--nave); color: var(--candle); }
.don-form [class$="-button"]:hover { background: var(--vigil-lift); filter: none; }
.don-form [class$="-amount"] { color: var(--nave); }
.don-form [class$="-reference"] { border-color: rgba(8, 16, 31, .55); background: rgba(255, 255, 255, .35); color: var(--nave); }
.don-form [class$="-notice"] { color: var(--nave); }
.don-form [class$="-error"] { border-color: #9c2f2f; background: rgba(156, 47, 47, .14); }
.don-form [class$="-success"] { border-color: #1f6b4a; background: rgba(31, 107, 74, .16); }
.don-form [class$="-back"], .don-form [class$="-proof-link"] { color: var(--nave); font-weight: 700; text-decoration: underline; }
.don-form [class$="-qr-wrap"] { box-shadow: 0 6px 22px rgba(8, 16, 31, .25); }
.don-form a:not([class]) { color: var(--nave); }


/* ===== Call-to-action card (Home "Need a parish service?", About "Let us walk together") ===== */
.serve-card { justify-self: end; width: 100%; max-width: 27rem; padding: 1.7rem 1.8rem 1.8rem; border: 1px solid var(--line); border-top: 3px solid var(--candle); border-radius: 16px; background: rgba(243, 236, 221, 0.04); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); }
.serve-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; color: var(--candle); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.serve-card-head svg { width: 1.05rem; height: 1.05rem; flex: none; }
.serve .serve-card p { max-width: none; margin-top: 0; }
.hours-list { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.hours-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px dashed rgba(243, 236, 221, 0.16); font-size: 1rem; }
.hours-list li:first-child { padding-top: 0; }
.hours-day { color: var(--cloth); font-weight: 600; }
.hours-time { color: var(--cloth-mute); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hours-list li.is-closed .hours-time { color: rgba(185, 180, 166, 0.7); font-style: italic; }
.hours-note { margin: -0.6rem 0 1.3rem !important; color: var(--cloth-mute) !important; font-size: var(--fs-sm) !important; line-height: 1.5 !important; }
.serve-card .btn { width: 100%; justify-content: center; }
.next-steps { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.next-steps a { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px dashed rgba(243, 236, 221, 0.16); color: var(--cloth); transition: color 0.2s; }
.next-steps li:first-child a { padding-top: 0; }
.next-steps a:hover { color: var(--candle); }
.next-steps-icon { display: grid; width: 2.3rem; height: 2.3rem; flex: none; place-items: center; border: 1px solid rgba(233, 180, 76, 0.45); border-radius: 50%; color: var(--candle); font-size: 0.9rem; }
.next-steps strong { display: block; font-weight: 600; }
.next-steps small { display: block; color: var(--cloth-mute); font-size: var(--fs-sm); }
.next-steps-arrow { margin-left: auto; color: var(--candle); transition: transform 0.2s; }
.next-steps a:hover .next-steps-arrow { transform: translateX(3px); }
@media (max-width: 900px) {
    .serve-card { justify-self: stretch; max-width: none; }
}

/* ===== Secondary buttons on light (white / cream) backgrounds =====
   .btn-line is designed for the dark navy theme (cream text, faint border),
   so on the white form cards "Back to services" was nearly invisible. */
.light-band .btn-line,
.form-card .btn-line { border: 1.5px solid rgba(26, 36, 56, 0.45); background: #fff; color: var(--ink); }
.light-band .btn-line:hover,
.form-card .btn-line:hover,
.light-band .btn-line:focus-visible,
.form-card .btn-line:focus-visible { border-color: var(--vigil); background: var(--vigil); color: var(--cloth); }