/*
Theme Name: KANA Dębica
Theme URI: https://www.kanadebica.org/
Author: KANA Dębica
Description: Accessible custom theme for Katolickie Centrum Edukacji KANA w Dębicy.
Version: 1.0.0
Requires at least: 5.3.23
Requires PHP: 7.4
Text Domain: kana
*/

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page-max: 1920px;
  --ink: #1f2925;
  --muted: #61706a;
  --cream: #f7f3e8;
  --paper: #fffdf8;
  --green: #235b4e;
  --green-dark: #17463b;
  --yellow: #f3bd4b;
  --line: #d9ded8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #e9eeeb; scroll-behavior: smooth; }
body { width: 100%; max-width: var(--page-max); min-height: 100vh; margin: 0 auto; background: var(--paper); color: var(--ink); font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; }
a { color: inherit; }
button, select { font: inherit; }
:focus-visible { outline: 3px solid #1c6ea4; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 1000; top: 10px; left: 10px; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; border-radius: 6px; background: white; color: var(--ink); }

.site-header {
  min-height: 96px; display: flex; align-items: center; gap: 32px; padding: 10px clamp(22px, 5vw, 76px);
  border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .96); position: sticky; top: 0; z-index: 20;
}
.header-brands { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand { display: block; width: clamp(170px, 15vw, 220px); flex: 0 0 auto; text-decoration: none; }
.brand-logo { display: block; width: 100%; height: auto; }
.parish-brand { display: grid; place-items: center; width: 55px; height: 68px; padding-left: 12px; border-left: 1px solid var(--line); text-decoration: none; }
.parish-logo { display: block; width: auto; max-width: 42px; height: auto; max-height: 60px; object-fit: contain; }
nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 30px); flex: 1; }
nav a { position: relative; padding: 10px 2px; font-size: 12px; font-weight: 700; text-decoration: none; letter-spacing: .04em; transition: color .18s ease; }
nav a::after { content: ''; position: absolute; right: 2px; bottom: 3px; left: 2px; height: 2px; border-radius: 999px; background: var(--green); opacity: 0; transform: scaleX(.45); transition: opacity .18s ease, transform .18s ease; }
nav a:hover, nav a.is-current { color: var(--green); }
nav a.is-current { font-weight: 800; }
nav a.is-current::after { opacity: 1; transform: scaleX(1); }
.header-cta { background: var(--yellow); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 800; white-space: nowrap; }
.header-cta.is-current { box-shadow: inset 0 -3px 0 var(--green-dark); }

