/* PORCH-WO-14o-a: the Ministries family in stock rows (landing + Template A). Tokens only.
   No new WNM style value: the few looks only these pages need are scoped to a row's Anchor ID
   (#mandate #go-deeper .wnm-pattern--what-who #events #get-in-touch on a ministry page; #ministries-hero #directory #in-focus
   on the landing), the Beliefs/Contact pattern (recipe §11, §12). Loaded with the ministry elements (render.php). */

/* ---- Events placeholder (the wnm_ministry_events element; the demo's ministry-a.css without its page-root scope) ---- */
.ministry-a__events { border: 1px dashed var(--c-ink-muted); border-radius: var(--r-md); padding: clamp(24px, 3vw, 44px); background: var(--color-surface-2); }
.ministry-a__placeholder-label { font: 600 14px/1.5 var(--font-body); color: var(--c-ink-muted); }
.ministry-a__event-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin: 28px 0 0; padding: 0; }
.ministry-a__event-list li { display: grid; gap: 16px; min-height: 180px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--r-sm); background: var(--c-light); }
.ministry-a__event-list li span { font-size: 13px; color: var(--c-ink-muted); }
.ministry-a__event-list li strong { font: 600 23px/1.2 var(--font-display); }
.ministry-a__events--no-image .ministry-a__event-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
.ministry-a__events--no-image .ministry-a__event-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.ministry-a__events--no-image .ministry-a__event-list li:last-child { border-bottom: 1px solid var(--color-border); }
.ministry-a__events--no-image .ministry-a__event-date { display: grid; place-content: center; gap: 2px; width: 70px; min-height: 70px; border-radius: var(--r-sm); background: var(--c-light); text-align: center; }
.ministry-a__events--no-image .ministry-a__event-date span { font: 500 12px/1.3 var(--font-body); text-transform: uppercase; }
.ministry-a__events--no-image .ministry-a__event-date strong { font: 600 25px/1 var(--font-display); }
.ministry-a__events--no-image .ministry-a__event-details { display: grid; gap: 8px; }
.ministry-a__events--no-image .ministry-a__event-action { color: var(--c-ink); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .ministry-a__events--no-image .ministry-a__event-list li { grid-template-columns: auto minmax(0, 1fr); } .ministry-a__events--no-image .ministry-a__event-action { grid-column: 2; justify-self: start; } }

