/* ===========================================================================
   Snap Splash — shared module layout framework
   Loaded by both the live renderer (views/site/render.ejs) and the builder
   preview (views/builder/preview.ejs). Each module's root keeps its
   `.comp-<type>` class and adds `layout-<id>`; the rules below make that
   layout choice actually change the visual arrangement.
   =========================================================================== */

/* ---- Generic helpers reused across modules -------------------------------- */
.layout-minimal { --comp-dense: 1; }

/* =================== HERO =================== */
/* default: centered text on solid/!image bg (base .comp-hero handles this) */
.comp-hero .hero-text { display: flex; flex-direction: column; align-items: inherit; }

/* minimal: shorter, smaller type, tighter */
.comp-hero.layout-minimal { min-height: 34vh; }
.comp-hero.layout-minimal h1 { font-size: 2.1rem; }
.comp-hero.layout-minimal p { font-size: 1.05rem; margin-bottom: 20px; }

/* overlay: text over the background image, anchored bottom-left */
.comp-hero.layout-overlay { align-items: flex-start; justify-content: flex-end; text-align: left; }
.comp-hero.layout-overlay .hero-text { align-items: flex-start; max-width: 720px; }

/* split: text on one side, image panel on the other */
.comp-hero.layout-split { flex-direction: row; flex-wrap: wrap; text-align: left; padding: 0 !important; gap: 0; }
.comp-hero.layout-split .hero-text { flex: 1 1 360px; align-items: flex-start; padding: 64px 48px; }
.comp-hero.layout-split .hero-media { flex: 1 1 360px; align-self: stretch; min-height: 320px; background-size: cover; background-position: center; }
@media (max-width: 760px) {
  .comp-hero.layout-split { flex-direction: column; }
  .comp-hero.layout-split .hero-text { padding: 40px 24px; }
}

/* ===== Generated module layouts (workflow) ===== */

/* --- header --- */
/* =================== HEADER =================== */
/* centered: stack brand above the nav links, everything centered */
.comp-header.layout-centered { flex-direction: column; justify-content: center; gap: 12px; text-align: center; min-height: auto; padding-top: 16px; padding-bottom: 16px; }
.comp-header.layout-centered .hdr-brand { justify-content: center; }
.comp-header.layout-centered nav { justify-content: center; flex-wrap: wrap; }

/* minimal: strip backdrop/blur, lighter weight, tighter, smaller links */
.comp-header.layout-minimal { backdrop-filter: none !important; box-shadow: none; border-bottom: 1px solid rgba(128,128,128,0.18); min-height: 52px; }
.comp-header.layout-minimal .hdr-brand { font-weight: 600; }
.comp-header.layout-minimal .hdr-name { font-size: 1rem; font-weight: 600; }
.comp-header.layout-minimal nav { gap: 14px; }
.comp-header.layout-minimal nav a { font-size: 0.82rem; opacity: 0.75; }
.comp-header.layout-minimal .hdr-btn { padding: 6px 14px; font-size: 0.82rem; }

@media (max-width: 760px) {
  .comp-header.layout-centered nav { gap: 12px; }
  .comp-header.layout-minimal { min-height: 48px; }
}


/* --- footer --- */
/* =================== FOOTER =================== */
/* columns: links laid out as multi-column blocks above the text */
.comp-footer.layout-columns { text-align: left; }
.comp-footer.layout-columns .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 32px; max-width: 1100px; margin: 0 auto 24px; justify-items: start; }
.comp-footer.layout-columns .footer-links a { display: block; padding: 4px 0; }
.comp-footer.layout-columns p { max-width: 1100px; margin-left: auto; margin-right: auto; opacity: 0.7; }

/* minimal: strip background, single tidy centered row, lighter type */
.comp-footer.layout-minimal { background: transparent !important; border-top: 1px solid rgba(128,128,128,0.15); padding-top: 20px; padding-bottom: 20px; }
.comp-footer.layout-minimal .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 12px; }
.comp-footer.layout-minimal .footer-links a { font-size: 0.85rem; opacity: 0.7; }
.comp-footer.layout-minimal p { font-size: 0.8rem; opacity: 0.55; }

@media (max-width: 760px) {
  .comp-footer.layout-columns .footer-links { grid-template-columns: 1fr 1fr; }
  .comp-footer.layout-minimal .footer-links { gap: 12px; }
}


/* --- contact --- */
/* =================== CONTACT =================== */
/* (overlay is handled by a dedicated markup branch in both files) */
/* centered: constrain and center the heading/subtitle/info block */
.comp-contact-wrap.layout-centered .comp-contact { max-width: 720px; margin: 0 auto; text-align: center; }
.comp-contact-wrap.layout-centered .contact-info { justify-content: center; }
.comp-contact-wrap.layout-centered .contact-item { text-align: center; }

/* split: heading/subtitle in one column, the info cards in the other */
.comp-contact-wrap.layout-split .comp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; text-align: left; }
.comp-contact-wrap.layout-split .comp-contact > h2 { grid-column: 1; margin: 0; }
.comp-contact-wrap.layout-split .contact-subtitle { grid-column: 1; grid-row: 2; margin: 0; opacity: 0.8; }
.comp-contact-wrap.layout-split .contact-info { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr; gap: 14px; }

@media (max-width: 760px) {
  .comp-contact-wrap.layout-split .comp-contact { grid-template-columns: 1fr; gap: 20px; }
  .comp-contact-wrap.layout-split .comp-contact > h2,
  .comp-contact-wrap.layout-split .contact-subtitle,
  .comp-contact-wrap.layout-split .contact-info { grid-column: 1; grid-row: auto; }
}


/* --- welcome-video --- */
/* =================== WELCOME-VIDEO =================== */
/* (overlay is handled by a dedicated markup branch in both files) */
/* centered: constrain content, center everything */
.comp-welcome-video.layout-centered { text-align: center; }
.comp-welcome-video.layout-centered > h2,
.comp-welcome-video.layout-centered .wv-sub,
.comp-welcome-video.layout-centered .wv-caption { text-align: center; }
.comp-welcome-video.layout-centered > div,
.comp-welcome-video.layout-centered .wv-embed,
.comp-welcome-video.layout-centered .wv-poster { max-width: 720px; margin-left: auto; margin-right: auto; }

/* split: media on the left, heading/subtitle/caption stacked on the right */
.comp-welcome-video.layout-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; text-align: left; }
.comp-welcome-video.layout-split > h2 { grid-column: 2; grid-row: 1; text-align: left; margin: 0 0 12px; }
.comp-welcome-video.layout-split .wv-sub { grid-column: 2; grid-row: 2; text-align: left; opacity: 0.75; line-height: 1.7; margin: 0 0 16px; }
.comp-welcome-video.layout-split .wv-embed,
.comp-welcome-video.layout-split .wv-poster { grid-column: 1; grid-row: 1 / span 3; }
.comp-welcome-video.layout-split .wv-caption { grid-column: 2; grid-row: 3; text-align: left; }

@media (max-width: 760px) {
  .comp-welcome-video.layout-split { grid-template-columns: 1fr; gap: 20px; }
  .comp-welcome-video.layout-split > h2,
  .comp-welcome-video.layout-split .wv-sub,
  .comp-welcome-video.layout-split .wv-embed,
  .comp-welcome-video.layout-split .wv-poster,
  .comp-welcome-video.layout-split .wv-caption { grid-column: 1; grid-row: auto; }
}


/* --- map --- */
/* =================== MAP =================== */
/* (overlay is handled by a dedicated markup branch in both files) */
/* In the live renderer the map+info live in a flex row: the iframe column
   (flex:2) then the info column (flex:1). We target those structural
   children since they carry no classes there. The builder preview uses
   .map-wrap / .map-embed / .map-info, which we cover too. */

/* split-left: info column first, then the map (reverse the default order) */
.comp-map.layout-split-left > div:last-child { flex-direction: row-reverse; }
.comp-map.layout-split-left .map-wrap { flex-direction: row-reverse; }

/* stacked: map full-width on top, info block below, centered */
.comp-map.layout-stacked > div:last-child { flex-direction: column; align-items: stretch; max-width: 820px; margin: 0 auto; }
.comp-map.layout-stacked > div:last-child > div { width: 100%; min-width: 0; }
.comp-map.layout-stacked .map-wrap { flex-direction: column; align-items: stretch; max-width: 820px; margin: 0 auto; }
.comp-map.layout-stacked .map-embed { width: 100%; }
.comp-map.layout-stacked .map-info { width: 100%; margin-top: 24px; }

@media (max-width: 760px) {
  .comp-map.layout-split-left > div:last-child,
  .comp-map.layout-split-left .map-wrap { flex-direction: column; }
  .comp-map.layout-stacked > div:last-child { max-width: 100%; }
}


/* --- job-openings --- */
.comp-job-openings.layout-list > div { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.comp-job-openings.layout-list > div > div { margin: 0 !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.comp-job-openings.layout-list > div > div > div:first-child { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.comp-job-openings.layout-list h4 { margin: 0 !important; }
@media (max-width: 760px) {
  .comp-job-openings.layout-list > div > div { flex-direction: column; align-items: flex-start; }
}

/* --- membership-journey --- */
.comp-membership-journey.layout-horizontal > div { display: flex !important; flex-direction: row; flex-wrap: nowrap; grid-template-columns: none !important; align-items: stretch; justify-content: center; gap: 0; max-width: 1100px; margin: 0 auto; }
.comp-membership-journey.layout-horizontal > div > div { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 8px; background: transparent !important; position: relative; }
.comp-membership-journey.layout-horizontal > div > div:not(:last-child)::after { content: ''; position: absolute; top: 24px; right: -1px; width: 100%; height: 2px; background: rgba(128,128,128,0.25); z-index: 0; }
@media (max-width: 760px) {
  .comp-membership-journey.layout-horizontal > div { flex-direction: column; }
  .comp-membership-journey.layout-horizontal > div > div:not(:last-child)::after { display: none; }
}

/* --- mission-partner --- */
.comp-mission-partner.layout-list > div { display: block !important; grid-template-columns: none !important; max-width: 760px; margin: 0 auto; }
.comp-mission-partner.layout-list > div > div { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.comp-mission-partner.layout-list > div > div > div:first-child { flex-shrink: 0; margin-bottom: 0 !important; }
@media (max-width: 760px) {
  .comp-mission-partner.layout-list > div > div { flex-direction: column; }
}

/* --- partner-churches --- */
.comp-partner-churches.layout-list > div { display: block !important; grid-template-columns: none !important; max-width: 760px; margin: 0 auto; }
.comp-partner-churches.layout-list > div > div { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.comp-partner-churches.layout-list > div > div > div:first-child { flex-shrink: 0; margin-bottom: 0 !important; }
@media (max-width: 760px) {
  .comp-partner-churches.layout-list > div > div { flex-direction: column; }
}

/* --- pastoral-letter --- */
.comp-pastoral-letter.layout-centered > div { max-width: 720px; margin: 0 auto; text-align: center; }
.comp-pastoral-letter.layout-centered > div > div { justify-content: center; }
.comp-pastoral-letter.layout-centered img { margin: 0 auto; }
@media (max-width: 760px) {
  .comp-pastoral-letter.layout-centered > div { padding: 0 8px; }
}

/* --- prayer-chain --- */
.comp-prayer-chain.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; text-align: left; max-width: 1100px; margin: 0 auto; }
.comp-prayer-chain.layout-split > h2 { grid-column: 1; text-align: left; margin-bottom: 12px; }
.comp-prayer-chain.layout-split > p { grid-column: 1; text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
.comp-prayer-chain.layout-split > div { grid-column: 2; grid-row: 1 / span 3; max-width: none; margin: 0; align-self: start; }
@media (max-width: 760px) {
  .comp-prayer-chain.layout-split { grid-template-columns: 1fr; gap: 24px; }
  .comp-prayer-chain.layout-split > h2,
  .comp-prayer-chain.layout-split > p,
  .comp-prayer-chain.layout-split > div { grid-column: 1; grid-row: auto; }
}

/* --- tithing-thermometer --- */
.comp-tithing-thermometer.layout-horizontal { text-align: left; max-width: 1100px; margin: 0 auto; }
.comp-tithing-thermometer.layout-horizontal > h2,
.comp-tithing-thermometer.layout-horizontal > p { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
.comp-tithing-thermometer.layout-horizontal > div { max-width: none; margin-left: 0; margin-right: 0; }
.comp-tithing-thermometer.layout-horizontal > div[style*="justify-content:center"] { justify-content: space-between; }
@media (max-width: 760px) {
  .comp-tithing-thermometer.layout-horizontal > div[style*="justify-content:center"] { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- vision-mission --- */
.comp-vision-mission.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; text-align: left; max-width: 1100px; margin: 0 auto; }
.comp-vision-mission.layout-split > h2 { grid-column: 1 / -1; text-align: left; }
.comp-vision-mission.layout-split > div { max-width: none; margin: 0; text-align: left; }
.comp-vision-mission.layout-split > div > h4 { text-align: left; }
@media (max-width: 760px) {
  .comp-vision-mission.layout-split { grid-template-columns: 1fr; gap: 24px; }
}

/* --- volunteer-signup --- */
.comp-volunteer-signup.layout-list > div[style*="grid"] { grid-template-columns: 1fr; max-width: 700px; margin-left: auto; margin-right: auto; gap: 12px; }
.comp-volunteer-signup.layout-list > div[style*="grid"] > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; text-align: left; }
.comp-volunteer-signup.layout-list > div[style*="grid"] > div > h4 { margin: 0; flex: 0 0 auto; }
.comp-volunteer-signup.layout-list > div[style*="grid"] > div > p { flex: 1 1 200px; margin: 0; }
@media (max-width: 760px) {
  .comp-volunteer-signup.layout-list > div[style*="grid"] > div { flex-direction: column; align-items: flex-start; }
}

/* --- worship-setlist --- */
.comp-worship-setlist.layout-cards > div[style*="max-width"] { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.comp-worship-setlist.layout-cards > div[style*="max-width"] > div { display: block; text-align: center; border-bottom: none; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 18px; }
.comp-worship-setlist.layout-cards > div[style*="max-width"] > div > span:first-child { display: block; margin-bottom: 8px; }
.comp-worship-setlist.layout-cards > div[style*="max-width"] > div > div { text-align: center; }
@media (max-width: 760px) {
  .comp-worship-setlist.layout-cards > div[style*="max-width"] { grid-template-columns: 1fr; }
}

/* --- event-spotlight --- */
.comp-event-spotlight.layout-centered { text-align: center; }
.comp-event-spotlight.layout-centered .es-image { margin: 0 auto; max-width: 720px; }
.comp-event-spotlight.layout-centered .es-info { max-width: 720px; margin: 0 auto; }
.comp-event-spotlight.layout-centered .es-info .es-meta { align-items: center; }
.comp-event-spotlight.layout-centered > div[style*="display:flex"],
.comp-event-spotlight.layout-centered > div > div[style*="display:flex"] { flex-direction: column; align-items: center; text-align: center; }

.comp-event-spotlight.layout-stacked .es-image,
.comp-event-spotlight.layout-stacked .es-info { width: 100%; flex: none; }
.comp-event-spotlight.layout-stacked > div[style*="display:flex"],
.comp-event-spotlight.layout-stacked > div > div[style*="display:flex"] { flex-direction: column; align-items: stretch; gap: 24px; }
.comp-event-spotlight.layout-stacked .es-image { min-height: 280px; }

.comp-event-spotlight.layout-split-left > div[style*="display:flex"],
.comp-event-spotlight.layout-split-left > div > div[style*="display:flex"] { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.comp-event-spotlight.layout-split-left .es-info { order: 1; }
.comp-event-spotlight.layout-split-left .es-image { order: 2; }

.comp-event-spotlight.layout-full-overlay { position: relative; width: 100%; padding: 0 !important; min-height: 480px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.comp-event-spotlight.layout-full-overlay .es-image { position: absolute; inset: 0; z-index: 0; border-radius: 0 !important; min-height: 0 !important; flex: none; width: 100%; height: 100%; }
.comp-event-spotlight.layout-full-overlay .es-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.75)); }
.comp-event-spotlight.layout-full-overlay .es-info { position: relative; z-index: 1; max-width: 720px; flex: none; color: #fff; padding: 80px 24px; }
.comp-event-spotlight.layout-full-overlay .es-info h2 { font-size: 2.8rem; }
.comp-event-spotlight.layout-full-overlay .es-meta { align-items: center; justify-content: center; }

.comp-event-spotlight.layout-banner { position: relative; width: 100%; padding: 0 !important; min-height: 360px; display: flex; align-items: center; overflow: hidden; }
.comp-event-spotlight.layout-banner .es-image { position: absolute; inset: 0; z-index: 0; border-radius: 0 !important; min-height: 0 !important; flex: none; width: 100%; height: 100%; }
.comp-event-spotlight.layout-banner .es-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.2) 100%); }
.comp-event-spotlight.layout-banner .es-info { position: relative; z-index: 1; max-width: 540px; flex: none; color: #fff; padding: 56px 8%; }
.comp-event-spotlight.layout-banner .es-info h2 { font-size: 2.4rem; }

@media (max-width: 760px) {
  .comp-event-spotlight.layout-split-left > div[style*="display:flex"],
  .comp-event-spotlight.layout-split-left > div > div[style*="display:flex"] { grid-template-columns: 1fr; }
  .comp-event-spotlight.layout-full-overlay { min-height: 380px; }
  .comp-event-spotlight.layout-full-overlay .es-info h2 { font-size: 2rem; }
  .comp-event-spotlight.layout-full-overlay .es-info { padding: 56px 20px; }
  .comp-event-spotlight.layout-banner { min-height: 320px; }
  .comp-event-spotlight.layout-banner .es-info { max-width: 100%; padding: 40px 24px; }
  .comp-event-spotlight.layout-banner .es-info h2 { font-size: 1.9rem; }
}

/* --- give --- */
/* give: minimal - strip backgrounds, lighter type, more whitespace */
.comp-give.layout-minimal { padding-top: 72px; padding-bottom: 72px; }
.comp-give.layout-minimal h2 { font-size: 1.6rem; }
.comp-give.layout-minimal > p { margin-bottom: 40px; }
.comp-give.layout-minimal .giving-options { gap: 24px; }
.comp-give.layout-minimal .giving-option { background: transparent; border: none; box-shadow: none; padding: 12px; }
.comp-give.layout-minimal .give-btn { box-shadow: none; }

/* give: split - text/heading left, giving options right */
.comp-give.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; text-align: left; }
.comp-give.layout-split h2 { grid-column: 1; margin: 0 0 12px; }
.comp-give.layout-split > p { grid-column: 1; margin: 0 0 24px; }
.comp-give.layout-split .give-btn { grid-column: 1; justify-self: start; }
.comp-give.layout-split .giving-options { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr; gap: 16px; margin: 0; }
@media (max-width: 760px) {
  .comp-give.layout-split { grid-template-columns: 1fr; text-align: center; }
  .comp-give.layout-split h2, .comp-give.layout-split > p, .comp-give.layout-split .give-btn, .comp-give.layout-split .giving-options { grid-column: 1; grid-row: auto; justify-self: center; }
}

/* --- services --- */
/* services: list - single column rows, each item a horizontal flex row */
.comp-services.layout-list .service-grid { grid-template-columns: 1fr; max-width: 720px; gap: 12px; }
.comp-services.layout-list .service-item { display: flex; align-items: center; gap: 20px; text-align: left; padding: 18px 24px; }
.comp-services.layout-list .service-item .day { min-width: 120px; }
.comp-services.layout-list .service-item .time { margin: 0; }
.comp-services.layout-list .service-item .name { margin-left: auto; }
@media (max-width: 760px) {
  .comp-services.layout-list .service-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .comp-services.layout-list .service-item .name { margin-left: 0; }
}

/* services: compact - tighter grid, smaller padding and type */
.comp-services.layout-compact .service-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.comp-services.layout-compact .service-item { padding: 14px; }
.comp-services.layout-compact .service-item .day { font-size: 0.95rem; }
.comp-services.layout-compact .service-item .time { font-size: 1.1rem; margin: 4px 0; }
.comp-services.layout-compact .service-item .name { font-size: 0.8rem; }
@media (max-width: 760px) {
  .comp-services.layout-compact .service-grid { grid-template-columns: 1fr 1fr; }
}

/* --- events --- */
/* events: cards - grid of elevated cards */
.comp-events.layout-cards .event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1100px; }
.comp-events.layout-cards .event-item { flex-direction: column; gap: 12px; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 20px; border-bottom: none; }
.comp-events.layout-cards .event-date { display: flex; gap: 8px; align-items: baseline; text-align: left; min-width: 0; }
.comp-events.layout-cards .event-date .day-num { font-size: 1.4rem; }
@media (max-width: 760px) {
  .comp-events.layout-cards .event-list { grid-template-columns: 1fr; }
}

/* events: compact - tighter rows, smaller type */
.comp-events.layout-compact .event-list { max-width: 640px; }
.comp-events.layout-compact .event-item { gap: 12px; padding: 10px 0; }
.comp-events.layout-compact .event-date { min-width: 48px; }
.comp-events.layout-compact .event-date .day-num { font-size: 1.3rem; }
.comp-events.layout-compact .event-info h3 { font-size: 1rem; }
.comp-events.layout-compact .event-info p { font-size: 0.8rem; }

/* events: overlay - full-bleed emphasis with darkened backdrop */
.comp-events.layout-overlay { position: relative; text-align: center; }
.comp-events.layout-overlay h2 { font-size: 2.4rem; margin-bottom: 32px; }
.comp-events.layout-overlay .event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.comp-events.layout-overlay .event-item { flex-direction: column; gap: 10px; background: rgba(0,0,0,0.35); border-radius: 12px; padding: 24px; border-bottom: none; }
.comp-events.layout-overlay .event-date { display: flex; gap: 8px; justify-content: center; align-items: baseline; min-width: 0; }
@media (max-width: 760px) {
  .comp-events.layout-overlay .event-list { grid-template-columns: 1fr; }
  .comp-events.layout-overlay h2 { font-size: 1.8rem; }
}

/* --- sermons --- */
/* sermons: list - single column rows, each item a horizontal flex row */
.comp-sermons.layout-list .sermon-grid { grid-template-columns: 1fr; max-width: 760px; gap: 14px; }
.comp-sermons.layout-list .sermon-item { display: flex; align-items: stretch; }
.comp-sermons.layout-list .sermon-img { flex: 0 0 180px; height: auto; min-height: 110px; }
.comp-sermons.layout-list .sermon-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) {
  .comp-sermons.layout-list .sermon-item { flex-direction: column; }
  .comp-sermons.layout-list .sermon-img { flex: none; height: 160px; }
}

/* sermons: featured - first sermon spans full width and larger, rest in grid */
.comp-sermons.layout-featured .sermon-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.comp-sermons.layout-featured .sermon-item:first-child { grid-column: 1 / -1; display: flex; align-items: stretch; }
.comp-sermons.layout-featured .sermon-item:first-child .sermon-img { flex: 0 0 50%; height: auto; min-height: 240px; }
.comp-sermons.layout-featured .sermon-item:first-child .sermon-info { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.comp-sermons.layout-featured .sermon-item:first-child h3 { font-size: 1.5rem; }
@media (max-width: 760px) {
  .comp-sermons.layout-featured .sermon-item:first-child { flex-direction: column; }
  .comp-sermons.layout-featured .sermon-item:first-child .sermon-img { flex: none; height: 200px; }
  .comp-sermons.layout-featured .sermon-item:first-child .sermon-info { padding: 16px; }
}

/* sermons: overlay - full-bleed emphasis, darkened cards */
.comp-sermons.layout-overlay { text-align: center; }
.comp-sermons.layout-overlay h2 { font-size: 2.4rem; margin-bottom: 32px; }
.comp-sermons.layout-overlay .sermon-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; }
.comp-sermons.layout-overlay .sermon-item { background: rgba(0,0,0,0.4); }
.comp-sermons.layout-overlay .sermon-img { height: 200px; }
@media (max-width: 760px) {
  .comp-sermons.layout-overlay .sermon-grid { grid-template-columns: 1fr; }
  .comp-sermons.layout-overlay h2 { font-size: 1.8rem; }
}

/* --- store --- */
/* store: list - single column rows, each card a horizontal flex row */
.comp-store.layout-list .product-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; gap: 14px; }
.comp-store.layout-list .product-card { display: flex; align-items: stretch; }
.comp-store.layout-list .product-img { flex: 0 0 200px; height: auto; min-height: 140px; }
.comp-store.layout-list .product-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) {
  .comp-store.layout-list .product-card { flex-direction: column; }
  .comp-store.layout-list .product-img { flex: none; height: 200px; }
}

