/* ==========================================================================
   MKN SECTIONS — styles for the functional (graduated) vision sections.
   Loaded by inc/section-render.php contexts only (template-mkn-section.php +
   single-mkn_<key>.php). Layers on top of wow.css + wow-inner.css, reusing
   .mkn-pagehero / .mkn-dirbar / .mkn-founder / .mkn-profile / .mkn-softcta.
   Only NEW classes live here.
   Depends on: mkn-wow-inner (tokens, glass, buttons).
   ========================================================================== */

/* ---- Archive hero: faint section icon ghost (like the concept hero) -------- */
.mkn-secarch__hero { position: relative; }
.mkn-secarch__ghost {
	position: absolute; z-index: 0; pointer-events: none;
	top: 50%; right: clamp(-40px, -2vw, 0px); transform: translateY(-46%);
	width: clamp(280px, 40vw, 560px); height: clamp(280px, 40vw, 560px);
	color: var(--mkn-lavender); opacity: 0.07;
}
.mkn-secarch__ghost svg { width: 100%; height: 100%; display: block; }
.mkn-secarch__ghost svg path,
.mkn-secarch__ghost svg rect,
.mkn-secarch__ghost svg circle { stroke-dasharray: none; stroke-dashoffset: 0; }

/* ---- Section card (extends .mkn-founder): icon fallback + 1-line excerpt ---- */
.mkn-seccard__media {
	background:
		radial-gradient(120% 120% at 50% 0%, #322055 0%, var(--mkn-darkest) 70%);
	display: grid; place-items: center;
}
/* v1.42.0 — a very dark member/church photo (e.g. a church's own dark hero shot)
   can read as a flat black box. A faint sheen + lower-edge gradient over the media
   gives any near-black image tonal depth so it reads as a deliberate photo, not a
   void. Barely perceptible on well-lit images; sits over the icon fallback too.
   Does not touch the real image (per the honesty layer). */
.mkn-seccard__media::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(115% 85% at 26% 20%, rgba(214, 196, 255, 0.16) 0%, rgba(214, 196, 255, 0) 55%),
		linear-gradient(0deg, rgba(16, 10, 34, 0.36) 0%, rgba(16, 10, 34, 0) 46%);
}
.mkn-seccard__ico {
	width: 42%; max-width: 132px; color: var(--mkn-lavender); opacity: 0.55;
}
.mkn-seccard__ico svg { width: 100%; height: 100%; display: block; }
.mkn-seccard__ico svg path,
.mkn-seccard__ico svg rect,
.mkn-seccard__ico svg circle { stroke-dasharray: none; stroke-dashoffset: 0; }
.mkn-seccard__exc {
	font-size: 0.95rem; line-height: 1.6; color: var(--mkn-muted-text);
	margin: 0 0 14px;
}

/* ---- Empty-state: "Sección recién inaugurada" ----------------------------- */
.mkn-secempty {
	max-width: 640px; margin: 0 auto; text-align: center;
	padding: clamp(30px, 5vw, 64px) 20px;
}
.mkn-secempty__ico {
	display: block; width: 96px; height: 96px; margin: 0 auto 24px;
	color: var(--mkn-gold);
}
.mkn-secempty__ico svg { width: 100%; height: 100%; display: block; }
/* Polish v1.22.0: subtle draw-on + fade when the empty-state scrolls into view,
   consistent with the homepage roadmap icons (same dash values). The block is
   .mkn-reveal, so it gains .is-visible on intersection. */
