/* ═══════════════════════════════════════════════════════════════
   Founder Journey — editorial section for the Hakkımızda page: the
   founder's 22-month GAPS journey, told through one large asymmetric
   photo and a story + Instagram CTA. Deliberately different from both
   RichText (single-column, centered, no photo) and FounderStory
   (symmetric 1fr/1fr columns, left-aligned, intrinsic-ratio photo,
   3-step footer): here the photo is large and asymmetric (wider than
   the text column, cropped to fill its column via object-fit:cover),
   sits on the RIGHT on desktop, and the text is left-aligned with no
   signature/steps block — just story copy and a single CTA.
   ═══════════════════════════════════════════════════════════════ */

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey {
  width: 100%;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (max-width: 767px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey {
    padding-top: var(--space-xl);
    /* Trimmed from --space-xl (64px) — the empty space left below the
       CTA button at the end of the section read as excessive. */
    padding-bottom: var(--space-lg);
  }
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}

/* Mobile-first: single column, media first in DOM so it's naturally
   first on screen too — "görsel, başlık, metin ve bağlantı sırasıyla" —
   no `order` needed at this width. */
.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

/* Desktop/tablet: asymmetric two columns (2fr content / 3fr photo — the
   photo is deliberately the larger of the two, "büyük fotoğraf"), photo
   moved to the right via `order` while staying first in the DOM (CSS
   Grid auto-placement follows order-modified document order, so this
   also reorders which track each item lands in, not just paint order). */
@media (min-width: 768px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-xl);
    align-items: stretch;
  }

  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__media {
    order: 2;
  }

  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__content {
    order: 1;
    align-self: center;
  }
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__media {
  width: 100%;
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image, .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image-placeholder {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* Mobile: a fixed editorial portrait ratio (no grid row to stretch to
   in a single-column layout). Desktop: fills the grid row's own height
   (set by the text column's natural height) via height:100%, with a
   min-height so a short text column never shrinks the photo away. */
.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image, .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image-placeholder {
  aspect-ratio: 4 / 5;
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image-placeholder {
  background: var(--color-surface-alt);
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image, .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image-placeholder {
    aspect-ratio: auto;
    height: 100%;
    min-height: 520px;
  }
}

/* Mobile only: the 4/5 ratio + cover above was cropping the photo to fit
   that box. Dropping the forced ratio and switching to contain lets the
   image render at its own natural proportions — the whole photo stays
   visible, nothing is cut off. The placeholder (no image set) keeps its
   fixed 4/5 box above, since it has no "natural ratio" to preserve. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__image {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--fj-eyebrow-color, var(--color-accent));
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}

/* Explicit per-breakpoint sizes instead of --text-h1 (clamp(36px, 5vw,
   64px), reaching 64px on desktop) — that token was wrapping this
   heading across too many lines at desktop width. font-family
   (--font-display), font-weight (300), and color (--fj-heading-color)
   are unchanged. Base rule below is the mobile (<=767px) size — mobile-
   first, no media query needed for it; 768px/1024px overrides below are
   untouched by this round's mobile-only request. */
.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__heading {
  margin: 0 0 var(--space-md) 0;
  color: var(--fj-heading-color, var(--color-text-primary));
  font-family: var(--font-display);
  /* Site-wide typography pass: "sayfa ana başlığı" hedefi mobil 26px /
     masaüstü 32px — was 27/34/38px. */
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__heading {
    font-size: 29px;
  }
}

@media (min-width: 1024px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__heading {
    font-size: 32px;
  }
}

/* Each paragraph gets a var(--space-md) (24px) margin-bottom by default —
   the gap between the two description paragraphs on desktop/tablet; the
   true last paragraph overrides it to the original, larger
   var(--space-lg) gap before the CTA block below. When description2 is
   empty, the first paragraph is also :last-of-type, so this is a no-op —
   identical spacing to before this change. Mobile gets its own smaller
   value below (20px, see the max-width:767px block further down). */
.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__description {
  margin: 0 0 var(--space-md) 0;
  max-width: 480px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.7;
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__description:last-of-type {
  margin-bottom: var(--space-lg);
}

/* Matched exactly to RichText's own compact-editorial mobile body copy
   on this same Hakkımızda page (14px/1.7), not a separately-guessed
   value, so paragraph size/line-height/readability stay consistent
   page-wide. margin-bottom here only affects the non-last paragraph
   (the gap BETWEEN the two description paragraphs) — the :last-of-type
   rule above has higher specificity and still wins for whichever
   paragraph is actually last, so the larger pre-CTA gap is untouched. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__description {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta-subtext {
  margin: 0;
  max-width: 420px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 14px 28px;
  max-width: 100%;
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 200ms ease;
}

/* Mobile only: the button still read too large even after the previous
   padding trim, so this replaces it with exact, smaller values —
   width:fit-content (plus the max-width:100% above) means the button
   hugs its own content and never stretches, while still clamping down
   and letting its text wrap (rather than overflowing) if it wouldn't
   fit on one line at the viewport's available width. align-self is
   explicit here even though the parent .founder-journey__cta-block
   already left-aligns its children (align-items:flex-start) — this
   round's request calls it out as its own requirement. Does not touch
   .founder-journey's own mobile padding-bottom (the space below the
   button) — untouched by design. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta {
    width: fit-content;
    align-self: flex-start;
    padding: 10px 16px;
    font-size: 12px;
  }
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta:hover {
  background: var(--color-accent-dark);
}

.cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Must come AFTER the unconditional 18px rule above — same selector,
   same specificity, so source order decides which wins; placed here it
   correctly overrides at mobile widths instead of being overridden by it. */
@media (max-width: 767px) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta svg {
    width: 15px;
    height: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_zRr7AL87AP_12uTiDlRQc .founder-journey__cta {
    transition: none;
  }
}