/* =====================================================================
   HP - Timeless Asset, Modern Access ("Outtro")
   UK desktop node 10125:20822 / UK mobile node 10125:21323.
   Token-only; all classes prefixed hp-timeless-asset- (BEM).
   ===================================================================== */

.hp-timeless-asset {
  /* black -> navy vertical gradient band */
  background: var(--ta-band-grad);
  padding-block: var(--ta-pad-y);              /* 120px desktop */
}

/* 1240 content lock inside the 1440 frame (frame had 100px side pad) */
.hp-timeless-asset__inner {
  display: flex;
  align-items: center;
  gap: var(--home-stack-gap);                  /* 20px */
}

.hp-timeless-asset__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-stack-gap);                  /* 20px */
  color: var(--gray-0);                        /* #fff */
  word-break: break-word;
}

.hp-timeless-asset__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: var(--ta-heading-max);            /* 548px */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);               /* Medium 500 */
  font-size: var(--fs-32);                     /* 32px */
  line-height: var(--lh-45);                   /* 45px */
}

.hp-timeless-asset__heading-line { display: block; }

.hp-timeless-asset__body {
  margin: 0;
  max-width: var(--ta-body-max);               /* 780px */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);              /* Regular 400 */
  font-size: var(--fs-16);                     /* 16px */
  line-height: normal;
}

.hp-timeless-asset__media {
  flex: 0 0 auto;
  width: var(--ta-phone-w);                    /* 359px */
  height: var(--ta-phone-h);                   /* 460px */
}

.hp-timeless-asset__phone {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Tablet (768–1023): Archetype C — keep 2-col, reduce phone, step text
   --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .hp-timeless-asset {
    padding-block: var(--ta-pad-y-mobile); /* 50px */
  }

  .hp-timeless-asset__media {
    width: 280px;
    height: 360px;
  }

  .hp-timeless-asset__heading {
    font-size: var(--fs-28);
    line-height: var(--lh-36);
  }
}

/* Large-mobile (600–767): keep 2-col, tighten phone further */
@media (max-width: 767.98px) {
  .hp-timeless-asset__inner {
    gap: var(--home-stack-gap); /* 20px */
  }

  .hp-timeless-asset__media {
    width: 220px;
    height: 282px;
  }

  .hp-timeless-asset__heading {
    font-size: var(--fs-26);
    line-height: var(--lh-36);
  }
}

/* ---------------------------------------------------------------------
   Mobile — UK mobile node 10125:21323 (390 frame, 20px gutters)
   Stacked column: phone on top, centred copy below.
   --------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .hp-timeless-asset {
    padding-block: var(--ta-pad-y-mobile);     /* 50px */
  }

  .hp-timeless-asset__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--home-stack-gap);                /* 20px */
  }

  /* phone first */
  .hp-timeless-asset__media {
    order: -1;
    width: var(--ta-phone-w-mobile);           /* 312px */
    height: var(--ta-phone-h-mobile);          /* 400px */
  }

  .hp-timeless-asset__content {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hp-timeless-asset__heading {
    max-width: none;
    width: 100%;
    font-size: var(--fs-26);                   /* 26px */
    line-height: var(--lh-36);                 /* 36px */
  }

  .hp-timeless-asset__body {
    max-width: none;
    width: 100%;
  }
}