/* store: featured - first product spans full width and larger, rest in grid */
.comp-store.layout-featured .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.comp-store.layout-featured .product-card:first-child { grid-column: 1 / -1; display: flex; align-items: stretch; }
.comp-store.layout-featured .product-card:first-child .product-img { flex: 0 0 55%; height: auto; min-height: 300px; }
.comp-store.layout-featured .product-card:first-child .product-info { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.comp-store.layout-featured .product-card:first-child h3 { font-size: 1.6rem; }
.comp-store.layout-featured .product-card:first-child .price { font-size: 1.6rem; }
@media (max-width: 760px) {
  .comp-store.layout-featured .product-card:first-child { flex-direction: column; }
  .comp-store.layout-featured .product-card:first-child .product-img { flex: none; height: 220px; }
  .comp-store.layout-featured .product-card:first-child .product-info { padding: 16px; }
}

/* store: overlay - full-bleed emphasis, darkened cards */
.comp-store.layout-overlay { text-align: center; }
.comp-store.layout-overlay h2 { font-size: 2.4rem; }
.comp-store.layout-overlay .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; }
.comp-store.layout-overlay .product-card { background: rgba(0,0,0,0.4) !important; }
.comp-store.layout-overlay .product-img { height: 200px; }
@media (max-width: 760px) {
  .comp-store.layout-overlay .product-grid { grid-template-columns: 1fr; }
  .comp-store.layout-overlay h2 { font-size: 1.8rem; }
}

/* --- staff --- */
.comp-staff.layout-list .staff-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; gap: 16px; }
.comp-staff.layout-list .staff-member { display: flex; flex-direction: row; align-items: center; gap: 20px; text-align: left; }
.comp-staff.layout-list .staff-photo { margin: 0; flex-shrink: 0; }
.comp-staff.layout-list .staff-member h3 { margin-bottom: 4px; }
@media (max-width: 760px) { .comp-staff.layout-list .staff-member { gap: 14px; } }

.comp-staff.layout-cards .staff-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.comp-staff.layout-cards .staff-member { background: rgba(255,255,255,0.05); padding: 28px 20px; border-radius: 14px; }
@media (max-width: 760px) { .comp-staff.layout-cards .staff-grid { grid-template-columns: 1fr; } }

.comp-staff.layout-overlay .staff-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.comp-staff.layout-overlay .staff-member { position: relative; border-radius: 14px; overflow: hidden; text-align: left; }
.comp-staff.layout-overlay .staff-photo { width: 100%; height: 280px; border-radius: 14px; margin: 0; }
.comp-staff.layout-overlay .staff-member h3, .comp-staff.layout-overlay .staff-member p { position: absolute; left: 16px; right: 16px; margin: 0; z-index: 2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.comp-staff.layout-overlay .staff-member h3 { bottom: 30px; }
.comp-staff.layout-overlay .staff-member p { bottom: 12px; opacity: 0.9; }
.comp-staff.layout-overlay .staff-member::after { content: ''; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0) 55%); z-index: 1; }
@media (max-width: 760px) { .comp-staff.layout-overlay .staff-grid { grid-template-columns: 1fr; } .comp-staff.layout-overlay .staff-photo { height: 240px; } }

/* --- gallery --- */
.comp-gallery.layout-masonry .gallery-grid { display: block; column-count: 3; column-gap: 12px; }
.comp-gallery.layout-masonry .gallery-item { break-inside: avoid; margin-bottom: 12px; display: block; }
.comp-gallery.layout-masonry .gallery-item img { height: auto; }
@media (max-width: 760px) { .comp-gallery.layout-masonry .gallery-grid { column-count: 2; } }

.comp-gallery.layout-featured .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
.comp-gallery.layout-featured .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.comp-gallery.layout-featured .gallery-item img { height: 100%; }
@media (max-width: 760px) { .comp-gallery.layout-featured .gallery-grid { grid-template-columns: repeat(2, 1fr); } .comp-gallery.layout-featured .gallery-item:first-child { grid-column: span 2; grid-row: span 1; } }

.comp-gallery.layout-overlay .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.comp-gallery.layout-overlay .gallery-item { position: relative; }
.comp-gallery.layout-overlay .gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.3s; }
.comp-gallery.layout-overlay .gallery-item:hover::after { opacity: 1; }
@media (max-width: 760px) { .comp-gallery.layout-overlay .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- blog --- */
.comp-blog.layout-grid #blog-posts, .comp-blog.layout-grid .blog-posts-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; max-width: none; }
.comp-blog.layout-grid .blog-post { margin-bottom: 0; padding: 20px; border-radius: 12px; }
@media (max-width: 760px) { .comp-blog.layout-grid #blog-posts, .comp-blog.layout-grid .blog-posts-wrap { grid-template-columns: 1fr; } }

.comp-blog.layout-magazine #blog-posts, .comp-blog.layout-magazine .blog-posts-wrap { max-width: 980px; }
.comp-blog.layout-magazine .blog-post { display: flex; gap: 24px; align-items: flex-start; padding: 20px; }
.comp-blog.layout-magazine .blog-post:nth-child(even) { flex-direction: row-reverse; }
.comp-blog.layout-magazine .blog-media { width: 40%; flex-shrink: 0; }
.comp-blog.layout-magazine .blog-media img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }
.comp-blog.layout-magazine .blog-content { flex: 1; }
@media (max-width: 760px) { .comp-blog.layout-magazine .blog-post, .comp-blog.layout-magazine .blog-post:nth-child(even) { flex-direction: column; } .comp-blog.layout-magazine .blog-media { width: 100%; } }

.comp-blog.layout-overlay #blog-posts, .comp-blog.layout-overlay .blog-posts-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: none; }
.comp-blog.layout-overlay .blog-post { position: relative; margin-bottom: 0; padding: 0; min-height: 280px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; }
.comp-blog.layout-overlay .blog-media { position: absolute; inset: 0; margin: 0; }
.comp-blog.layout-overlay .blog-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.comp-blog.layout-overlay .blog-content, .comp-blog.layout-overlay .blog-post > h3, .comp-blog.layout-overlay .blog-post > .blog-meta, .comp-blog.layout-overlay .blog-post > .blog-body { position: relative; z-index: 2; color: #fff; padding: 0 20px; }
.comp-blog.layout-overlay .blog-post::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0) 60%); z-index: 1; }
.comp-blog.layout-overlay .blog-content { width: 100%; padding: 20px; }
@media (max-width: 760px) { .comp-blog.layout-overlay #blog-posts, .comp-blog.layout-overlay .blog-posts-wrap { grid-template-columns: 1fr; } }

/* --- beliefs --- */
.comp-beliefs.layout-single .beliefs-grid { display: block; max-width: 720px; margin: 0 auto; }
.comp-beliefs.layout-single .belief-card { margin-bottom: 8px; }

.comp-beliefs.layout-cards .beliefs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.comp-beliefs.layout-cards .belief-card { background: rgba(255,255,255,0.05); padding: 24px; border-radius: 12px; }
@media (max-width: 760px) { .comp-beliefs.layout-cards .beliefs-grid { grid-template-columns: 1fr; } }

.comp-beliefs.layout-overlay .beliefs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 800px; margin: 0 auto; }
.comp-beliefs.layout-overlay .belief-card { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 16px; }
@media (max-width: 760px) { .comp-beliefs.layout-overlay .beliefs-grid { grid-template-columns: 1fr; } }

/* --- liveblog --- */
.comp-liveblog.layout-timeline > div:last-of-type { padding-left: 28px; border-left: 2px solid rgba(255,255,255,0.15); max-width: 700px; }
.comp-liveblog.layout-timeline > div:last-of-type > div { position: relative; }
.comp-liveblog.layout-timeline > div:last-of-type > div::before { content: ''; position: absolute; left: -35px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; opacity: 0.7; }
@media (max-width: 760px) { .comp-liveblog.layout-timeline > div:last-of-type { padding-left: 20px; } .comp-liveblog.layout-timeline > div:last-of-type > div::before { left: -27px; } }

.comp-liveblog.layout-minimal > div:last-of-type > div { background: none !important; border: none !important; border-left: none !important; box-shadow: none !important; padding: 12px 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; border-radius: 0 !important; }
.comp-liveblog.layout-minimal h2 { font-size: 1.6rem; }

/* --- kingdom-connect --- */
/* kingdom-connect: stacked */
.comp-kingdom-connect.layout-stacked > div { flex-direction: column; flex-wrap: nowrap; align-items: center; max-width: 340px; margin: 0 auto; }
.comp-kingdom-connect.layout-stacked > div > a { width: 100%; justify-content: center; }
@media (max-width: 760px) {
  .comp-kingdom-connect.layout-stacked > div { max-width: 100%; }
}

/* --- events-calendar --- */
/* events-calendar: list - hide the month grid, render days as single-column rows */
.comp-events-calendar.layout-list .ec-grid { grid-template-columns: 1fr; max-width: 560px; background: transparent !important; padding: 0 !important; gap: 8px; }
.comp-events-calendar.layout-list .ec-day-header { display: none; }
.comp-events-calendar.layout-list .ec-day { display: flex; align-items: center; gap: 14px; min-height: 0; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 12px 16px; }
.comp-events-calendar.layout-list .ec-day:not(.has-event) { display: none; }
.comp-events-calendar.layout-list .ec-day .ec-day-num { margin-bottom: 0; min-width: 32px; font-size: 1.1rem; }
.comp-events-calendar.layout-list .ec-day .ec-event-dot { white-space: normal; overflow: visible; text-overflow: clip; font-size: 0.9rem; }
.comp-events-calendar.layout-list h2 { text-align: center; }
.comp-events-calendar.layout-list .ec-month { text-align: center; }

/* events-calendar: compact - tighter grid, smaller type */
.comp-events-calendar.layout-compact { padding-top: 32px; padding-bottom: 32px; }
.comp-events-calendar.layout-compact h2 { font-size: 1.4rem; margin-bottom: 4px; }
.comp-events-calendar.layout-compact .ec-month { font-size: 0.85rem; margin-bottom: 12px; }
.comp-events-calendar.layout-compact .ec-grid { max-width: 420px; gap: 2px; padding: 8px !important; }
.comp-events-calendar.layout-compact .ec-day { min-height: 38px; padding: 4px; font-size: 0.72rem; }
.comp-events-calendar.layout-compact .ec-day-header { font-size: 0.6rem; padding: 4px 0; }

/* events-calendar: overlay - full-bleed emphasis with dimmed backdrop */
.comp-events-calendar.layout-overlay { position: relative; overflow: hidden; }
.comp-events-calendar.layout-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.comp-events-calendar.layout-overlay > * { position: relative; z-index: 1; }
.comp-events-calendar.layout-overlay h2 { text-align: center; font-size: 2.2rem; }
.comp-events-calendar.layout-overlay .ec-month { text-align: center; }
.comp-events-calendar.layout-overlay .ec-grid { background: rgba(255,255,255,0.08) !important; }

@media (max-width: 760px) {
  .comp-events-calendar.layout-compact .ec-grid { max-width: 100%; }
  .comp-events-calendar.layout-list .ec-grid { max-width: 100%; }
  .comp-events-calendar.layout-overlay h2 { font-size: 1.7rem; }
}

/* --- events-list --- */
/* events-list: cards - grid of elevated cards, stack each row vertically */
.comp-events-list.layout-cards > div { max-width: 1100px !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.comp-events-list.layout-cards > div > div { flex-direction: column !important; gap: 12px !important; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 24px !important; border-bottom: none !important; align-items: stretch !important; }

/* events-list: minimal - strip card backgrounds and chrome */
.comp-events-list.layout-minimal > div > div { background: transparent !important; padding: 12px 0 !important; }
.comp-events-list.layout-minimal > div > div > div:first-child { background: transparent !important; min-width: auto !important; padding: 0 !important; text-align: left !important; }
.comp-events-list.layout-minimal h2 { font-size: 1.6rem; }

/* events-list: overlay - full-bleed emphasis over dimmed backdrop */
.comp-events-list.layout-overlay { position: relative; overflow: hidden; color: #fff; }
.comp-events-list.layout-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.comp-events-list.layout-overlay > * { position: relative; z-index: 1; }
.comp-events-list.layout-overlay > div > div { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 20px !important; border-bottom: none !important; }

@media (max-width: 760px) {
  .comp-events-list.layout-cards > div { grid-template-columns: 1fr; }
}

/* --- countdown --- */
/* countdown: split - heading/desc on left, unit row on right */
.comp-countdown.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; text-align: left !important; align-items: center; max-width: 960px; margin: 0 auto; }
.comp-countdown.layout-split > h2 { grid-column: 1; margin-bottom: 8px !important; }
.comp-countdown.layout-split > p:first-child { grid-column: 1; }
.comp-countdown.layout-split > [id^="countdown-"] { grid-column: 2; grid-row: 1 / span 3; justify-content: flex-start !important; flex-wrap: wrap; }
.comp-countdown.layout-split > p:last-child { grid-column: 1; margin: 0 !important; }

/* countdown: minimal - strip the unit box backgrounds, hide description */
.comp-countdown.layout-minimal > [id^="countdown-"] > div { background: transparent !important; padding: 8px 16px !important; min-width: 64px !important; }
.comp-countdown.layout-minimal h2 { font-size: 1.6rem; }
.comp-countdown.layout-minimal > p:last-child { display: none; }

/* countdown: overlay - full-bleed dimmed backdrop, larger numerals */
.comp-countdown.layout-overlay { position: relative; overflow: hidden; color: #fff; }
.comp-countdown.layout-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 0; }
.comp-countdown.layout-overlay > * { position: relative; z-index: 1; }
.comp-countdown.layout-overlay h2 { font-size: 2.6rem; }
.comp-countdown.layout-overlay > [id^="countdown-"] > div { background: transparent !important; }
.comp-countdown.layout-overlay .cd-num { font-size: 4rem !important; }

@media (max-width: 760px) {
  .comp-countdown.layout-split { grid-template-columns: 1fr; gap: 24px; text-align: center !important; }
  .comp-countdown.layout-split > [id^="countdown-"] { grid-column: 1; grid-row: auto; justify-content: center !important; }
  .comp-countdown.layout-split > h2, .comp-countdown.layout-split > p { grid-column: 1; }
  .comp-countdown.layout-overlay h2 { font-size: 1.9rem; }
}

/* --- announcements --- */
/* announcements: list - single-column rows, items become horizontal */
.comp-announcements.layout-list > div { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto !important; }
.comp-announcements.layout-list > div > div { display: flex; flex-direction: column; gap: 6px; }

/* announcements: compact - tighter grid and smaller cards */
.comp-announcements.layout-compact { padding-top: 36px; padding-bottom: 36px; }
.comp-announcements.layout-compact > div { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 12px !important; }
.comp-announcements.layout-compact > div > div { padding: 16px !important; }
.comp-announcements.layout-compact > div > div h4 { font-size: 0.95rem; }
.comp-announcements.layout-compact > div > div p { font-size: 0.82rem; }

/* announcements: overlay - full-bleed dimmed backdrop */
.comp-announcements.layout-overlay { position: relative; overflow: hidden; color: #fff; }
.comp-announcements.layout-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.comp-announcements.layout-overlay > * { position: relative; z-index: 1; }
.comp-announcements.layout-overlay > div > div { background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2); }

@media (max-width: 760px) {
  .comp-announcements.layout-compact > div { grid-template-columns: 1fr !important; }
}

/* --- sermon-player --- */
/* sermon-player layouts */
.comp-sermon-player.layout-split .sp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; max-width: 1000px; }
.comp-sermon-player.layout-split .sp-media { width: 100%; }
.comp-sermon-player.layout-split > div { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 760px) {
  .comp-sermon-player.layout-split .sp-wrap { grid-template-columns: 1fr; }
  .comp-sermon-player.layout-split > div { grid-template-columns: 1fr; }
}