.mkn-secempty__ico {
	opacity: 0; transform: translateY(10px);
	transition: opacity 720ms var(--mkn-ease), transform 720ms var(--mkn-ease);
}
.mkn-secempty__ico svg path,
.mkn-secempty__ico svg rect,
.mkn-secempty__ico svg circle {
	stroke-dasharray: 40; stroke-dashoffset: 40;
	transition: stroke-dashoffset 1100ms var(--mkn-ease) 160ms;
}
.mkn-secempty.is-visible .mkn-secempty__ico { opacity: 1; transform: none; }
.mkn-secempty.is-visible .mkn-secempty__ico svg path,
.mkn-secempty.is-visible .mkn-secempty__ico svg rect,
.mkn-secempty.is-visible .mkn-secempty__ico svg circle { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
	.mkn-secempty__ico { opacity: 1; transform: none; transition: none; }
	.mkn-secempty__ico svg path,
	.mkn-secempty__ico svg rect,
	.mkn-secempty__ico svg circle { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}
.mkn-secempty__t {
	font-family: var(--mkn-font-display); font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15;
	color: var(--mkn-primary); margin: 0 0 14px;
}
.mkn-secempty__p {
	color: #6b6480; line-height: 1.75; font-size: 1.04rem;
	margin: 0 auto 30px; max-width: 48ch;
}
.mkn-secempty__actions {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 14px 26px;
}
.mkn-secempty__back {
	font-weight: 600; font-size: 0.95rem; color: var(--mkn-accent-text);
}
.mkn-secempty__back:hover { text-decoration: underline; }

/* ---- Grid divider (e.g. Eventos: "Próximos" vs "Pasados") ----------------- */
/* Injected as a direct child of .mkn-dirgrid (a CSS grid) when a section sorts
   by a date-like meta ('orderby_meta') and the loop crosses from
   upcoming/undated into past entries. Spans every column so it reads as a
   section break rather than a stray card. */
.mkn-dirgrid__divider {
	grid-column: 1 / -1;
	display: flex; align-items: center; gap: 16px;
	margin: 8px 0 4px; padding-top: clamp(18px, 3vw, 28px);
	border-top: 1px solid #efeaf8;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--mkn-muted-text);
}

/* ---- Pagination ----------------------------------------------------------- */
.mkn-secpager {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 8px; max-width: 1120px; margin: clamp(36px, 5vw, 56px) auto 0;
}
.mkn-secpager .page-numbers {
	display: inline-grid; place-items: center; min-width: 42px; height: 42px;
	padding: 0 12px; border-radius: 12px; border: 1px solid #e6def3;
	background: #fff; color: var(--mkn-primary); font-weight: 600;
	font-size: 0.95rem; text-decoration: none;
	transition: border-color 200ms var(--mkn-ease), background 200ms var(--mkn-ease);
}
.mkn-secpager a.page-numbers:hover { border-color: var(--mkn-accent); background: #f7f4fc; }
.mkn-secpager .page-numbers.current {
	background: var(--mkn-primary); border-color: var(--mkn-primary); color: #fff;
}
.mkn-secpager .page-numbers.dots { border: 0; background: transparent; min-width: 20px; }

/* ---- Single: detail rows (label/value definition list) -------------------- */
.mkn-secsingle__rows {
	margin: 0; padding: 4px 0 0;
	display: flex; flex-direction: column; gap: 0;
}
.mkn-secsingle__row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
	padding: 14px 0; border-bottom: 1px solid #efeaf8;
}
.mkn-secsingle__row:last-child { border-bottom: 0; }
.mkn-secsingle__row dt {
	font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--mkn-muted-text); flex: 0 0 auto;
}
.mkn-secsingle__row dd {
	margin: 0; font-size: 1rem; color: #4d4663; font-weight: 500; text-align: right;
}

/* ---- Inline submission form band ------------------------------------------ */
.mkn-secform {
	background: var(--mkn-bg);
	padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 96px) clamp(64px, 9vw, 108px);
	border-top: 1px solid #efeaf8;
}
.mkn-secform__inner { max-width: 760px; margin: 0 auto; }
.mkn-secform__inner .mkn-kicker { text-align: center; }
.mkn-secform__h2 {
	text-align: center; color: var(--mkn-primary); margin: 10px 0 12px;
}
.mkn-secform__sub {
	text-align: center; color: var(--mkn-muted-text); line-height: 1.7;
	max-width: 54ch; margin: 0 auto 34px; font-size: 1.02rem;
}
/* The [fluentform] output reuses forms.css .mkn-form-card styling (enqueued in
   this context by inc/forms.php via has_shortcode). This just centres it. */
.mkn-secform__form { max-width: 640px; margin: 0 auto; }

/* ---- Proposal form modal (v1.39.0) ---------------------------------------
   The proposer form lives inside <dialog class="mkn-formmodal" id="proponer">.
   Hidden by default (UA `dialog:not([open]) { display:none }`); opened via
   showModal() from the "+" add-card / empty-state CTA / soft-CTA (mkn.js).
   NO-JS: forced visible inline further down (html:not(.mkn-js)). */
.mkn-formmodal {
	border: 0; padding: 0; margin: auto;
	width: 100%; max-width: min(720px, 94vw);
	background: transparent; overflow: visible;
	color: var(--mkn-text);
}
.mkn-formmodal::backdrop {
	background: rgba(16, 10, 34, .78);
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mkn-formmodal__panel {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--mkn-bg);
	border: 1px solid #efeaf8; border-radius: 18px;
	box-shadow: 0 24px 70px rgba(16, 10, 34, .34);
	max-height: 85vh; overflow: hidden;
}
/* Inner scroller — the tall form scrolls here while the ✕ stays pinned to the
   card corner (absolute vs the non-scrolling panel). */
