/* Portable styles for Covenant FM Elementor widgets. The child theme extends
   these rules with the complete site design. */
.elementor-widget-cfm-hero{width:100%}
.elementor-widget-cfm-hero>.elementor-widget-container{overflow:hidden}
.cfm-elementor-hero{margin:0}
.cfm-recent-grid .cfm-loading{grid-column:1/-1;color:var(--muted,#9b968a);text-align:center;padding:40px}
.cfm-pagination{display:flex;justify-content:center;gap:8px;margin-top:48px}
.cfm-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;border:1px solid rgba(255,255,255,.1);border-radius:9px}
.cfm-pagination .current{background:var(--gold,#c9a24b);color:#131007}
.elementor-widget-cfm-listen-button .btn{cursor:pointer}
.elementor-editor-active .reveal{opacity:1!important;transform:none!important}
@media(max-width:767px){.cfm-recent-grid{grid-template-columns:1fr!important}}

/* ==========================================================================
   Covenant FM — exact-design section widgets (v2.1)
   These widgets render the reference design's own markup, so the heavy
   lifting is done by the child theme stylesheet. What follows is only the
   glue that lets that markup sit inside an Elementor column full-bleed.
   ========================================================================== */

/* Let a CFM section span its Elementor column edge to edge. */
.elementor-widget-cfm-section-heading > .elementor-widget-container,
.elementor-widget-cfm-onair-strip > .elementor-widget-container,
.elementor-widget-cfm-stats > .elementor-widget-container,
.elementor-widget-cfm-cards > .elementor-widget-container,
.elementor-widget-cfm-video-feature > .elementor-widget-container,
.elementor-widget-cfm-split > .elementor-widget-container,
.elementor-widget-cfm-cta-band > .elementor-widget-container,
.elementor-widget-cfm-page-hero > .elementor-widget-container,
.elementor-widget-cfm-site-header > .elementor-widget-container,
.elementor-widget-cfm-site-footer > .elementor-widget-container,
.elementor-widget-cfm-hero > .elementor-widget-container{
  margin:0;
  padding:0;
}

/* The design's own container, restated so widgets survive a themeless preview. */
.cfm-sec{position:relative}
.cfm-sec > .wrap{width:min(1240px,92%);margin-inline:auto}
.cfm-sec-heading-only .sec-head{margin-bottom:0}

/* Card / stat grids driven by the widget's Columns control. */
.cfm-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cfm-card-grid .card{height:100%}

/* Button rows (split feature, CTA band). */
.cfm-btn-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:6px}
.cfm-btn-row:empty{display:none}

/* Centred call-to-action band. */
.cfm-sec-cta{text-align:center}
.cfm-cta-inner{max-width:760px;margin-inline:auto}
.cfm-cta-inner .sec-sub{margin-inline:auto}
.cfm-cta-inner .cfm-btn-row{justify-content:center;margin-top:26px}

/* Page hero with an optional background photo. */
.page-hero.has-image{background-size:cover;background-position:center}
.page-hero.has-image::before{background:rgba(8,8,10,.78)}

/* Footer helper copy. */
.cfm-footer-note{color:var(--muted,#9b968a);font-size:14px;margin-bottom:16px}

/* Header/footer widgets are chrome: never let Elementor centre-constrain them. */
.elementor-widget-cfm-site-header,
.elementor-widget-cfm-site-footer{width:100%}

/* ---------- Elementor editor ----------
   IntersectionObserver never fires inside the editor canvas, which would leave
   .reveal blocks at opacity:0. Force them visible while editing only. */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal,
body.elementor-editor-active .reveal{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .cfm-card-grid{grid-template-columns:repeat(2,1fr)}
  .cfm-sec > .wrap{width:min(1240px,94%)}
}
@media (max-width:767px){
  .cfm-card-grid{grid-template-columns:1fr}
  .cfm-btn-row{gap:10px}
  .cfm-btn-row .btn{width:100%;justify-content:center}
  .cfm-cta-inner .cfm-btn-row{margin-top:20px}
}

/* The split ratio control only applies where the design is genuinely two
   columns; below 1080px the theme stacks them and must stay stacked. */
@media (min-width:1081px){
  .cfm-sec-split .wrap.split{grid-template-columns:var(--cfm-split-ratio,1.05fr) .95fr}
}

/* The reference design gives the on-air strip's Listen button tighter padding
   than a standard .btn — restate it so the strip matches pixel for pixel. */
.onair-strip .onair-listen{padding:11px 24px}