/* "Blend": light and friendly with a spark. Soft page, rounded panels, the logo's
   blue-to-orange fire used for buttons, the hero glow and small details. */

/* ===== COLOR TOKENS (the only place colors are set) =====
   Final colors come from Klemen's graphic: when it arrives, change only the values here.
   Palette from the meeting on 6.11.2026: dark blue, light blue, orange, red. No green anywhere.
   Light set first. The dark set is written twice (a saved choice, and the system setting when
   nothing is saved), because plain CSS can't share one block between the two: keep them identical
   (tests/theme.test.ts checks this, and checks text contrast). */
:root {
  color-scheme: light;
  /* The four palette colors */
  --navy: #16306b;        /* dark blue */
  --blue: #2563eb;
  --sky: #60a5fa;         /* light blue */
  --orange: #f97316;
  --red: #dc2626;
  --fire: linear-gradient(100deg, #1e40af, #2563eb 25%, #60a5fa 46%, #fb923c 62%, #f97316 82%, #ea580c);
  /* The same fire, deeper, for anything with text on it (buttons, labels): white text
     stays readable on every part of it (tests/theme.test.ts checks each color stop) */
  --fire-strong: linear-gradient(100deg, #1e3a8a, #1d4ed8 35%, #c2410c 75%, #b91c1c);
  --fire-ink: #ffffff;
  /* Neutrals */
  --bg: #f8f9fc;
  --panel: #ffffff;
  --ink: #141a33;         /* body text */
  --muted: #555c72;       /* secondary text */
  --line: #e3e6ee;
  --soft: #141a330d;      /* faint fill (copy button) */
  --hover: #141a330a;
  --header-bg: #f8f9fce6;
  /* Text colors that must stay readable on --bg / --panel */
  --link: #1d4ed8;
  --accent-ink: #c2410c;  /* orange text */
  --red-ink: #b91c1c;
  /* Buttons */
  --btn-bg: #141a33;
  --btn-ink: #ffffff;
  /* Deep navy blocks (video panel, footer), dark in both themes */
  --deep: #0f1a3d;
  --deep-ink: #eef1fb;
  --deep-muted: #c3cbe3;
  --deep-accent: #fdba74;
  --deep-link: #93c5fd;
  --media-bg: #0d1226;
  /* Small colored labels */
  --chip-bg: #2563eb14;      --chip-ink: #1d4ed8;
  --chip-event-bg: #f9731618; --chip-event-ink: #c2410c;
  --chip-video-bg: #dc262614; --chip-video-ink: #b91c1c;
  --chip-story-bg: #16306b14; --chip-story-ink: #16306b;
  /* "Copied ✓" state and the "next meeting" live dot */
  --done-bg: #dbeafe;
  --done-ink: #1e3a8a;
  --live: #f97316;
  --glow: #f9731640;      /* soft orange glow behind buttons and the video panel */
  /* Hero glow and prayer panel */
  --blob-1: #60a5fa;
  --blob-2: #fdba74;
  --blob-3: #fca5a5;
  --blob-opacity: .45;
  --prayer-bg: linear-gradient(160deg, #eff6ff, #fff7ed 60%, #fef2f2);
  /* Placeholder boxes (content Klemen still has to send) */
  --ph-bg: #fff7ed;
  --ph-line: #f97316;
  --ph-ink: #9a3412;
  --ph-badge-ink: #ffffff;
  /* Map tiles (OpenStreetMap): shown as they are in light, darkened in dark */
  --map-tiles: none;
  /* Shadows */
  --shadow: 0 1px 2px #141a330d, 0 10px 30px #141a330f;
  --shadow-lg: 0 30px 60px #141a331f;
  --shadow-hover: 0 20px 40px #141a331a;
  /* Fonts */
  --display: var(--font-blend-display), system-ui, sans-serif;
}
/* Dark set: chosen with the header switch */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1022;
  --panel: #141b34;
  --ink: #e9edf7;
  --muted: #a9b2ca;
  --line: #273158;
  --soft: #ffffff14;
  --hover: #ffffff0f;
  --header-bg: #0b1022e0;
  --link: #8ab4ff;
  --accent-ink: #fdba74;
  --red-ink: #fca5a5;
  --btn-bg: #e9edf7;
  --btn-ink: #0b1022;
  --deep: #070c1c;
  --chip-bg: #8ab4ff1f;       --chip-ink: #8ab4ff;
  --chip-event-bg: #fdba741f; --chip-event-ink: #fdba74;
  --chip-video-bg: #fca5a51f; --chip-video-ink: #fca5a5;
  --chip-story-bg: #c7d2fe1f; --chip-story-ink: #c7d2fe;
  --done-bg: #1e3a8a;
  --done-ink: #dbeafe;
  --blob-opacity: .22;
  --prayer-bg: linear-gradient(160deg, #13204a, #1c1a33 60%, #26162a);
  --ph-bg: #2a1a10;
  --ph-line: #fb923c;
  --ph-ink: #fdba74;
  --ph-badge-ink: #1a0f06;
  --map-tiles: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85);
  --shadow: 0 1px 2px #0006, 0 10px 30px #0004;
  --shadow-lg: 0 30px 60px #0007;
  --shadow-hover: 0 20px 40px #0006;
}
/* Dark set again: follows the phone/computer setting when no choice is saved */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1022;
    --panel: #141b34;
    --ink: #e9edf7;
    --muted: #a9b2ca;
    --line: #273158;
    --soft: #ffffff14;
    --hover: #ffffff0f;
    --header-bg: #0b1022e0;
    --link: #8ab4ff;
    --accent-ink: #fdba74;
    --red-ink: #fca5a5;
    --btn-bg: #e9edf7;
    --btn-ink: #0b1022;
    --deep: #070c1c;
    --chip-bg: #8ab4ff1f;       --chip-ink: #8ab4ff;
    --chip-event-bg: #fdba741f; --chip-event-ink: #fdba74;
    --chip-video-bg: #fca5a51f; --chip-video-ink: #fca5a5;
    --chip-story-bg: #c7d2fe1f; --chip-story-ink: #c7d2fe;
    --done-bg: #1e3a8a;
    --done-ink: #dbeafe;
    --blob-opacity: .22;
    --prayer-bg: linear-gradient(160deg, #13204a, #1c1a33 60%, #26162a);
    --ph-bg: #2a1a10;
    --ph-line: #fb923c;
    --ph-ink: #fdba74;
    --ph-badge-ink: #1a0f06;
    --map-tiles: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85);
    --shadow: 0 1px 2px #0006, 0 10px 30px #0004;
    --shadow-lg: 0 30px 60px #0007;
    --shadow-hover: 0 20px 40px #0006;
  }
}
/* ===== end of color tokens ===== */