/* ---- Ministry panels (Ink + Contained panel): go-deeper, what-who, get-in-touch ---- */
.vc_row.wnm-shape--inset:is(.wnm-pattern--what-who, #get-in-touch, .wnm-pattern--get-in-touch, .wnm-pattern--contact) .wnm-h--eyebrow { color: var(--c-green-light); margin-bottom: 14px; }
.vc_row.wnm-shape--inset:is(.wnm-pattern--what-who, #get-in-touch, .wnm-pattern--get-in-touch, .wnm-pattern--contact) .wpb_text_column.wnm-t--lead { color: var(--color-on-dark-muted); }
/* the right-hand card: the external site (go-deeper), the coordinator (get-in-touch) */



/* ---- What & who: the two halves on the panel ---- */
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column.wnm-t--lead { margin-bottom: 0; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner { margin-top: clamp(40px, 6vw, 88px); }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner .vc_custom_heading:is(h3) { margin-block: 14px 30px; font: 600 clamp(24px, 2.4vw, 34px)/1.15 var(--font-display); letter-spacing: normal; max-width: none; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner .wpb_text_column { margin-bottom: 0; color: var(--color-on-dark-muted); }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner .wpb_text_column > .wpb_wrapper { max-width: none; }
/* the linked offers: hairlines, the arrow at the end (CSS, so editors type no symbol) */
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column ul { margin: 0; padding: 0; list-style: none; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column li { margin: 0; border-top: 1px solid var(--color-border-on-dark); }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column li:last-child { border-bottom: 1px solid var(--color-border-on-dark); }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column li a {
  position: relative; display: block; min-height: 72px; padding: 22px 38px 22px 0;
  color: var(--c-light); font-weight: 500; text-decoration: none;
}
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column li a::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column li a:hover { color: var(--c-green-light); }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column li a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who .wpb_text_column p.ministry-a__pill {
  display: inline-block; margin: 30px 0 0; padding: 9px 16px; border: 1px solid var(--c-green-light); border-radius: var(--r-pill); color: var(--c-light);
}/* ---- Get in touch: the coordinator card (avatar, name and role beside it, then the contact rows) ---- */


/* the role title clears the avatar and name; the rule above had zeroed it (14az, Y8/GI6) */






/* no column gap: the hairline runs unbroken across the row */





/* ---- Events row: the head's button sits at the right, bottom-aligned with the heading ---- */
.vc_row:is(#events, .wnm-pattern--events) .vc_row.vc_inner { align-items: flex-end; }
.vc_row:is(#events, .wnm-pattern--events) .vc_btn3-container.vc_btn3-right { margin-bottom: 0; }

/* ---- Landing ---- */
/* #directory's opening padding now comes from .wnm-pattern--entry (stock.css, #191). */
.vc_row#directory .wpb_text_column.wnm-t--lead { margin-bottom: clamp(40px, 28px + 3vw, 72px); }
.vc_row#in-focus { padding-block: calc(var(--section-y) * 0.5) var(--section-y); }

/* ---- 14o-b: Royal Rangers ---- */
/* the "All camps" Button under the pillars (14az, R4): clear of the cards, no stray margin below */
.vc_row#pillars .acards + .vc_btn3-container, .vc_row#pillars .vc_btn3-container:last-child { margin: var(--s-5) 0 0; }
/* pillars: the Network cards with a tag pill on each card and a deeper card scrim (demo rr-pillars) */
.acards--tagged .acard { --eyebrow: var(--c-white); }
.acards--tagged .acard::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 8%, transparent) 0%, color-mix(in srgb, var(--c-ink) 40%, transparent) 30%, color-mix(in srgb, var(--c-ink) 74%, transparent) 55%, color-mix(in srgb, var(--c-ink) 92%, transparent) 100%);
}
.acards--tagged .acard__tag {
  align-self: flex-start; margin-bottom: 14px;
  padding: 6px 12px; border: 1px solid var(--hairline-dark); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-ink) 72%, transparent);
}
.acards--tagged .acard__tag::before { display: none; }
.vc_row#pillars .wpb_text_column.wnm-t--lead { margin-bottom: clamp(32px, 4vw, 56px); }
/* the slim WNMD Rangers strip: heading and one button, no destination card */
.vc_row.wnm-shape--inset#go-deeper-strip { padding-block: clamp(28px, 20px + 2vw, 48px); }
.vc_row.wnm-shape--inset#go-deeper-strip .wnm-h--eyebrow { color: var(--c-green-light); margin-bottom: 14px; }
.vc_row.wnm-shape--inset#go-deeper-strip h2.vc_custom_heading { max-width: 22em; }
.vc_row.wnm-shape--inset#go-deeper-strip .vc_btn3-container { margin-bottom: 0; }
/* the age groups in place of the pill: plain dt/dd pairs drawn as hairline rows (TinyMCE strips a div inside a dl, recipe §12) */
.vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages { margin: 30px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages dt, .vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages dd { margin: 0; padding-block: 15px; border-top: 1px solid var(--color-border-on-dark); }
.vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages dt { color: var(--c-light); font-weight: 500; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages dd { font: 500 14px/1.4 var(--font-body); color: var(--color-on-dark-muted); white-space: nowrap; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages dt:nth-last-of-type(1), .vc_row.wnm-shape--inset.wnm-pattern--what-who dl.rr-ages dd:nth-last-of-type(1) { border-bottom: 1px solid var(--color-border-on-dark); }

/* ---- 14o-b: Youth Alive, related ministries (demo youth-alive/page.css) ---- */
/* 14bc: one link-card pattern: joined cards on hairlines (a short last row leaves quiet space), name left, circle arrow right (base.css), no border on hover */
.youth-related__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 38px 0 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; background: var(--color-border); }
.youth-related__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: var(--linkcard-pad-y) var(--linkcard-pad-x); background: var(--color-surface-2); color: var(--c-ink); font: 600 clamp(18px, 2vw, 26px)/1.2 var(--font-display); text-decoration: none; transition: background-color var(--dur-base) var(--ease-out); }
.youth-related__list a:hover, .youth-related__list a:focus-visible { background: var(--c-white); }
.youth-related__list a:focus-visible { outline: 2px solid var(--focus, var(--color-focus)); outline-offset: -4px; }
@media (max-width: 1023px) { .youth-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .youth-related__list { grid-template-columns: 1fr; } }

@media (max-width: 1023px) {

}
@media (max-width: 767px) {
  .vc_row:is(#events, .wnm-pattern--events) .vc_row.vc_inner { align-items: flex-start; }
  .vc_row:is(#events, .wnm-pattern--events) .vc_btn3-container.vc_btn3-right { display: block; }
}

/* the what-who heading runs on one line like the demo's; the events row sits a little further from the panel above */
.vc_row.wnm-shape--inset.wnm-pattern--what-who > .wpb_column > .vc_column-inner > .wpb_wrapper > .vc_custom_heading:is(h2) { max-width: none; }
@media (max-width: 767px) { .ministry-a__event-list { grid-template-columns: 1fr; } .ministry-a__event-list li { min-height: 0; } }

/* ---- 14r polish: the demo's section rhythm and the What & who split (Kids, Student, Youth Alive, Royal Rangers) ---- */
.vc_row.wnm-shape--inset:is(.wnm-pattern--what-who, #get-in-touch, .wnm-pattern--get-in-touch, .wnm-pattern--contact) { margin-bottom: var(--cta-gap); }
/* the mandate: the eyebrow sits above the two columns with the demo's gap */
.vc_row#mandate .vc_row.vc_inner { margin-top: clamp(32px, 5.6vw, 81px); }
/* what & who: 1.3 : 0.7 columns with the demo's gap, side by side from 1024px */
@media (min-width: 1024px) {
  .vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner { gap: clamp(40px, 6vw, 96px); flex-wrap: nowrap; margin-inline: 0; }
  .vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner > .wpb_column { width: auto; max-width: none; min-width: 0; padding: 0; }
  .vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner > .wpb_column:first-child { flex: 1.3 1 0; }
  .vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner > .wpb_column:last-child { flex: .7 1 0; min-width: 260px; }
  .vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner > .wpb_column > .vc_column-inner { padding: 0; }
}
/* what & who: a little more air above the two halves */
.vc_row.wnm-shape--inset.wnm-pattern--what-who .vc_row.vc_inner { margin-top: calc(clamp(40px, 6vw, 88px) + 10px); }
/* events: View All sits across from the heading, bottom-aligned (rule above; button-flow 2026-10-03 removed the demo's under-the-heading stack) */
/* tablet: the demo's What & who panel keeps a deep bottom (its decorative glow space) */
@media (min-width: 768px) and (max-width: 1023px) { .vc_row.wpb_row.wnm-shape--inset.wnm-pattern--what-who { padding-bottom: clamp(180px, 22vw, 240px); } }
/* Royal Rangers: pillars, the slim strip and the mandate follow each other as in the demo */
.vc_row#pillars { padding-bottom: 24px; }
.vc_row#go-deeper-strip { margin-bottom: 0; }
.vc_row#go-deeper-strip + #mandate { padding-block: calc(var(--section-y) / 2) var(--section-y); }
/* Royal Rangers (14r): pillars sit lower under their intro; What & Who heads wrap at 760px. CTA type is shared in stock.css (14be). */
.vc_row#pillars .acards { margin-top: 16px; }
.vc_row.wnm-shape--inset.wnm-pattern--what-who > .wpb_column > .vc_column-inner > .wpb_wrapper > :is(h2.vc_custom_heading, .wpb_text_column > .wpb_wrapper) { max-width: 760px; }

/* Youth Alive: the related-ministries section keeps the demo's section padding (72–128px), not the roomy editorial one */
.vc_row.wpb_row#related-ministries { padding-block: var(--section-y); }

/* 28c-2b: live events (and the empty state in the same layout). No dashed placeholder box once the calendar feeds it. */
.ministry-a__events--live { border: 0; border-radius: 0; padding: 0; background: transparent; }
.ministry-a__events--live .ministry-a__event-list { margin-top: 0; }
.ministry-a__events--live:not(.ministry-a__events--no-image) .ministry-a__event-list li { padding: 0; min-height: 0; overflow: hidden; gap: 0; }
.ministry-a__event-card { display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; }
.ministry-a__event-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-2); }
.ministry-a__event-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
a.ministry-a__event-card:hover .ministry-a__event-media img, a.ministry-a__event-card:focus-visible .ministry-a__event-media img { transform: scale(1.05); }
.ministry-a__event-body { display: grid; align-content: start; gap: 8px; padding: 20px 24px 24px; }
.ministry-a__events--no-image .ministry-a__event-details strong { font: 600 21px/1.25 var(--font-display); }
.ministry-a__events--no-image .ministry-a__event-details > span { font-size: 13px; color: var(--c-ink-muted); }
.ministry-a__events--no-image .ministry-a__event-action { white-space: normal; }
/* empty state: the skeleton is muted, the line and links sit under it */
.ministry-a__event-list--skeleton { opacity: .55; }
.ministry-a__skel { display: block; height: 14px; border-radius: var(--r-sm); background: var(--color-border); }
.ministry-a__skel--short { width: 40%; height: 10px; }
.ministry-a__events--live:not(.ministry-a__events--no-image) .ministry-a__event-list--skeleton .ministry-a__skel:nth-child(2) { height: 20px; }
.ministry-a__events--no-image .ministry-a__event-list--skeleton .ministry-a__event-date .ministry-a__skel { width: 36px; height: 12px; margin: 0 auto; }
.ministry-a__events--no-image .ministry-a__event-list--skeleton .ministry-a__event-details .ministry-a__skel:first-child { width: min(320px, 70%); height: 18px; }
.ministry-a__events-note { margin: 28px 0 0; font: 600 14px/1.5 var(--font-body); color: var(--c-ink-muted); }
.ministry-a__events-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; }
.ministry-a__events-links a { color: var(--c-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }