/* Desktop/tablet: one image-led composition with overlap between media and copy. */
@media (min-width: 769px) {
  .premium-hero-card {
    --hero-media-start: 16%;
    --hero-content-width: min(42%, 480px);
    background: #040a0f !important;
    isolation: isolate;
  }

  .premium-hero-image-zone {
    position: absolute;
    inset: 0 0 0 var(--hero-media-start);
    z-index: 0;
    display: block;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%);
  }

  .premium-hero-image-zone .premium-hero-img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: var(--hero-focal-x, 72%) var(--hero-focal-y, 50%) !important;
  }

  html body .premium-home .premium-hero-shade {
    inset: 0 !important;
    width: auto !important;
    background:
      linear-gradient(
        to right,
        rgba(2, 15, 18, .98) 0%,
        rgba(2, 15, 18, .94) 22%,
        rgba(2, 15, 18, .76) 34%,
        rgba(2, 15, 18, .34) 48%,
        rgba(2, 15, 18, .08) 60%,
        rgba(2, 15, 18, 0) 70%
      ),
      linear-gradient(
        to top,
        rgba(2, 15, 18, .72) 0%,
        rgba(2, 15, 18, .26) 42%,
        rgba(2, 15, 18, 0) 72%
      ) !important;
  }

  html body .premium-home .premium-hero-body {
    box-sizing: border-box;
    left: clamp(28px, 2.6vw, 38px) !important;
    bottom: clamp(34px, 3.2vw, 46px) !important;
    width: var(--hero-content-width) !important;
    max-width: 480px !important;
    padding: 0 !important;
  }

  .premium-hero-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .premium-hero-card::after {
    background: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .premium-hero-card {
    --hero-content-width: min(48%, 300px);
  }

  html body .premium-home .premium-hero-body {
    left: 28px !important;
    bottom: 30px !important;
    padding: 0 20px 0 0 !important;
  }

  .premium-hero-title {
    font-size: 30px !important;
  }
}

/* Keep the established full-bleed composition on phones. */
@media (max-width: 768px) {
  html body .premium-home .premium-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .premium-home .premium-hero-card,
  html body .premium-home .monitor-card {
    width: auto !important;
    min-width: 0 !important;
  }

  .premium-hero-image-zone {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .premium-hero-image-zone .premium-hero-img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--hero-focal-x, 50%) var(--hero-focal-y, 50%) !important;
  }

  html body .premium-home .premium-hero-shade {
    background:
      linear-gradient(
        to top,
        rgba(2, 15, 18, .92) 0%,
        rgba(2, 15, 18, .58) 52%,
        rgba(2, 15, 18, .12) 82%
      ) !important;
  }

  html body .premium-home .premium-hero-body {
    bottom: 0 !important;
    padding: 20px 20px 28px !important;
  }
}

/* Homepage incident list: keep the date and headline in distinct columns. */
html body .premium-home .incident-panel .thin-list {
  min-width: 0;
  padding-left: 8px;
}

html body .premium-home .incident-panel .thin-list a {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: start !important;
  min-width: 0;
}

html body .premium-home .dejure-panel .thin-list a {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: start !important;
  min-width: 0;
}

html body .premium-home .incident-panel .thin-list time,
html body .premium-home .incident-panel .thin-list span {
  min-width: 0;
}

html body .premium-home .incident-panel .thin-list time {
  line-height: 1.45;
}

html body .premium-home .home-compact-date {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body .premium-home .incident-panel .thin-list span {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  html body .premium-home .incident-panel .thin-list a,
  html body .premium-home .dejure-panel .thin-list a {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }
}