body { background: var(--bg); color: var(--ink); font-family: var(--font-blend-text), system-ui, sans-serif; font-size: 17px; line-height: 1.65; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
a { color: var(--link); }

/* Buttons */
.btn { border-radius: 14px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn--fire, .giving .btn:not(.btn--ghost), .prayer .btn:not(.btn--ghost), .list-more .btn { background: var(--fire-strong); color: var(--fire-ink); text-shadow: 0 1px 2px #0003; background-size: 180% 100%; background-position: 0 0; transition: background-position .5s, transform .2s, box-shadow .2s; }
.btn--fire:hover, .giving .btn:not(.btn--ghost):hover, .prayer .btn:not(.btn--ghost):hover { background-position: 100% 0; box-shadow: 0 10px 26px var(--glow); }
.btn--ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow); }
.btn--yt { background: #ff0033; color: #fff; }
.btn--give { background: var(--fire-strong); color: var(--fire-ink) !important; text-shadow: 0 1px 2px #0003; min-height: 44px; padding: 6px 16px; }
.link-arrow { font-weight: 700; text-decoration: none; white-space: nowrap; }
.link-arrow span { display: inline-block; transition: transform .2s; }
.link-arrow:hover span { transform: translateX(4px); }
.kicker { font-weight: 700; color: var(--accent-ink); margin: 0 0 6px; font-size: 15px; }

/* Header */
/* No backdrop-filter blur: the header is already almost solid, and the blur made phones redraw it on every scroll (Lighthouse 6.11.2026) */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); border-bottom: 1px solid var(--line); }
.site-header__inner { min-height: 74px; }
.logo img { height: 48px; border-radius: 12px; box-shadow: var(--shadow); }
.menu a:not(.btn) { color: var(--ink); font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.menu a:not(.btn):hover { background: var(--hover); }
/* The page you're on: a clear underline in the link color, so nobody gets lost */
.menu a[aria-current="page"] { color: var(--link); box-shadow: inset 0 -3px 0 var(--link); border-radius: 10px 10px 0 0; }
@media (max-width: 900px) {
  .menu { background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .menu a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--line); border-radius: 0; }
  .menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--link); border-radius: 0; }
  .logo img { height: 40px; }
}
/* Header tools: SL/EN and the light/dark switch */
.tool { color: var(--ink); background: transparent; border: 0; border-radius: 10px; font-weight: 700; font-size: 15px; font-variant-emoji: text; }
.theme-toggle { font-size: 20px; line-height: 1; }
.tool:hover { background: var(--hover); }
.tool:focus-visible, .menu a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.lang-switch b { color: var(--muted); font-weight: 600; }
/* The switch shows the moon in light mode (tap for dark) and the sun in dark mode */
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: inline; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

/* Placeholder: content Klemen still has to send */
.placeholder { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 20px; margin-top: 20px; border: 2px dashed var(--ph-line); border-radius: 22px; background: var(--ph-bg); color: var(--ph-ink); }
.placeholder__badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: var(--ph-ink); color: var(--ph-badge-ink); vertical-align: middle; }
.placeholder__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); }
.placeholder__need { margin: 0; font-size: 15px; }

