/* =========================================================
   SWC Home Page - Modern UI
   Works with the existing Bootstrap 4 layout.
   ========================================================= */

.home-page {
  margin: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 195, 247, .12), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(14, 165, 233, .10), transparent 25%),
    #f5f8fc;
  color: #172033;
  font-family: 'Mitr', sans-serif;
}

.home-page .font {
  font-family: 'Mitr', sans-serif;
}

/* Keep the navbar visually separated from page content */
.home-nav-wrap {
  width: 100%;
  padding: 12px 18px 0;
  position: relative;
  z-index: 1000;
}

/* Main content width */
.home-page > .container-fluid {
  max-width: 1440px;
  margin: 0 auto;
}

/* Profile / member hero */
.home-profile-section {
  margin-top: 14px;
}

.home-profile-section .col-sm-8 > table {
  width: 100% !important;
  border: 0 !important;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  background-position: center;
}

.home-profile-section .col-sm-8 > table td {
  border: 0 !important;
}

.home-profile-section .masked {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.home-profile-section .masked img {
  max-width: 92%;
  max-height: 260px;
  object-fit: contain;
}

.home-profile-section .h1 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin-top: 8px;
}

.home-profile-section .h4 {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  margin-top: 8px;
}

/* Personal statistics cards */
.home-page .row.justify-content-center {
  gap: 0;
  margin-top: 10px;
}

.home-page .row.justify-content-center > [class*="col-"] {
  margin-bottom: 20px;
}

.home-page .row.justify-content-center .card {
  border: 0 !important;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 35px rgba(15,23,42,.08) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.home-page .row.justify-content-center .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(15,23,42,.13) !important;
}

.home-page .row.justify-content-center h5 {
  color: #172033;
  font-weight: 600;
}

.home-page .row.justify-content-center p {
  border-bottom: 1px solid #edf1f7;
  padding: 10px 0;
  margin-bottom: 0;
}

.home-page .row.justify-content-center p:last-child {
  border-bottom: 0;
}

/* Slideshow — 16:9 infographic canvas */
.home-page .home-slideshow-column {
  flex: 0 0 93.3333%;
  max-width: 93.3333%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.home-page #demo,
.home-page #myCarousel {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 0 0 56.25%;
  border-radius: 0;
  overflow: hidden;
}

.home-page #demo {
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
}

.home-page .carousel-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #f8fafc;
}

.home-page .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.home-page .carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.home-page .carousel-indicators li {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
}

.home-page .carousel-control-prev,
.home-page .carousel-control-next {
  width: 8%;
}

/* Total distance / calorie cards */
.home-page .summary-showcase {
  margin-top: 4px;
}

.home-page .distance-highlight-card,
.home-page .calorie-highlight-card {
  border-radius: 26px !important;
}

/* Section headings */
.home-page .home-section-title,
.home-page .section-title {
  font-size: 1.45rem;
  font-weight: 600;
  color: #172033;
}

/* TOP SCORE table */
.home-page table {
  border-collapse: separate;
  border-spacing: 0;
}

.home-page .row.content table:not(.profile-table) {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(15,23,42,.07);
}

.home-page .row.content table:not(.profile-table) tr:first-child td {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
  color: #fff !important;
  font-weight: 600;
  border: 0;
}

.home-page .row.content table:not(.profile-table) td {
  border-bottom: 1px solid #edf1f7;
  padding: 12px 10px;
}

.home-page .row.content table:not(.profile-table) tr:not(:first-child) {
  transition: background .2s ease;
}

.home-page .row.content table:not(.profile-table) tr:not(:first-child):hover {
  background: #f7fbff;
}

/* Article cards */
.home-page .container.mb-4 .card {
  height: 100%;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,.07) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.home-page .container.mb-4 .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px rgba(15,23,42,.13) !important;
}

.home-page .container.mb-4 .card-img-top {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.home-page .container.mb-4 .list-inline {
  color: #7b8798;
  font-size: .8rem;
}

.home-page .container.mb-4 .lead {
  color: #273449;
  font-size: 1rem;
  line-height: 1.65;
}

.home-page .container.mb-4 .btn-outline-dark {
  border-radius: 999px;
  padding: 7px 20px;
  border-color: #d9e2ec;
  color: #334155;
  transition: all .2s ease;
}

.home-page .container.mb-4 .btn-outline-dark:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}

/* QR section */
.home-page img[src*="qrheader"] {
  max-width: 100%;
  border-radius: 18px;
}

.home-page img[src*="scanqr"] {
  max-width: 260px;
  border-radius: 16px;
}

.home-page img[src*="swcline"] {
  max-width: 180px;
  height: auto;
}

/* Facebook block */
.home-page .fb-page {
  margin: 24px auto 50px;
}

/* Remove excessive legacy spacing */
.home-page br {
  line-height: 1;
}

@media (max-width: 991px) {
  .home-nav-wrap {
    padding: 8px 10px 0;
  }

  .home-profile-section .masked {
    min-height: 220px;
  }
}

@media (max-width: 767px) {
  .home-page {
    background: #f5f8fc;
  }

  .home-nav-wrap {
    padding: 6px 6px 0;
  }

  .home-profile-section {
    margin-top: 8px;
  }

  .home-profile-section .col-sm-8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .home-profile-section .col-sm-8 > table {
    border-radius: 20px;
  }

  .home-profile-section .masked {
    min-height: 170px;
    padding: 12px;
  }

  .home-profile-section .masked img {
    max-height: 170px;
  }

  .home-page .carousel-item img {
    height: 100%;
  }

  .home-page .row.content > .col-sm-8 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .home-page .row.content table:not(.profile-table) {
    font-size: .82rem;
  }

  .home-page .row.content table:not(.profile-table) td {
    padding: 9px 5px;
  }
}

@media (max-width: 575px) {
  .home-page .home-slideshow-column {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}