.mkn-formmodal__scroll {
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: clamp(30px, 5vw, 52px) clamp(20px, 4vw, 48px) clamp(34px, 5vw, 52px);
}
.mkn-formmodal__x {
	position: absolute; top: 14px; right: 14px;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 999px;
	background: #f3eefb; color: #2a1a4a;
	font-size: 26px; line-height: 1; cursor: pointer;
	z-index: 3; transition: background .18s ease;
}
.mkn-formmodal__x:hover { background: #e7ddf7; }
.mkn-formmodal__x:focus-visible { outline: 2px solid var(--mkn-primary); outline-offset: 2px; }
/* Panel reuses the .mkn-secform__inner / __h2 / __sub / __form rules above; the
   inner no longer needs its own max-width inside the constrained panel. */
.mkn-formmodal .mkn-secform__inner { max-width: none; }
.mkn-formmodal .mkn-secform__h2 { margin-top: 4px; padding-right: 40px; }

/* Desktop entrance — gentle rise + fade. */
@media (prefers-reduced-motion: no-preference) {
	.mkn-formmodal[open] { animation: mknFmIn .2s ease; }
	@keyframes mknFmIn {
		from { opacity: 0; transform: translateY(8px) scale(.985); }
		to   { opacity: 1; transform: none; }
	}
}

/* Mobile <=600px — slide-up sheet pinned to the bottom edge. */
@media (max-width: 600px) {
	.mkn-formmodal {
		max-width: 100vw; width: 100vw;
		position: fixed; inset: auto 0 0 0; margin: 0;
	}
	.mkn-formmodal__panel {
		border-radius: 18px 18px 0 0; border-bottom: 0;
		max-height: 88vh;
	}
	@media (prefers-reduced-motion: no-preference) {
		.mkn-formmodal[open] { animation: mknFmUp .26s cubic-bezier(.22, .61, .36, 1); }
		@keyframes mknFmUp { from { transform: translateY(100%); } to { transform: none; } }
	}
}

/* Body scroll-lock while the modal is open — the drawer's position:fixed
   pattern; mkn.js stores/restores scrollY via an inline `top`. */
body.mkn-modal-open { position: fixed; width: 100%; left: 0; right: 0; overflow-y: scroll; }

/* NO-JS fallback — render the dialog as the old inline submission band so the
   form is always visible + submittable, and drop the ✕ / backdrop. */
html:not(.mkn-js) .mkn-formmodal {
	display: block; position: static; inset: auto; margin: 0;
	width: auto; max-width: none;
	background: var(--mkn-bg); border-top: 1px solid #efeaf8;
}
html:not(.mkn-js) .mkn-formmodal__panel {
	max-width: 760px; margin: 0 auto;
	border: 0; border-radius: 0; box-shadow: none;
	max-height: none; overflow: visible;
}
html:not(.mkn-js) .mkn-formmodal__scroll {
	overflow: visible;
	padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 96px) clamp(64px, 9vw, 108px);
}
html:not(.mkn-js) .mkn-formmodal__x { display: none; }
html:not(.mkn-js) .mkn-formmodal::backdrop { display: none; }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mkn-seccard, .mkn-founder { transition: none; }
}

/* ---- Polish v1.21.0: photographic archive hero -----------------------------
   When a section has an uploaded hero (uploads/mkn-heroes/*.webp), the render
   swaps .mkn-pagehero--plain for --photo + sets --mkn-pagehero-bg and renders
   the shared .mkn-pagehero__overlay (same treatment as the Directorio hero),
   so headline + kicker stay legible over the image. Watermark ghost is omitted
   in this mode (the photo carries the visual weight). ------------------------- */
.mkn-pagehero--photo { background-position: center 42%; }
.mkn-pagehero--photo .mkn-pagehero__inner { position: relative; z-index: 2; }

/* ==========================================================================
 *  Vision-final pass (v1.24.0) — shared additions
 * ========================================================================== */

/* ---- "Cómo funciona" band (Reseñas + Cotizaciones pages) ------------------ */
.mkn-vhow { padding: clamp(2.75rem, 6.5vw, 5rem) 1.25rem 1rem; }
.mkn-vhow__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.mkn-vhow__h { margin: 0.35rem 0 1.6rem; color: var(--mkn-primary); }
.mkn-vhow__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.25rem;
	text-align: left;
}
.mkn-vhow__card {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(124, 98, 187, 0.16);
	border-radius: var(--mkn-radius, 18px);
	padding: 1.5rem 1.5rem 1.4rem;
	box-shadow: 0 20px 48px -32px rgba(44, 26, 83, 0.35);
}
.mkn-vhow__n {
	display: inline-grid; place-items: center;
	width: 2.1rem; height: 2.1rem;
	margin: 0 0 0.8rem;
	border-radius: 999px;
	font-family: var(--mkn-font-display);
	font-size: 1.05rem; font-weight: 700;
	color: var(--mkn-gold, #b08a3e);
	border: 1.5px solid rgba(176, 138, 62, 0.45);
}
.mkn-vhow__t {
	margin: 0 0 0.45rem;
	font-family: var(--mkn-font-display);
	font-size: 1.15rem;
	color: var(--mkn-primary, #2c1a53);
}
.mkn-vhow__p {
	margin: 0;
	font-family: var(--mkn-font-body);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--mkn-muted-text, #4a4066);
}
/* Cold-start honesty line under the Cotizaciones how-cards. */
.mkn-vhow__grow {
	margin: 1.4rem auto 0;
	max-width: 68ch;
	font-family: var(--mkn-font-body);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--mkn-muted-text, #726b87);
}

/* ---- Podcast episode embed (single-mkn_episodio) --------------------------
   The section-engine single renders the config 'embed_meta' URL as a player:
   YouTube → 16:9 iframe, Spotify → its fixed-height card, other → a button. */
.mkn-secsingle__embed { margin: 0 0 1.8rem; }
.mkn-embed--video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--mkn-radius, 18px);
	overflow: hidden;
	border: 1px solid rgba(124, 98, 187, 0.2);
	box-shadow: 0 24px 60px -34px rgba(44, 26, 83, 0.4);
	background: var(--mkn-darkest, #180f30);
}
.mkn-embed--video iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0; display: block;
}
.mkn-embed--audio iframe {
	width: 100%; height: 232px;
	border: 0; border-radius: var(--mkn-radius, 18px); display: block;
}