/* Hero */
.hero { position: relative; width: min(1180px, 100% - 32px); margin: 0 auto; padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; isolation: isolate; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero__blobs { position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none; }
/* Soft color clouds. A soft-edged gradient instead of filter: blur(), which phones had to redraw on every
   frame of the drift animation (Lighthouse 6.11.2026). */
.hero__blobs i { position: absolute; border-radius: 50%; opacity: var(--blob-opacity); animation: drift 14s ease-in-out infinite alternate; will-change: transform; }
.hero__blobs i:nth-child(1) { width: 420px; height: 420px; background: radial-gradient(closest-side, var(--blob-1) 40%, transparent); left: 5%; top: 10%; }
.hero__blobs i:nth-child(2) { width: 380px; height: 380px; background: radial-gradient(closest-side, var(--blob-2) 40%, transparent); right: 5%; top: 0; animation-delay: -5s; }
.hero__blobs i:nth-child(3) { width: 260px; height: 260px; background: radial-gradient(closest-side, var(--blob-3) 40%, transparent); right: 30%; bottom: 0; animation-delay: -9s; }
@keyframes drift { to { transform: translate(40px, -30px) scale(1.1); } }
.hero__kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 16px; padding: 6px 14px 6px 8px; background: var(--panel); border-radius: 99px; box-shadow: var(--shadow); font-size: 15px; }
.heart { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; animation: beat 2.2s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(.95); } 90% { transform: scale(1.1); } }
.hero__title { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.02; margin-bottom: 18px; }
.fire-text { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 560px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.hero__cta .btn { min-height: 52px; padding-inline: 26px; font-size: 18px; }
/* "Želim sprejeti Jezusa": a full-width warm orange button under the other two (Boštjan, 13.11.2026) */
.btn--jesus { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: linear-gradient(90deg, #f7931e, #f0644f); color: #fff; text-shadow: 0 1px 2px #0004; border-radius: 999px; }
.btn--jesus:hover { box-shadow: 0 10px 26px #f0644f55; }
.tour__jesus { background: linear-gradient(90deg, #f7931e, #f0644f); color: #fff; }
/* A small bubble with text (data-tip) above a button, when the mouse is over it or it has keyboard focus */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); width: max-content; max-width: min(340px, 90vw); padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; line-height: 1.4; text-shadow: none; white-space: normal; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-tip]::after { display: none; } }
.next-pill { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; text-decoration: none; color: var(--ink); background: var(--panel); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); font-size: 15px; }
.next-pill__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: ping 2s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 10px transparent; } }

.hero__card { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--panel); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(1.5deg); transition: transform .35s; }
.hero__card:hover { transform: rotate(0) translateY(-4px); }
.hero__card-label { position: absolute; z-index: 2; top: 16px; left: 16px; background: var(--fire-strong); color: var(--fire-ink); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 99px; }
.hero__card-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--media-bg); }
.hero__card-media::before { content: ''; position: absolute; inset: -20px; background: var(--card-bg) center / cover; filter: blur(20px); }
.hero__card-media img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.hero__card-body { padding: 18px 22px 22px; }
.hero__card-body h2 { font-size: 24px; margin: 0; }

/* Sections */
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.section__title { font-size: clamp(30px, 4.2vw, 48px); margin: 0; }
.section__lead { color: var(--muted); font-size: 19px; }
.page-head .section__title { margin-bottom: 8px; }
.panel { background: var(--panel); border-radius: 28px; padding: clamp(20px, 3.4vw, 40px); box-shadow: var(--shadow); }