.comp-sermon-player.layout-stacked .sp-wrap { flex-direction: column; align-items: center; text-align: center; }
.comp-sermon-player.layout-stacked .sp-media,
.comp-sermon-player.layout-stacked .sp-info { width: 100%; min-width: 0; }
.comp-sermon-player.layout-stacked > div { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.comp-sermon-player.layout-stacked > div > div { width: 100%; }

.comp-sermon-player.layout-overlay { position: relative; }
.comp-sermon-player.layout-overlay .sp-wrap { flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 720px; }
.comp-sermon-player.layout-overlay .sp-media { width: 100%; }
.comp-sermon-player.layout-overlay .sp-info { max-width: 640px; margin: 0 auto; }
.comp-sermon-player.layout-overlay > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
@media (max-width: 760px) {
  .comp-sermon-player.layout-overlay .sp-wrap { gap: 12px; }
}

/* --- sermon-series --- */
/* sermon-series layouts */
.comp-sermon-series.layout-two-col .ss-grid { grid-template-columns: repeat(2, 1fr); }
.comp-sermon-series.layout-two-col > div:not(.ss-grid) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) {
  .comp-sermon-series.layout-two-col .ss-grid { grid-template-columns: 1fr; }
  .comp-sermon-series.layout-two-col > div:not(.ss-grid) { grid-template-columns: 1fr; }
}

.comp-sermon-series.layout-list .ss-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.comp-sermon-series.layout-list .ss-card { display: flex; flex-direction: row; align-items: stretch; }
.comp-sermon-series.layout-list .ss-cover { width: 200px; height: auto; min-height: 120px; flex-shrink: 0; }
.comp-sermon-series.layout-list .ss-info { flex: 1; }
.comp-sermon-series.layout-list > div:not(.ss-grid) { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
@media (max-width: 760px) {
  .comp-sermon-series.layout-list .ss-card { flex-direction: column; }
  .comp-sermon-series.layout-list .ss-cover { width: 100%; min-height: 160px; }
}

.comp-sermon-series.layout-overlay .ss-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.comp-sermon-series.layout-overlay .ss-card { position: relative; overflow: hidden; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.comp-sermon-series.layout-overlay .ss-cover { position: absolute; inset: 0; height: 100%; }
.comp-sermon-series.layout-overlay .ss-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.15) 100%); }
.comp-sermon-series.layout-overlay .ss-info { position: relative; z-index: 1; color: #fff; }
@media (max-width: 760px) {
  .comp-sermon-series.layout-overlay .ss-grid { grid-template-columns: 1fr; }
}

/* --- setlist --- */
/* setlist layouts */
.comp-setlist.layout-cards .sl-songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; max-width: 1000px; }
.comp-setlist.layout-cards .sl-song { background: rgba(255,255,255,0.05); padding: 16px 18px; border-radius: 12px; border-bottom: none; }
.comp-setlist.layout-cards > div:last-child { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.comp-setlist.layout-cards > div:last-child > div { background: rgba(255,255,255,0.05); padding: 16px 18px; border-radius: 12px; border-bottom: none; }
@media (max-width: 760px) {
  .comp-setlist.layout-cards .sl-songs { grid-template-columns: 1fr; }
  .comp-setlist.layout-cards > div:last-child { grid-template-columns: 1fr; }
}

.comp-setlist.layout-minimal .sl-songs { background: none !important; box-shadow: none; padding: 0; }
.comp-setlist.layout-minimal .sl-song { border-bottom: none; padding: 6px 0; }
.comp-setlist.layout-minimal .sl-num { display: none; }
.comp-setlist.layout-minimal .sl-key { background: none; padding: 0; }
.comp-setlist.layout-minimal h2 { font-size: 1.6rem; }

/* --- livestream --- */
/* livestream layouts (overlay handled by markup branch) */
.comp-livestream.layout-player .ls-embed { max-width: 1100px; }
.comp-livestream.layout-player > div[style*="padding-bottom"] { max-width: 1100px; }
.comp-livestream.layout-player h2 { font-size: 2.2rem; }
@media (max-width: 760px) {
  .comp-livestream.layout-player h2 { font-size: 1.6rem; }
}

.comp-livestream.layout-offline { opacity: 0.85; }
.comp-livestream.layout-offline .ls-offline { background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.18); filter: grayscale(0.4); }
.comp-livestream.layout-offline .ls-embed { opacity: 0.6; filter: grayscale(0.5); }
.comp-livestream.layout-offline h2 { opacity: 0.8; }

/* --- small-groups --- */
/* small-groups layouts (overlay handled by markup branch) */
.comp-small-groups.layout-list .sg-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.comp-small-groups.layout-list .sg-card { display: flex; flex-direction: column; }
.comp-small-groups.layout-list > div[style*="grid"] { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto; }
@media (max-width: 760px) {
  .comp-small-groups.layout-list .sg-grid { grid-template-columns: 1fr; }
}

