/* ============================================
 * Challenges — section module
 *
 * Mobile (default): heading (left), photo (full width),
 * 2-col grid of 6 items below. Each column has its own
 * divider chain between items.
 *
 * Desktop (1024+): heading centred, 3-col grid
 * (text-right · photo · text-left) with mirror alignment.
 * ============================================ */

/* Horizontal padding + max-width cap live in layout.css via the
   `.tlm-section` (root) and `.tlm-container` (__inner) classes
   added to the HTML. This file owns only challenges-unique layout. */

.tlm-challenges {
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tlm-challenges__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ----- Heading ----- */

.tlm-challenges__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

/* ----- Grid layout ----- */

.tlm-challenges__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto repeat(3, auto);
  column-gap: var(--space-lg);
  row-gap: 0;
  width: 100%;
}

.tlm-challenges__figure {
  margin: 0 0 var(--space-md);
  width: 100%;
  aspect-ratio: 392 / 406;
  grid-column: 1 / -1;
  grid-row: 1;
}

.tlm-challenges__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transform: scaleX(-1);
}

.tlm-challenges__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2 / span 3;
  row-gap: 0;
}

.tlm-challenges__list--left {
  grid-column: 1;
}

.tlm-challenges__list--right {
  grid-column: 2;
}

/* ----- Item (label + body) ----- */

.tlm-challenges__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tlm-challenges__item + .tlm-challenges__item {
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-grey-200);
}

.tlm-challenges__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-text-on-light);
}

/* Mobile-only / tablet-up label variants — used to shorten the
   "Cross-sell / up-sell" label to "Cross/up-sell" on mobile where
   the 2-column grid runs tight on width. Pair lives in the same
   <p class="tlm-challenges__label">; visibility swaps at 768. */
.tlm-challenges__label-desktop {
  display: none;
}

@media (min-width: 768px) {
  .tlm-challenges__label-mobile {
    display: none;
  }
  .tlm-challenges__label-desktop {
    display: inline;
  }
}

.tlm-challenges__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

/* ----- CTA (below grid) ----- */

.tlm-challenges__cta {
  display: flex;
  flex-direction: column;
  /* Mobile: stretch lets the button fill the column per mobile-
     standards. Lead-in copy left-aligns (no text-align override).
     Desktop overrides to flex-row + align-items: center for the
     horizontal layout. Margin-top adds breathing room above the
     CTA so it reads as its own block, not tail-end of the grid
     (24px __inner gap + 32px margin = 56px above the lead-in copy). */
  align-items: stretch;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-lg);
  /* Gradient panel (Figma 501:15559) — uses the exported raster so the
     pink/peach blend matches the design exactly. Background positioned
     right so the asset's transparent left edge sits off-frame and the
     pink coverage fills the whole card. */
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  background-image: url('../../images/challenges-cta-bg.webp?v=2');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: full-width per mobile-standards. Tablet+ reverts to
   natural width (desktop already centres via flex row). */
.tlm-challenges__cta .tlm-button {
  width: 100%;
}

@media (min-width: 768px) {
  .tlm-challenges__cta .tlm-button {
    width: auto;
  }
}

.tlm-challenges__cta-text {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

/* ----- Tablet ----- */
@media (min-width: 768px) {
  .tlm-challenges__body {
    font-size: var(--text-lg);
  }
}

/* ----- Desktop ----- */
@media (min-width: 1024px) {
  .tlm-challenges {
    /* Symmetric body-section rhythm: 120/120 desktop. */
    padding-block: var(--space-5xl);
  }

  .tlm-challenges__inner {
    gap: var(--space-3xl);
    align-items: center;
  }

  .tlm-challenges__title {
    max-width: 976px;
    font-size: var(--text-h2);
    text-align: center;
  }

  .tlm-challenges__grid {
    /* Centre image track is capped at 444 but shrinkable (minmax 0) so the
       whole grid compresses in the 1024-1300 band instead of the right
       column clipping off-frame. Side columns take the remaining space. */
    grid-template-columns: minmax(200px, 1fr) minmax(0, 444px) minmax(200px, 1fr);
    grid-template-rows: auto;
    column-gap: var(--space-2xl);
    row-gap: 0;
    align-items: stretch;
  }

  .tlm-challenges__figure {
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    max-width: 444px;
    width: 100%;
    aspect-ratio: auto;
  }

  .tlm-challenges__list {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    grid-row: auto;
  }

  .tlm-challenges__list--left {
    grid-column: 1;
    align-items: flex-end;
    text-align: right;
  }

  .tlm-challenges__list--right {
    grid-column: 3;
    align-items: flex-start;
  }

  .tlm-challenges__list--left .tlm-challenges__item,
  .tlm-challenges__list--right .tlm-challenges__item {
    /* Was a hard 280px, which forced the side columns wider than their
       grid cells in the tablet band. Cap at 280 but let items fill the
       (now shrinkable) column so nothing spills off-frame. */
    width: 100%;
    max-width: 280px;
  }

  /* Body bumps at tablet 768 (above); only label bumps at desktop. */
  .tlm-challenges__label {
    font-size: var(--text-lg);
  }

  .tlm-challenges__cta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
    text-align: left;
  }

  .tlm-challenges__cta-text {
    max-width: none;
  }
}

/* Wide desktop: restore the roomier 72px column gap once there's width. */
@media (min-width: 1360px) {
  .tlm-challenges__grid {
    column-gap: var(--space-3xl);
  }
}