/* Cards */
.card { background: var(--panel); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; height: 100%; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.card__link { color: var(--ink); }
.card__title { font-family: var(--display); font-size: 21px; font-weight: 700; }
.card__meta { color: var(--muted); }
.card__media { background: var(--media-bg); }
.card:hover .card__media img { transform: scale(1.04); }
.card__placeholder { background: var(--fire); }
.chip { background: var(--chip-bg); color: var(--chip-ink); }
.chip--dogodek { background: var(--chip-event-bg); color: var(--chip-event-ink); }
.chip--video { background: var(--chip-video-bg); color: var(--chip-video-ink); }
.chip--pričevanje { background: var(--chip-story-bg); color: var(--chip-story-ink); }

/* Video panel */
.panel--video { background: var(--deep); color: var(--deep-ink); position: relative; overflow: hidden; }
.panel--video::before { content: ''; position: absolute; inset: auto -10% -60% 40%; height: 120%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.panel--video .kicker { color: var(--deep-accent); }
.panel--video .link-arrow { color: var(--deep-link); }
.yt { border-radius: 18px; }
.videoblock__list .yt { border-radius: 12px; }
.playlists a { background: #ffffff14; color: var(--deep-ink); font-weight: 600; }
.playlists a:hover { background: #ffffff26; }
.playlists__all { background: transparent !important; color: var(--deep-accent) !important; }

/* Giving: gradient frame */
.panel--give { position: relative; }
.panel--give::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--fire); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.giving__title { font-size: clamp(28px, 3.8vw, 42px); }
.giving__iban span { background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; }
.copy { background: var(--soft); color: var(--ink); }
.copy.is-done { background: var(--done-bg); color: var(--done-ink); }
.giving__qr-code { box-shadow: var(--shadow), 0 0 0 1px var(--line); transform: rotate(-2deg); transition: transform .3s; }
.giving__qr-code:hover { transform: rotate(0); }
.giving__qr figcaption { color: var(--muted); }

/* Meetings */
.meet { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .meet { grid-template-columns: 1fr; } }
.meet__sub { font-size: 20px; }
.event { padding: 8px 0; }
.event__date { border-radius: 16px; background: var(--fire-strong); color: var(--fire-ink); }
.event__date b { font-family: var(--display); }
.location { background: var(--panel); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); transition: transform .2s; }
.location:hover { transform: translateY(-3px); }
.location__when { color: var(--accent-ink); }
.expect { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.expect li { background: var(--panel); border-radius: 99px; padding: 8px 14px; box-shadow: var(--shadow); font-weight: 600; font-size: 15px; }

/* Prayer */
.panel--prayer { background: var(--prayer-bg); }
.prayer__lead { color: var(--muted); }
.prayer__title { font-size: clamp(30px, 4.4vw, 50px); }
.prayer__text { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2.2vw, 23px); }

/* SOS + newsletter */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 0; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }
.duo__item h2 { font-size: 26px; }
.duo__item p { color: var(--muted); }
.duo__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--fire-strong); color: var(--fire-ink); font-size: 24px; margin-bottom: 12px; }