/* --- volunteer --- */
/* =================== VOLUNTEER =================== */
/* list: single-column stacked rows */
.comp-volunteer.layout-list .vol-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.comp-volunteer.layout-list .vol-card { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.comp-volunteer.layout-list .vol-card h3 { flex: 1 1 auto; margin-bottom: 0; }
.comp-volunteer.layout-list .vol-card .vol-commitment { margin-bottom: 0; }
.comp-volunteer.layout-list .vol-card .vol-desc { flex: 1 1 100%; margin-bottom: 0; }

/* two-col: a two-column grid of cards */
.comp-volunteer.layout-two-col .vol-grid { grid-template-columns: repeat(2, 1fr); }
.comp-volunteer.layout-two-col .vol-card { background: rgba(255,255,255,0.05); }

@media (max-width: 760px) {
  .comp-volunteer.layout-two-col .vol-grid { grid-template-columns: 1fr; }
  .comp-volunteer.layout-list .vol-card { flex-direction: column; align-items: flex-start; }
}

/* --- connect-card --- */
/* =================== CONNECT-CARD =================== */
/* split: heading/intro column beside the form column */
.comp-connect-card.layout-split { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.comp-connect-card.layout-split h2, .comp-connect-card.layout-split .cc-sub { text-align: left; }
.comp-connect-card.layout-split .cc-form { grid-row: span 2; }

/* minimal: strip the form's card chrome, lighter heading */
.comp-connect-card.layout-minimal .cc-form { background: transparent !important; border: none; box-shadow: none; padding: 8px 0; }
.comp-connect-card.layout-minimal h2 { font-size: 1.6rem; }
.comp-connect-card.layout-minimal .cc-field input, .comp-connect-card.layout-minimal .cc-field textarea { background: transparent; }

@media (max-width: 760px) {
  .comp-connect-card.layout-split { grid-template-columns: 1fr; gap: 24px; }
  .comp-connect-card.layout-split .cc-form { grid-row: auto; }
}

/* --- prayer-wall --- */
/* =================== PRAYER-WALL =================== */
/* grid: cards in a responsive grid instead of a single column list */
.comp-prayer-wall.layout-grid .pw-list { max-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.comp-prayer-wall.layout-grid .pw-item { margin-bottom: 0; background: rgba(255,255,255,0.05); }

/* stacked: full-width horizontal rows, meta as a left badge */
.comp-prayer-wall.layout-stacked .pw-list { max-width: 760px; }
.comp-prayer-wall.layout-stacked .pw-item { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; border-left: none; border-top: 3px solid; }
.comp-prayer-wall.layout-stacked .pw-item .pw-meta { order: -1; flex-direction: column; align-items: center; width: 96px; flex-shrink: 0; gap: 4px; opacity: 1; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 10px 6px; }
.comp-prayer-wall.layout-stacked .pw-item .pw-text { flex: 1; margin-bottom: 4px; }

/* overlay: borderless rows over an emphasized backdrop */
.comp-prayer-wall.layout-overlay .pw-list { max-width: 800px; }
.comp-prayer-wall.layout-overlay .pw-item { border-left: none; border-radius: 0; background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.08); }

@media (max-width: 760px) {
  .comp-prayer-wall.layout-grid .pw-list { grid-template-columns: 1fr; }
  .comp-prayer-wall.layout-stacked .pw-item { flex-direction: column; }
  .comp-prayer-wall.layout-stacked .pw-item .pw-meta { flex-direction: row; width: auto; }
}

/* --- testimonies --- */
/* =================== TESTIMONIES =================== */
/* three-col: a tighter three-up grid */
.comp-testimonies.layout-three-col .tm-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* list: single-column rows, author beside the quote */
.comp-testimonies.layout-list .tm-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; gap: 0; }
.comp-testimonies.layout-list .tm-card { background: transparent; border-radius: 0; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }

/* overlay: photo fills each card, text floats over a gradient */
.comp-testimonies.layout-overlay .tm-card { position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 16px; }
.comp-testimonies.layout-overlay .tm-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; margin: 0; background-size: cover; background-position: center; }
.comp-testimonies.layout-overlay .tm-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.15) 100%); }
.comp-testimonies.layout-overlay .tm-quote { position: relative; z-index: 1; padding: 0 20px; color: #fff; }
.comp-testimonies.layout-overlay .tm-author { position: relative; z-index: 1; padding: 12px 20px 20px; color: #fff; }

@media (max-width: 760px) {
  .comp-testimonies.layout-three-col .tm-grid { grid-template-columns: 1fr; }
}

/* --- kids-ministry --- */
/* kids-ministry: list */
.comp-kids-ministry.layout-list .km-grid,
.comp-kids-ministry.layout-list > div[style*="grid"] { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; max-width: 760px; margin: 0 auto; }
.comp-kids-ministry.layout-list .km-card,
.comp-kids-ministry.layout-list > div[style*="grid"] > div { display: flex; flex-direction: row; align-items: center; gap: 18px; text-align: left; }
.comp-kids-ministry.layout-list .km-card > *,
.comp-kids-ministry.layout-list > div[style*="grid"] > div > * { margin-top: 0; margin-bottom: 0; }
@media (max-width: 760px) { .comp-kids-ministry.layout-list .km-card, .comp-kids-ministry.layout-list > div[style*="grid"] > div { flex-direction: column; align-items: flex-start; } }

/* kids-ministry: two-col */
.comp-kids-ministry.layout-two-col .km-grid,
.comp-kids-ministry.layout-two-col > div[style*="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .comp-kids-ministry.layout-two-col .km-grid, .comp-kids-ministry.layout-two-col > div[style*="grid"] { grid-template-columns: 1fr !important; } }

/* --- youth-events --- */
/* youth-events: cards */
.comp-youth-events.layout-cards .ye-list,
.comp-youth-events.layout-cards > div[style*="grid"] { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 20px; max-width: 1100px; margin: 0 auto; }
.comp-youth-events.layout-cards .ye-item,
.comp-youth-events.layout-cards > div[style*="grid"] > div { display: block; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 24px; }
@media (max-width: 760px) { .comp-youth-events.layout-cards .ye-list, .comp-youth-events.layout-cards > div[style*="grid"] { grid-template-columns: 1fr !important; } }

/* youth-events: two-col */
.comp-youth-events.layout-two-col .ye-list,
.comp-youth-events.layout-two-col > div[style*="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .comp-youth-events.layout-two-col .ye-list, .comp-youth-events.layout-two-col > div[style*="grid"] { grid-template-columns: 1fr !important; } }

/* --- missions --- */
/* missions: two-col */
.comp-missions.layout-two-col .ms-grid,
.comp-missions.layout-two-col > div[style*="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .comp-missions.layout-two-col .ms-grid, .comp-missions.layout-two-col > div[style*="grid"] { grid-template-columns: 1fr !important; } }

/* missions: list */
.comp-missions.layout-list .ms-grid,
.comp-missions.layout-list > div[style*="grid"] { display: grid !important; grid-template-columns: 1fr !important; gap: 16px; max-width: 760px; margin: 0 auto; }
.comp-missions.layout-list .ms-card,
.comp-missions.layout-list > div[style*="grid"] > div { display: flex; flex-direction: row; align-items: stretch; }
.comp-missions.layout-list .ms-image,
.comp-missions.layout-list > div[style*="grid"] > div > div[style*="height:160px"] { width: 200px; flex-shrink: 0; height: auto !important; min-height: 140px; }
.comp-missions.layout-list .ms-info,
.comp-missions.layout-list > div[style*="grid"] > div > div[style*="padding:20px"] { flex: 1; }
@media (max-width: 760px) { .comp-missions.layout-list .ms-card, .comp-missions.layout-list > div[style*="grid"] > div { flex-direction: column; } .comp-missions.layout-list .ms-image, .comp-missions.layout-list > div[style*="grid"] > div > div[style*="height:160px"] { width: 100%; height: 160px !important; } }

/* --- community-resources --- */
/* community-resources: two-col */
.comp-community-resources.layout-two-col .cr-grid,
.comp-community-resources.layout-two-col > div[style*="grid"] { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .comp-community-resources.layout-two-col .cr-grid, .comp-community-resources.layout-two-col > div[style*="grid"] { grid-template-columns: 1fr !important; } }

/* community-resources: list */
.comp-community-resources.layout-list .cr-grid,
.comp-community-resources.layout-list > div[style*="grid"] { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; max-width: 760px; margin: 0 auto; }
.comp-community-resources.layout-list .cr-card,
.comp-community-resources.layout-list > div[style*="grid"] > div { display: flex; flex-direction: row; align-items: flex-start; gap: 18px; text-align: left; }
.comp-community-resources.layout-list .cr-icon,
.comp-community-resources.layout-list > div[style*="grid"] > div > div[style*="font-size:2rem"] { margin-bottom: 0 !important; flex-shrink: 0; }
@media (max-width: 760px) { .comp-community-resources.layout-list .cr-card, .comp-community-resources.layout-list > div[style*="grid"] > div { flex-direction: column; } }

/* --- scripture --- */
/* scripture: split (media/verse two-column emphasis) */
.comp-scripture.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left; max-width: 1000px; margin: 0 auto; }
.comp-scripture.layout-split .scr-verse,
.comp-scripture.layout-split blockquote { grid-column: 1; font-size: 1.9rem; margin: 0 !important; }
.comp-scripture.layout-split .scr-label,
.comp-scripture.layout-split > p[style*="uppercase"] { grid-column: 2; grid-row: 1; align-self: start; }
.comp-scripture.layout-split .scr-ref,
.comp-scripture.layout-split .scr-translation,
.comp-scripture.layout-split > p[style*="font-weight:700"] { grid-column: 2; }
@media (max-width: 760px) { .comp-scripture.layout-split { grid-template-columns: 1fr; text-align: center; gap: 16px; } .comp-scripture.layout-split .scr-label, .comp-scripture.layout-split > p[style*="uppercase"], .comp-scripture.layout-split .scr-ref, .comp-scripture.layout-split .scr-translation, .comp-scripture.layout-split > p[style*="font-weight:700"], .comp-scripture.layout-split .scr-verse, .comp-scripture.layout-split blockquote { grid-column: 1; } }

/* scripture: minimal (strip emphasis, lighter, more whitespace) */
.comp-scripture.layout-minimal { max-width: 720px; margin: 0 auto; }
.comp-scripture.layout-minimal .scr-label,
.comp-scripture.layout-minimal > p[style*="uppercase"] { display: none; }
.comp-scripture.layout-minimal .scr-verse,
.comp-scripture.layout-minimal blockquote { font-size: 1.3rem; font-style: normal; opacity: 0.95; font-weight: 300; line-height: 1.7; }
.comp-scripture.layout-minimal .scr-ref,
.comp-scripture.layout-minimal > p[style*="font-weight:700"] { font-weight: 400 !important; opacity: 0.55 !important; font-size: 0.9rem; }
.comp-scripture.layout-minimal .scr-translation { opacity: 0.4; }
@media (max-width: 760px) { .comp-scripture.layout-minimal .scr-verse, .comp-scripture.layout-minimal blockquote { font-size: 1.15rem; } }

/* --- social-feed --- */
.comp-social-feed.layout-two-col .sf-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.comp-social-feed.layout-list .sf-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; gap: 14px; }
.comp-social-feed.layout-list .sf-card { display: flex; flex-direction: row; align-items: stretch; gap: 16px; padding: 16px; }
.comp-social-feed.layout-list .sf-image { flex: 0 0 200px; margin-bottom: 0; }
.comp-social-feed.layout-list .sf-image img { height: 100%; object-fit: cover; }
.comp-social-feed.layout-list .sf-header { margin-bottom: 8px; }
@media (max-width: 760px) {
  .comp-social-feed.layout-two-col .sf-grid { grid-template-columns: 1fr; }
  .comp-social-feed.layout-list .sf-card { flex-direction: column; }
  .comp-social-feed.layout-list .sf-image { flex: none; }
}

/* --- newsletter --- */
.comp-newsletter.layout-split { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left; }
.comp-newsletter.layout-split h2, .comp-newsletter.layout-split .nl-sub, .comp-newsletter.layout-split p { text-align: left; margin-left: 0; margin-right: 0; }
.comp-newsletter.layout-split .nl-form { max-width: 100%; margin: 0; justify-content: flex-start; }
.comp-newsletter.layout-minimal { background: transparent !important; border: none !important; box-shadow: none !important; padding: 24px 0; }
.comp-newsletter.layout-minimal h2 { font-size: 1.5rem; }
.comp-newsletter.layout-minimal .nl-sub { display: none; }
.comp-newsletter.layout-minimal .nl-form input { background: transparent; border: 1px solid rgba(128,128,128,0.3); }
@media (max-width: 760px) {
  .comp-newsletter.layout-split { grid-template-columns: 1fr; gap: 20px; }
}

/* --- faq --- */
.comp-faq.layout-two-col > div:last-child, .comp-faq.layout-two-col .faq-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; max-width: 1000px; margin: 0 auto; align-items: start; }
.comp-faq.layout-stacked > div:last-child, .comp-faq.layout-stacked .faq-list { max-width: 780px; margin: 0 auto; }
.comp-faq.layout-stacked .faq-item { border-bottom: 1px solid rgba(128,128,128,0.15); }
.comp-faq.layout-stacked .faq-item > div:first-child { padding: 20px 0; }
@media (max-width: 760px) {
  .comp-faq.layout-two-col > div:last-child, .comp-faq.layout-two-col .faq-list { grid-template-columns: 1fr; }
}

/* --- bible-verse --- */
.comp-bible-verse.layout-banner { text-align: left; border-left: 6px solid currentColor; padding-left: 32px; }
.comp-bible-verse.layout-banner blockquote { max-width: 100%; margin: 0 0 12px; font-size: 1.9rem; }
.comp-bible-verse.layout-banner p { text-align: left; }
.comp-bible-verse.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; text-align: left; max-width: 1000px; margin: 0 auto; }
.comp-bible-verse.layout-split blockquote { max-width: 100%; margin: 0; border-left: 4px solid currentColor; padding-left: 20px; }
.comp-bible-verse.layout-split p { text-align: left; }
.comp-bible-verse.layout-overlay { position: relative; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; }
.comp-bible-verse.layout-overlay blockquote { font-size: 1.9rem; }
@media (max-width: 760px) {
  .comp-bible-verse.layout-split { grid-template-columns: 1fr; gap: 24px; }
}

/* --- baptism-stories --- */
.comp-baptism-stories.layout-timeline > div:nth-of-type(1) { display: block; grid-template-columns: none; max-width: 640px; margin: 0 auto; padding-left: 28px; border-left: 2px solid rgba(128,128,128,0.25); }
.comp-baptism-stories.layout-timeline > div:nth-of-type(1) > div { position: relative; text-align: left; background: transparent; padding: 0 0 28px 16px; border-radius: 0; }
.comp-baptism-stories.layout-timeline > div:nth-of-type(1) > div::before { content: ''; position: absolute; left: -35px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.comp-baptism-stories.layout-overlay { position: relative; min-height: 380px; padding: 80px 24px; color: #fff; }
.comp-baptism-stories.layout-overlay > div:nth-of-type(1) > div { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); }
@media (max-width: 760px) {
  .comp-baptism-stories.layout-timeline > div:nth-of-type(1) { padding-left: 20px; }
}

/* --- bulletin --- */
/* bulletin */
.comp-bulletin.layout-card { max-width: 560px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }
.comp-bulletin.layout-card > div { max-width: none !important; }
@media (max-width: 760px) { .comp-bulletin.layout-card { margin: 0 16px; } }

/* --- camp-retreat --- */
/* camp-retreat */
.comp-camp-retreat.layout-split { display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left !important; }
.comp-camp-retreat.layout-split > div:first-child { grid-row: 1 / span 30; grid-column: 1; margin: 0 !important; max-width: none !important; }
.comp-camp-retreat.layout-split > :not(:first-child) { grid-column: 2; }
.comp-camp-retreat.layout-split > div[style*="justify-content:center"] { justify-content: flex-start !important; }
.comp-camp-retreat.layout-split p[style*="margin-left:auto"] { margin-left: 0 !important; margin-right: 0 !important; }
.comp-camp-retreat.layout-overlay { text-align: center; }
.comp-camp-retreat.layout-overlay h2 { font-size: 2.6rem !important; }
.comp-camp-retreat.layout-overlay > div:first-child { max-width: 960px !important; }
@media (max-width: 760px) { .comp-camp-retreat.layout-split { grid-template-columns: 1fr; gap: 20px; text-align: center !important; } .comp-camp-retreat.layout-split > :not(:first-child), .comp-camp-retreat.layout-split > div:first-child { grid-column: 1; } .comp-camp-retreat.layout-overlay h2 { font-size: 2rem !important; } }

/* --- communion-schedule --- */
/* communion-schedule */
.comp-communion-schedule.layout-card { max-width: 480px; margin: 0 auto; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; }
.comp-communion-schedule.layout-card p { max-width: none !important; }
@media (max-width: 760px) { .comp-communion-schedule.layout-card { margin: 0 16px; } }

/* --- food-pantry --- */
/* food-pantry */
.comp-food-pantry.layout-split { display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.comp-food-pantry.layout-split h2 { text-align: left !important; }
.comp-food-pantry.layout-split > p { text-align: left !important; }
.comp-food-pantry.layout-split > div:last-child { max-width: none !important; margin: 0 !important; }
@media (max-width: 760px) { .comp-food-pantry.layout-split { grid-template-columns: 1fr; gap: 24px; } }

/* --- holiday-schedule --- */
/* holiday-schedule */
.comp-holiday-schedule.layout-list > div[style*="grid"] { display: block !important; max-width: 640px !important; }
.comp-holiday-schedule.layout-list > div[style*="grid"] > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.comp-holiday-schedule.layout-list > div[style*="grid"] > div h4 { margin: 0 !important; flex: 0 0 auto; }
.comp-holiday-schedule.layout-list > div[style*="grid"] > div p { margin: 0 !important; }
@media (max-width: 760px) { .comp-holiday-schedule.layout-list > div[style*="grid"] > div { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* --- campaign --- */
/* =================== CAMPAIGN =================== */
/* split: left-aligned text column beside the progress column */
.comp-campaign.layout-split { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: left; align-items: center; }
.comp-campaign.layout-split h2, .comp-campaign.layout-split .camp-sub { text-align: left; margin-left: 0; margin-right: 0; }
.comp-campaign.layout-split .camp-amounts { justify-content: flex-start; }

/* minimal: hide the big amount readout, keep just the bar */
.comp-campaign.layout-minimal .camp-amounts { display: none; }
.comp-campaign.layout-minimal h2 { font-size: 1.6rem; }
.comp-campaign.layout-minimal .camp-bar-wrap { background: rgba(255,255,255,0.08); }

@media (max-width: 760px) {
  .comp-campaign.layout-split { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== Social Media module ===== */
.comp-social-media { max-width: 1100px; margin: 0 auto; }
.comp-social-media > h2 { font-size: 2rem; text-align: center; margin-bottom: 8px; }
.comp-social-media .sm-sub { text-align: center; opacity: 0.7; margin-bottom: 28px; }
.comp-social-media .sm-follow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; }
.comp-social-media .sm-follow a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: rgba(128,128,128,0.14); border: 1px solid rgba(128,128,128,0.2); font-weight: 600; font-size: 0.9rem; text-decoration: none; color: inherit; transition: background 0.2s; }
.comp-social-media .sm-follow a:hover { background: rgba(128,128,128,0.26); }
.comp-social-media .sm-follow .sm-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.comp-social-media .sm-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.comp-social-media .sm-post { border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.05); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.2s; }
.comp-social-media .sm-post:hover { transform: translateY(-4px); }
.comp-social-media .sm-post .sm-img { height: 200px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.08); }
.comp-social-media .sm-post .sm-body { padding: 14px 16px; }
.comp-social-media .sm-post .sm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.8rem; opacity: 0.75; }
.comp-social-media .sm-post .sm-badge { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.72rem; font-weight: 700; flex: none; }
.comp-social-media .sm-post p { font-size: 0.9rem; line-height: 1.5; }
.comp-social-media .sm-embed { max-width: 680px; margin: 0 auto; }
/* list layout */
.comp-social-media.layout-list .sm-posts { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; }
.comp-social-media.layout-list .sm-post { flex-direction: row; }
.comp-social-media.layout-list .sm-post .sm-img { width: 160px; min-height: 120px; height: auto; flex: none; }
/* carousel layout */
.comp-social-media.layout-carousel .sm-posts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.comp-social-media.layout-carousel .sm-post { flex: 0 0 260px; scroll-snap-align: start; }
@media (max-width: 600px) {
  .comp-social-media.layout-list .sm-post { flex-direction: column; }
  .comp-social-media.layout-list .sm-post .sm-img { width: 100%; }
}

/* ===== Header logo: base + creative variations ===== */
.comp-header .hdr-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.comp-header .hdr-logo-wrap { display: inline-flex; position: relative; }
.comp-header .hdr-logo { height: 44px; width: auto; display: block; }
.comp-header .hdr-text { display: flex; flex-direction: column; line-height: 1.1; }
.comp-header .hdr-tagline { font-size: 0.72rem; opacity: 0.6; }

/* 1) Oversized & tilted — big logo, rotated; straightens + lifts on hover */
.comp-header.layout-logo-tilt { overflow: visible; }
.comp-header.layout-logo-tilt .hdr-logo { height: 86px; transform: rotate(-7deg); transform-origin: center; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.comp-header.layout-logo-tilt .hdr-brand:hover .hdr-logo { transform: rotate(0deg) scale(1.06); }

/* 2) Hanging sign — pivots from a nail and gently swings; faster on hover */
.comp-header.layout-logo-hanging { overflow: visible; }
.comp-header.layout-logo-hanging .hdr-logo-wrap { transform-origin: top center; animation: hdrSwing 3.4s ease-in-out infinite; margin-top: 14px; }
.comp-header.layout-logo-hanging .hdr-logo-wrap::before { content: ''; position: absolute; top: -13px; left: 50%; width: 2px; height: 13px; background: currentColor; opacity: 0.5; transform: translateX(-50%); }
.comp-header.layout-logo-hanging .hdr-logo-wrap::after { content: ''; position: absolute; top: -16px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; transform: translateX(-50%); }
.comp-header.layout-logo-hanging .hdr-logo { height: 52px; }
.comp-header.layout-logo-hanging .hdr-brand:hover .hdr-logo-wrap { animation-duration: 1.1s; }
@keyframes hdrSwing { 0%, 100% { transform: rotate(3.5deg); } 50% { transform: rotate(-3.5deg); } }

/* 3) Cabinet door — swings open on load (closed -> open); swings on hover */
.comp-header.layout-logo-cabinet .hdr-brand { perspective: 800px; }
.comp-header.layout-logo-cabinet .hdr-logo-wrap { transform-origin: left center; animation: hdrCabinetOpen 1.1s ease-out 0.25s both; }
.comp-header.layout-logo-cabinet .hdr-logo { height: 54px; }
.comp-header.layout-logo-cabinet .hdr-brand:hover .hdr-logo-wrap { animation: hdrCabinetSwing 1.6s ease-in-out infinite; }
@keyframes hdrCabinetOpen { from { transform: rotateY(-108deg); } to { transform: rotateY(0deg); } }
@keyframes hdrCabinetSwing { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(-62deg); } }

/* 4) Rise to the stars — logo rises + fades into a starfield as the page scrolls */
.comp-header.layout-logo-rise { overflow: visible; background-color: #0b1026; background-image:
  radial-gradient(2px 2px at 18% 35%, #ffffff, transparent),
  radial-gradient(1px 1px at 62% 68%, #ffffff, transparent),
  radial-gradient(1.5px 1.5px at 82% 22%, #cbd5ff, transparent),
  radial-gradient(1px 1px at 42% 82%, #ffffff, transparent),
  radial-gradient(1.5px 1.5px at 30% 60%, #e0e7ff, transparent); }
.comp-header.layout-logo-rise .hdr-name, .comp-header.layout-logo-rise .hdr-nav a { color: #f1f5f9 !important; }
.comp-header.layout-logo-rise .hdr-logo { height: 56px; transition: transform 0.2s; }
@supports (animation-timeline: scroll()) {
  .comp-header.layout-logo-rise .hdr-logo-wrap { animation: hdrRise linear both; animation-timeline: scroll(root); animation-range: 0 340px; }
  @keyframes hdrRise { to { transform: translateY(-64px) scale(1.7); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .comp-header.layout-logo-hanging .hdr-logo-wrap,
  .comp-header.layout-logo-cabinet .hdr-logo-wrap { animation: none; }
}

/* ===== Hero logo: creative variations (mirror the header treatments) =====
   Dual selectors: render.ejs puts layout-* on .comp-hero; builder preview puts
   it on the ancestor .component-wrapper. */
.comp-hero .hero-logo-wrap { display: inline-block; position: relative; }
.comp-hero .hero-logo-wrap .template-logo { margin-bottom: 0; }

/* Oversized tilt */
.comp-hero.layout-logo-tilt .template-logo,
.component-wrapper.layout-logo-tilt .comp-hero .template-logo { transform: rotate(-6deg); filter: drop-shadow(0 14px 28px rgba(0,0,0,0.45)); transition: transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.comp-hero.layout-logo-tilt:hover .template-logo,
.component-wrapper.layout-logo-tilt .comp-hero:hover .template-logo { transform: rotate(0deg) scale(1.05); }

/* Hanging sign */
.comp-hero.layout-logo-hanging .hero-logo-wrap,
.component-wrapper.layout-logo-hanging .comp-hero .hero-logo-wrap { transform-origin: top center; animation: hdrSwing 3.6s ease-in-out infinite; margin-top: 24px; margin-bottom: 24px; }
.comp-hero.layout-logo-hanging .hero-logo-wrap::before,
.component-wrapper.layout-logo-hanging .comp-hero .hero-logo-wrap::before { content: ''; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; background: currentColor; opacity: 0.45; transform: translateX(-50%); }
.comp-hero.layout-logo-hanging .hero-logo-wrap::after,
.component-wrapper.layout-logo-hanging .comp-hero .hero-logo-wrap::after { content: ''; position: absolute; top: -28px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.55; transform: translateX(-50%); }

/* Cabinet door */
.comp-hero.layout-logo-cabinet,
.component-wrapper.layout-logo-cabinet .comp-hero { perspective: 1100px; }
.comp-hero.layout-logo-cabinet .hero-logo-wrap,
.component-wrapper.layout-logo-cabinet .comp-hero .hero-logo-wrap { transform-origin: left center; animation: hdrCabinetOpen 1.2s ease-out 0.3s both; }

/* Rise to the stars */
.comp-hero.layout-logo-rise,
.component-wrapper.layout-logo-rise .comp-hero { background: #0b1026 !important; background-image:
  radial-gradient(2px 2px at 15% 25%, #ffffff, transparent),
  radial-gradient(1px 1px at 55% 60%, #ffffff, transparent),
  radial-gradient(1.5px 1.5px at 80% 30%, #cbd5ff, transparent),
  radial-gradient(1px 1px at 35% 75%, #ffffff, transparent),
  radial-gradient(1.5px 1.5px at 68% 18%, #e0e7ff, transparent),
  radial-gradient(1px 1px at 25% 50%, #ffffff, transparent) !important; color: #f1f5f9 !important; }
@supports (animation-timeline: scroll()) {
  .comp-hero.layout-logo-rise .hero-logo-wrap,
  .component-wrapper.layout-logo-rise .comp-hero .hero-logo-wrap { animation: heroRise linear both; animation-timeline: scroll(root); animation-range: 0 420px; }
  @keyframes heroRise { to { transform: translateY(-90px) scale(1.5); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .comp-hero.layout-logo-hanging .hero-logo-wrap,
  .component-wrapper.layout-logo-hanging .comp-hero .hero-logo-wrap,
  .comp-hero.layout-logo-cabinet .hero-logo-wrap,
  .component-wrapper.layout-logo-cabinet .comp-hero .hero-logo-wrap { animation: none; }
}

/* ===== Universal module background media (image or video) ===== */
.module-bg-wrap { position: relative; overflow: hidden; }
.module-bg-wrap > .module-bg-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background-size: cover; background-position: center;
  z-index: 0; pointer-events: none;
}
.module-bg-wrap > .module-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none; }
.module-bg-wrap > .module-bg-content { position: relative; z-index: 2; }

/* Parallax: background drifts slower than the page as the module scrolls
   through the viewport. Scroll-driven animation (same approach as the
   logo-rise header); the scale keeps edges covered through the drift. */
.module-bg-wrap > .module-bg-parallax { transform: scale(1.2); }
@supports (animation-timeline: view()) {
  .module-bg-wrap > .module-bg-parallax {
    animation: moduleBgDrift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: transform;
  }
  @keyframes moduleBgDrift {
    from { transform: translateY(-8%) scale(1.2); }
    to   { transform: translateY(8%)  scale(1.2); }
  }
}

/* ===== Big Options (optionsGrid) — oversized clickable image tiles ===== */
.comp-options-grid > h2 { text-align: center; margin: 0 0 28px; }
.comp-options-grid .opt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1200px; margin: 0 auto;
}
.opt-tile {
  position: relative; display: block; overflow: hidden;
  min-height: var(--opt-h, 42vh);
  border-radius: 16px; text-decoration: none; color: #fff;
  background: #1e293b; isolation: isolate;
}
.opt-tile .opt-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1);
}
.opt-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.05) 100%);
  transition: background 0.35s ease;
}
.opt-tile .opt-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 30px 28px;
  transform: translateY(0); transition: transform 0.35s ease;
}
.opt-tile .opt-label { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.opt-tile .opt-sub { display: block; margin-top: 6px; font-size: 1rem; opacity: 0.9; }
.opt-tile .opt-arrow {
  display: inline-block; margin-top: 14px; font-weight: 700; font-size: 0.95rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.opt-tile:hover .opt-bg { transform: scale(1.06); }
.opt-tile:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.12) 100%); }
.opt-tile:hover .opt-body { transform: translateY(-6px); }
.opt-tile:hover .opt-arrow { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { .opt-tile { min-height: 34vh; } }


/* ============================================================
   Additional module styles — feedback, campaign, hero,
   announcements, welcome-video, kids-ministry (added 2026-06-08)
   ============================================================ */

/* hero — Cinematic Zoom (animated) */

/* Clip the zooming backdrop and give content its own stacking context.
   Dual selectors: render.ejs puts layout-* on .comp-hero; builder preview
   puts it on the ancestor .component-wrapper. */
.comp-hero.layout-cinematic-zoom,
.component-wrapper.layout-cinematic-zoom .comp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Ken-Burns layer: a ::before that inherits the inline background (the
   darkening gradient + photo set on .comp-hero) and slowly scales/pans.
   The text stays perfectly still because only this pseudo-element moves. */
.comp-hero.layout-cinematic-zoom::before,
.component-wrapper.layout-cinematic-zoom .comp-hero::before {
  content: '';
  position: absolute;
  inset: -2%;                 /* slight bleed so pans never reveal an edge */
  z-index: 0;
  background: inherit;        /* copies the inline gradient+image / color */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  transform: scale(1.04);
  will-change: transform;
  animation: cinematic_zoom_main 28s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Lift all foreground content above the moving backdrop.
   render.ejs wraps content in .hero-text; preview emits h1/p/.hero-btn
   (and the optional logo) as direct children of .comp-hero — cover both. */
.comp-hero.layout-cinematic-zoom > .hero-text,
.component-wrapper.layout-cinematic-zoom .comp-hero > .hero-text,
.comp-hero.layout-cinematic-zoom > h1,
.component-wrapper.layout-cinematic-zoom .comp-hero > h1,
.comp-hero.layout-cinematic-zoom > p,
.component-wrapper.layout-cinematic-zoom .comp-hero > p,
.comp-hero.layout-cinematic-zoom > .hero-btn,
.component-wrapper.layout-cinematic-zoom .comp-hero > .hero-btn,
.comp-hero.layout-cinematic-zoom > .hero-logo-wrap,
.component-wrapper.layout-cinematic-zoom .comp-hero > .hero-logo-wrap {
  position: relative;
  z-index: 1;
}

/* A whisper of motion on the headline so it feels alive on first paint,
   without competing with the slow backdrop. */
.comp-hero.layout-cinematic-zoom .hero-text h1,
.component-wrapper.layout-cinematic-zoom .comp-hero h1 {
  animation: cinematic_zoom_settle 1.2s ease-out 0.1s both;
}

/* Scroll-aware enhancement: as the hero passes through the viewport the
   backdrop drifts, matching the file's parallax convention. Falls back to
   the looping Ken-Burns above when scroll timelines aren't supported. */
@supports (animation-timeline: view()) {
  .comp-hero.layout-cinematic-zoom::before,
  .component-wrapper.layout-cinematic-zoom .comp-hero::before {
    animation: cinematic_zoom_main 28s ease-in-out infinite alternate,
               cinematic_zoom_drift linear both;
    animation-timeline: auto, view();
    animation-range: normal, cover 0% cover 100%;
  }
}

@keyframes cinematic_zoom_main {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.12) translate3d(-1.5%, 1%, 0); }
  100% { transform: scale(1.16) translate3d(1.5%, -1%, 0); }
}

@keyframes cinematic_zoom_drift {
  from { transform: scale(1.1) translate3d(0, -3%, 0); }
  to   { transform: scale(1.1) translate3d(0, 3%, 0); }
}

@keyframes cinematic_zoom_settle {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Accessibility: stop all motion but keep the backdrop fully covered. */
@media (prefers-reduced-motion: reduce) {
  .comp-hero.layout-cinematic-zoom::before,
  .component-wrapper.layout-cinematic-zoom .comp-hero::before {
    animation: none;
    transform: scale(1.04);
  }
  .comp-hero.layout-cinematic-zoom .hero-text h1,
  .component-wrapper.layout-cinematic-zoom .comp-hero h1 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* hero — Kinetic Reveal (animated) */

/* Establish a clean stacking context + smooth GPU compositing for the hero.
   Scoped to BOTH the public render (.comp-hero.layout-kinetic-reveal)
   and the builder preview (.component-wrapper.layout-kinetic-reveal .comp-hero). */
.comp-hero.layout-kinetic-reveal,
.component-wrapper.layout-kinetic-reveal .comp-hero {
  position: relative;
  overflow: hidden;
}

/* Subtle accent sweep behind the content so the reveal feels intentional,
   not just text appearing. Uses ::before (no markup change) and animates only
   background-position + opacity — GPU friendly. */
.comp-hero.layout-kinetic-reveal::before,
.component-wrapper.layout-kinetic-reveal .comp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  opacity: 0;
  animation: kinetic_reveal_sweep 1500ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  will-change: background-position, opacity;
}

/* Keep the actual content above the sweep. */
.comp-hero.layout-kinetic-reveal .hero-text,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-text,
.comp-hero.layout-kinetic-reveal > h1,
.comp-hero.layout-kinetic-reveal > p,
.comp-hero.layout-kinetic-reveal > .hero-btn,
.component-wrapper.layout-kinetic-reveal .comp-hero > h1,
.component-wrapper.layout-kinetic-reveal .comp-hero > p,
.component-wrapper.layout-kinetic-reveal .comp-hero > .hero-btn {
  position: relative;
  z-index: 1;
}

/* Shared resting state for the staggered elements: start lifted-down + hidden.
   Targeted as descendants so it works whether they sit inside .hero-text
   (public render) or directly under .comp-hero (builder preview). */
.comp-hero.layout-kinetic-reveal .hero-logo-wrap,
.comp-hero.layout-kinetic-reveal h1,
.comp-hero.layout-kinetic-reveal p,
.comp-hero.layout-kinetic-reveal .hero-btn,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-logo-wrap,
.component-wrapper.layout-kinetic-reveal .comp-hero h1,
.component-wrapper.layout-kinetic-reveal .comp-hero p,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-btn {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  animation: kinetic_reveal_rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* Optional logo leads the sequence when present. */
.comp-hero.layout-kinetic-reveal .hero-logo-wrap,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-logo-wrap {
  animation-delay: 80ms;
}

/* Headline first. */
.comp-hero.layout-kinetic-reveal h1,
.component-wrapper.layout-kinetic-reveal .comp-hero h1 {
  animation-delay: 220ms;
}

/* Subtext second. */
.comp-hero.layout-kinetic-reveal p,
.component-wrapper.layout-kinetic-reveal .comp-hero p {
  animation-delay: 400ms;
}

/* Button last — slightly snappier with a faint settle. */
.comp-hero.layout-kinetic-reveal .hero-btn,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-btn {
  animation-name: kinetic_reveal_rise_btn;
  animation-duration: 760ms;
  animation-delay: 600ms;
}

/* Tasteful hover lift on the CTA (transform only). */
.comp-hero.layout-kinetic-reveal .hero-btn,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-btn {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.comp-hero.layout-kinetic-reveal .hero-btn:hover,
.component-wrapper.layout-kinetic-reveal .comp-hero .hero-btn:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

@keyframes kinetic_reveal_rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes kinetic_reveal_rise_btn {
  0%   { opacity: 0; transform: translate3d(0, 24px, 0); }
  70%  { opacity: 1; transform: translate3d(0, -3px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes kinetic_reveal_sweep {
  0%   { opacity: 0; background-position: 0% 50%; }
  35%  { opacity: 1; }
  100% { opacity: 0; background-position: 100% 50%; }
}

/* Accessibility: respect reduced-motion — show everything instantly, no transient transforms. */
@media (prefers-reduced-motion: reduce) {
  .comp-hero.layout-kinetic-reveal::before,
  .component-wrapper.layout-kinetic-reveal .comp-hero::before {
    animation: none;
    opacity: 0;
  }
  .comp-hero.layout-kinetic-reveal .hero-logo-wrap,
  .comp-hero.layout-kinetic-reveal h1,
  .comp-hero.layout-kinetic-reveal p,
  .comp-hero.layout-kinetic-reveal .hero-btn,
  .component-wrapper.layout-kinetic-reveal .comp-hero .hero-logo-wrap,
  .component-wrapper.layout-kinetic-reveal .comp-hero h1,
  .component-wrapper.layout-kinetic-reveal .comp-hero p,
  .component-wrapper.layout-kinetic-reveal .comp-hero .hero-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .comp-hero.layout-kinetic-reveal .hero-btn:hover,
  .component-wrapper.layout-kinetic-reveal .comp-hero .hero-btn:hover {
    transform: none;
  }
}

/* hero — Aurora (animated) */

/* Wrapper: clip the oversized aurora layer, keep stacking context */
.comp-hero.layout-aurora,
.component-wrapper.layout-aurora .comp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ::before — oversized, slowly drifting multi-color aurora */
.comp-hero.layout-aurora::before,
.component-wrapper.layout-aurora .comp-hero::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 0;
  background-image:
    radial-gradient(40% 55% at 18% 28%, rgba(96, 165, 250, 0.55) 0%, rgba(96, 165, 250, 0) 60%),
    radial-gradient(45% 60% at 82% 22%, rgba(167, 139, 250, 0.50) 0%, rgba(167, 139, 250, 0) 62%),
    radial-gradient(50% 55% at 72% 78%, rgba(45, 212, 191, 0.45) 0%, rgba(45, 212, 191, 0) 60%),
    radial-gradient(45% 55% at 25% 80%, rgba(244, 114, 182, 0.42) 0%, rgba(244, 114, 182, 0) 62%),
    linear-gradient(120deg, rgba(99, 102, 241, 0.30), rgba(16, 185, 129, 0.22), rgba(217, 70, 239, 0.26));
  background-size: 220% 220%;
  background-position: 0% 50%;
  filter: blur(34px) saturate(118%);
  opacity: 0.92;
  will-change: background-position, transform;
  animation: aurora_drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ::after — gentle veil so any heading color stays legible over the colors */
.comp-hero.layout-aurora::after,
.component-wrapper.layout-aurora .comp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}

/* Lift all hero content above the aurora layers */
.comp-hero.layout-aurora .hero-text,
.component-wrapper.layout-aurora .comp-hero .hero-text,
.comp-hero.layout-aurora .hero-logo-wrap,
.component-wrapper.layout-aurora .comp-hero .hero-logo-wrap,
.comp-hero.layout-aurora > h1,
.component-wrapper.layout-aurora .comp-hero > h1,
.comp-hero.layout-aurora > p,
.component-wrapper.layout-aurora .comp-hero > p,
.comp-hero.layout-aurora > .hero-btn,
.component-wrapper.layout-aurora .comp-hero > .hero-btn {
  position: relative;
  z-index: 1;
}

/* Keep heading + subheading crisp against the moving wash */
.comp-hero.layout-aurora h1,
.component-wrapper.layout-aurora .comp-hero h1 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.30);
}
.comp-hero.layout-aurora p,
.component-wrapper.layout-aurora .comp-hero p {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
}

/* Button gains a soft, slowly breathing glow that echoes the aurora */
.comp-hero.layout-aurora .hero-btn,
.component-wrapper.layout-aurora .comp-hero .hero-btn {
  animation: aurora_glow 6s ease-in-out infinite;
  will-change: box-shadow, transform;
}

@keyframes aurora_drift {
  0%   { background-position: 0% 50%;   transform: translate3d(0, 0, 0) scale(1); }
  50%  { background-position: 100% 50%; transform: translate3d(0, -1.5%, 0) scale(1.04); }
  100% { background-position: 0% 50%;   transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes aurora_glow {
  0%, 100% { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); transform: translateY(0); }
  50%      { box-shadow: 0 10px 30px rgba(99, 102, 241, 0.40); transform: translateY(-1px); }
}

/* Accessibility: stop all motion and reset transient transforms */
@media (prefers-reduced-motion: reduce) {
  .comp-hero.layout-aurora::before,
  .component-wrapper.layout-aurora .comp-hero::before,
  .comp-hero.layout-aurora .hero-btn,
  .component-wrapper.layout-aurora .comp-hero .hero-btn {
    animation: none;
  }
  .comp-hero.layout-aurora::before,
  .component-wrapper.layout-aurora .comp-hero::before {
    transform: none;
    background-position: 50% 50%;
  }
  .comp-hero.layout-aurora .hero-btn,
  .component-wrapper.layout-aurora .comp-hero .hero-btn {
    transform: none;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  }
}

/* announcements — News Ticker (animated) */

/* Wrapper: clip the ticker and give it a relative box for edge fades */
.comp-announcements.layout-news-ticker,
.component-wrapper.layout-news-ticker .comp-announcements {
  position: relative;
  overflow: hidden;
}

/* Soft fade masks at both edges so cards slide in/out gracefully */
.comp-announcements.layout-news-ticker::before,
.comp-announcements.layout-news-ticker::after,
.component-wrapper.layout-news-ticker .comp-announcements::before,
.component-wrapper.layout-news-ticker .comp-announcements::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  min-width: 48px;
  z-index: 3;
  pointer-events: none;
}
.comp-announcements.layout-news-ticker::before,
.component-wrapper.layout-news-ticker .comp-announcements::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
          mask-image: linear-gradient(90deg, #000, transparent);
}
.comp-announcements.layout-news-ticker::after,
.component-wrapper.layout-news-ticker .comp-announcements::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.18), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
          mask-image: linear-gradient(270deg, #000, transparent);
}

/* The grid container becomes a single non-wrapping horizontal track.
   Targeted as the direct child div of .comp-announcements so it matches BOTH
   the public inline-styled grid div AND the preview's .ann-grid. */
.comp-announcements.layout-news-ticker > div,
.component-wrapper.layout-news-ticker .comp-announcements > div {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  width: max-content;
  max-width: none !important;
  margin: 0 !important;
  align-items: stretch;
  gap: 20px;
  padding: 4px 24px;
  animation: news_ticker_scroll 38s linear infinite;
  will-change: transform;
}

/* Pause the scroll when a visitor hovers the ticker so they can read */
.comp-announcements.layout-news-ticker:hover > div,
.component-wrapper.layout-news-ticker .comp-announcements:hover > div {
  animation-play-state: paused;
}

/* Each card: fixed comfortable width, no shrink, subtle lift */
.comp-announcements.layout-news-ticker > div > div,
.component-wrapper.layout-news-ticker .comp-announcements > div > div {
  flex: 0 0 auto;
  width: 300px;
  text-align: left;
  border-radius: 12px;
  transform: translateZ(0);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.comp-announcements.layout-news-ticker > div > div:hover,
.component-wrapper.layout-news-ticker .comp-announcements > div > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.22);
}

/* Heading stays centered and clear of the moving track */
.comp-announcements.layout-news-ticker > h2,
.component-wrapper.layout-news-ticker .comp-announcements > h2 {
  position: relative;
  z-index: 4;
}

/* Continuous right-to-left loop. The track only contains one set of cards,
   so we ease opacity at the wrap point to mask the reset cleanly. */
@keyframes news_ticker_scroll {
  0%   { transform: translateX(0); }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateX(calc(-100% + 100vw)); }
}

/* Accessibility: stop all motion and clear transient transforms */
@media (prefers-reduced-motion: reduce) {
  .comp-announcements.layout-news-ticker > div,
  .component-wrapper.layout-news-ticker .comp-announcements > div {
    animation: none !important;
    flex-wrap: wrap !important;
    justify-content: center;
    transform: none !important;
  }
  .comp-announcements.layout-news-ticker > div > div,
  .component-wrapper.layout-news-ticker .comp-announcements > div > div {
    transform: none !important;
    transition: none;
  }
  .comp-announcements.layout-news-ticker:hover > div > div,
  .component-wrapper.layout-news-ticker .comp-announcements:hover > div > div {
    transform: none !important;
  }
}

/* announcements — Cascade Flip (animated) */

/* Perspective lives on the grid so each card flips in 3D.
   Public render (render.ejs): grid is `.comp-announcements > div`, cards are `> div > div` (unclassed inline styles).
   Builder preview (preview.ejs): layout class on `.component-wrapper`; grid `.ann-grid`, cards `.ann-card`. */
.comp-announcements.layout-cascade-flip > div,
.component-wrapper.layout-cascade-flip .comp-announcements .ann-grid {
  perspective: 1200px;
}

/* Heading: a gentle settle so it doesn't pop in before the cards. */
.comp-announcements.layout-cascade-flip > h2,
.component-wrapper.layout-cascade-flip .comp-announcements > h2 {
  animation: cascade_flip_head 0.5s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}

/* Cards: start folded back along the top edge, then flip up into place. */
.comp-announcements.layout-cascade-flip > div > div,
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card {
  transform-origin: top center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: cascade_flip_card 0.62s cubic-bezier(0.18, 0.74, 0.22, 1) both;
}

/* Stagger via nth-child so the cards cascade one after another. */
.comp-announcements.layout-cascade-flip > div > div:nth-child(1),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(1) { animation-delay: 0.05s; }
.comp-announcements.layout-cascade-flip > div > div:nth-child(2),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(2) { animation-delay: 0.16s; }
.comp-announcements.layout-cascade-flip > div > div:nth-child(3),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(3) { animation-delay: 0.27s; }
.comp-announcements.layout-cascade-flip > div > div:nth-child(4),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(4) { animation-delay: 0.38s; }
.comp-announcements.layout-cascade-flip > div > div:nth-child(5),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(5) { animation-delay: 0.49s; }
.comp-announcements.layout-cascade-flip > div > div:nth-child(6),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(6) { animation-delay: 0.60s; }
/* Cap the cascade so long lists don't drag — everything past 6 shares the last beat. */
.comp-announcements.layout-cascade-flip > div > div:nth-child(n+7),
.component-wrapper.layout-cascade-flip .comp-announcements .ann-card:nth-child(n+7) { animation-delay: 0.70s; }

@keyframes cascade_flip_card {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateX(-90deg) translateY(14px);
  }
  60% {
    opacity: 1;
    transform: perspective(1200px) rotateX(8deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0);
  }
}

@keyframes cascade_flip_head {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility: no flip, no stagger, no transient transforms — show cards as-is. */
@media (prefers-reduced-motion: reduce) {
  .comp-announcements.layout-cascade-flip > h2,
  .component-wrapper.layout-cascade-flip .comp-announcements > h2,
  .comp-announcements.layout-cascade-flip > div > div,
  .component-wrapper.layout-cascade-flip .comp-announcements .ann-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* announcements — Spotlight Pulse (animated) */

/* Wrapper — establish a CSS var for the glow color and stacking context.
   Public render:  .comp-announcements.layout-spotlight-pulse
   Builder preview: .component-wrapper.layout-spotlight-pulse .comp-announcements */
.comp-announcements.layout-spotlight-pulse,
.component-wrapper.layout-spotlight-pulse .comp-announcements {
  --spl-glow: 99, 102, 241;          /* soft indigo accent, readable on light & dark */
  --spl-glow-strong: 129, 140, 248;
  position: relative;
}

/* Heading gets a gentle settle-in so the eye starts at the top before the cards pulse */
.comp-announcements.layout-spotlight-pulse > h2,
.component-wrapper.layout-spotlight-pulse .comp-announcements > h2 {
  animation: spotlight_pulse_head 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

/* CARDS — two shapes for the two contexts:
   • Public render (render.ejs default layout): inline-styled grid > inline-styled card divs (no .ann-card class)
   • Builder preview (preview.ejs): .ann-grid > .ann-card */
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card {
  position: relative;
  overflow: visible;
  transform: translateZ(0);                 /* promote to its own layer for smooth box-shadow anim */
  animation: spotlight_pulse_card 4.2s ease-in-out infinite both;
  will-change: box-shadow, transform;
}

/* Staggered start so the glow sweeps across the cards in sequence (left→right, row by row) */
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(1),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(1) { animation-delay: 0s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(2),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(2) { animation-delay: 0.55s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(3),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(3) { animation-delay: 1.1s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(4),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(4) { animation-delay: 1.65s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(5),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(5) { animation-delay: 2.2s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(6),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(6) { animation-delay: 2.75s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(n+7),
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(n+7) { animation-delay: 3.3s; }

/* A spotlight ring drawn with ::before so no markup is needed; it brightens with the pulse */
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(var(--spl-glow-strong), 0);
  animation: spotlight_pulse_ring 4.2s ease-in-out infinite both;
  /* inherit the same per-card delay via animation-delay set below */
}
/* Mirror the stagger onto the ring so border + shadow pulse together */
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(1)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(1)::before { animation-delay: 0s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(2)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(2)::before { animation-delay: 0.55s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(3)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(3)::before { animation-delay: 1.1s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(4)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(4)::before { animation-delay: 1.65s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(5)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(5)::before { animation-delay: 2.2s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(6)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(6)::before { animation-delay: 2.75s; }
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:nth-child(n+7)::before,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:nth-child(n+7)::before { animation-delay: 3.3s; }

/* Hover lets a visitor "hold" the spotlight on a card they're reading */
.comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div:hover,
.component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card:hover {
  animation-play-state: paused;
  box-shadow: 0 10px 30px rgba(var(--spl-glow-strong), 0.32);
  transform: translateY(-2px);
}

/* Keyframes — uniquely prefixed with the layout id */
@keyframes spotlight_pulse_head {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spotlight_pulse_card {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transform: scale(1) translateZ(0);
  }
  /* the "lit" moment — soft accent glow swells, card lifts a hair */
  18% {
    box-shadow:
      0 0 0 rgba(var(--spl-glow), 0),
      0 12px 34px rgba(var(--spl-glow-strong), 0.34);
    transform: scale(1.018) translateZ(0);
  }
  40% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transform: scale(1) translateZ(0);
  }
}

@keyframes spotlight_pulse_ring {
  0%, 100% { border-color: rgba(var(--spl-glow-strong), 0); opacity: 0; }
  18%      { border-color: rgba(var(--spl-glow-strong), 0.55); opacity: 1; }
  40%      { border-color: rgba(var(--spl-glow-strong), 0); opacity: 0; }
}

/* Accessibility — honor reduced-motion: no pulsing, no transient transforms */
@media (prefers-reduced-motion: reduce) {
  .comp-announcements.layout-spotlight-pulse > h2,
  .component-wrapper.layout-spotlight-pulse .comp-announcements > h2,
  .comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div,
  .component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card,
  .comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div::before,
  .component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card::before {
    animation: none !important;
    transform: none !important;
  }
  /* keep a static, tasteful resting glow so the style still reads as "spotlight" */
  .comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div,
  .component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card {
    box-shadow: 0 4px 16px rgba(var(--spl-glow-strong), 0.18);
  }
  .comp-announcements.layout-spotlight-pulse > div[style*="grid"] > div::before,
  .component-wrapper.layout-spotlight-pulse .comp-announcements .ann-card::before {
    border-color: rgba(var(--spl-glow-strong), 0.22);
    opacity: 1;
  }
}

/* welcome-video — Neon Frame (animated) */

/* Wrapper: define the accent + center the media column, both contexts */
.comp-welcome-video.layout-neon-frame,
.component-wrapper.layout-neon-frame .comp-welcome-video {
  --nf-accent: #5b8cff;
  --nf-accent-soft: rgba(91, 140, 255, 0.55);
  --nf-accent-faint: rgba(91, 140, 255, 0.22);
}

/* PREVIEW context: the media lives in .wv-embed / .wv-poster (classed). */
.component-wrapper.layout-neon-frame .comp-welcome-video .wv-embed,
.component-wrapper.layout-neon-frame .comp-welcome-video .wv-poster {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--nf-accent-faint);
  box-shadow:
    0 0 0 1px var(--nf-accent-faint),
    0 0 14px 1px var(--nf-accent-faint),
    0 0 30px 4px rgba(91, 140, 255, 0.10);
  animation: neon_frame_breathe 4.6s ease-in-out infinite;
  transform: translateZ(0);
}

/* PUBLIC RENDER context: the media wrapper is an inline-styled div with
   overflow:hidden (which would clip an outer box-shadow), so the glow is
   drawn on the iframe / img themselves via a non-clipped drop-shadow filter,
   plus an inset ring border for definition. */
.comp-welcome-video.layout-neon-frame iframe,
.comp-welcome-video.layout-neon-frame .wv-embed iframe,
.comp-welcome-video.layout-neon-frame img,
.comp-welcome-video.layout-neon-frame .wv-poster img {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--nf-accent-faint);
  animation: neon_frame_glow 4.6s ease-in-out infinite;
  transform: translateZ(0);
}

/* Keep the preview's classed wrappers from double-glowing on their inner media */
.component-wrapper.layout-neon-frame .comp-welcome-video .wv-embed iframe,
.component-wrapper.layout-neon-frame .comp-welcome-video .wv-poster img {
  box-shadow: none;
  animation: none;
}

/* Subtle breathing box-shadow ring (used on classed wrappers in preview) */
@keyframes neon_frame_breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--nf-accent-faint),
      0 0 12px 1px var(--nf-accent-faint),
      0 0 26px 3px rgba(91, 140, 255, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--nf-accent-soft),
      0 0 22px 3px var(--nf-accent-soft),
      0 0 46px 8px rgba(91, 140, 255, 0.16);
  }
}

/* Drop-shadow glow that escapes ancestor overflow:hidden (public render media) */
@keyframes neon_frame_glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px var(--nf-accent-faint))
      drop-shadow(0 0 14px rgba(91, 140, 255, 0.10));
  }
  50% {
    filter:
      drop-shadow(0 0 10px var(--nf-accent-soft))
      drop-shadow(0 0 26px rgba(91, 140, 255, 0.18));
  }
}

/* Accessibility: hold a tasteful static ring, no motion */
@media (prefers-reduced-motion: reduce) {
  .component-wrapper.layout-neon-frame .comp-welcome-video .wv-embed,
  .component-wrapper.layout-neon-frame .comp-welcome-video .wv-poster {
    animation: none;
    box-shadow:
      0 0 0 1px var(--nf-accent-soft),
      0 0 16px 2px var(--nf-accent-faint);
  }
  .comp-welcome-video.layout-neon-frame iframe,
  .comp-welcome-video.layout-neon-frame .wv-embed iframe,
  .comp-welcome-video.layout-neon-frame img,
  .comp-welcome-video.layout-neon-frame .wv-poster img {
    animation: none;
    filter: drop-shadow(0 0 8px var(--nf-accent-faint));
  }
}

/* welcome-video — Curtain Rise (animated) */

/* On load the heading, copy and video frame rise from slightly below and
   fade in (translateY + opacity), staggered. Centered, tasteful, readable.
   Scoped to BOTH the public render (.comp-welcome-video.layout-curtain-rise)
   and the builder preview (.component-wrapper.layout-curtain-rise .comp-welcome-video). */

/* Wrapper: center everything and give a calm stage for the rising elements */
.comp-welcome-video.layout-curtain-rise,
.component-wrapper.layout-curtain-rise .comp-welcome-video {
  text-align: center;
  overflow: hidden; /* keeps the rise/sheen from overflowing the section */
}

/* Heading */
.comp-welcome-video.layout-curtain-rise > h2,
.component-wrapper.layout-curtain-rise .comp-welcome-video > h2 {
  margin-left: auto;
  margin-right: auto;
  transform: translateY(28px);
  opacity: 0;
  animation: curtain_rise_in 0.8s cubic-bezier(0.22, 0.68, 0.18, 1) 0.05s both;
  will-change: transform, opacity;
}

/* Subheading / caption copy (bare <p> in render, .wv-sub / .wv-caption in preview) */
.comp-welcome-video.layout-curtain-rise > p,
.comp-welcome-video.layout-curtain-rise > .wv-sub,
.comp-welcome-video.layout-curtain-rise > .wv-caption,
.component-wrapper.layout-curtain-rise .comp-welcome-video > p,
.component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-sub,
.component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-caption {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(28px);
  opacity: 0;
  animation: curtain_rise_in 0.8s cubic-bezier(0.22, 0.68, 0.18, 1) 0.18s both;
  will-change: transform, opacity;
}

/* The video frame — covers render's bare media <div>, the centered-layout
   max-width wrapper, and preview's .wv-embed / .wv-poster wrappers */
.comp-welcome-video.layout-curtain-rise > div,
.comp-welcome-video.layout-curtain-rise > .wv-embed,
.comp-welcome-video.layout-curtain-rise > .wv-poster,
.component-wrapper.layout-curtain-rise .comp-welcome-video > div,
.component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-embed,
.component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-poster {
  position: relative;
  transform: translateY(36px);
  opacity: 0;
  animation: curtain_rise_frame 0.95s cubic-bezier(0.2, 0.7, 0.15, 1) 0.32s both;
  will-change: transform, opacity;
}

/* Tasteful one-time sheen sweeping across the frame as it settles (pseudo-element,
   no markup change). Pointer-events none so it never blocks the video. */
.comp-welcome-video.layout-curtain-rise > .wv-embed::after,
.comp-welcome-video.layout-curtain-rise > .wv-poster::after,
.component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-embed::after,
.component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%);
  background-size: 280% 100%;
  background-position: 130% 0;
  opacity: 0;
  animation: curtain_rise_sheen 1.1s ease-out 0.95s both;
}

/* Call-to-action button (anchor in render centered/default branches,
   plus preview's direct-child wvBtn anchor) */
.comp-welcome-video.layout-curtain-rise > a,
.comp-welcome-video.layout-curtain-rise > div > a,
.component-wrapper.layout-curtain-rise .comp-welcome-video > a,
.component-wrapper.layout-curtain-rise .comp-welcome-video > div > a {
  animation: curtain_rise_in 0.8s cubic-bezier(0.22, 0.68, 0.18, 1) 0.5s both;
  will-change: transform, opacity;
}

@keyframes curtain_rise_in {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes curtain_rise_frame {
  0%   { transform: translateY(36px); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes curtain_rise_sheen {
  0%   { opacity: 0;   background-position: 130% 0; }
  20%  { opacity: 1; }
  100% { opacity: 0;   background-position: -30% 0; }
}

/* Accessibility: honor reduced-motion — show content at rest, no transforms/sheen */
@media (prefers-reduced-motion: reduce) {
  .comp-welcome-video.layout-curtain-rise > h2,
  .comp-welcome-video.layout-curtain-rise > p,
  .comp-welcome-video.layout-curtain-rise > .wv-sub,
  .comp-welcome-video.layout-curtain-rise > .wv-caption,
  .comp-welcome-video.layout-curtain-rise > div,
  .comp-welcome-video.layout-curtain-rise > .wv-embed,
  .comp-welcome-video.layout-curtain-rise > .wv-poster,
  .comp-welcome-video.layout-curtain-rise > a,
  .comp-welcome-video.layout-curtain-rise > div > a,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > h2,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > p,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-sub,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-caption,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > div,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-embed,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-poster,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > a,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > div > a {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .comp-welcome-video.layout-curtain-rise > .wv-embed::after,
  .comp-welcome-video.layout-curtain-rise > .wv-poster::after,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-embed::after,
  .component-wrapper.layout-curtain-rise .comp-welcome-video > .wv-poster::after {
    animation: none;
    opacity: 0;
  }
}

/* kids-ministry — Bouncy Pop (animated) */
/* Cards target BOTH the preview's classed .km-card AND the public render's
   unclassed inline-styled grid children (> div[style*="grid"] > div).
   Layout class is on .comp-kids-ministry in public render and on the ancestor
   .component-wrapper in the builder preview, so every rule is written twice. */

/* Card resting state: hover affordance + transform base for the lift/tilt */
.comp-kids-ministry.layout-bouncy-pop .km-card,
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div {
  transform-origin: center bottom;
  will-change: transform, box-shadow;
  transition: transform 0.32s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.32s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

/* Bounce/pop in on load, staggered per card */
.comp-kids-ministry.layout-bouncy-pop .km-card,
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div {
  animation: bouncy_pop_in 0.62s cubic-bezier(.34,1.56,.64,1) both;
}

/* Staggered entrance delays (cycles every 6 so large grids stay snappy) */
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(6n+1),
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(6n+1),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(6n+1),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(6n+1) { animation-delay: 0.05s; }
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(6n+2),
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(6n+2),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(6n+2),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(6n+2) { animation-delay: 0.14s; }
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(6n+3),
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(6n+3),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(6n+3),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(6n+3) { animation-delay: 0.23s; }
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(6n+4),
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(6n+4),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(6n+4),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(6n+4) { animation-delay: 0.32s; }
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(6n+5),
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(6n+5),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(6n+5),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(6n+5) { animation-delay: 0.41s; }
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(6n+6),
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(6n+6),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(6n+6),
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(6n+6) { animation-delay: 0.50s; }

/* Gentle lift + playful tilt on hover */
.comp-kids-ministry.layout-bouncy-pop .km-card:hover,
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:hover,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:hover,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:hover {
  transform: translateY(-8px) scale(1.035) rotate(-1.4deg);
  box-shadow: 0 18px 34px rgba(0,0,0,0.18);
}

/* Alternate the hover tilt direction for a livelier, less uniform feel */
.comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(even):hover,
.comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(even):hover,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(even):hover,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(even):hover {
  transform: translateY(-8px) scale(1.035) rotate(1.4deg);
}

/* Call-to-action button: subtle pop on hover to match the playful tone */
.comp-kids-ministry.layout-bouncy-pop a[href],
.component-wrapper.layout-bouncy-pop .comp-kids-ministry a[href] {
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease;
}
.comp-kids-ministry.layout-bouncy-pop a[href]:hover,
.component-wrapper.layout-bouncy-pop .comp-kids-ministry a[href]:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

@keyframes bouncy_pop_in {
  0%   { opacity: 0; transform: scale(0.55) translateY(28px); }
  55%  { opacity: 1; transform: scale(1.08) translateY(-6px); }
  78%  { transform: scale(0.97) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .comp-kids-ministry.layout-bouncy-pop .km-card,
  .comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div,
  .comp-kids-ministry.layout-bouncy-pop .km-card:hover,
  .comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:hover,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:hover,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:hover,
  .comp-kids-ministry.layout-bouncy-pop .km-card:nth-child(even):hover,
  .comp-kids-ministry.layout-bouncy-pop > div[style*="grid"] > div:nth-child(even):hover,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry .km-card:nth-child(even):hover,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry > div[style*="grid"] > div:nth-child(even):hover,
  .comp-kids-ministry.layout-bouncy-pop a[href],
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry a[href],
  .comp-kids-ministry.layout-bouncy-pop a[href]:hover,
  .component-wrapper.layout-bouncy-pop .comp-kids-ministry a[href]:hover {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* kids-ministry — Floaty (animated) */

/* Wrapper: contain the ambient shapes + establish stacking context */
.comp-kids-ministry.layout-floaty,
.component-wrapper.layout-floaty .comp-kids-ministry {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Ambient playful blobs drifting in the background (::before / ::after) */
.comp-kids-ministry.layout-floaty::before,
.component-wrapper.layout-floaty .comp-kids-ministry::before,
.comp-kids-ministry.layout-floaty::after,
.component-wrapper.layout-floaty .comp-kids-ministry::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.5;
  will-change: transform;
}

.comp-kids-ministry.layout-floaty::before,
.component-wrapper.layout-floaty .comp-kids-ministry::before {
  width: 260px;
  height: 260px;
  top: -70px;
  left: -60px;
  background: radial-gradient(circle at 35% 35%, rgba(255,193,84,0.55), rgba(255,193,84,0) 70%);
  animation: floaty_blobA 17s ease-in-out infinite;
}

.comp-kids-ministry.layout-floaty::after,
.component-wrapper.layout-floaty .comp-kids-ministry::after {
  width: 320px;
  height: 320px;
  bottom: -110px;
  right: -80px;
  background: radial-gradient(circle at 60% 40%, rgba(94,196,255,0.5), rgba(94,196,255,0) 70%);
  animation: floaty_blobB 21s ease-in-out infinite;
}

/* Keep all real content above the ambient shapes */
.comp-kids-ministry.layout-floaty > *,
.component-wrapper.layout-floaty .comp-kids-ministry > * {
  position: relative;
  z-index: 1;
}

/* Cards gently float up and down on a slow loop.
   Public render: cards are the grid's child divs (.comp > div > div).
   Builder preview: cards carry the .km-card class. */
.comp-kids-ministry.layout-floaty > div > div,
.component-wrapper.layout-floaty .comp-kids-ministry .km-card {
  animation: floaty_bob 6.5s ease-in-out infinite;
  will-change: transform;
}

/* Stagger so cards bob out of sync — feels organic, not mechanical */
.comp-kids-ministry.layout-floaty > div > div:nth-child(2n),
.component-wrapper.layout-floaty .comp-kids-ministry .km-card:nth-child(2n) {
  animation-duration: 7.4s;
  animation-delay: -1.6s;
}
.comp-kids-ministry.layout-floaty > div > div:nth-child(3n),
.component-wrapper.layout-floaty .comp-kids-ministry .km-card:nth-child(3n) {
  animation-duration: 8.2s;
  animation-delay: -3.1s;
}

@keyframes floaty_blobA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(34px, 26px, 0) scale(1.12); }
}

@keyframes floaty_blobB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-40px, -30px, 0) scale(1.08); }
}

@keyframes floaty_bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* Accessibility: honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .comp-kids-ministry.layout-floaty::before,
  .component-wrapper.layout-floaty .comp-kids-ministry::before,
  .comp-kids-ministry.layout-floaty::after,
  .component-wrapper.layout-floaty .comp-kids-ministry::after,
  .comp-kids-ministry.layout-floaty > div > div,
  .component-wrapper.layout-floaty .comp-kids-ministry .km-card {
    animation: none;
    transform: none;
  }
}

/* feedback — Elevated Card */

/* Wrapper: a touch more breathing room around the floating card so its
   shadow has space to read. background/color/padding are set INLINE on the
   public wrapper, so padding needs !important; we only nudge it up. */
.comp-feedback.layout-elevated,
.component-wrapper.layout-elevated .comp-feedback {
  padding: 64px 24px !important;
}

/* Inner container (max-width:640px;margin:0 auto inline) — anchor for the
   load animation. We perspective the container so the card's transforms
   feel grounded. max-width/margin are inline; we don't fight them. */
.comp-feedback.layout-elevated > div,
.component-wrapper.layout-elevated .comp-feedback > div {
  perspective: 1200px;
}

/* The card itself = the <form> (active form), the thank-you <div>, the
   empty-state <div>, or the preview sample card <div>. In every state it is
   the last direct child of the inner container (the h2 + optional p precede
   it). Give it real depth: layered drop shadow, softer rounded corners,
   hairline ring, and the fade/scale-in on load. */
.comp-feedback.layout-elevated > div > form,
.comp-feedback.layout-elevated > div > div:last-child,
.component-wrapper.layout-elevated .comp-feedback > div > form,
.component-wrapper.layout-elevated .comp-feedback > div > div:last-child {
  border-radius: 18px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 6px 16px rgba(15, 23, 42, 0.10),
    0 22px 48px rgba(15, 23, 42, 0.16);
  /* hairline ring keeps the white card legible on light page backgrounds */
  outline: 1px solid rgba(15, 23, 42, 0.06);
  outline-offset: 0;
  transform: translateZ(0);
  transform-origin: center top;
  will-change: transform, box-shadow;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  animation: elevated_rise 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Subtle hover lift — card floats a little higher with a deeper shadow.
   Keyboard focus inside the card produces the same lift for accessibility. */
.comp-feedback.layout-elevated > div > form:hover,
.comp-feedback.layout-elevated > div > div:last-child:hover,
.comp-feedback.layout-elevated > div > form:focus-within,
.component-wrapper.layout-elevated .comp-feedback > div > form:hover,
.component-wrapper.layout-elevated .comp-feedback > div > div:last-child:hover,
.component-wrapper.layout-elevated .comp-feedback > div > form:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.07),
    0 12px 28px rgba(15, 23, 42, 0.14),
    0 34px 64px rgba(15, 23, 42, 0.22);
}

/* Inputs get a hair more polish so they read as part of an elevated card —
   border/background are inline on inputs, so override with !important. */
.comp-feedback.layout-elevated > div > form input[type="text"],
.comp-feedback.layout-elevated > div > form input[type="email"],
.comp-feedback.layout-elevated > div > form textarea,
.component-wrapper.layout-elevated .comp-feedback > div > form input[type="text"],
.component-wrapper.layout-elevated .comp-feedback > div > form input[type="email"],
.component-wrapper.layout-elevated .comp-feedback > div > form textarea {
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.comp-feedback.layout-elevated > div > form input[type="text"]:focus,
.comp-feedback.layout-elevated > div > form input[type="email"]:focus,
.comp-feedback.layout-elevated > div > form textarea:focus,
.component-wrapper.layout-elevated .comp-feedback > div > form input[type="text"]:focus,
.component-wrapper.layout-elevated .comp-feedback > div > form input[type="email"]:focus,
.component-wrapper.layout-elevated .comp-feedback > div > form textarea:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

/* Submit button: rounder, with a quiet shadow and matching micro-lift.
   background/color/border/radius are inline → !important where overridden. */
.comp-feedback.layout-elevated > div > form button[type="submit"],
.component-wrapper.layout-elevated .comp-feedback > div > form button[type="submit"] {
  border-radius: 10px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.comp-feedback.layout-elevated > div > form button[type="submit"]:hover,
.component-wrapper.layout-elevated .comp-feedback > div > form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.26);
  filter: brightness(1.04);
}
.comp-feedback.layout-elevated > div > form button[type="submit"]:active,
.component-wrapper.layout-elevated .comp-feedback > div > form button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.20);
}

@keyframes elevated_rise {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comp-feedback.layout-elevated > div > form,
  .comp-feedback.layout-elevated > div > div:last-child,
  .component-wrapper.layout-elevated .comp-feedback > div > form,
  .component-wrapper.layout-elevated .comp-feedback > div > div:last-child {
    animation: none;
    transition: box-shadow 0.2s ease;
  }
  .comp-feedback.layout-elevated > div > form:hover,
  .comp-feedback.layout-elevated > div > div:last-child:hover,
  .comp-feedback.layout-elevated > div > form:focus-within,
  .component-wrapper.layout-elevated .comp-feedback > div > form:hover,
  .component-wrapper.layout-elevated .comp-feedback > div > div:last-child:hover,
  .component-wrapper.layout-elevated .comp-feedback > div > form:focus-within {
    transform: none;
  }
  .comp-feedback.layout-elevated > div > form button[type="submit"]:hover,
  .component-wrapper.layout-elevated .comp-feedback > div > form button[type="submit"]:hover,
  .comp-feedback.layout-elevated > div > form button[type="submit"]:active,
  .component-wrapper.layout-elevated .comp-feedback > div > form button[type="submit"]:active {
    transform: none;
  }
}

/* feedback — Gradient Banner */

/* Section becomes a positioned, clipped stage so the gradient can sit behind the content.
   The inline background/color/padding on the wrapper are left intact (the gradient layers
   ON TOP of the base background via ::before, but BELOW the content via z-index). */
.comp-feedback.layout-gradient-banner,
.component-wrapper.layout-gradient-banner .comp-feedback {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft, slowly-shifting accent gradient. Uses translucent stops so the section's own
   inline background tone still reads through — works on any theme color. */
.comp-feedback.layout-gradient-banner::before,
.component-wrapper.layout-gradient-banner .comp-feedback::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 18%, rgba(99,102,241,0.30), rgba(99,102,241,0) 60%),
    radial-gradient(55% 75% at 88% 12%, rgba(236,72,153,0.22), rgba(236,72,153,0) 62%),
    radial-gradient(70% 90% at 78% 92%, rgba(56,189,248,0.24), rgba(56,189,248,0) 60%),
    linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%, rgba(0,0,0,0.05));
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position: 0% 50%, 100% 0%, 50% 100%, 0 0;
  animation: gradient_banner_drift 22s ease-in-out infinite;
  will-change: background-position;
}

/* Faint vignette so the card edges feel anchored without darkening the heading. */
.comp-feedback.layout-gradient-banner::after,
.component-wrapper.layout-gradient-banner .comp-feedback::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10));
}

/* Lift all real content above the gradient layers. The inner container has no inline
   position/z-index, so no !important is required. */
.comp-feedback.layout-gradient-banner > div,
.component-wrapper.layout-gradient-banner .comp-feedback > div {
  position: relative;
  z-index: 1;
}

/* Keep heading + subtitle crisp over the soft gradient. text-shadow is not set inline,
   so it applies cleanly without !important. */
.comp-feedback.layout-gradient-banner h2,
.component-wrapper.layout-gradient-banner .comp-feedback h2 {
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  letter-spacing: 0.2px;
}
.comp-feedback.layout-gradient-banner p,
.component-wrapper.layout-gradient-banner .comp-feedback p {
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Make the form / thank-you / placeholder card pop off the gradient. box-shadow and
   the entrance transform are not set inline, so no !important is needed. */
.comp-feedback.layout-gradient-banner form,
.component-wrapper.layout-gradient-banner .comp-feedback form,
.comp-feedback.layout-gradient-banner > div > div,
.component-wrapper.layout-gradient-banner .comp-feedback > div > div {
  box-shadow:
    0 18px 48px -16px rgba(0,0,0,0.45),
    0 4px 14px -8px rgba(0,0,0,0.30);
  position: relative;
  z-index: 1;
}

.comp-feedback.layout-gradient-banner form,
.component-wrapper.layout-gradient-banner .comp-feedback form {
  animation: gradient_banner_rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gradient_banner_drift {
  0%   { background-position: 0% 50%,   100% 0%,   50% 100%, 0 0; }
  25%  { background-position: 40% 30%,  60% 40%,   30% 70%,  0 0; }
  50%  { background-position: 100% 50%, 0% 100%,   70% 20%,  0 0; }
  75%  { background-position: 50% 80%,  40% 60%,   20% 60%,  0 0; }
  100% { background-position: 0% 50%,   100% 0%,   50% 100%, 0 0; }
}

@keyframes gradient_banner_rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .comp-feedback.layout-gradient-banner::before,
  .component-wrapper.layout-gradient-banner .comp-feedback::before,
  .comp-feedback.layout-gradient-banner form,
  .component-wrapper.layout-gradient-banner .comp-feedback form {
    animation: none;
  }
  .comp-feedback.layout-gradient-banner::before,
  .component-wrapper.layout-gradient-banner .comp-feedback::before {
    background-position: 30% 40%, 80% 20%, 60% 80%, 0 0;
  }
  .comp-feedback.layout-gradient-banner form,
  .component-wrapper.layout-gradient-banner .comp-feedback form {
    opacity: 1;
    transform: none;
  }
}

/* feedback — Outlined Minimal */

/* Card surfaces: form, thank-you note, empty-state, builder sample card.
   Inline markup sets background:rgba(255,255,255,0.96), color, border-radius,
   padding (and the empty-state its own dashed border) — override with !important.
   Goal: flat, transparent, crisp 1.5px accent-toned border, lots of whitespace. */
.comp-feedback.layout-outlined form,
.component-wrapper.layout-outlined .comp-feedback form,
.comp-feedback.layout-outlined > div > div[style*="border-radius"],
.component-wrapper.layout-outlined .comp-feedback > div > div[style*="border-radius"] {
  background: transparent !important;
  color: inherit !important;
  border: 1.5px solid currentColor !important;
  border-color: color-mix(in srgb, currentColor 32%, transparent) !important;
  border-radius: 10px !important;
  padding: 40px !important;
  box-shadow: none !important;
  position: relative;
}

/* Thin animated accent rule along the top of the card (transform-only). */
.comp-feedback.layout-outlined form::before,
.component-wrapper.layout-outlined .comp-feedback form::before,
.comp-feedback.layout-outlined > div > div[style*="border-radius"]::before,
.component-wrapper.layout-outlined .comp-feedback > div > div[style*="border-radius"]::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: center;
  animation: outlined_rule 700ms ease-out both;
}

@keyframes outlined_rule {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.5; }
}

/* Card text/labels: inline color is a dark card color (#0f172a); force inherit
   so copy stays readable on the now-transparent card over any site background. */
.comp-feedback.layout-outlined form label,
.component-wrapper.layout-outlined .comp-feedback form label {
  color: inherit !important;
  letter-spacing: 0.01em;
}

/* Inputs / textarea: inline sets background:#fff, color:#0f172a, border 1px #cbd5e1.
   Make them transparent with a clean border and inherited text for the flat look. */
.comp-feedback.layout-outlined input[type="text"],
.comp-feedback.layout-outlined input[type="email"],
.comp-feedback.layout-outlined textarea,
.component-wrapper.layout-outlined .comp-feedback input[type="text"],
.component-wrapper.layout-outlined .comp-feedback input[type="email"],
.component-wrapper.layout-outlined .comp-feedback textarea {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
  border-radius: 6px !important;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.comp-feedback.layout-outlined input[type="text"]::placeholder,
.comp-feedback.layout-outlined input[type="email"]::placeholder,
.comp-feedback.layout-outlined textarea::placeholder,
.component-wrapper.layout-outlined .comp-feedback input[type="text"]::placeholder,
.component-wrapper.layout-outlined .comp-feedback input[type="email"]::placeholder,
.component-wrapper.layout-outlined .comp-feedback textarea::placeholder {
  color: inherit;
  opacity: 0.5;
}

.comp-feedback.layout-outlined input[type="text"]:focus,
.comp-feedback.layout-outlined input[type="email"]:focus,
.comp-feedback.layout-outlined textarea:focus,
.component-wrapper.layout-outlined .comp-feedback input[type="text"]:focus,
.component-wrapper.layout-outlined .comp-feedback input[type="email"]:focus,
.component-wrapper.layout-outlined .comp-feedback textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, currentColor 65%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}

/* Submit button: inline keeps the brand accent fill — keep it, just flatten
   (no shadow) and add a subtle transform-only hover for the minimal aesthetic. */
.comp-feedback.layout-outlined button[type="submit"],
.component-wrapper.layout-outlined .comp-feedback button[type="submit"] {
  border-radius: 6px !important;
  box-shadow: none !important;
  letter-spacing: 0.02em;
  transition: transform 140ms ease, filter 140ms ease;
}
.comp-feedback.layout-outlined button[type="submit"]:hover,
.component-wrapper.layout-outlined .comp-feedback button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Builder preview: skeleton field boxes use background:#fff + 1px #cbd5e1;
   the label bars use a dark rgba. Restyle to read as outlined/transparent too. */
.component-wrapper.layout-outlined .comp-feedback div[style*="height:40px"] {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent) !important;
  border-radius: 6px !important;
}
.component-wrapper.layout-outlined .comp-feedback div[style*="height:10px"] {
  background: color-mix(in srgb, currentColor 28%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .comp-feedback.layout-outlined form::before,
  .component-wrapper.layout-outlined .comp-feedback form::before,
  .comp-feedback.layout-outlined > div > div[style*="border-radius"]::before,
  .component-wrapper.layout-outlined .comp-feedback > div > div[style*="border-radius"]::before {
    animation: none;
    transform: none;
    opacity: 0.5;
  }
  .comp-feedback.layout-outlined input:focus,
  .comp-feedback.layout-outlined textarea:focus,
  .comp-feedback.layout-outlined button[type="submit"]:hover,
  .component-wrapper.layout-outlined .comp-feedback input:focus,
  .component-wrapper.layout-outlined .comp-feedback textarea:focus,
  .component-wrapper.layout-outlined .comp-feedback button[type="submit"]:hover {
    transition: none;
    transform: none;
  }
}

/* feedback — Speech Bubble */

/* ── Inner container: a touch of breathing room for the tail ── */
.comp-feedback.layout-bubble > div,
.component-wrapper.layout-bubble .comp-feedback > div {
  padding-bottom: 22px;
}

/* ── Heading + subtitle: friendly, centered ── */
.comp-feedback.layout-bubble h2,
.component-wrapper.layout-bubble .comp-feedback h2 {
  letter-spacing: -0.01em;
}
.comp-feedback.layout-bubble > div > p,
.component-wrapper.layout-bubble .comp-feedback > div > p {
  margin-bottom: 24px;
}

/* ── The card: speech-bubble shape (form, thank-you, empty-state) ── */
/* border-radius + padding are set INLINE → need !important */
.comp-feedback.layout-bubble > div > form,
.comp-feedback.layout-bubble > div > div:last-child,
.component-wrapper.layout-bubble .comp-feedback > div > form,
.component-wrapper.layout-bubble .comp-feedback > div > div:last-child {
  position: relative;
  border-radius: 30px 30px 30px 8px !important;
  padding: 30px 32px 32px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
  animation: bubble_pop 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

/* ── The tail: a small triangle anchored to the bottom-left corner ── */
/* Color-matched to the card fill (rgba(255,255,255,0.96)) ── */
.comp-feedback.layout-bubble > div > form::after,
.comp-feedback.layout-bubble > div > div:last-child::after,
.component-wrapper.layout-bubble .comp-feedback > div > form::after,
.component-wrapper.layout-bubble .comp-feedback > div > div:last-child::after {
  content: '';
  position: absolute;
  left: 30px;
  bottom: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 20px 0 0;
  border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;
  filter: drop-shadow(0 6px 5px rgba(15, 23, 42, 0.08));
  pointer-events: none;
}

/* ── Inputs / textarea: extra-rounded to echo the bubble (border-radius INLINE) ── */
.comp-feedback.layout-bubble input[type="text"],
.comp-feedback.layout-bubble input[type="email"],
.comp-feedback.layout-bubble textarea,
.component-wrapper.layout-bubble .comp-feedback input[type="text"],
.component-wrapper.layout-bubble .comp-feedback input[type="email"],
.component-wrapper.layout-bubble .comp-feedback textarea {
  border-radius: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.comp-feedback.layout-bubble input[type="text"]:focus,
.comp-feedback.layout-bubble input[type="email"]:focus,
.comp-feedback.layout-bubble textarea:focus,
.component-wrapper.layout-bubble .comp-feedback input[type="text"]:focus,
.component-wrapper.layout-bubble .comp-feedback input[type="email"]:focus,
.component-wrapper.layout-bubble .comp-feedback textarea:focus {
  outline: none;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.22);
}

/* ── Submit button: friendly pill (border-radius INLINE) ── */
.comp-feedback.layout-bubble button[type="submit"],
.component-wrapper.layout-bubble .comp-feedback button[type="submit"] {
  border-radius: 999px !important;
  align-self: flex-start;
  padding: 12px 28px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.comp-feedback.layout-bubble button[type="submit"]:hover,
.component-wrapper.layout-bubble .comp-feedback button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
}

/* ── Gentle pop-in on appear ── */
@keyframes bubble_pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .comp-feedback.layout-bubble > div > form,
  .comp-feedback.layout-bubble > div > div:last-child,
  .component-wrapper.layout-bubble .comp-feedback > div > form,
  .component-wrapper.layout-bubble .comp-feedback > div > div:last-child {
    animation: none;
  }
  .comp-feedback.layout-bubble button[type="submit"],
  .component-wrapper.layout-bubble .comp-feedback button[type="submit"] {
    transition: none;
  }
  .comp-feedback.layout-bubble button[type="submit"]:hover,
  .component-wrapper.layout-bubble .comp-feedback button[type="submit"]:hover {
    transform: none;
  }
}

/* feedback — Accent Rail */

/* Scope: public render uses .comp-feedback.layout-accent-rail;
   builder preview uses .component-wrapper.layout-accent-rail .comp-feedback.
   The inner container (div with inline max-width:640px;margin:0 auto) is the
   only direct child div of .comp-feedback, so > div targets it in both. */

/* --- Inner container becomes the positioning context + left-aligned column --- */
.comp-feedback.layout-accent-rail > div,
.component-wrapper.layout-accent-rail .comp-feedback > div {
  position: relative;
  text-align: left;
}

/* --- Editorial heading: left-aligned, tighter, with a small accent kicker --- */
.comp-feedback.layout-accent-rail > div > h2,
.component-wrapper.layout-accent-rail .comp-feedback > div > h2 {
  text-align: left !important;     /* inline sets text-align:center */
  margin-bottom: 6px !important;   /* inline sets margin-bottom:8px */
  padding-left: 18px;
  position: relative;
  letter-spacing: -0.01em;
}
.comp-feedback.layout-accent-rail > div > h2::before,
.component-wrapper.layout-accent-rail .comp-feedback > div > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
}

/* --- Subtitle: left-aligned to match the editorial column --- */
.comp-feedback.layout-accent-rail > div > p,
.component-wrapper.layout-accent-rail .comp-feedback > div > p {
  text-align: left !important;     /* inline sets text-align:center */
  padding-left: 18px;
}

/* --- The card (public: <form>; preview & states: white-bg <div>) gets the
       bold accent rail down its left edge. Card has inline border-radius:12px
       and inline padding (28/24/32px), so those need !important. --- */
.comp-feedback.layout-accent-rail > div > form,
.comp-feedback.layout-accent-rail > div > div,
.component-wrapper.layout-accent-rail .comp-feedback > div > form,
.component-wrapper.layout-accent-rail .comp-feedback > div > div {
  position: relative;
  overflow: hidden;
  border-radius: 4px 14px 14px 4px !important;  /* inline: border-radius:12px */
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* The accent stripe itself — a bold colored bar on the left edge (::before) */
.comp-feedback.layout-accent-rail > div > form::before,
.comp-feedback.layout-accent-rail > div > div::before,
.component-wrapper.layout-accent-rail .comp-feedback > div > form::before,
.component-wrapper.layout-accent-rail .comp-feedback > div > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 55%, #6366f1 100%);
  background-size: 100% 220%;
  animation: accent_rail_sheen 7s ease-in-out infinite;
  z-index: 1;
}

/* Soften the inset so content clears the rail (inline padding stays, this nudges) */
.comp-feedback.layout-accent-rail > div > form,
.component-wrapper.layout-accent-rail .comp-feedback > div > form {
  padding-left: 30px !important;   /* inline form padding:28px */
}

@keyframes accent_rail_sheen {
  0%   { background-position: 0 0%; }
  50%  { background-position: 0 100%; }
  100% { background-position: 0 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .comp-feedback.layout-accent-rail > div > form::before,
  .comp-feedback.layout-accent-rail > div > div::before,
  .component-wrapper.layout-accent-rail .comp-feedback > div > form::before,
  .component-wrapper.layout-accent-rail .comp-feedback > div > div::before {
    animation: none;
    background-position: 0 0%;
  }
}

/* --- Submit button: don't stretch full width; sit left like a sidebar CTA.
       (align-self is not set inline, so no !important needed.) --- */
.comp-feedback.layout-accent-rail > div > form > button,
.component-wrapper.layout-accent-rail .comp-feedback > div > form > button {
  align-self: flex-start;
}

/* campaign — Boxed Card */

/* Wrapper becomes an elevated, rounded card. The public render sets
   background/padding/text-align INLINE on .comp-campaign, so those need
   !important. In the builder preview the layout class sits on the outer
   .component-wrapper, so both selectors are covered. */
.comp-campaign.layout-boxed,
.component-wrapper.layout-boxed .comp-campaign {
  position: relative;
  max-width: 720px;
  margin: 24px auto !important;
  padding: 48px 44px !important;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.32),
              0 2px 8px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(128, 128, 128, 0.16);
  overflow: hidden;
  transform: translateZ(0);
  animation: boxed_rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Accent gradient hairline across the top of the card */
.comp-campaign.layout-boxed::before,
.component-wrapper.layout-boxed .comp-campaign::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
              rgba(128, 128, 128, 0.0),
              rgba(128, 128, 128, 0.5),
              rgba(128, 128, 128, 0.0));
  opacity: 0.9;
  pointer-events: none;
}

/* Soft inner highlight at the foot of the card for depth */
.comp-campaign.layout-boxed::after,
.component-wrapper.layout-boxed .comp-campaign::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg,
              rgba(128, 128, 128, 0.0),
              rgba(128, 128, 128, 0.05));
  pointer-events: none;
}

/* Heading: inline only sets font-family + margin-bottom; add weight/scale */
.comp-campaign.layout-boxed h2,
.component-wrapper.layout-boxed .comp-campaign h2 {
  position: relative;
  z-index: 1;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  margin-top: 0;
}

/* Subheading (public: inline-styled <p>; preview: .camp-sub) */
.comp-campaign.layout-boxed > p,
.comp-campaign.layout-boxed .camp-sub,
.component-wrapper.layout-boxed .comp-campaign > p,
.component-wrapper.layout-boxed .comp-campaign .camp-sub {
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

/* Donate button: inline sets background/padding/border-radius in BOTH
   renders, so override only what we change with !important. */
.comp-campaign.layout-boxed a,
.component-wrapper.layout-boxed .comp-campaign a {
  position: relative;
  z-index: 1;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  will-change: transform;
}
.comp-campaign.layout-boxed a:hover,
.component-wrapper.layout-boxed .comp-campaign a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(15, 23, 42, 0.55);
  filter: brightness(1.05);
}
.comp-campaign.layout-boxed a:active,
.component-wrapper.layout-boxed .comp-campaign a:active {
  transform: translateY(0);
}

/* Entrance animation — transform + opacity only */
@keyframes boxed_rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .comp-campaign.layout-boxed,
  .component-wrapper.layout-boxed .comp-campaign {
    animation: none;
  }
  .comp-campaign.layout-boxed a,
  .component-wrapper.layout-boxed .comp-campaign a {
    transition: none;
  }
  .comp-campaign.layout-boxed a:hover,
  .component-wrapper.layout-boxed .comp-campaign a:hover {
    transform: none;
  }
}

