/* ===============================================
   360 PAGE - CONTENT ALIGNMENT
   =============================================== */

/* Align all page content with hero banner heading position */
/* The hero heading has padding-left: 40px on desktop, 16px on tablet/mobile */
/* Plus the container padding of 20px on desktop, 16px on mobile */

/* Desktop - All content aligns with hero heading */
.container {
  padding-left: 60px !important;  /* 20px base + 40px to match hero heading */
  padding-right: 60px !important;
}

/* Breadcrumb specific alignment - align with navbar logo */
.breadcrumb {
  padding-left: 20px !important;  /* Align with navbar logo position */
  margin-left: 0;
  margin-right: 0;
}

/* Ranks container - already inside container, no extra padding needed */
.ranks-container {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Quote needs full width background but content aligned */
.ranks-container-quote {
  margin-left: -60px;
  margin-right: -60px;
  padding-left: 60px;
  padding-right: 60px;
}

/* Make sense section alignment */
.make-sense-ranks-section {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.make-sense-ranks {
  padding-left: 0;
  padding-right: 0;
}

/* Tablet (768px - 991px) */
@media screen and (max-width: 991px) and (min-width: 768px) {
  .container {
    padding-left: 36px !important;  /* 20px base + 16px to match hero heading */
    padding-right: 36px !important;
  }
  
  .breadcrumb {
    padding-left: 20px !important;  /* Keep aligned with navbar logo */
    margin-left: 0;
    margin-right: 0;
  }
  
  .ranks-container-quote {
    margin-left: -36px;
    margin-right: -36px;
    padding-left: 36px;
    padding-right: 36px;
  }
  
  .make-sense-ranks-section {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
}

/* Mobile Large (576px - 767px) */
@media screen and (max-width: 767px) and (min-width: 576px) {
  .container {
    padding-left: 32px !important;  /* 16px base + 16px to match hero heading */
    padding-right: 32px !important;
  }
  
  .breadcrumb {
    padding-left: 16px !important;  /* Align with mobile navbar padding */
    margin-left: 0;
    margin-right: 0;
  }
  
  .ranks-container-quote {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
  
  .make-sense-ranks-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Mobile Small (up to 575px) */
@media screen and (max-width: 575px) {
  .container {
    padding-left: 32px !important;  /* 16px base + 16px to match hero heading */
    padding-right: 32px !important;
  }
  
  .breadcrumb {
    padding-left: 16px !important;  /* Align with mobile navbar padding */
    margin-left: 0;
    margin-right: 0;
  }
  
  .ranks-container-quote {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
  
  .make-sense-ranks-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}