/* Post page */
.post__meta { color: var(--muted); }
.prose img { border-radius: 18px; }
.post__foot { border-top: 1px solid var(--line); }
.share a, .share .copy { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.post__nav a { color: var(--link); }
.more .section__title { font-size: 32px; margin-bottom: 24px; }

/* Lists + video page */
.filter { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); border-radius: 12px; }
.filter.is-on { background: var(--fire-strong); color: var(--fire-ink); text-shadow: 0 1px 2px #0003; }
.filters__search { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.video-feature h2 { font-size: clamp(26px, 3.4vw, 38px); }
.video-tile { background: var(--panel); border-radius: 22px; padding: 10px 10px 16px; box-shadow: var(--shadow); }
.video-tile h3, .video-tile p { padding-inline: 6px; }
.playlist__cover { border-radius: 16px; }
.playlist a { color: var(--ink); }

/* Footer */
.site-footer { background: var(--deep); color: var(--deep-muted); margin-top: 40px; position: relative; }
.site-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--fire); }
.site-footer a { color: #fff; }
.site-footer h3 { color: var(--deep-accent); }
.site-footer h3 a { color: inherit; text-decoration: none; }
.site-footer h3 a:hover { text-decoration: underline; }
.site-footer__churches b { color: var(--deep-ink); }

/* Short "kmalu" pages (Cerkve, Literatura, Avdio, Kontakt until they're built) */
.stub__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.stub__links .btn { min-height: 48px; padding-inline: 22px; display: inline-flex; align-items: center; text-decoration: none; }

/* Scroll-in: soft rise */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--d, 0ms), transform .6s var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Church map + cards (homepage hub, Cerkve page) */
.church-map { display: grid; gap: 20px; }
.church-map__box { height: clamp(300px, 48vw, 460px); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); z-index: 0; }
.church-map__box .leaflet-tile-pane { filter: var(--map-tiles); }
.church-map__box .leaflet-control-attribution { background: var(--panel); color: var(--muted); }
.church-map__box .leaflet-control-attribution a { color: var(--link); }
.church-map__box .leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); }
.church-map__box .leaflet-popup-content-wrapper, .church-map__box .leaflet-popup-tip { background: var(--panel); color: var(--ink); }
.church-map__box .leaflet-popup-content { font: 15px/1.45 var(--font-blend-text), system-ui, sans-serif; }
.church-map__box .leaflet-popup-content a { color: var(--link); font-weight: 700; }
.church-map__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .church-map__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .church-map__cards { grid-template-columns: 1fr; } }
.church-map__note { color: var(--muted); font-size: 15px; margin: 12px 0 0; }
/* No JavaScript = no map, so hide the "click a pin" hint too */
.church-map:has(.church-map__box[hidden]) + .church-map__note { display: none; }
/* The pin: a drop shape filled with the logo's fire */
.church-pin span { display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--fire-strong); border: 3px solid var(--panel); box-shadow: var(--shadow); transition: transform .2s; }
.church-pin.is-active span { transform: rotate(-45deg) scale(1.3); box-shadow: 0 0 0 6px var(--glow), var(--shadow); }
/* One church card */
.church-card { background: var(--panel); border-radius: 22px; padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; transition: box-shadow .2s, transform .2s; }
.church-card.is-active { box-shadow: 0 0 0 3px var(--orange), var(--shadow-hover); transform: translateY(-3px); }
.church-card p { margin: 0; }
.church-card__name { margin: 0 0 4px; font-size: 21px; }
.church-card__show { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.church-card__show:hover { color: var(--link); }
.church-card__show:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
.church-card__pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--fire-strong); flex: none; }
.church-card__when { color: var(--accent-ink); font-weight: 700; }
.church-card__line { color: var(--muted); }
.church-card__contact { display: flex; flex-direction: column; gap: 2px; margin-top: 4px !important; }
.church-card__contact a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; min-height: 32px; display: inline-flex; align-items: center; }
.church-card__contact a:hover { color: var(--link); }
/* Contact people (Branka, Carol …): name on top, phone and e-mail under it */
.church-card__people { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.church-card__people .church-card__contact { margin-top: 0 !important; }
.church-card__note { color: var(--muted); font-size: 15px; }
.church-card__leader { display: flex; align-items: center; gap: 10px; }
.church-card__face { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--line); }
/* Two people in the photo (a pastor couple): a wider frame with rounded corners, so both faces fit */
.church-card__face--wide { width: 80px; height: 60px; border-radius: 12px; object-position: center 30%; }
.church-pastor__contacts-title { margin: 14px 0 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
/* Photos from the church's life (src/components/ChurchGallery.astro) */
.church-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.church-gallery__grid button { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: var(--media-bg); }
.church-gallery__grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.church-gallery__grid button:hover img { transform: scale(1.04); }
.church-gallery__grid button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
@media (max-width: 520px) { .church-gallery__grid { grid-template-columns: 1fr 1fr; gap: 8px; } .church-gallery__grid button { border-radius: 12px; } }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 8, 20, .94); color: #fff; }
.lightbox::backdrop { background: transparent; }
.lightbox__img { position: absolute; inset: 56px 12px 56px; margin: auto; max-width: calc(100% - 24px); max-height: calc(100% - 112px); object-fit: contain; border-radius: 10px; }
.lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: #ffffff38; }
.lightbox__x { top: 8px; right: 8px; }
.lightbox__prev { left: 8px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 8px; top: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 15px; color: #ffffffcc; }
.church-card__links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: auto !important; padding-top: 10px; }
.church-card__route { color: var(--muted); font-size: 15px; }
/* The churches' own web addresses under the map (Cerkve page) */
.church-sites { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.church-sites li { display: flex; flex-direction: column; }
.church-sites a { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.church-sites span:not(a span) { color: var(--muted); font-size: 15px; }

/* ===== One church's own site (src/layouts/ChurchLayout.astro, /cerkve/<slug>/) ===== */
.church-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.church-brand__pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--fire-strong); flex: none; }
.church-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.church-brand__text b { font-family: var(--display); font-size: 22px; font-weight: 800; }
.church-brand__text small { color: var(--muted); font-size: 13px; font-weight: 600; }
.church-header__nav { margin-left: auto; }
.church-header__back { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 10px; color: var(--link); font-weight: 700; text-decoration: none; white-space: nowrap; }
.church-header__back:hover { background: var(--hover); }
.church-header__back:focus-visible, .church-brand:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 520px) {
  .church-header .site-header__inner { gap: 8px; }
  .church-brand__text b { font-size: 18px; }
  .church-header .lang-switch { display: none; } /* room for the back link on small phones */
}
/* When and where + pastor, side by side on wide screens */
.church-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; padding-top: 32px; }
@media (max-width: 900px) { .church-info { grid-template-columns: 1fr; } }
.church-info p { margin: 0 0 8px; }
.church-info__title { font-size: 26px; margin: 0 0 10px; }
.church-info__when { color: var(--accent-ink); font-weight: 700; font-size: 19px; }
.church-info__line { color: var(--muted); }
.church-minimap { height: 240px; border-radius: 18px; overflow: hidden; margin-top: 14px; box-shadow: 0 0 0 1px var(--line); z-index: 0; }
.church-minimap .leaflet-tile-pane { filter: var(--map-tiles); }
.church-minimap .leaflet-control-attribution { background: var(--panel); color: var(--muted); }
.church-minimap .leaflet-control-attribution a { color: var(--link); }
.church-minimap .leaflet-bar a { background: var(--panel); color: var(--ink); border-color: var(--line); }
.church-pastor { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; }
@media (max-width: 420px) { .church-pastor { grid-template-columns: 1fr; } .church-pastor .placeholder, .church-pastor .photo-slot { max-width: 180px; } }
.church-pastor .placeholder { margin-top: 0; padding: 14px; }
.church-pastor__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.church-pastor__name { font-family: var(--display); font-weight: 700; font-size: 20px; }
.church-local .meet__sub { margin-top: 0; }
.church-local__news { grid-template-columns: 1fr; gap: 16px; }
.church-all__title { font-size: clamp(26px, 3.4vw, 36px); }
.church-all, .church-videos { padding-top: 0; }
.church-videos__list { list-style: none; padding: 0; margin: 0; }

