/* ===== Image With Text Section ===== */

.cc_zRr7AL87AP_image_with_text .image-with-text {
  width: 100%;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Mobile: padding-top/padding-bottom were the same desktop-scale value
   (--space-xl, 64px) at every breakpoint below 1024px — padding-top was
   already fixed (oversized gap above the image, mobile always renders
   media first). padding-bottom had the same problem for the contained
   (non full-width) variant: for a short panel (e.g. a brief founder
   note, no CTA), 64px of trailing padding reads as unjustified empty
   space before the next section. The full-width variant's OWN separate
   mobile padding-bottom override (var(--space-lg), further below) still
   wins for that variant — same specificity, later in source order.
   Tablet (>=768px) and desktop (>=1024px, its own separate override
   below) are untouched. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_image_with_text .image-with-text {
    padding-top: var(--space-md); /* 24px */
    padding-bottom: var(--space-md); /* 24px */
  }
}

.cc_zRr7AL87AP_image_with_text .image-with-text__container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(16px, 5vw, 80px);
  padding-right: clamp(16px, 5vw, 80px);
}

/* ---- Grid ---- */
.cc_zRr7AL87AP_image_with_text .image-with-text__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* ---- Media column ---- */
.cc_zRr7AL87AP_image_with_text .image-with-text__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--iwt-image-aspect-ratio, 4 / 3);
}

.cc_zRr7AL87AP_image_with_text .image-with-text__image, .cc_zRr7AL87AP_image_with_text .image-with-text__image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_zRr7AL87AP_image_with_text .image-with-text__image-placeholder {
  background: var(--color-surface-alt);
}