/* campaign — Bold Banner */

/* Wrapper: establish stacking + clip the gradient backdrop.
   background/color/padding/text-align are set INLINE in the markup and are kept. */
.comp-campaign.layout-bold-banner,
.component-wrapper.layout-bold-banner .comp-campaign {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft accent gradient backdrop via ::before (sits behind content). */
.comp-campaign.layout-bold-banner::before,
.component-wrapper.layout-bold-banner .comp-campaign::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% -10%, color-mix(in srgb, currentColor 16%, transparent) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 110%, color-mix(in srgb, currentColor 12%, transparent) 0%, transparent 50%),
    linear-gradient(115deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0.06) 100%);
  background-size: 100% 100%, 100% 100%, 200% 100%;
  background-position: 0% 0%, 100% 100%, 0% 0%;
  animation: bold_banner_sheen 14s ease-in-out infinite alternate;
}

/* Thin urgent accent bar at the very top via ::after. */
.comp-campaign.layout-bold-banner::after,
.component-wrapper.layout-bold-banner .comp-campaign::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, currentColor 70%, transparent),
    color-mix(in srgb, currentColor 25%, transparent));
}

/* Lift all direct content above the backdrop layers. */
.comp-campaign.layout-bold-banner > *,
.component-wrapper.layout-bold-banner .comp-campaign > * {
  position: relative;
  z-index: 1;
}

