/* ─── Featured Offer Section ────────────────────────────────────── */
.mk-offer {
  position: relative;
  min-block-size: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--cream);
  padding-block: var(--space-24);
}

/* ─── Full-bleed photo, fading into the text side ──────────────── */
.mk-offer__photo-bleed {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: 42%;
  z-index: 0;
}

.mk-offer__photo-bleed::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 35%;
  /* CSS gradients have no logical direction keyword, so the fixed
     physical angle below only fades correctly for RTL (Arabic). The
     French version renders dir="ltr", which flips this element's own
     position (inset-inline-end becomes physical right instead of
     left) — the override underneath keeps the gradient's cream/
     transparent stops matching that flip instead of pointing the
     wrong way. */
  background: linear-gradient(90deg, var(--cream) 0%, transparent 100%);
}

html[dir="ltr"] .mk-offer__photo-bleed::after {
  background: linear-gradient(270deg, var(--cream) 0%, transparent 100%);
}

.mk-offer__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mk-offer__inner {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  /* Full section width, not the shared centered container: the photo
     bleed's 42%/58% split is measured against this same box, so the
     text column below can be sized against that exact boundary instead
     of an unrelated container width. */
  max-inline-size: none;
  padding-inline: var(--container-pad);
}

.mk-offer__text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: var(--space-4);
  /* Kept safely under the photo-bleed's 42% boundary (inset-inline-end
     above) so the text never overlaps the photo or its fade. */
  max-inline-size: 36%;
  margin-inline-start: auto;
}

/* ─── Heading: badge sits beside the title, at the title's level ──── */
.mk-offer__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.mk-offer__badge {
  /* In normal flow (not absolutely positioned) so it's counted in the
     heading's own width and wraps under the title instead of
     overflowing past the page edge when the title takes up most of
     the available width — which is exactly what happened before on
     narrower viewports. */
  flex-shrink: 0;
  /* Matches the mockup's badge size (measured 170px at a 1600px canvas),
     bigger than the shared .mk-badge-medal default. */
  inline-size: 170px;
  block-size: 170px;
}

/* ─── Text ──────────────────────────────────────────────────────── */
.mk-offer__title {
  /* Matches the mockup (measured ~60.7px at a 1600px canvas) — much
     smaller than the previous scale, which ran up to 104px there. */
  font-size: clamp(2.5rem, 3.8vw, 3.8rem);
  font-weight: var(--fw-bold);
  color: var(--teal-700);
  line-height: 1.15;
}

.mk-offer__dates {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: var(--fw-medium);
  color: var(--teal-700);
}

.mk-offer__desc {
  font-size: clamp(1.25rem, 1.6vw, 1.4375rem);
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.75;
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.mk-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mk-offer {
    flex-direction: column;
    /* align-items switches axis with flex-direction: on desktop (row)
       it vertically centers the text column; here it would instead
       horizontally center it, so it's put back to start-aligned. */
    align-items: flex-start;
    min-block-size: auto;
  }

  /* Photo adds height without much value on small screens; drop it
     and let the text carry the section. */
  .mk-offer__photo-bleed {
    display: none;
  }

  .mk-offer__text-col {
    max-inline-size: 100%;
    margin-inline-start: 0;
  }

  .mk-offer__badge {
    inline-size: 96px;
    block-size: 96px;
  }
}