/* Editorial page heroes — unified mobile layout (loads last) */

@media (max-width: 768px) {
  :root {
    --hero-mobile-inset: max(20px, env(safe-area-inset-left, 0px));
  }

  /* Consistent horizontal inset inside heroes */
  .rj-hero .container,
  .stk-hero .container,
  .abt-hero .container,
  .cnt-hero .container,
  .trk-hero .container,
  .trm-hero .container,
  .prv-hero .container,
  .pay-hero .container,
  .sav-hero .container,
  .cmp-hero .container,
  .blg-hero .container,
  .rj-hero__grid.container,
  .stk-hero__grid.container,
  .abt-hero__grid.container,
  .cnt-hero__grid.container,
  .trk-hero__grid.container,
  .trm-hero__grid.container,
  .prv-hero__grid.container,
  .pay-hero__grid.container,
  .sav-hero__grid.container,
  .cmp-hero__grid.container,
  .blg-hero__grid.container {
    padding-left: var(--hero-mobile-inset) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }

  /* Section shell */
  .rj-hero,
  .stk-hero,
  .abt-hero,
  .cnt-hero,
  .trk-hero,
  .trm-hero,
  .prv-hero,
  .pay-hero,
  .sav-hero,
  .cmp-hero,
  .blg-hero,
  .lgn-hero,
  .reg-hero {
    padding: 8px 0 24px;
    overflow-x: clip;
  }

  /* Single-column grids */
  .rj-hero__grid,
  .stk-hero__grid,
  .abt-hero__grid,
  .cnt-hero__grid,
  .trk-hero__grid,
  .trm-hero__grid,
  .prv-hero__grid,
  .pay-hero__grid,
  .sav-hero__grid,
  .cmp-hero__grid,
  .blg-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-bottom: 12px;
    min-width: 0;
  }

  /* Badge */
  .rj-hero__badge,
  .stk-hero__badge,
  .abt-hero__badge,
  .cnt-hero__badge,
  .trk-hero__badge,
  .trm-hero__badge,
  .prv-hero__badge,
  .pay-hero__badge,
  .sav-hero__badge,
  .cmp-hero__badge,
  .blg-hero__badge,
  .lgn-hero__badge,
  .reg-hero__badge {
    max-width: 100%;
    margin-bottom: 14px !important;
    padding: 5px 12px 5px 7px;
    font-size: 0.7rem !important;
    line-height: 1.35;
    gap: 8px;
  }

  /* Headlines */
  .rj-hero__title,
  .stk-hero__title,
  .abt-hero__title,
  .cnt-hero__title,
  .trk-hero__title,
  .trm-hero__title,
  .prv-hero__title,
  .pay-hero__title,
  .sav-hero__title,
  .cmp-hero__title,
  .blg-hero__title,
  .lgn-hero__title,
  .reg-hero__title {
    margin-bottom: 14px !important;
  }

  .rj-hero__title-line,
  .stk-hero__title-line,
  .abt-hero__title-line,
  .cnt-hero__title-line,
  .trk-hero__title-line,
  .trm-hero__title-line,
  .prv-hero__title-line,
  .pay-hero__title-line,
  .sav-hero__title-line,
  .cmp-hero__title-line,
  .blg-hero__title-line,
  .lgn-hero__title-line,
  .reg-hero__title-line {
    font-size: clamp(1.72rem, 8.2vw, 2.25rem) !important;
    letter-spacing: -0.028em;
    line-height: 1.02;
  }

  /* Lead copy */
  .rj-hero__desc,
  .stk-hero__lead,
  .abt-hero-lead,
  .cnt-hero-lead,
  .trk-hero-lead,
  .trm-hero-lead,
  .prv-hero-lead,
  .pay-hero-lead,
  .sav-hero-lead,
  .cmp-hero-lead,
  .blg-hero-lead,
  .lgn-hero-lead,
  .reg-hero-lead {
    max-width: none !important;
    font-size: 0.9rem !important;
    line-height: 1.62 !important;
    margin-bottom: 16px !important;
  }

  /* Trust bullets — compact wrap */
  .rj-hero__trust,
  .stk-hero__trust,
  .abt-hero__trust,
  .cnt-hero__trust,
  .trk-hero__trust,
  .trm-hero__trust,
  .prv-hero__trust,
  .pay-hero__trust,
  .sav-hero__trust,
  .cmp-hero__trust,
  .blg-hero__trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px 14px !important;
    margin-bottom: 18px;
  }

  .rj-hero__trust li,
  .stk-hero__trust li,
  .abt-hero__trust li,
  .cnt-hero__trust li,
  .trk-hero__trust li,
  .trm-hero__trust li,
  .prv-hero__trust li,
  .pay-hero__trust li,
  .sav-hero__trust li,
  .cmp-hero__trust li,
  .blg-hero__trust li {
    font-size: 0.74rem !important;
  }

  /* CTAs */
  .rj-hero__cta,
  .abt-hero-actions,
  .cnt-hero-actions,
  .trk-hero-actions,
  .trm-hero-actions,
  .prv-hero-actions,
  .pay-hero-actions,
  .sav-hero-actions,
  .cmp-hero-actions,
  .blg-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 18px !important;
  }

  .rj-hero__cta .rj-btn,
  .abt-hero-actions .rj-btn,
  .cnt-hero-actions .rj-btn,
  .trk-hero-actions .rj-btn,
  .trm-hero-actions .rj-btn,
  .prv-hero-actions .rj-btn,
  .pay-hero-actions .rj-btn,
  .sav-hero-actions .rj-btn,
  .cmp-hero-actions .rj-btn,
  .blg-hero-actions .rj-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* Stat metrics — 3-up row instead of stacked cards */
  .rj-hero__metrics,
  .stk-hero__metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    flex-direction: unset !important;
    gap: 8px !important;
    margin: 0;
    padding-top: 18px !important;
    border-top: 1px solid rgba(18, 18, 18, 0.09);
  }

  .rj-hero__metrics > div,
  .stk-hero__metrics > div {
    flex: unset !important;
    width: auto !important;
    min-width: 0;
    padding: 11px 8px !important;
    text-align: center;
    border-radius: 12px;
  }

  .rj-hero__metrics dt,
  .stk-hero__metrics dt {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem) !important;
    line-height: 1.05;
  }

  .rj-hero__metrics dd,
  .stk-hero__metrics dd {
    margin-top: 5px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.07em;
    line-height: 1.25;
  }

  /* Hero media stage */
  .rj-hero__stage,
  .stk-hero__stage,
  .abt-hero-visual,
  .cnt-hero__panel,
  .trk-hero__panel,
  .trm-hero__panel,
  .prv-hero__panel,
  .pay-hero__panel,
  .sav-hero__panel,
  .cmp-hero__panel,
  .blg-hero__panel {
    position: relative;
    max-width: none !important;
    width: 100%;
    min-width: 0;
    margin: 4px 0 0;
  }

  .rj-hero__intro,
  .stk-hero__intro,
  .abt-hero__intro,
  .cnt-hero__intro,
  .trk-hero__intro,
  .trm-hero__intro,
  .prv-hero__intro,
  .pay-hero__intro,
  .sav-hero__intro,
  .cmp-hero__intro,
  .blg-hero__intro {
    min-width: 0;
  }

  .rj-spotlight__frame,
  .stk-spotlight__frame {
    border-radius: 16px;
    aspect-ratio: 16 / 11;
  }

  .rj-spotlight__meta,
  .stk-spotlight__meta {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .rj-spotlight__meta strong,
  .stk-spotlight__meta strong {
    font-size: 0.92rem;
  }

  .rj-spotlight__price,
  .stk-spotlight__price {
    font-size: 1rem;
  }

  /* Thumbnail strip — no negative offset bleed */
  .rj-hero__thumbs,
  .stk-hero__thumbs {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
  }

  .rj-hero__thumb,
  .stk-hero__thumb {
    flex: 1 1 calc(50% - 4px);
    width: auto !important;
    min-width: 0;
    max-width: 160px;
  }

  .rj-hero__thumb:hover,
  .stk-hero__thumb:hover {
    transform: none;
  }

  /* Finder bars under hero */
  .rj-finder,
  .stk-finder {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    margin-bottom: -12px !important;
    padding: 16px !important;
    border-radius: 16px;
    box-sizing: border-box;
  }

  .rj-finder__bar,
  .stk-finder__bar {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .rj-finder__bar .rj-btn,
  .stk-finder__bar .rj-btn {
    width: 100%;
    justify-content: center;
  }

  /* Breadcrumbs */
  .stk-breadcrumb,
  .abt-breadcrumb,
  .cnt-breadcrumb,
  .trk-breadcrumb,
  .trm-breadcrumb,
  .prv-breadcrumb,
  .pay-breadcrumb,
  .sav-breadcrumb,
  .cmp-breadcrumb,
  .blg-breadcrumb,
  .lgn-breadcrumb,
  .reg-breadcrumb {
    font-size: 0.74rem;
    margin-bottom: 4px;
  }

  /* Contact / legal side panels */
  .cnt-hero-panel,
  .trk-hero-panel,
  .trm-hero-panel,
  .prv-hero-panel,
  .pay-hero-panel {
    padding: 20px 18px 16px !important;
    border-radius: 16px;
    max-width: none !important;
  }

  /* About hero collage */
  .abt-hero-visual-grid {
    grid-template-columns: 1fr !important;
  }

  .abt-hero-img-main {
    grid-row: auto !important;
    min-height: 200px !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  .abt-hero-img-sub {
    display: none;
  }

  .abt-hero-float {
    position: static !important;
    margin-top: 10px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --hero-mobile-inset: max(18px, env(safe-area-inset-left, 0px));
  }

  .rj-hero__title-line,
  .stk-hero__title-line,
  .abt-hero__title-line,
  .cnt-hero__title-line,
  .trk-hero__title-line,
  .trm-hero__title-line,
  .prv-hero__title-line,
  .pay-hero__title-line,
  .sav-hero__title-line,
  .cmp-hero__title-line,
  .blg-hero__title-line,
  .lgn-hero__title-line,
  .reg-hero__title-line {
    font-size: clamp(1.58rem, 9vw, 2rem) !important;
  }

  .rj-hero__metrics > div,
  .stk-hero__metrics > div {
    padding: 10px 6px !important;
  }

  .rj-hero__metrics dt,
  .stk-hero__metrics dt {
    font-size: 1.08rem !important;
  }

  .rj-hero__thumb,
  .stk-hero__thumb {
    flex: 1 1 calc(50% - 4px);
    max-width: none;
  }
}

@media (max-width: 360px) {
  .rj-hero__metrics dd,
  .stk-hero__metrics dd {
    font-size: 0.52rem !important;
    letter-spacing: 0.04em;
  }
}