/* Oversized, punchy heading. font-size & line-height are NOT inline -> no !important.
   margin-bottom IS inline -> overridden with !important. */
.comp-campaign.layout-bold-banner h2,
.component-wrapper.layout-bold-banner .comp-campaign h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 900;
  margin-bottom: 18px !important;
  text-wrap: balance;
}

/* Subheading: a touch larger and confident. Public render <p> has inline
   opacity/max-width/margin; preview uses .camp-sub. */
.comp-campaign.layout-bold-banner > p,
.comp-campaign.layout-bold-banner .camp-sub,
.component-wrapper.layout-bold-banner .comp-campaign > p,
.component-wrapper.layout-bold-banner .comp-campaign .camp-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  opacity: 0.82 !important;
  line-height: 1.5;
}

/* Beefier, rounded progress bar (public render bar-wrap is an unclassed div
   with inline height:20px; preview uses .camp-bar-wrap). */
.comp-campaign.layout-bold-banner div[style*="height:20px"],
.comp-campaign.layout-bold-banner .camp-bar-wrap,
.component-wrapper.layout-bold-banner .comp-campaign div[style*="height:20px"],
.component-wrapper.layout-bold-banner .comp-campaign .camp-bar-wrap {
  height: 26px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.18);
}

/* The accent fill: keep its inline accent background, add a subtle moving
   highlight so it reads "live / in progress". */
