/* =============================================================================
   Content Box / Mid-post CTA  (.zehoro-midpost-cta)
   Shared by the Content Box module (manual [zehoro_box] placement) and
   ContentStream (auto-injected slots render through ContentBox::render_cta_box).
   Moved from Free's monolithic assets/style.css in the 1.220.0 lean-Free
   reorg. Consumes the --lkst-* variables (inlined onto this handle with
   literal fallbacks, mirroring the pills stylesheet).
   ============================================================================= */

.zehoro-midpost-cta {
	margin-bottom: 20px;
	min-height: 180px;
	background: var(--lkst-bg-dark);
	border-left: 4px solid var(--lkst-primary-color);
	border-radius: 12px;
	padding: 36px 28px 28px;
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 640px) {
	.zehoro-midpost-cta { min-height: 180px; grid-template-columns: 1fr; }
}

/* Sidebar variant — single-column stacked layout */
.zehoro-midpost-cta.zehoro-sidebar-cta {
	grid-template-columns: 1fr;
	min-height: auto;
	gap: 16px;
	padding: 20px;
	margin: 0;
	border-radius: 8px;
}

.zehoro-midpost-cta__heading {
	display: block;
	color: #F5F0E8;
	font-size: var(--text-m, 1.1rem);
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1.35;
}

.zehoro-midpost-cta__desc {
	display: block;
	color: rgba(245, 240, 232, 0.72);
	font-size: var(--text-s, 0.95rem);
	line-height: 1.6;
}


/* =============================================================================
   Content CTA Layouts
   ============================================================================= */

/* Image layout variants */
.zehoro-midpost-cta.has-image.image-left,
.zehoro-midpost-cta.has-image.image-right {
  grid-template-columns: 200px 1fr 1fr;
}
.zehoro-midpost-cta.has-image.image-left .zehoro-cta-image-wrapper,
.zehoro-midpost-cta.has-image.image-right .zehoro-cta-image-wrapper {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

.zehoro-midpost-cta.has-image.image-left .zehoro-cta-image-wrapper  { order: 1; }
.zehoro-midpost-cta.has-image.image-left .zehoro-midpost-cta__text   { order: 2; }
.zehoro-midpost-cta.has-image.image-left .zehoro-midpost-cta__form   { order: 3; }

.zehoro-midpost-cta.has-image.image-right .zehoro-midpost-cta__text  { order: 1; }
.zehoro-midpost-cta.has-image.image-right .zehoro-midpost-cta__form  { order: 2; }
.zehoro-midpost-cta.has-image.image-right .zehoro-cta-image-wrapper  { order: 3; }

.zehoro-midpost-cta.has-image.image-top {
  grid-template-columns: 1fr 1fr; /* text | form — image spans full width above */
  grid-template-rows: auto 1fr;
}
.zehoro-midpost-cta.has-image.image-top .zehoro-cta-image-wrapper {
  grid-column: 1 / -1; /* full width */
}

.zehoro-cta-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Cap image-top height to prevent 16:9 images from dominating */
.zehoro-midpost-cta.has-image.image-top .zehoro-cta-image-wrapper img {
  max-height: 200px;
}

/* Stack form elements (input on top, button below) inside any CTA.
   Fluent Forms adds gap:15px to .ff-t-container at >=768px — override it
   with a tighter value so the stacked pair doesn't look too spread out. */
.zehoro-midpost-cta__form .ff-t-container {
  flex-direction: column;
  gap: 8px;
}
.zehoro-midpost-cta__form .ff-t-cell {
  width: 100% !important;
}

/* Mobile: always hide CTA images */
@media (max-width: 768px) {
  .zehoro-midpost-cta.hide-image-mobile .zehoro-cta-image-wrapper {
    display: none;
  }
  /* Collapse to single column when image is hidden */
  .zehoro-midpost-cta.hide-image-mobile {
    grid-template-columns: 1fr;
  }
}


/* Eyebrow (was a stray rule outside the labeled section in Free) */
.zehoro-midpost-cta__eyebrow {
	display: block;
	font-size: var(--text-xs, 0.75rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--lkst-primary-color, #E8A020);
	margin-bottom: 6px;
}

/* FluentForm Gap Override */
@media (min-width: 768px) {
    .zehoro-midpost-cta .frm-fluent-form .ff-t-container,
    .zehoro-sidebar-cta .frm-fluent-form .ff-t-container {
        gap: 0 !important;
    }
}
/* Tablet and Mobile Stacking Rules */
@media (max-width: 900px) {
    .zehoro-midpost-cta {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 20px !important;
    }
    
    .zehoro-midpost-cta.has-image .zehoro-cta-image-wrapper {
        display: none !important;
    }
    
    .zehoro-midpost-cta .zehoro-midpost-cta__text,
    .zehoro-midpost-cta .zehoro-midpost-cta__form {
        order: initial !important;
        grid-column: 1 / -1 !important;
    }
}