.hero { min-height: 580px; display: grid; grid-template-columns: minmax(0, 760px) 1fr; grid-template-rows: auto auto; gap: 18px 48px; align-content: end; padding: clamp(38px, 5vw, 68px) clamp(22px, 7vw, 112px) 42px; background-color: var(--cream); background-image: linear-gradient(90deg, rgba(255,253,248,1) 0%, rgba(255,250,238,.98) 43%, rgba(255,250,238,.55) 61%, rgba(255,250,238,.04) 78%), url('assets/images/headers/kana-building-community-v2.png'); background-position: center; background-size: cover; overflow: hidden; position: relative; }
.hero::after { display: none; }
.hero-copy, .hero-note { grid-column: 1; }
.hero-copy { max-width: 570px; padding: clamp(20px, 2.3vw, 30px); border-radius: 20px; background: rgba(255,253,248,.96); box-shadow: 0 20px 55px rgb(74 58 26 / 9%); }
.eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--green); }
.hero .eyebrow { margin-bottom: 10px; }
.hero h1, h2 { font-family: 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.045em; }
.hero h1 { max-width: 560px; margin: 0; font-size: clamp(42px, 5.2vw, 70px); line-height: .96; font-weight: 800; }
.hero-intro { max-width: 560px; margin: 18px 0 0; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.42; color: var(--muted); }
.hero-note { position: relative; z-index: 1; width: min(100%, 340px); border-top: 5px solid var(--yellow); background: rgba(35,91,78,.96); color: white; padding: 18px 22px; border-radius: 4px 4px 20px 4px; box-shadow: 0 18px 48px rgb(23 70 59 / 18%); }
.note-label { font-size: 11px; letter-spacing: .12em; opacity: .7; }
.hero-note strong { display: block; margin-top: 10px; font-size: 24px; }
.hero-note p { margin: 10px 0; line-height: 1.45; opacity: .78; }
.hero-note a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.schedule-section { padding: 60px clamp(22px, 7vw, 112px) 112px; background-color: var(--paper); background-image: linear-gradient(180deg, rgba(255,253,248,.76) 0%, rgba(255,253,248,.95) 38%, var(--paper) 76%), url('assets/images/home/schedule-week.png'); background-position: center top; background-repeat: no-repeat; background-size: 100% auto; }
.schedule-section .section-heading { padding: clamp(22px, 3vw, 38px); border-radius: 22px; background: rgba(255,253,248,.95); box-shadow: 0 18px 48px rgb(35 91 78 / 7%); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 460px); gap: 36px; align-items: end; }
.section-heading h2 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.03; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.filters { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 14px; align-items: end; margin-top: 42px; padding: 22px; background: var(--green); border-radius: 18px; }
.filters label { display: grid; gap: 7px; color: white; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.filters select { width: 100%; min-height: 48px; padding: 0 36px 0 13px; border: 0; border-radius: 9px; background: white; color: var(--ink); }
.filters select:disabled { opacity: .55; }
.reset-button { min-height: 48px; padding: 0 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 9px; background: transparent; color: white; font-weight: 800; cursor: pointer; }
.reset-button:hover { background: rgba(255,255,255,.1); }
.result-line { padding: 24px 0 12px; color: var(--muted); }
.result-line strong { color: var(--ink); }
.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.schedule-table { width: 100%; min-width: 1080px; table-layout: fixed; border-collapse: collapse; background: white; }
.schedule-table th { padding: 12px 10px; text-align: center; background: #edf2ef; color: #52625b; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.schedule-table thead th + th, .schedule-table tbody td { border-left: 1px solid var(--line); }
.schedule-table .time-column { width: 126px; }
.schedule-table .time-cell { width: 126px; border-top: 1px solid var(--line); background: #faf8f1; color: var(--green-dark); font: 800 14px/1.3 'Manrope', 'Segoe UI', sans-serif; letter-spacing: 0; text-transform: none; }
.schedule-table td { height: 100px; padding: 8px; border-top: 1px solid var(--line); vertical-align: top; }
.schedule-table tbody tr:hover td { background: #fffdf7; }
.schedule-table .empty-cell { vertical-align: middle; text-align: center; color: #b7c0bb; }
.empty-cell-mark { display: none; }
.schedule-table .empty-cell .empty-cell-mark { display: inline; }
.weekly-lesson { padding: 8px 9px; border-left: 4px solid var(--yellow); border-radius: 8px; background: #f4f7f5; }
.weekly-lesson + .weekly-lesson { margin-top: 6px; }
.weekly-lesson strong, .weekly-lesson span, .weekly-lesson small { display: block; }
.lesson-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 5px; }
.weekly-lesson .lesson-level-badge, .lesson-card .lesson-level-badge { display: inline-block; width: fit-content; margin: 0; padding: 2px 6px; border-radius: 999px; background: #dcebe5; color: var(--green-dark); font: 800 9px/1.2 'Manrope', 'Segoe UI', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.weekly-lesson[data-level="podstawowa"], .lesson-card[data-level="podstawowa"] { border-left-color: #2e755f; background: #eef7f2; }
.weekly-lesson[data-level="srednia"], .lesson-card[data-level="srednia"] { border-left-color: #2b6f9e; background: #eef5fc; }
.weekly-lesson[data-level="dorosli"], .lesson-card[data-level="dorosli"] { border-left-color: #b56b16; background: #fff5e5; }
.weekly-lesson[data-level="podstawowa"] .lesson-level-badge, .lesson-card[data-level="podstawowa"] .lesson-level-badge { background: #dcebe5; color: #17463b; }
.weekly-lesson[data-level="srednia"] .lesson-level-badge, .lesson-card[data-level="srednia"] .lesson-level-badge { background: #dce7f5; color: #174f78; }
.weekly-lesson[data-level="dorosli"] .lesson-level-badge, .lesson-card[data-level="dorosli"] .lesson-level-badge { background: #f7e4c0; color: #70420f; }
.weekly-lesson strong { color: var(--ink); font-size: 13px; line-height: 1.2; }
.weekly-lesson .lesson-details { color: var(--green); font-size: 11px; font-weight: 700; }
.weekly-lesson small { margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.schedule-cards { display: none; }
.empty-state { padding: 54px 24px; border: 1px dashed #9eaaa4; border-radius: 16px; text-align: center; background: #faf8f1; }
.empty-state strong { font-size: 20px; }
.empty-state p { color: var(--muted); }

@media (max-width: 1020px) {
  nav { display: none; }
  .site-header { justify-content: space-between; }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .reset-button { grid-column: span 2; }
}

@media (max-width: 720px) {
  .site-header { min-height: 72px; padding: 12px 18px; }
  .brand { width: 146px; }
  .header-brands { gap: 9px; }
  .parish-brand { width: 41px; height: 52px; padding-left: 9px; }
  .parish-logo { max-width: 31px; max-height: 46px; }
  .header-cta { font-size: 13px; padding: 10px 14px; }
  .hero { grid-template-columns: 1fr; min-height: 610px; padding: 34px 18px 30px; background-image: linear-gradient(90deg, rgba(255,253,248,.98), rgba(255,250,238,.74)), url('assets/images/headers/kana-building-community-v2.png'); background-position: 66% center; }
  .hero-note { max-width: 340px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .schedule-section { padding: 46px 18px 82px; }
  .filters { grid-template-columns: 1fr; padding: 16px; }
  .reset-button { grid-column: auto; }
  .schedule-table-wrap { display: none; }
  .schedule-cards { display: grid; gap: 10px; }
  .lesson-card { display: grid; grid-template-columns: 88px 1fr; gap: 3px 12px; padding: 14px 15px; border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: 12px; background: white; }
  .lesson-card > .lesson-time { grid-row: span 3; }
  .lesson-card span, .lesson-card strong { display: block; }
  .lesson-card span { color: var(--muted); font-size: 12px; }
  .lesson-card .lesson-meta-row { margin-bottom: 1px; }
  .lesson-card .lesson-details { font-size: 11px; font-weight: 700; }
  .lesson-card h3 { margin: 0; }
  .lesson-card small { color: var(--muted); }
}

@media print {
  .site-header, .hero, .filters { display: none; }
  .schedule-section { padding: 0; }
  .schedule-table-wrap { display: block; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.mobile-menu { display: none; }
.text-link { color: var(--green); font-weight: 800; text-underline-offset: 4px; }
.button-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 800; text-decoration: none; }
.round-link { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 30px; text-decoration: none; }

.donation-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 8vw, 120px); min-height: 640px; align-items: center; padding: 96px clamp(22px, 7vw, 112px); background-color: var(--green-dark); background-image: linear-gradient(90deg, rgba(23,70,59,.97) 0%, rgba(23,70,59,.9) 48%, rgba(23,70,59,.57) 100%), url('assets/images/home/donation-good-start-desktop.png'); background-position: center; background-size: cover; color: white; }
.donation-copy { padding: clamp(24px, 3vw, 42px); border-radius: 22px; background: rgba(23,70,59,.94); box-shadow: 0 18px 48px rgb(0 0 0 / 12%); }
.donation-copy h2, .news-section h2, .sponsor-preview h2, .contact-cta h2 { margin: 0; font: 800 clamp(36px, 4.4vw, 60px)/1.03 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.04em; }
.donation-copy > p:not(.eyebrow) { max-width: 540px; color: rgba(255,255,255,.72); font-size: 19px; line-height: 1.6; }
.donation-copy .eyebrow, .contact-cta .eyebrow { color: var(--yellow); }
.donation-copy .text-link { color: white; }
.donation-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.donation-panel { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: white; color: var(--ink); }
.bank-detail { grid-column: 1; position: relative; padding: 16px 54px 16px 0; border-bottom: 1px solid var(--line); }
.bank-detail span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.bank-detail strong { font-size: 16px; }
.bank-account strong { font-family: 'Manrope', 'Segoe UI', sans-serif; font-size: clamp(17px, 1.8vw, 23px); letter-spacing: .02em; }
.bank-detail button { position: absolute; right: 0; bottom: 14px; border: 0; background: transparent; color: var(--green); font-weight: 800; cursor: pointer; }
.copy-status { grid-column: 1 / -1; min-height: 20px; margin: 0; color: var(--green); font-size: 13px; }
.donation-panel-compact { background: var(--paper); }

.news-section { padding: 100px clamp(22px, 7vw, 112px); background-color: var(--paper); background-image: linear-gradient(90deg, rgba(255,253,248,.92) 0%, rgba(255,253,248,.9) 58%, rgba(255,253,248,.68) 100%), url('assets/images/home/news-center.png'); background-position: center; background-size: cover; }
.news-section .section-topline { padding: clamp(22px, 3vw, 38px); border-radius: 22px; background: rgba(255,253,248,.95); box-shadow: 0 18px 48px rgb(35 91 78 / 7%); }
.section-topline { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 42px; }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
.news-card { display: flex; min-width: 0; flex-direction: column; padding: 28px; border: 1px solid rgba(217,222,216,.9); border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgb(35 91 78 / 7%); backdrop-filter: blur(5px); }
.news-card-image { display: grid; place-items: center; margin: -28px -28px 24px; overflow: hidden; border-radius: 17px 17px 0 0; background: #f3efe5; }
.news-card-image img { display: block; width: 100%; height: clamp(220px, 28vw, 430px); object-fit: contain; object-position: center; }
.news-card span, .news-archive article span { color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.news-card h3 { margin: 30px 0 12px; font: 800 clamp(24px, 2.5vw, 40px)/1.05 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.035em; }
.news-card p { color: var(--muted); line-height: 1.6; }
.news-card a { font-weight: 800; }
.news-card:not(.news-card-poster) > a:last-child { margin-top: auto; }
.news-card-poster { min-height: 320px; padding: 0; overflow: hidden; }
.news-card-poster .news-card-image { flex: 1; min-height: 280px; margin: 0; border-radius: 17px 17px 0 0; }
.news-card-poster .news-card-image img { height: 100%; min-height: 280px; object-fit: contain; }
.news-card-poster-date { display: block; padding: 14px 18px; color: var(--muted); font-size: 14px; text-align: center; }

.sponsor-preview { min-height: 660px; padding: 96px clamp(22px, 7vw, 112px); background-color: var(--paper); background-image: linear-gradient(180deg, rgba(255,253,248,.9) 0%, rgba(255,253,248,.78) 58%, rgba(255,253,248,.52) 100%), url('assets/images/home/sponsor-growth.png'); background-position: center; background-size: cover; text-align: center; }
.sponsor-preview-copy { width: min(100%, 980px); margin: 0 auto 34px; padding: clamp(22px, 3vw, 38px); border-radius: 22px; background: rgba(255,253,248,.95); box-shadow: 0 18px 48px rgb(35 91 78 / 7%); }
.sponsor-preview h2 { max-width: 850px; margin: 0 auto; }
.sponsor-patron-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 54px 0 34px; }
.sponsor-patron-card { display: grid; grid-template-rows: auto 1fr auto; place-items: center; gap: 14px; min-height: 270px; padding: 22px; border: 1px solid rgba(217,222,216,.9); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 16px 42px rgb(35 91 78 / 7%); backdrop-filter: blur(4px); }
.sponsor-patron-card span { color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.sponsor-patron-card img { width: auto; max-width: 100%; height: 150px; object-fit: contain; }
.sponsor-patron-card strong { color: var(--ink); font: 800 18px/1.25 'Manrope', 'Segoe UI', sans-serif; }
.contact-cta { display: grid; grid-template-columns: minmax(0, 680px) 1fr; grid-template-rows: auto auto; gap: 28px 50px; min-height: 650px; align-content: center; padding: 90px clamp(22px, 7vw, 112px); background-color: var(--green); background-image: linear-gradient(90deg, rgba(23,70,59,.97) 0%, rgba(23,70,59,.91) 44%, rgba(23,70,59,.28) 75%), url('assets/images/home/contact-help.png'); background-position: center; background-size: cover; color: white; }
.contact-cta > div:first-child { padding: clamp(24px, 3vw, 42px); border-radius: 22px; background: rgba(23,70,59,.94); box-shadow: 0 18px 48px rgb(0 0 0 / 12%); }
.contact-cta > div:first-child, .contact-cta-details { grid-column: 1; }
.contact-cta-details { display: flex; flex-direction: column; align-items: flex-start; justify-content: end; gap: 10px; font-size: 19px; }
.contact-cta-details a:not(.round-link) { font: 800 clamp(22px, 3vw, 38px)/1.1 'Manrope', sans-serif; }
.contact-cta-details .round-link { margin-top: 16px; color: var(--ink); }

.site-footer { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; padding: 58px clamp(22px, 7vw, 112px) 28px; background: #14251f; color: white; }
.site-footer > div:not(.footer-bottom) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer span, .site-footer p { color: rgba(255,255,255,.62); }
.footer-brand { gap: 14px !important; }
.footer-logo-link { display: block; width: min(100%, 270px); padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.96); }
.footer-logo-link img { display: block; width: 100%; height: auto; }
.footer-brand p { margin: 2px 0 0; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; }

.page-hero { display: flex; min-height: clamp(420px, 43vw, 610px); flex-direction: column; justify-content: center; padding: clamp(72px, 9vw, 120px) clamp(22px, 9vw, 150px); background-color: var(--cream); background-image: linear-gradient(90deg, rgba(255,253,248,1) 0%, rgba(255,253,248,1) 48%, rgba(255,253,248,.8) 58%, rgba(255,253,248,.08) 78%), var(--page-hero-image, none); background-position: center; background-size: cover; }
.page-hero--culture { --page-hero-image: url('assets/images/headers/culture-community.png'); }
.page-hero--about { --page-hero-image: url('assets/images/home/hero-learning.png'); }
.page-hero--learning { --page-hero-image: url('assets/images/headers/learning-offer.png'); }
.page-hero--teachers { --page-hero-image: url('assets/images/headers/teaching-team-v2.png'); }
.page-hero--community { --page-hero-image: url('assets/images/headers/kana-building-community-v2.png'); }
.page-hero--partnership { --page-hero-image: url('assets/images/headers/partner-church-real-illustrated-v4.png'); }
.page-hero-copy { width: min(100%, 660px); padding: clamp(22px, 3vw, 42px); border-radius: 24px; background: rgba(255,253,248,.97); box-shadow: 0 20px 55px rgb(74 58 26 / 9%); }
.page-hero h1 { max-width: 100%; margin: 0; font: 800 clamp(42px, 5.6vw, 78px)/.98 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.045em; }
.page-hero-intro { max-width: 650px; margin: 32px 0 0; color: var(--muted); font-size: 21px; line-height: 1.55; }
.content-section { padding: 72px clamp(22px, 7vw, 112px) 110px; }
.offer-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.offer-tabs button { min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: white; white-space: nowrap; cursor: pointer; font-weight: 800; }
.offer-tabs button[aria-selected='true'] { border-color: var(--green); background: var(--green); color: white; }
.offer-filters { display: flex; gap: 14px; margin: 30px 0; }
.offer-filters label, .teacher-filter label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.offer-filters select, .teacher-filter select { min-width: 230px; min-height: 48px; padding: 0 36px 0 13px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); text-transform: none; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer-card { display: flex; flex-direction: column; min-height: 310px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; }
.offer-card > span { color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.offer-card h2 { margin: 28px 0 12px; font: 800 30px/1.05 'Manrope', sans-serif; letter-spacing: -.035em; }
.offer-card p { color: var(--muted); line-height: 1.55; }
.offer-card small { color: var(--muted); }
.offer-card a { margin-top: auto; padding-top: 24px; color: var(--green); font-weight: 800; }

.teacher-filter { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.teacher-filter > span { color: var(--muted); }
.teacher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.teacher-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.teacher-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--green), #3c7b6b); color: rgba(255,255,255,.8); font: 800 clamp(48px, 7vw, 92px)/1 'Manrope', sans-serif; }
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card > span, .teacher-card h2, .teacher-card p { margin-left: 24px; margin-right: 24px; }
.teacher-card > span { display: block; margin-top: 22px; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.teacher-card h2 { margin-top: 13px; margin-bottom: 8px; font: 800 27px/1.1 'Manrope', sans-serif; }
.teacher-card h2 small { font-size: 14px; }
.teacher-card p { margin-bottom: 26px; color: var(--muted); }

.story-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(44px, 8vw, 120px); padding: 90px clamp(22px, 9vw, 150px); }
.story-lead span { color: var(--green); font-weight: 800; letter-spacing: .12em; }
.story-lead h2 { margin: 18px 0; font: 800 clamp(44px, 5vw, 72px)/1 'Manrope', sans-serif; }
.story-copy h3 { margin: 0 0 10px; font: 800 27px/1.2 'Manrope', sans-serif; }
.story-copy p { margin: 0 0 38px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.news-archive { max-width: 980px; margin: auto; }
.news-archive article { display: grid; grid-template-columns: 220px 150px 1fr auto; gap: 18px 30px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--line); }
.news-archive-image { grid-row: 1 / span 2; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #f3efe5; }
.news-archive-image img { display: block; width: 100%; height: 180px; object-fit: contain; object-position: center; }
.news-archive article > div { display: flex; flex-direction: column; gap: 8px; }
.news-archive time { color: var(--muted); }
.news-archive h2 { margin: 0; font: 800 32px/1.1 'Manrope', sans-serif; }
.news-archive p { grid-column: 3; margin: 0; color: var(--muted); line-height: 1.55; }
.news-archive article > a:last-child { grid-column: 4; grid-row: 1 / span 2; font-weight: 800; }
.news-archive article.news-poster { display: block; padding: 34px 0; }
.news-archive article.news-poster > a.news-poster-image { display: block; width: min(100%, 520px); margin: auto; overflow: hidden; border-radius: 14px; background: #f3efe5; font-weight: 400; }
.news-poster-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.news-archive .news-poster-date { display: block; width: min(100%, 520px); margin: 12px auto 0; color: var(--muted); font-size: 14px; text-align: center; }
.article-image { margin: 32px 0; }
.article-image img { display: block; width: 100%; height: auto; max-height: none; border-radius: 18px; object-fit: contain; }
.article-page { max-width: 860px; margin: auto; padding: 80px 22px 110px; }
.article-page-poster { max-width: 1040px; }
.article-page-poster .article-image { margin-top: 36px; }
.article-page > span { display: block; margin-top: 50px; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.article-page h1 { margin: 16px 0; font: 800 clamp(48px, 7vw, 90px)/.98 'Manrope', sans-serif; letter-spacing: -.05em; }
.article-page time { color: var(--muted); }
.article-page > div { margin: 52px 0; }
.article-page > div p { font-size: 20px; line-height: 1.75; }
.article-page aside { display: flex; justify-content: space-between; gap: 20px; padding: 24px; border-radius: 14px; background: var(--cream); }
.article-page aside a { color: var(--green); font-weight: 800; }
.back-link { color: var(--muted); }

.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.sponsor-section-heading { margin: 0 0 42px; }
.sponsor-section-heading h2 { max-width: 760px; margin: 0; font: 800 clamp(38px, 5vw, 64px)/1 'Manrope', sans-serif; letter-spacing: -.045em; }
.sponsor-group + .sponsor-group { margin-top: 84px; }
.sponsor-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; }
.sponsor-logo { display: grid; place-items: center; min-height: 190px; margin-bottom: 22px; border-radius: 10px; background: #edf2ef; color: #91a099; font: 800 52px/1 'Manrope', sans-serif; }
.sponsor-logo img { max-width: 100%; max-height: 170px; width: auto; height: auto; object-fit: contain; }
.sponsor-grid span { color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.sponsor-grid h3 { margin: 22px 0 14px; font: 800 29px/1.1 'Manrope', sans-serif; }
.sponsor-grid p { color: var(--muted); line-height: 1.55; }
.sponsor-grid a { font-weight: 800; }
.sponsor-invite { margin-top: 48px; padding: 42px; border-radius: 18px; background: var(--green); color: white; text-align: center; }
.sponsor-invite h2 { margin: 0; font: 800 40px/1 'Manrope', sans-serif; }
.sponsor-invite p { color: rgba(255,255,255,.72); }
.donate-page { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; padding: 80px clamp(22px, 7vw, 112px) 110px; }
.impact-list article { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.impact-list span { grid-row: span 2; color: var(--green); font-weight: 800; }
.impact-list h2 { margin: 0; font: 800 26px/1.1 'Manrope', sans-serif; }
.impact-list p { color: var(--muted); line-height: 1.55; }
.contact-page { display: grid; grid-template-columns: .7fr 1.3fr; gap: 46px; padding: 80px clamp(22px, 7vw, 112px) 110px; }
.contact-list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact-list > div { display: grid; gap: 5px; }
.contact-list span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.contact-list a:not(.button-link), .contact-list strong { font: 800 clamp(20px, 2vw, 30px)/1.2 'Manrope', sans-serif; }
.map-shell { min-height: 520px; overflow: hidden; border-radius: 20px; background: var(--cream); }
.map-shell iframe { width: 100%; height: 100%; min-height: 520px; border: 0; }
.map-placeholder { display: grid; place-items: center; align-content: center; min-height: 520px; padding: 30px; text-align: center; }
.map-placeholder > span { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--yellow); font: 800 32px/1 'Manrope', sans-serif; }
.map-placeholder > span::first-letter { transform: rotate(45deg); }
.map-placeholder strong { margin-top: 24px; font: 800 30px/1.1 'Manrope', sans-serif; }
.map-placeholder p { max-width: 420px; color: var(--muted); }
.map-placeholder button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--green); color: white; font-weight: 800; cursor: pointer; }
.legal-page { max-width: 900px; margin: auto; padding: 70px 22px 110px; }
.legal-page h2 { margin: 50px 0 12px; font: 800 32px/1.15 'Manrope', sans-serif; }
.legal-page > p { color: var(--muted); font-size: 18px; line-height: 1.7; }
.legal-warning { padding: 24px; border-left: 6px solid var(--yellow); background: #fff6d9; }
.legal-warning strong { font-size: 20px; }
.legal-warning p { line-height: 1.55; }
.legal-page .updated { margin-top: 46px; font-size: 13px; }
.disabled-link { pointer-events: none; opacity: .58; }

/* Desktop artwork is composed for the classic 24-inch, 1920 x 1080 viewport. */
@media (min-width: 1021px) {
  .hero, .page-hero { min-height: clamp(580px, calc(100svh - 96px), 900px); }
  .donation-section { min-height: clamp(640px, calc(100svh - 96px), 900px); }
  .sponsor-preview { min-height: clamp(660px, calc(100svh - 96px), 900px); }
  .contact-cta { min-height: clamp(650px, calc(100svh - 96px), 900px); }
  .hero, .page-hero, .donation-section, .news-section, .sponsor-preview, .contact-cta {
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% auto;
  }
}

/* Keep shorter and narrower desktop screens airy without hiding the artwork. */
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 850px) {
  .site-header { min-height: 82px; gap: 24px; padding-block: 8px; }
  .brand { width: clamp(165px, 13vw, 195px); }
  .parish-brand { width: 51px; height: 62px; }
  .parish-logo { max-width: 38px; max-height: 54px; }
  nav { gap: clamp(12px, 1.5vw, 22px); }
  nav a { font-size: 11px; }
  .header-cta { padding: 10px 16px; font-size: 14px; }

  .hero, .page-hero {
    min-height: clamp(540px, min(50vw, calc(100svh - 82px)), 760px);
    background-size: cover;
  }
  .hero { gap: 14px 36px; padding-top: 32px; padding-bottom: 32px; }
  .hero-copy { max-width: 520px; padding: clamp(18px, 2vw, 25px); }
  .hero h1 { font-size: clamp(40px, 4.1vw, 58px); }
  .hero-intro { margin-top: 14px; font-size: clamp(15px, 1.25vw, 18px); }
  .hero-note { width: min(100%, 310px); padding: 15px 19px; }
  .hero-note strong { margin-top: 7px; font-size: 21px; }
  .hero-note p { margin: 7px 0; font-size: 15px; }

  .page-hero { padding-block: clamp(48px, 6vw, 82px); }
  .page-hero-copy { width: min(100%, 600px); padding: clamp(22px, 2.5vw, 34px); }
  .page-hero h1 { font-size: clamp(40px, 4.3vw, 64px); }
  .page-hero-intro { margin-top: 22px; font-size: 18px; }

  .section-heading h2 { font-size: clamp(32px, 3.4vw, 48px); }
  .section-heading > p { font-size: 16px; }
  .donation-copy h2, .news-section h2, .sponsor-preview h2, .contact-cta h2 { font-size: clamp(34px, 3.6vw, 52px); }
  .donation-copy > p:not(.eyebrow) { font-size: 17px; }
  .donation-section, .news-section, .sponsor-preview, .contact-cta {
    background-size: cover;
  }
}

@media (min-width: 1921px) {
  body { box-shadow: 0 0 70px rgb(31 41 37 / 14%); }
}

@media (max-width: 900px) {
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu summary { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 800; }
  .mobile-menu > div { position: absolute; left: 12px; right: 12px; top: 66px; display: grid; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 40px rgb(0 0 0 / 12%); }
  .mobile-menu a { padding: 13px; border-radius: 8px; text-decoration: none; font-weight: 800; }
  .mobile-menu a.is-current { background: #eef7f2; color: var(--green-dark); }
  .site-header .header-cta { display: none; }
  .donation-section, .contact-cta, .story-section, .donate-page, .contact-page { grid-template-columns: 1fr; }
  .news-grid, .offer-grid, .teacher-grid, .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-bottom { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .page-hero { min-height: 530px; padding: 44px 18px; background-image: linear-gradient(90deg, rgba(255,253,248,.86), rgba(255,253,248,.62)), var(--page-hero-image, none); background-position: 66% center; }
  .page-hero-copy { padding: 26px 22px; background: rgba(255,253,248,.96); }
  .page-hero h1 { font-size: clamp(40px, 11vw, 56px); }
  .page-hero-intro { max-width: 100%; font-size: 18px; }
  .section-topline { display: block; }
  .section-topline .text-link { display: inline-block; margin-top: 20px; }
  .news-grid, .offer-grid, .teacher-grid, .sponsor-grid, .sponsor-patron-row { grid-template-columns: 1fr; }
  .donation-panel { grid-template-columns: 1fr; padding: 18px; }
  .bank-detail { padding-right: 0; padding-bottom: 50px; }
  .bank-detail button { left: 0; right: auto; }
  .offer-filters { flex-direction: column; }
  .offer-filters select, .teacher-filter select { width: 100%; min-width: 0; }
  .teacher-filter { align-items: stretch; flex-direction: column; gap: 16px; }
  .news-archive article { grid-template-columns: 1fr; }
  .news-archive-image, .news-archive p, .news-archive article > a:last-child { grid-column: 1; grid-row: auto; }
  .news-archive-image img { height: min(70vw, 420px); }
  .article-page aside { flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-brand, .footer-bottom { grid-column: 1; }
  .footer-bottom { flex-direction: column; }
  .contact-cta { padding-top: 72px; padding-bottom: 72px; }
}