.comp-campaign.layout-bold-banner div[style*="height:20px"] > div,
.comp-campaign.layout-bold-banner .camp-bar,
.component-wrapper.layout-bold-banner .comp-campaign div[style*="height:20px"] > div,
.component-wrapper.layout-bold-banner .comp-campaign .camp-bar {
  position: relative;
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: -120% 0;
  animation: bold_banner_fill 2.6s linear infinite;
}

/* Large, prominent donate button. The <a> has many INLINE props:
   padding, border-radius, font-size, font-weight -> these need !important.
   background (accent) and color stay from inline. box-shadow/transform are new. */
.comp-campaign.layout-bold-banner a,
.component-wrapper.layout-bold-banner .comp-campaign a {
  padding: 20px 56px !important;
  border-radius: 12px !important;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em;
  margin-top: 12px;
  box-shadow:
    0 14px 32px -10px color-mix(in srgb, currentColor 45%, rgba(0,0,0,0.35)),
    0 2px 0 rgba(0,0,0,0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  will-change: transform;
}
.comp-campaign.layout-bold-banner a:hover,
.component-wrapper.layout-bold-banner .comp-campaign a:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 22px 46px -10px color-mix(in srgb, currentColor 55%, rgba(0,0,0,0.4)),
    0 2px 0 rgba(0,0,0,0.08);
}
.comp-campaign.layout-bold-banner a:active,
.component-wrapper.layout-bold-banner .comp-campaign a:active {
  transform: translateY(-1px) scale(1.0);
}

