/* TECH MEDIA V5.13 — popup overview re-balance.
   Goal: stronger headline presence, vertically centered composition,
   and fuller use of the first viewport with balanced top/bottom breathing room. */

@media (min-width: 1100px) {
  .detail-page--overview {
    justify-content: center !important;
    gap: clamp(18px, 2.25svh, 28px) !important;
    padding-top: clamp(14px, 2svh, 24px) !important;
    padding-bottom: clamp(26px, 3.2svh, 38px) !important;
  }

  .detail-page--overview .detail-topline {
    padding-bottom: clamp(10px, 1.4svh, 16px) !important;
  }

  .detail-hero {
    grid-template-columns: minmax(0, 1.23fr) minmax(280px, .77fr) !important;
    gap: clamp(34px, 4vw, 72px) !important;
    align-items: center !important;
  }

  .detail-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .detail-hero h2 {
    font-size: clamp(82px, min(7.2vw, 12.3svh), 118px) !important;
    line-height: .92 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 clamp(14px, 1.8svh, 20px) !important;
    max-width: 10.2ch;
  }

  .detail-hero h2.detail-title--long {
    font-size: clamp(68px, min(5.9vw, 10.1svh), 90px) !important;
    line-height: .95 !important;
    max-width: 11.5ch;
  }

  .detail-hero h2.detail-title--extra-long {
    font-size: clamp(58px, min(5.15vw, 8.9svh), 74px) !important;
    line-height: .97 !important;
    max-width: 12.5ch;
  }

  .detail-hero p {
    max-width: 760px !important;
    font-size: clamp(15px, 1.08vw, 18px) !important;
    line-height: 1.52 !important;
  }

  .detail-image,
  .detail-image img {
    max-height: clamp(240px, 33svh, 345px) !important;
  }

  .detail-opening {
    max-width: 1210px !important;
    padding-top: clamp(12px, 1.65svh, 18px) !important;
    font-size: clamp(15px, 1.02vw, 17px) !important;
    line-height: 1.58 !important;
    margin: 0 !important;
  }

  .detail-page-cue {
    margin-top: clamp(2px, .6svh, 10px) !important;
  }
}

/* Tight laptop heights: keep the centered feeling, but compress safely into one screen. */
@media (min-width: 1100px) and (max-height: 815px) {
  .detail-page--overview {
    gap: clamp(12px, 1.7svh, 18px) !important;
    padding-top: clamp(12px, 1.4svh, 18px) !important;
    padding-bottom: clamp(20px, 2.7svh, 28px) !important;
  }

  .detail-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(228px, .68fr) !important;
    gap: clamp(24px, 3vw, 44px) !important;
  }

  .detail-hero h2 {
    font-size: clamp(70px, min(6.3vw, 10.6svh), 96px) !important;
  }

  .detail-hero h2.detail-title--long {
    font-size: clamp(60px, min(5.3vw, 8.8svh), 78px) !important;
  }

  .detail-hero h2.detail-title--extra-long {
    font-size: clamp(52px, min(4.55vw, 7.9svh), 66px) !important;
  }

  .detail-image,
  .detail-image img {
    max-height: clamp(190px, 24svh, 250px) !important;
  }

  .detail-opening {
    font-size: 14px !important;
    line-height: 1.52 !important;
  }
}

/* Tablet landscape: strengthen hierarchy without crowding. */
@media (min-width: 701px) and (max-width: 1099px) and (min-height: 741px) {
  .detail-page--overview {
    justify-content: center !important;
    padding-top: clamp(18px, 2.8svh, 28px) !important;
    padding-bottom: clamp(22px, 3svh, 30px) !important;
  }

  .detail-hero {
    gap: clamp(22px, 3vw, 34px) !important;
  }

  .detail-hero h2 {
    font-size: clamp(58px, min(7.2vw, 10svh), 80px) !important;
    line-height: .95 !important;
  }

  .detail-hero h2.detail-title--long {
    font-size: clamp(50px, min(6.1vw, 8.7svh), 68px) !important;
  }

  .detail-hero h2.detail-title--extra-long {
    font-size: clamp(44px, min(5.2vw, 7.6svh), 58px) !important;
  }
}