/* Progress.tz v2.9.12 — Hero → Trending Progress responsive rhythm */

/*
   This patch intentionally targets the boundary between the homepage hero
   and the immediately following Trending Progress section. It removes
   stacked margins/padding that can create an oversized desktop/tablet gap.
*/

/* Common semantic/legacy selectors supported by Progress.tz builds. */
@media (min-width:768px){
  :is(
    #hero,
    .hero,
    .hero-section,
    .home-hero,
    .homepage-hero,
    [data-section="hero"]
  ){
    margin-bottom:0!important;
  }

  :is(
    #trending,
    #trending-progress,
    .trending,
    .trending-progress,
    .trending-section,
    .home-trending,
    [data-section="trending"],
    [data-section="trending-progress"]
  ){
    margin-top:0!important;
  }

  /* Canonical section separation comes from one side only. */
  :is(
    #trending,
    #trending-progress,
    .trending,
    .trending-progress,
    .trending-section,
    .home-trending,
    [data-section="trending"],
    [data-section="trending-progress"]
  ){
    padding-top:24px!important;
  }
}

/* Tablet portrait + landscape: compact but visible separation. */
@media (min-width:768px) and (max-width:1099px){
  :is(
    #trending,
    #trending-progress,
    .trending,
    .trending-progress,
    .trending-section,
    .home-trending,
    [data-section="trending"],
    [data-section="trending-progress"]
  ){
    padding-top:20px!important;
  }
}

/* Desktop: slightly more breathing room than tablet. */
@media (min-width:1100px){
  :is(
    #trending,
    #trending-progress,
    .trending,
    .trending-progress,
    .trending-section,
    .home-trending,
    [data-section="trending"],
    [data-section="trending-progress"]
  ){
    padding-top:28px!important;
  }
}

/* Mobile spacing remains controlled by the existing production stylesheet. */