@keyframes bold_banner_sheen {
  from { background-position: 0% 0%, 100% 100%, 0% 0%; }
  to   { background-position: 0% 0%, 100% 100%, 100% 0%; }
}

@keyframes bold_banner_fill {
  from { background-position: -120% 0; }
  to   { background-position: 220% 0; }
}

/* Accessibility: disable all motion. */
@media (prefers-reduced-motion: reduce) {
  .comp-campaign.layout-bold-banner::before,
  .component-wrapper.layout-bold-banner .comp-campaign::before,
  .comp-campaign.layout-bold-banner div[style*="height:20px"] > div,
  .comp-campaign.layout-bold-banner .camp-bar,
  .component-wrapper.layout-bold-banner .comp-campaign div[style*="height:20px"] > div,
  .component-wrapper.layout-bold-banner .comp-campaign .camp-bar {
    animation: none;
  }
  .comp-campaign.layout-bold-banner a,
  .component-wrapper.layout-bold-banner .comp-campaign a {
    transition: none;
  }
  .comp-campaign.layout-bold-banner a:hover,
  .component-wrapper.layout-bold-banner .comp-campaign a:hover {
    transform: none;
  }
}

/* campaign — Progress Shimmer */

/* Track: give it depth + clip the fill's grow-in.
   Public render: bar track is a class-less div with inline overflow:hidden +
   border-radius:100px; target it structurally. Builder preview: .camp-bar-wrap. */
.comp-campaign.layout-progress-shimmer div[style*="overflow:hidden"],
.component-wrapper.layout-progress-shimmer .comp-campaign .camp-bar-wrap {
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.22);
}

/* Fill: anchor for the shimmer overlay, clip it, and grow in from the left.
   width + background are set INLINE, so we never touch them — we scale the
   element via transform (transform-origin left) so the inline width is the
   final state. Public render: the track's only child div.
   Builder preview: .camp-bar. */
.comp-campaign.layout-progress-shimmer div[style*="overflow:hidden"] > div,
.component-wrapper.layout-progress-shimmer .comp-campaign .camp-bar {
  position: relative;
  overflow: hidden;
  transform-origin: left center;
  animation: progress_shimmer_grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Diagonal shimmer sweep across the filled portion only (clipped by the fill). */
.comp-campaign.layout-progress-shimmer div[style*="overflow:hidden"] > div::after,
.component-wrapper.layout-progress-shimmer .comp-campaign .camp-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 220%;
  background-image: linear-gradient(
    105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.55) 48%,
    rgba(255,255,255,0.55) 52%,
    rgba(255,255,255,0) 70%
  );
  background-repeat: no-repeat;
  background-size: 45% 100%;
  background-position: -60% 0;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: progress_shimmer_sweep 2.6s linear infinite;
  animation-delay: 1.1s;
}

@keyframes progress_shimmer_grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes progress_shimmer_sweep {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* Accessibility: no grow-in, no sweep — show the final filled bar at rest. */
@media (prefers-reduced-motion: reduce) {
  .comp-campaign.layout-progress-shimmer div[style*="overflow:hidden"] > div,
  .component-wrapper.layout-progress-shimmer .comp-campaign .camp-bar {
    animation: none;
    transform: none;
  }
  .comp-campaign.layout-progress-shimmer div[style*="overflow:hidden"] > div::after,
  .component-wrapper.layout-progress-shimmer .comp-campaign .camp-bar::after {
    animation: none;
    display: none;
  }
}

/* campaign — Glowing CTA */
/* The donate <a> is the only anchor inside the campaign component in both the
   public render (render.ejs ~L1818) and the builder preview (preview.ejs ~L1290).
   Its inline styles set: display:inline-block, padding, border-radius, background
   (church accent), color:#fff, font-weight, text-decoration, font-size. We keep
   the inline background (accent) and project it as a soft, pulsing glow via an
   ::after layer that inherits that same accent — so the glow auto-matches any
   church's brand color. position/box-shadow/transition/isolation/overflow are NOT
   set inline, so no !important is needed there. */

/* Give the button a stacking context so the glow can sit behind it. */
.comp-campaign.layout-glow-cta a,
.component-wrapper.layout-glow-cta .comp-campaign a {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: visible;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Accent-tinted glow layer. background:inherit picks up the inline accent set on
   the <a>, so the halo always matches the church's brand color. */
.comp-campaign.layout-glow-cta a::after,
.component-wrapper.layout-glow-cta .comp-campaign a::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  filter: blur(14px);
  opacity: 0.45;
  transform: scale(0.96);
  pointer-events: none;
  animation: glow_cta_pulse 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}

/* Gentle lift + brighter halo on hover, without overriding the accent. */
.comp-campaign.layout-glow-cta a:hover,
.component-wrapper.layout-glow-cta .comp-campaign a:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.comp-campaign.layout-glow-cta a:hover::after,
.component-wrapper.layout-glow-cta .comp-campaign a:hover::after {
  opacity: 0.7;
}

@keyframes glow_cta_pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50%      { opacity: 0.7;  transform: scale(1.06); }
}

/* Accessibility: no motion — keep a single, calm static glow. */
@media (prefers-reduced-motion: reduce) {
  .comp-campaign.layout-glow-cta a::after,
  .component-wrapper.layout-glow-cta .comp-campaign a::after {
    animation: none;
    opacity: 0.4;
    transform: scale(0.98);
  }
  .comp-campaign.layout-glow-cta a,
  .component-wrapper.layout-glow-cta .comp-campaign a {
    transition: none;
  }
}

/* campaign — Minimal Goal */

/* Wrapper: flat, airy, generous breathing room. No card, no shadow.
   text-align is set inline on the public render, so override with !important. */
.comp-campaign.layout-minimal-goal,
.component-wrapper.layout-minimal-goal .comp-campaign {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  background: transparent;
  box-shadow: none;
  border: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Heading: understated, light weight, airy tracking. */
.comp-campaign.layout-minimal-goal h2,
.component-wrapper.layout-minimal-goal .comp-campaign h2 {
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 18px !important;
}

/* Subheading — public render <p> (inline opacity/max-width/margin) and preview .camp-sub.
   Quiet, more whitespace below before the figures. */
.comp-campaign.layout-minimal-goal > p,
.component-wrapper.layout-minimal-goal .comp-campaign .camp-sub {
  opacity: 0.62 !important;
  font-weight: 300;
  line-height: 1.6;
  max-width: 460px !important;
  margin: 0 auto 44px !important;
}

/* ---- PUBLIC RENDER (render.ejs) — no class names, target by structure ---- */

/* Stats container <div> (inline max-width/margin) */
.comp-campaign.layout-minimal-goal > div {
  max-width: 460px !important;
  margin: 0 auto 40px !important;
}

/* The figures row (raised / pct / goal): understated, lighter, calmer spacing */
.comp-campaign.layout-minimal-goal > div > div:first-child {
  margin-bottom: 14px !important;
  font-size: 0.78rem !important;
  opacity: 0.6 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Progress track -> hairline. Override inline height/radius/background. */
.comp-campaign.layout-minimal-goal > div > div:nth-child(2) {
  height: 3px !important;
  border-radius: 0 !important;
  background: rgba(128, 128, 128, 0.18) !important;
}

/* Progress fill -> thin, flat (no pill), with a quiet travelling shimmer.
   Keep the inline accent color via layered gradient over it. */
.comp-campaign.layout-minimal-goal > div > div:nth-child(2) > div {
  border-radius: 0 !important;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  background-repeat: no-repeat;
  background-size: 60% 100%;
  background-position: -60% 0;
  animation: minimal_goal_sheen 4.5s ease-in-out infinite;
}

/* Deadline line — barely-there, more air above */
.comp-campaign.layout-minimal-goal > div > p {
  opacity: 0.42 !important;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-top: 16px !important;
}

/* Button -> quiet ghost/outline, flat. Override inline bg/padding/radius/color/weight. */
.comp-campaign.layout-minimal-goal > a {
  background: transparent !important;
  color: inherit !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  padding: 10px 4px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem !important;
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
}
.comp-campaign.layout-minimal-goal > a:hover {
  opacity: 1;
  letter-spacing: 0.11em;
}

/* ---- BUILDER PREVIEW (preview.ejs) — class-based structure ---- */

/* Amounts row: understated, smaller, calmer */
.component-wrapper.layout-minimal-goal .comp-campaign .camp-amounts {
  gap: 56px;
  margin-bottom: 16px;
}
.component-wrapper.layout-minimal-goal .comp-campaign .camp-amount-item .camp-amount {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.component-wrapper.layout-minimal-goal .comp-campaign .camp-amount-item .camp-amount-label {
  opacity: 0.5;
  letter-spacing: 0.06em;
}

/* Progress track -> hairline (preview .camp-bar-wrap) */
.component-wrapper.layout-minimal-goal .comp-campaign .camp-bar-wrap {
  height: 3px;
  border-radius: 0;
  background: rgba(128, 128, 128, 0.18);
  margin-bottom: 14px;
}

/* Progress fill -> thin, flat, same quiet shimmer (preview .camp-bar) */
.component-wrapper.layout-minimal-goal .comp-campaign .camp-bar {
  border-radius: 0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: 60% 100%;
  background-position: -60% 0;
  animation: minimal_goal_sheen 4.5s ease-in-out infinite;
}

/* Percent + deadline — quiet */
.component-wrapper.layout-minimal-goal .comp-campaign .camp-pct {
  font-size: 0.78rem;
  opacity: 0.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.component-wrapper.layout-minimal-goal .comp-campaign .camp-deadline {
  opacity: 0.42;
  font-weight: 300;
  margin-bottom: 36px;
}

/* Button -> quiet ghost/outline (preview button rendered inline; class-scope only,
   no !important needed since preview button has no conflicting inline radius here) */
.component-wrapper.layout-minimal-goal .comp-campaign > a {
  background: transparent !important;
  color: inherit !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
  padding: 10px 4px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  border-bottom: 1px solid currentColor;
  opacity: 0.85;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
}
.component-wrapper.layout-minimal-goal .comp-campaign > a:hover {
  opacity: 1;
  letter-spacing: 0.11em;
}

/* Quiet shimmer travelling along the hairline — transform-free, GPU-cheap. */
@keyframes minimal_goal_sheen {
  0%   { background-position: -60% 0; }
  55%  { background-position: 160% 0; }
  100% { background-position: 160% 0; }
}

/* Accessibility: no motion for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .comp-campaign.layout-minimal-goal > div > div:nth-child(2) > div,
  .component-wrapper.layout-minimal-goal .comp-campaign .camp-bar {
    animation: none !important;
    background-image: none !important;
  }
  .comp-campaign.layout-minimal-goal > a,
  .component-wrapper.layout-minimal-goal .comp-campaign > a {
    transition: none !important;
  }
}

/* ============================================================
   "Embassy" module layouts — Christ Embassy style.
   Hero (embassy / embassy-solid) + Big Options (embassy).
   Live renderer puts layout-* on the module root; the builder
   preview puts it on the ancestor .component-wrapper — so every
   rule targets both. Canvas + heading colors come from each
   module's own background/text colors (so the same layout serves
   light and dark); gold (#e0a53a) and the info card are fixed
   brand accents.
   ============================================================ */

/* ---------------- HERO: embassy + embassy-solid ---------------- */
.comp-hero.layout-embassy, .comp-hero.layout-embassy-solid,
.component-wrapper.layout-embassy .comp-hero, .component-wrapper.layout-embassy-solid .comp-hero {
  flex-direction: row; flex-wrap: wrap; text-align: left;
  align-items: stretch; justify-content: flex-start;
  gap: 0; min-height: auto; padding: 0 !important; position: relative; overflow: hidden;
}
.comp-hero.layout-embassy .hero-text, .comp-hero.layout-embassy-solid .hero-text,
.component-wrapper.layout-embassy .comp-hero .hero-text, .component-wrapper.layout-embassy-solid .comp-hero .hero-text {
  flex: 1 1 380px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; text-align: left;
  padding: 72px clamp(28px, 5vw, 76px); position: relative; z-index: 2;
}
.comp-hero.layout-embassy .hero-eyebrow, .comp-hero.layout-embassy-solid .hero-eyebrow,
.component-wrapper.layout-embassy .comp-hero .hero-eyebrow, .component-wrapper.layout-embassy-solid .comp-hero .hero-eyebrow {
  display: block; margin-bottom: 16px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.78rem; color: #e0a53a;
}
.comp-hero.layout-embassy h1, .comp-hero.layout-embassy-solid h1,
.component-wrapper.layout-embassy .comp-hero h1, .component-wrapper.layout-embassy-solid .comp-hero h1 {
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem) !important; margin-bottom: 18px; text-align: left;
}
.comp-hero.layout-embassy p, .comp-hero.layout-embassy-solid p,
.component-wrapper.layout-embassy .comp-hero p, .component-wrapper.layout-embassy-solid .comp-hero p {
  opacity: 0.82; font-size: 1.12rem; line-height: 1.6; max-width: 40ch; margin-bottom: 28px; text-align: left;
}
.comp-hero.layout-embassy .hero-cta, .comp-hero.layout-embassy-solid .hero-cta,
.component-wrapper.layout-embassy .comp-hero .hero-cta, .component-wrapper.layout-embassy-solid .comp-hero .hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.comp-hero.layout-embassy .hero-btn, .comp-hero.layout-embassy-solid .hero-btn,
.component-wrapper.layout-embassy .comp-hero .hero-btn, .component-wrapper.layout-embassy-solid .comp-hero .hero-btn {
  border-radius: 12px; padding: 14px 28px; font-weight: 700;
}
.comp-hero.layout-embassy .hero-btn-2, .comp-hero.layout-embassy-solid .hero-btn-2,
.component-wrapper.layout-embassy .comp-hero .hero-btn-2, .component-wrapper.layout-embassy-solid .comp-hero .hero-btn-2 {
  background: transparent !important; border: 2px solid currentColor; color: inherit; opacity: 0.9;
}
.comp-hero.layout-embassy .hero-btn-2:hover, .comp-hero.layout-embassy-solid .hero-btn-2:hover,
.component-wrapper.layout-embassy .comp-hero .hero-btn-2:hover, .component-wrapper.layout-embassy-solid .comp-hero .hero-btn-2:hover {
  opacity: 1; border-color: #e0a53a; color: #e0a53a;
}
.comp-hero.layout-embassy .hero-media, .comp-hero.layout-embassy-solid .hero-media,
.component-wrapper.layout-embassy .comp-hero .hero-media, .component-wrapper.layout-embassy-solid .comp-hero .hero-media {
  flex: 1.1 1 380px; align-self: stretch; min-height: 460px; position: relative;
  background-size: cover; background-position: center;
}
/* feather the photo — embassy only (embassy-solid keeps a clean edge) */
.comp-hero.layout-embassy .hero-media,
.component-wrapper.layout-embassy .comp-hero .hero-media {
  margin-left: -4%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%),
                      linear-gradient(to bottom, transparent 0%, #000 12%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%),
                      linear-gradient(to bottom, transparent 0%, #000 12%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* floating "Sunday Experience" info card — shared frame */
.comp-hero.layout-embassy .hero-infocard, .comp-hero.layout-embassy-solid .hero-infocard,
.component-wrapper.layout-embassy .comp-hero .hero-infocard, .component-wrapper.layout-embassy-solid .comp-hero .hero-infocard {
  position: absolute; right: clamp(16px, 2.4vw, 36px); bottom: clamp(18px, 3vw, 38px); z-index: 3;
  display: flex; align-items: center; gap: 14px; padding: 15px 22px; border-radius: 16px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.55);
}
/* three selectable card styles (Hero field "Info Card Style") */
.comp-hero .hero-infocard-glass { background: rgba(10, 21, 51, 0.60); backdrop-filter: blur(10px); border: 1px solid rgba(229, 173, 66, 0.5); }
.comp-hero .hero-infocard-white { background: #ffffff; border: 1px solid rgba(18, 35, 75, 0.08); }
.comp-hero .hero-infocard-navy  { background: #0a1533; border: 1px solid rgba(229, 173, 66, 0.5); }
.comp-hero .hero-infocard-ico { width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: grid; place-items: center; border: 2px solid #e5ad42; color: #e5ad42; }
.comp-hero .hero-infocard-white .hero-infocard-ico { border-color: #d9a534; color: #c08d24; background: rgba(224, 165, 58, 0.12); }
.comp-hero .hero-infocard-ico svg { width: 22px; height: 22px; }
.comp-hero .hero-infocard-txt { display: flex; flex-direction: column; line-height: 1.15; }
.comp-hero .hero-infocard-k { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #e5ad42; }
.comp-hero .hero-infocard-white .hero-infocard-k { color: #c08d24; }
.comp-hero .hero-infocard-v { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: #ffffff; }
.comp-hero .hero-infocard-white .hero-infocard-v { color: #12234b; }
@media (max-width: 760px) {
  .comp-hero.layout-embassy, .comp-hero.layout-embassy-solid,
  .component-wrapper.layout-embassy .comp-hero, .component-wrapper.layout-embassy-solid .comp-hero { flex-direction: column; }
  .comp-hero.layout-embassy .hero-text, .comp-hero.layout-embassy-solid .hero-text,
  .component-wrapper.layout-embassy .comp-hero .hero-text, .component-wrapper.layout-embassy-solid .comp-hero .hero-text { padding: 44px 24px; }
  .comp-hero.layout-embassy .hero-media,
  .component-wrapper.layout-embassy .comp-hero .hero-media {
    margin-left: 0; min-height: 300px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
  }
}

/* ---------------- BIG OPTIONS: embassy ("Your Next Step") ---------------- */
.comp-options-grid.layout-embassy .opt-grid,
.component-wrapper.layout-embassy .comp-options-grid .opt-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.comp-options-grid.layout-embassy .opt-tile,
.component-wrapper.layout-embassy .comp-options-grid .opt-tile {
  min-height: 340px; border-radius: 20px; overflow: hidden; position: relative;
  color: inherit; isolation: isolate;
  background: rgba(127, 127, 127, 0.06);
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid rgba(127, 127, 127, 0.18);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 22px 45px -24px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.comp-options-grid.layout-embassy .opt-tile .opt-bg,
.component-wrapper.layout-embassy .comp-options-grid .opt-tile .opt-bg {
  inset: 0 0 42% 0; border-radius: 0;
}
.comp-options-grid.layout-embassy .opt-tile::after,
.component-wrapper.layout-embassy .comp-options-grid .opt-tile::after { content: none; }
.comp-options-grid.layout-embassy .opt-ico,
.component-wrapper.layout-embassy .comp-options-grid .opt-ico {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #e0a53a; color: #e0a53a;
  background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px);
}
.comp-options-grid.layout-embassy .opt-ico svg,
.component-wrapper.layout-embassy .comp-options-grid .opt-ico svg { width: 24px; height: 24px; }
.comp-options-grid.layout-embassy .opt-body,
.component-wrapper.layout-embassy .comp-options-grid .opt-body {
  position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 42%; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 20px 24px; border-top: 3px solid #e0a53a; transform: none;
}
.comp-options-grid.layout-embassy .opt-label,
.component-wrapper.layout-embassy .comp-options-grid .opt-label {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em;
}
.comp-options-grid.layout-embassy .opt-sub,
.component-wrapper.layout-embassy .comp-options-grid .opt-sub { opacity: 0.7; margin-top: 2px; }
.comp-options-grid.layout-embassy .opt-arrow,
.component-wrapper.layout-embassy .comp-options-grid .opt-arrow {
  opacity: 1; transform: none; margin-top: 8px; font-weight: 700;
}
.comp-options-grid.layout-embassy .opt-tile:hover,
.component-wrapper.layout-embassy .comp-options-grid .opt-tile:hover {
  transform: translateY(-6px); border-color: #e0a53a;
  box-shadow: 0 32px 55px -26px rgba(0, 0, 0, 0.4);
}
.comp-options-grid.layout-embassy .opt-tile:hover .opt-bg,
.component-wrapper.layout-embassy .comp-options-grid .opt-tile:hover .opt-bg { transform: scale(1.05); }