/* =========================================================================
 * DEMO / SAMPLE entries — the Ejemplo badge layer (samples pass, v1.26.0).
 * Reuses the concept-era .mkn-eg-chip look (assets/concept.css) so a sample
 * entry can never be mistaken for a real one. Applies when a section entry
 * carries post meta _mkn_demo = 1. Remove samples at launch via the purge
 * command in the engagement record; these rules are inert with no demo posts.
 * ========================================================================= */
.mkn-eg-chip {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	display: inline-flex; align-items: center;
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--mkn-primary);
	background: #efe6ff; border: 1px solid #d8c6f5; border-radius: 999px;
	padding: 5px 11px;
}
.mkn-eg-chip--inline { position: static; }
.mkn-seccard.mkn-demo { position: relative; }
/* Diagonal wash over the whole card — same cue as the concept sample cards. */
.mkn-seccard.mkn-demo::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border-radius: inherit;
	background: repeating-linear-gradient(135deg,
		rgba(157,123,234,0.07) 0 14px, rgba(157,123,234,0) 14px 28px);
}
.mkn-demo-note {
	margin: 0 0 18px; padding: 10px 14px;
	font-size: 0.85rem; font-weight: 600; color: var(--mkn-primary);
	background: #f3ecff; border: 1px dashed #d8c6f5; border-radius: 10px;
}

/* ---- LOCATION + MAP (section singles that have saved coordinates: the real
   churches). The whole block only renders when _mkn_lat is set, so image-less
   entries in other sections never see it. The map itself is a click-to-load
   OSM embed: the iframe is injected by wow.js on tap, never on initial render.
   -------------------------------------------------------------------------- */
.mkn-loc {
	position: relative;
	background: var(--mkn-darkest);
	padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 96px);
}
.mkn-loc__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.mkn-loc__h2 { color: #fff; margin: 0 0 12px; }
.mkn-loc__addr {
	color: var(--mkn-lavender); font-size: 1.02rem; line-height: 1.5;
	margin: 0 0 22px; max-width: 46ch;
}
/* Map shell — v1.42.0: the OSM iframe now renders directly in the HTML with
   loading="lazy", so the map auto-loads near the viewport (no tap) and works
   with JS off. Shown by default; the old click-to-load poster is retired. */
.mkn-map {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 16 / 9; border-radius: 18px;
	background: radial-gradient(120% 120% at 50% 0%, #322055 0%, var(--mkn-darkest) 72%);
	border: 1px solid rgba(195, 168, 245, 0.18);
}
.mkn-map.is-ready { display: block; }
.mkn-map__poster {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; padding: 24px; cursor: pointer; border: 0; background: transparent;
	color: #fff; font: inherit; text-align: center;
}
.mkn-map__pin { width: 46px; height: 46px; color: var(--mkn-gold); }
.mkn-map__pin svg { width: 100%; height: 100%; display: block; }
.mkn-map__cta {
	display: inline-block; font-weight: 700; letter-spacing: 0.02em;
	padding: 11px 24px; border-radius: 999px;
	background: var(--mkn-gold-gradient); color: var(--mkn-darkest);
	box-shadow: 0 6px 18px rgba(201, 162, 39, 0.4);
}
.mkn-map__hint { font-size: 0.86rem; color: var(--mkn-lavender); }
.mkn-map__poster:focus-visible { outline: 3px solid var(--mkn-gold-hi); outline-offset: -3px; }
.mkn-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mkn-loc__dir { margin-top: 24px; }
@media (max-width: 600px) { .mkn-map { aspect-ratio: 4 / 3; } }