/* =========================================================
   HAPUS INFOTECH LEAD MAGNET
   ASSESSMENT LISTING PAGE
   Bootstrap 5 / Drupal 11
========================================================= */

/* =========================================================
   1. HERO SECTION
========================================================= */

.listing-hero {
  padding: 65px 0 32px !important;
}

.listing-hero h1 {
  color: #001337 !important;
  font-size: clamp(32px, 52px, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
}
.listing-hero,.assessment-grid{
  background-color: #fff !important;
}

/* Orange heading highlight */

.listing-hero h1 .text-blue {
  color: #ff6500 !important;
}

/* Hero eyebrow */

.listing-hero .eyebrow {
  color: #ff6500 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Hero description */

.listing-hero .assessment-hero-description {
  max-width: 590px !important;
  color: #687a98 !important;
  font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
  line-height: 1.65 !important;
}

/* Hero CTA */

.listing-hero .btn-orange {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  min-height: 50px !important;
  padding: 12px 24px !important;

  color: #ffffff !important;
  background: #ff6500 !important;
  border: 1px solid #ff6500 !important;
  border-radius: 9px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.listing-hero .btn-orange:hover {
  color: #ffffff !important;
  background: #e65a00 !important;
  border-color: #e65a00 !important;
}

/* =========================================================
   2. HERO IMAGE
========================================================= */

.listing-hero .listing-photo {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  max-height: 380px !important;

  height: auto !important;
  margin: 0 auto !important;

  object-fit: contain !important;
  object-position: center !important;

  mix-blend-mode: multiply;
}

/* =========================================================
   3. ASSESSMENT LISTING GRID
========================================================= */

.assessment-grid {
  padding: 26px 0 65px !important;
}

.assessment-grid .row {
  align-items: stretch !important;
}

/* =========================================================
   4. ASSESSMENT CARDS
========================================================= */

.assessment-grid .assessment-item {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 203px !important;

  padding: 28px !important;
  border-radius: 16px !important;

  box-sizing: border-box !important;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.assessment-grid .assessment-item:hover {
  border-color: #ffd4c0 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0, 19, 55, 0.06) !important;
}

/* =========================================================
   5. ICONS
========================================================= */

.assessment-grid .assessment-item .icon-tile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 54px !important;

  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;

  border-radius: 13px !important;

  background: #fff0e6 !important;
  color: #ff6500 !important;
}

.assessment-grid .assessment-item .icon-tile i {
  color: inherit !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

/* =========================================================
   6. CARD HEADINGS
========================================================= */

.assessment-grid .assessment-item h3 {
  color: #001337 !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;

  margin-bottom: 8px !important;
}

/* =========================================================
   7. DESCRIPTION
========================================================= */

.assessment-grid .assessment-item-description {
  color: #687a98 !important;
  font-size: 0.91rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

.assessment-grid .assessment-item-description p {
  margin: 0 !important;
  min-height: 49px !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* =========================================================
   8. START ASSESSMENT BUTTONS
========================================================= */

.assessment-grid .assessment-item .btn-outline-blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  padding: 10px 18px !important;

  color: #001337 !important;
  background: #ffffff !important;
  border: 1px solid #001337 !important;
  border-radius: 9px !important;

  font-size: 0.88rem !important;
  font-weight: 600 !important;

  text-decoration: none !important;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease !important;
}

.assessment-grid .assessment-item .btn-outline-blue:hover {
  color: #ffffff !important;
  background: #001337 !important;
  border-color: #001337 !important;
}

/* =========================================================
   9. TABLET - 768px TO 1199px
========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {
  .listing-hero {
    padding: 45px 0 25px !important;
  }

  .assessment-grid .assessment-item {
    padding: 24px !important;
  }
}

/* =========================================================
   10. MOBILE - BELOW 768px
========================================================= */

@media (max-width: 767.98px) {
  .listing-hero {
    padding: 35px 0 10px !important;
  }

  .listing-hero .listing-photo {
    max-height: 260px !important;
  }

  .assessment-grid {
    padding: 20px 0 45px !important;
  }

  .assessment-grid .assessment-item {
    min-height: 0 !important;
    padding: 22px !important;
  }

  .assessment-grid .assessment-item-description p {
    min-height: 0 !important;
  }
}

/* =========================================================
   11. SMALL MOBILE - 320px+
========================================================= */

@media (max-width: 575.98px) {
  .listing-hero h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  .listing-hero .btn-orange {
    width: 100% !important;
  }

  .assessment-grid .assessment-item {
    padding: 20px !important;
  }

  .assessment-grid .assessment-item .btn-outline-blue {
    width: 100% !important;
  }
}

/* =========================================================
   12. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .assessment-grid .assessment-item,
  .assessment-grid .assessment-item .btn-outline-blue {
    transition: none !important;
  }

  .assessment-grid .assessment-item:hover {
    transform: none !important;
  }
}