/* ---- Panel column ---- */
.cc_zRr7AL87AP_image_with_text .image-with-text__panel {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* ===== Tablet (>=768px) ===== */
@media (min-width: 768px) {
  .cc_zRr7AL87AP_image_with_text .image-with-text__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Image right swap (tablet+) */
  .cc_zRr7AL87AP_image_with_text .image-with-text--image-right .image-with-text__media {
    order: 2;
  }
  .cc_zRr7AL87AP_image_with_text .image-with-text--image-right .image-with-text__panel {
    order: 1;
  }
}

/* ===== Desktop (>=1024px) ===== */
@media (min-width: 1024px) {
  .cc_zRr7AL87AP_image_with_text .image-with-text {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .cc_zRr7AL87AP_image_with_text .image-with-text__grid {
    gap: var(--space-xl);
  }
}

/* ===== Full-width mode ===== */
.cc_zRr7AL87AP_image_with_text .image-with-text--full-width {
  /* No container — section bleeds edge-to-edge */
}

.cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__media {
  /* Mobile: natural 4/3 image at full width */
  aspect-ratio: 4 / 3;
}

.cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__panel {
  padding: var(--space-xl) clamp(16px, 5vw, 80px);
}

/* Mobile only (<=767px), full-width variant: the base .image-with-text
   padding-bottom (var(--space-xl), on the section itself) was stacking
   with this panel's own padding-bottom (also var(--space-xl)) — 128px
   of combined dead space after the text that no content justified.
   The panel's own trailing padding is removed here (its top/side
   padding, which sits BEFORE the text, is untouched) and the section
   keeps one controlled bottom padding instead of two stacked ones.
   Tablet/desktop use a separate padding rule below, unaffected. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__panel {
    padding-bottom: 0;
  }

  .cc_zRr7AL87AP_image_with_text .image-with-text--full-width {
    padding-bottom: var(--space-lg);
  }
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_image_with_text .image-with-text--full-width {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 500px;
  }

  .cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__grid {
    grid-template-columns: 50% 50%;
    min-height: 500px;
  }

  /* Deterministic crop: the media box's own height now comes from the
     Studio-selected imageAspectRatio (same variable the contained-mode
     rule already reads), not from the row/panel height. min-height:500px
     stays on .image-with-text--full-width and its __grid above — the
     row (and therefore the panel, which is untouched here and keeps its
     default grid stretch + its own flex centering) is still guaranteed
     that floor. align-self: center means the media simply centers
     within whatever height the row/panel actually needs, instead of
     being stretched to match it. */
  .cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__media {
    aspect-ratio: var(--iwt-image-aspect-ratio, 4 / 3);
    height: auto;
    align-self: center;
  }

  .cc_zRr7AL87AP_image_with_text .image-with-text--full-width .image-with-text__panel {
    padding: var(--space-2xl) clamp(32px, 5vw, 80px);
  }
}

/* ===== Scroll-reveal entrance (motion-safe only) ===== */
@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_image_with_text .image-with-text__media {
    opacity: 0;
    transform: translateX(-20px);
    animation: cc_zRr7AL87AP_image_with_text_image-with-text-in-left 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .cc_zRr7AL87AP_image_with_text .image-with-text--image-right .image-with-text__media {
    transform: translateX(20px);
    animation-name: cc_zRr7AL87AP_image_with_text_image-with-text-in-right;
  }

  @keyframes cc_zRr7AL87AP_image_with_text_image-with-text-in-left {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes cc_zRr7AL87AP_image_with_text_image-with-text-in-right {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ===== Panel (sub-component: ImageWithTextPanel) ===== */

.cc_zRr7AL87AP_image_with_text .iwt-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 560px;
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--iwt-eyebrow-color, var(--color-accent));
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
}

/* margin/color/font-family/font-size/font-weight/line-height all live on
   the ImageWithTextPanel sub-component's own .iwt-panel__title rule (it
   renders the actual <h2>, and its CSS chunk loads after this parent
   component's, so at equal specificity it always wins for those
   properties — duplicating them here was dead weight). text-wrap is the
   one property that rule doesn't declare, so it stays here. */
.cc_zRr7AL87AP_image_with_text .iwt-panel__title {
  text-wrap: balance;
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__description {
  margin: 0 0 var(--space-lg) 0;
  color: var(--iwt-description-color, var(--color-text-secondary));
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Mobile-only — scoped through ".image-with-text" (2-class selector,
   same specificity as the "statement" variant's own title override
   further below, which still wins by source order, so statement mode
   is unaffected) so this only tightens THIS section's split/default
   layout. The shared ImageWithTextPanel sub-component (also used by
   FounderStory on an unrelated page) is not touched — desktop/tablet
   there and here both keep their existing rules untouched. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_image_with_text .image-with-text .iwt-panel__title {
    font-size: 22px;
  }

  .cc_zRr7AL87AP_image_with_text .image-with-text .iwt-panel__description {
    font-size: 14px;
    line-height: 22px;
  }
}

/* Optional founder-style attribution/signature line (e.g. "Gizem — LAB
   VERDE Kurucusu") — additive, empty by default (unset on every existing
   placement, so nothing renders and nothing changes for them). Smaller
   and muted vs. .iwt-panel__description on purpose: a signature line,
   not a third paragraph of body copy. Italic is the one deliberate
   editorial touch, using the existing --font-body family — no new font. */
.cc_zRr7AL87AP_image_with_text .iwt-panel__attribution {
  margin: 0 0 var(--space-lg) 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.5;
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Mobile (<=767px): .iwt-panel is a flex column, so a trailing
   margin-bottom on its last child never collapses away. When there's
   no CTA (showActions false), description's own margin-bottom was
   left as dead space below the visible text, making the panel taller
   than its content. Zero it on whichever child actually ends up
   last — a no-op when actions IS present, since that element has no
   bottom margin of its own. Desktop/tablet keep the unconditional
   margin-bottom above, untouched. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_image_with_text .iwt-panel > *:last-child {
    margin-bottom: 0;
  }
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 24px;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 120ms ease;
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_image_with_text .iwt-panel__btn {
    padding: 12px 28px;
  }
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__btn:active {
  transform: scale(0.96);
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__btn--primary {
  background: var(--iwt-accent-color, var(--color-accent));
  color: #ffffff;
  border: none;
}

.cc_zRr7AL87AP_image_with_text .iwt-panel__btn--secondary {
  background: transparent;
  color: var(--iwt-text-color, var(--color-text-primary));
  border: 1px solid var(--color-border);
}

/* .iwt-panel__btn--text-link itself lives in the ImageWithTextPanel
   sub-component's own styles.css — it renders the actual <a>, and its
   CSS chunk loads after this parent component's, so at equal
   specificity a copy here would always lose (same reason
   .iwt-panel__title's weight/size rule had to live there, not here). */

@media (prefers-reduced-motion: no-preference) {
  .cc_zRr7AL87AP_image_with_text .iwt-panel {
    opacity: 0;
    transform: translateY(16px);
    animation: cc_zRr7AL87AP_image_with_text_iwt-panel-in 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 80ms forwards;
  }

  .cc_zRr7AL87AP_image_with_text .iwt-panel__btn {
    transition: filter 200ms ease, border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 120ms ease;
  }

  .cc_zRr7AL87AP_image_with_text .iwt-panel__btn--primary:hover {
    filter: brightness(0.88);
  }

  .cc_zRr7AL87AP_image_with_text .iwt-panel__btn--secondary:hover {
    border-color: var(--iwt-accent-color, var(--color-accent));
  }

  @keyframes cc_zRr7AL87AP_image_with_text_iwt-panel-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ===== Statement mode (layoutVariant: "statement") — no image
   column at all, full-width centered editorial copy. Placed last so
   it wins over every split/full-width rule above (including their
   media-query variants) regardless of selector-specificity ties, in
   case a placement ever combines statement with sectionWidth:
   full-width. Reuses the same title/description/CTA prop data and
   iwt-panel sub-component as split mode — only the surrounding
   layout differs. ===== */
.cc_zRr7AL87AP_image_with_text .image-with-text--statement .image-with-text__grid {
  grid-template-columns: 1fr;
}

.cc_zRr7AL87AP_image_with_text .image-with-text--statement .image-with-text__panel {
  display: flex;
  justify-content: center;
}

.cc_zRr7AL87AP_image_with_text .image-with-text--statement .iwt-panel {
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.cc_zRr7AL87AP_image_with_text .image-with-text--statement .iwt-panel__title {
  font-size: var(--text-h1);
}

.cc_zRr7AL87AP_image_with_text .image-with-text--statement .iwt-panel__actions {
  justify-content: center;
}