/* A photo an editor can change on the page (PhotoSlot.astro): the photo, or the "Začasno" box */
.photo-slot { position: relative; }
.photo-slot__img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 22px; margin-top: 20px; background: var(--media-bg); }
.church-pastor .photo-slot__img { margin-top: 0; border-radius: 18px; }
.church-photo { padding-top: 0; }
.church-photo .photo-slot { max-width: 900px; }

/* ===== English pages (src/pages/en/) ===== */
/* Homepage "Where we meet" box next to the welcome text */
.en-glance { align-self: center; }
.en-glance ul { display: grid; gap: 12px; margin: 8px 0 14px; }
.en-glance li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.en-glance li b { font-family: var(--display); font-size: 20px; }
.en-glance li span, .en-glance__note { color: var(--muted); }
.en-glance__note { margin: 0; font-size: 15px; }
.en-iban { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.en-iban b { font-size: clamp(18px, 2.4vw, 22px); letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.en-story { max-width: 820px; }
.en-story .section__title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel--video .grid { margin-top: 8px; }
.en-note-wrap { padding-top: 0; }
.en-note { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 0; font-size: 19px; font-weight: 600; }
.en-note .btn { min-height: 48px; display: inline-flex; align-items: center; text-decoration: none; }
/* Give page: no QR code column (the UPN QR only works in Slovene bank apps) */
.giving--en { grid-template-columns: 1fr; }

/* ===== Literatura: book cards (src/pages/literatura/) ===== */
/* Phones: one book per row; wider screens: as many as fit. Covers are 2:3, like a book. */
.book-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.book-card { background: var(--panel); border-radius: 22px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* object-fit: contain shows the whole cover: some covers aren't exactly 2:3, and "cover" cut off their
   titles (Boštjan, 13.11.2026). Any leftover space shows the soft background behind the picture. */
.book-card__cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 14px; background: var(--media-bg); }
/* App and website logos (Literatura → Povezave): show the whole logo, not a 2:3 crop */
.book-card__cover--logo { object-fit: contain; padding: 18%; }
.book-card .placeholder { margin-top: 0; }
.book-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.book-card__body p { margin: 0; }
.book-card__title { font-family: var(--display); font-size: 21px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.book-card__author { color: var(--accent-ink); font-weight: 700; }
.book-card__text { color: var(--muted); }
.book-card__more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto !important; padding-top: 8px; }
.book-card__more .btn { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

/* ===== Avdio: recordings with a player (src/pages/avdio/) ===== */
.audio-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.audio-item { background: var(--panel); border-radius: 22px; box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.audio-item[hidden] { display: none; }
.audio-item__title { font-family: var(--display); font-size: 22px; line-height: 1.2; margin: 0 0 4px; overflow-wrap: anywhere; }
.audio-item__meta { color: var(--muted); margin: 0 0 8px; }
.audio-item__text { margin: 0 0 10px; }
.audio-item__player { display: block; width: 100%; min-height: 48px; }
.audio-radio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }

/* ===== Editor lists for books and recordings (/uredi/literatura/, /uredi/avdio/) ===== */
.lib-list { list-style: none; margin: 0 0 24px; padding: 0; background: var(--panel); border-radius: 22px; box-shadow: var(--shadow); }
.lib-list:empty { display: none; }
.lib-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.lib-row:last-child { border-bottom: 0; }
.lib-row__cover { width: 48px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; flex: none; }
.lib-row__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lib-row__title { font-size: 19px; overflow-wrap: anywhere; }
.lib-row__meta { color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.lib-row__actions { display: flex; gap: 8px; flex-shrink: 0; }
.lib-row__actions .btn { min-height: 48px; padding-inline: 18px; font-size: 17px; }
.lib-row .btn--quiet { color: var(--red-ink); }
.lib-check { display: flex !important; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; }
.lib-check input { width: 24px; height: 24px; accent-color: var(--blue); }
@media (max-width: 640px) {
  .lib-row { flex-wrap: wrap; }
  .lib-row__actions { width: 100%; }
  .lib-row__actions .btn { flex: 1; }
}

/* ===== Install hint: "add to home screen" note on phones (src/components/InstallHint.astro) ===== */
.install-hint { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; background: var(--panel); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.install-hint[hidden] { display: none; }
.install-hint__icon { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.install-hint__text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 16px; line-height: 1.35; }
.install-hint__text span[hidden] { display: none; }
/* The "Namesti" button gets its own full-width row, so the text isn't squeezed to one word per line. */
.install-hint { flex-wrap: wrap; }
.install-hint__go { order: 3; flex: 1 1 100%; min-height: 48px; background: var(--fire-strong); color: var(--fire-ink); }
.install-hint__go[hidden] { display: none; }
.install-hint__close { flex: none; width: 48px; height: 48px; border: 0; background: none; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; border-radius: 12px; }
.install-hint__close:hover { background: var(--hover); }

/* ===== App mockup: phone frames on /aplikacija/ (src/pages/aplikacija/) ===== */
.app-mock { padding-top: 24px; }
.app-mock__swipe { display: none; color: var(--muted); font-weight: 600; }
.app-mock__row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.phone { margin: 0; flex: none; display: grid; gap: 12px; justify-items: center; }
.phone figcaption { font-family: var(--display); font-weight: 700; font-size: 19px; }
.phone__frame { width: 214px; height: 440px; padding: 9px; border-radius: 36px; background: var(--deep); box-shadow: var(--shadow-lg); }
.phone__screen { height: 100%; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-size: 11px; line-height: 1.3; }
.phone__screen--deep { background: var(--deep); color: var(--deep-ink); }
.phone__screen--prayer { background: var(--prayer-bg); color: #141a33; }
.phone__status { display: flex; justify-content: space-between; padding: 8px 16px 2px; font-size: 9px; font-weight: 700; opacity: .75; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 12px 8px; font-family: var(--display); font-size: 14px; }
.phone__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--fire); }
.phone__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 0 10px 8px; }
.phone__tabs { display: flex; justify-content: space-around; padding: 6px 4px 10px; border-top: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 8px; }
.phone__screen--deep .phone__tabs { background: #ffffff0d; border-color: #ffffff1f; color: var(--deep-muted); }
.phone__tabs span { display: grid; justify-items: center; gap: 1px; }
.phone__tabs i { font-style: normal; font-size: 13px; }
.phone__tabs .is-on { color: var(--accent-ink); font-weight: 700; }
.phone__screen--deep .phone__tabs .is-on { color: var(--deep-accent); }
.m-hero { border-radius: 14px; padding: 14px 12px; background: var(--fire-strong); color: var(--fire-ink); display: grid; gap: 2px; }
.m-hero b { font-family: var(--display); font-size: 18px; }
.m-card { border-radius: 12px; padding: 9px 10px; background: var(--panel); box-shadow: var(--shadow); display: grid; gap: 1px; }
.m-card small, .m-muted { color: var(--muted); }
.m-card--row { display: flex; align-items: center; gap: 8px; }
.m-card--row b { flex: 1; }
.m-live { align-self: start; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: #b91c1c; color: #fff; } /* fixed dark red: white text stays readable (6.5:1) in both themes */
.m-play { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-ink); font-size: 9px; }
.m-photo { height: 74px; border-radius: 12px; background: var(--fire); opacity: .8; }
.m-title { font-family: var(--display); font-weight: 700; font-size: 14px; }
.m-map { position: relative; height: 70px; border-radius: 12px; background: repeating-linear-gradient(45deg, var(--line) 0 2px, var(--panel) 2px 12px); }
.m-pin { position: absolute; left: 50%; top: 40%; color: var(--red); font-size: 16px; }
.m-btn { border-radius: 10px; padding: 8px; text-align: center; font-weight: 700; background: var(--fire-strong); color: var(--fire-ink); }
.m-news { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.m-news > div:last-child { display: grid; gap: 2px; min-width: 0; }
.m-news__pic { width: 46px; height: 46px; flex: none; border-radius: 9px; background: var(--fire); opacity: .7; }
.m-chip { justify-self: start; font-size: 8px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--chip-bg); color: var(--chip-ink); }
.m-radio { align-items: center; text-align: center; gap: 6px; padding-top: 6px; }
.m-radio span:not(.m-live) { color: var(--deep-muted); }
.m-radio b { font-family: var(--display); font-size: 16px; }
.m-radio .m-live { align-self: center; }
.m-radio__cover { width: 104px; height: 104px; border-radius: 22px; display: grid; place-items: center; background: var(--fire); color: #fff; font-size: 40px; box-shadow: 0 10px 30px var(--glow); }
.m-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.m-wave i { width: 4px; border-radius: 2px; background: var(--deep-accent); }
.m-radio__play { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--deep-ink); color: var(--deep); font-size: 13px; }
.m-field { border-radius: 10px; padding: 8px; background: #ffffffcc; color: #555c72; box-shadow: inset 0 0 0 1px #e3e6ee; }
.m-field--big { height: 92px; }
.phone__screen--prayer .m-muted { color: #555c72; }
.m-center { text-align: center; }
@media (max-width: 760px) {
  .app-mock__swipe { display: block; }
  /* One swipeable row: each phone snaps into place */
  .app-mock { width: 100%; padding-inline: 0; }
  .app-mock__row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 20px; scroll-padding-inline: 16px; }
  .phone { scroll-snap-align: center; }
  .phone__frame { width: 240px; height: 490px; }
}

/* ===== Welcome tour for first-time visitors (src/components/WelcomeTour.astro) ===== */
.link-button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
html.tour-on .install-hint { display: none; } /* one note at a time */
.tour { position: fixed; inset: 0; z-index: 80; }
.tour[hidden] { display: none; }
/* The dark veil over the page; it also catches clicks on the page behind. During a spotlight step the script
   cuts a hole in it (clip-path) where the highlighted thing is. */
.tour__block { position: absolute; inset: 0; background: rgba(8, 12, 30, .75); }
/* The orange ring around the highlighted thing */
.tour__spot { position: fixed; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 4px var(--orange), 0 0 24px 6px #f9731680; transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease; }
.tour.is-splash .tour__spot { display: none; }
.tour__card { position: fixed; display: grid; gap: 10px; padding: 20px 20px 18px; background: var(--panel); color: var(--ink); border-radius: 22px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: tour-in .3s ease-out; transition: top .35s ease, left .35s ease; }
.tour__banner { display: none; }
.tour__title { margin: 0; padding-right: 32px; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.tour__text { margin: 0; font-size: 17px; line-height: 1.45; }
.tour__count { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.tour__count[hidden] { display: none; }
.tour__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; }
.tour__x:hover, .tour__back:hover, .tour__skip:hover { background: var(--hover); }
.tour__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.tour__buttons [hidden] { display: none; }
.tour__back, .tour__skip { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.tour__try { min-height: 44px; margin-right: auto; padding: 0 14px; border: 0; border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); font: inherit; font-weight: 700; cursor: pointer; }
.tour__next { min-height: 48px; background: var(--fire-strong); color: var(--fire-ink); }

/* The big welcome and closing cards: centered, with the ministry's logo across the top, edge to edge */
.tour.is-splash .tour__card { top: 50%; left: 50%; width: min(480px, calc(100vw - 24px)); transform: translate(-50%, -50%); padding: 0 0 22px; overflow: hidden; text-align: center; gap: 12px; }
.tour.is-splash .tour__banner { display: block; overflow: hidden; background: #050a1f; aspect-ratio: 1600 / 387; }
.tour__logo { display: block; width: 100%; height: 100%; object-fit: cover; animation: tour-logo 1s cubic-bezier(.2, .8, .2, 1) both, tour-glow 6s ease-in-out 1s infinite; }
.tour.is-splash .tour__title { padding: 10px 24px 0; font-size: clamp(26px, 6vw, 32px); }
.tour.is-splash .tour__text { padding: 0 28px; }
.tour.is-splash .tour__buttons { justify-content: center; padding: 0 20px; }
/* × on top of the logo: white on a dark round patch, so it's easy to see */
.tour.is-splash .tour__x { top: 6px; right: 6px; color: #fff; background: #0008; border-radius: 50%; width: 40px; height: 40px; font-size: 24px; }
.tour.is-splash .tour__x:hover { background: #000a; }
.tour.is-splash .tour__next { min-width: 160px; font-size: 18px; }

@keyframes tour-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
/* The logo comes in gently, then slowly "breathes" (a small zoom in and out) */
@keyframes tour-logo { from { opacity: 0; scale: 1.15; } to { opacity: 1; scale: 1; } }
@keyframes tour-glow { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@media (prefers-reduced-motion: reduce) {
  .tour__card, .tour__logo { animation: none; }
  .tour__spot, .tour__card { transition: none; }
}

/* Novo mesto card: its own bank account with a small copy button */
.church-card__give { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.church-card__give .copy { min-height: 30px; padding: 4px 12px; font-size: 13px; }

/* Avdio: the radio box (live dot) and the cards for the older collections (CD covers) */
.radio-box { background: linear-gradient(135deg, var(--panel), var(--soft)); }
.radio-box p { margin: 6px 0; }
.radio-box__live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e5402b; margin-right: 6px; vertical-align: middle; animation: radio-pulse 1.6s ease-in-out infinite; }
@keyframes radio-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .radio-box__live { animation: none; } }
.radio-box__apps { color: var(--muted); font-size: 14px; }
.radio-box__apps code { font-size: 13px; word-break: break-all; }
.radio-box__apps .copy { min-height: 30px; padding: 4px 12px; font-size: 13px; margin-left: 6px; }
.audio-sets { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.audio-set { background: var(--panel); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.audio-set a { text-decoration: none; color: inherit; display: block; }
.audio-set__cover { width: 100%; height: auto; aspect-ratio: 480 / 220; object-fit: cover; border-radius: 12px; display: block; }
.audio-set__icon { display: grid; place-items: center; aspect-ratio: 480 / 220; border-radius: 12px; background: var(--soft); font-size: 52px; }
.audio-set__title { font-size: 19px; margin: 12px 0 4px; }
.audio-set p { margin: 0; color: var(--muted); font-size: 15px; }