/**
 * HighMarket Academy LLP - Courses & Programmes Stylesheet
 * Used on courses.php
 * Styling: Professional Square Architecture
 */

/* Prevent horizontal page overflow */
html, body {
   overflow-x: hidden !important;
   max-width: 100vw;
}

/* Quick Nav Tabs */
.course-nav-bar {
   background: #ffffff;
   border-radius: 0;
   padding: 10px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
   margin-top: -35px;
   position: relative;
   z-index: 10;
   border: 1px solid #e2e8f0;
}
.course-nav-link {
   padding: 12px 18px;
   font-weight: 700;
   color: #475569;
   border-radius: 0;
   text-align: center;
   transition: all 0.3s;
   display: block;
   text-decoration: none;
   font-size: 14px;
}
.course-nav-link:hover, .course-nav-link.active {
   background: #243047;
   color: #e6bcae !important;
   text-decoration: none;
   box-shadow: 0 4px 14px rgba(36, 48, 71, 0.25);
}
.course-nav-link i {
   margin-right: 8px;
   color: #b6755f;
}

/* Enhanced Course Cards */
.course-card-pro {
   background: #ffffff;
   border-radius: 0;
   border: 1px solid #e2e8f0;
   overflow: hidden;
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   height: 100%;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   position: relative;
}
.course-card-pro:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 45px rgba(24, 34, 50, 0.14);
   border-color: #b6755f;
}

/* Card Hero Banner (Top photo + gradient overlay with text inside) */
.card-hero-banner {
   position: relative;
   min-height: 200px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 20px 22px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   color: #ffffff;
   transition: transform 0.4s ease;
}
.hero-top-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   position: relative;
   z-index: 2;
}
.hero-track-pill {
   background: rgba(98, 142, 132, 0.95);
   color: #ffffff;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   padding: 5px 12px;
   border: 1px solid rgba(167, 243, 208, 0.4);
   display: inline-flex;
   align-items: center;
}
.hero-track-pill.pill-advanced {
   background: rgba(182, 117, 95, 0.95);
   border-color: rgba(230, 188, 174, 0.5);
   color: #ffffff;
}
.hero-duration-badge {
   background: rgba(15, 23, 42, 0.85);
   backdrop-filter: blur(4px);
   color: #e2e8f0;
   font-size: 11.5px;
   font-weight: 700;
   padding: 5px 12px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   display: inline-flex;
   align-items: center;
}
.hero-duration-badge.badge-gold {
   color: #fbd5c3;
   border-color: rgba(182, 117, 95, 0.5);
}

.hero-title-wrap {
   position: relative;
   z-index: 2;
   margin-top: 25px;
}
.hero-course-title {
   font-size: 26px;
   font-weight: 800;
   color: #ffffff;
   margin-bottom: 6px;
   letter-spacing: -0.3px;
   text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.hero-course-tagline {
   font-size: 13.5px;
   color: #f1f5f9;
   font-weight: 500;
   margin-bottom: 0;
   line-height: 1.5;
   opacity: 0.95;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hero-course-tagline i {
   color: #e6bcae;
   font-size: 12px;
}

/* Card Body */
.course-card-pro .card-body {
   padding: 24px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

/* Metrics Bar */
.course-metrics-bar {
   background: #fbfaf8;
   border: 1px solid #ebd9c8;
   overflow: hidden;
   margin-bottom: 22px !important;
}
.metric-cell {
   padding: 16px 20px !important;
   background: #ffffff;
   border-color: #ebd9c8 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.metric-cell-label {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: #64748b;
   display: flex;
   align-items: center;
   margin-bottom: 6px;
   line-height: 1.3;
}
.metric-cell-label i {
   font-size: 13px;
   width: 16px;
}
.metric-cell-value {
   font-size: 17px;
   font-weight: 800;
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 4px;
   line-height: 1.25;
}
.metric-cell-unit {
   font-size: 12px;
   font-weight: 600;
   color: #64748b;
}

/* Educational Bonus Banner */
.metric-gift-banner {
   background: linear-gradient(135deg, #fdf6f2 0%, #faede5 100%);
   padding: 15px 20px !important;
   border-color: #ebd9c8 !important;
}
.gift-banner-label {
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: #b6755f;
   display: block;
   margin-bottom: 4px;
}
.gift-banner-title {
   font-size: 15px;
   font-weight: 800;
   color: #182232;
}

/* Curriculum Section */
.curriculum-section {
   margin-top: 6px;
   margin-bottom: 8px;
}
.curriculum-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
   padding-bottom: 6px;
   border-bottom: 1px solid #edf2f7;
}
.curriculum-title {
   font-size: 12.5px;
   font-weight: 800;
   color: #243047;
   text-transform: uppercase;
   letter-spacing: 0.6px;
}
.curriculum-count {
   font-size: 11.5px;
   font-weight: 700;
   color: #64748b;
   background: #f1f5f9;
   padding: 2px 8px;
}

.topic-list-pro {
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
   flex-grow: 1;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px 10px;
}
.topic-list-pro li {
   font-size: 12.5px;
   color: #334155;
   position: relative;
   line-height: 1.4;
   font-weight: 500;
   margin-bottom: 0;
   display: flex;
   align-items: center;
   background: #f8fafc;
   border: 1px solid #edf2f7;
   padding: 7px 10px;
   border-radius: 0;
   transition: all 0.2s ease;
}
.topic-list-pro li:hover {
   background: #ffffff;
   border-color: #cbd5e1;
   box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.topic-list-pro li .topic-icon {
   color: #b6755f;
   font-size: 13px;
   width: 18px;
   margin-right: 8px;
   flex-shrink: 0;
   text-align: center;
}
.topic-list-pro li::before {
   display: none;
}

/* Card Footer */
.card-footer-box {
   background: #f8fafc;
   border-top: 1px solid #e2e8f0;
   padding: 18px 24px;
   border-radius: 0;
}
.target-audience-text {
   font-size: 12px;
   color: #64748b;
   margin-bottom: 14px;
   display: flex;
   align-items: flex-start;
   line-height: 1.5;
   gap: 6px;
}
.target-audience-text i {
   margin-top: 2px;
   flex-shrink: 0;
   color: #b6755f;
}
.target-audience-text strong {
   color: #1e293b;
}

.card-action-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
}
.price-wrap {
   display: flex;
   flex-direction: column;
   min-width: 100px;
}
.investment-label {
   font-size: 10.5px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #64748b;
   font-weight: 700;
}
.investment-amount {
   font-size: 24px;
   font-weight: 800;
   color: #b6755f;
   line-height: 1.1;
}
.course-cta-btn {
   flex-shrink: 0;
   width: auto !important;
   padding: 11px 24px !important;
   font-size: 12.5px !important;
}

/* Delivery Modalities Pills */
.format-badge-pro {
   background: #faf6f0;
   color: #1e293b;
   padding: 9px 16px;
   border-radius: 0;
   font-size: 13px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin: 5px;
   border: 1px solid #ebd9c8;
   box-shadow: 0 2px 6px rgba(0,0,0,0.03);
   transition: all 0.25s;
}
.format-badge-pro:hover {
   background: #243047;
   color: #e6bcae;
   border-color: #b6755f;
   transform: translateY(-2px);
}
.format-badge-pro i {
   color: #b6755f;
   font-size: 14px;
}
.format-badge-pro:hover i {
   color: #e6bcae;
}

/* Learning Methodology Feature */
.method-box {
   background: #ffffff;
   border-radius: 0;
   padding: 24px 20px;
   border: 1px solid #f1f5f9;
   text-align: center;
   transition: all 0.3s;
   height: 100%;
}
.method-box:hover {
   border-color: #eecbc0;
   box-shadow: 0 10px 25px rgba(182, 117, 95, 0.12);
   transform: translateY(-3px);
}
.method-icon {
   width: 55px;
   height: 55px;
   border-radius: 0;
   background: #fbf0eb;
   color: #b6755f;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 16px;
   border: 1px solid rgba(182, 117, 95, 0.2);
   transition: all 0.3s ease;
}
.method-box:hover .method-icon {
   background: linear-gradient(135deg, #c4856f, #b6755f);
   color: #182232;
}
.method-box h5 {
   font-size: 16px;
   font-weight: 700;
   color: #243047;
   margin-bottom: 8px;
}
.method-box p {
   font-size: 13px;
   color: #64748b;
   margin-bottom: 0;
   line-height: 1.6;
}

/* Disclaimer Box */
.disclaimer-box {
   background: #fffbeb;
   border-left: 5px solid #b6755f;
   padding: 24px 30px;
   border-radius: 0;
   margin-top: 50px;
   border-top: 1px solid #fbf0eb;
   border-right: 1px solid #fbf0eb;
   border-bottom: 1px solid #fbf0eb;
}

.section-anchor {
   scroll-margin-top: 100px;
}

/* Responsive & Overflow Protection */
@media (max-width: 991px) {
   .course-card-pro {
      margin-bottom: 24px;
   }
   .course-cta-btn {
      width: 100% !important;
      margin-top: 8px;
   }
   .card-action-row {
      flex-direction: column;
      align-items: stretch;
   }
   .price-wrap {
      text-align: left;
      margin-bottom: 4px;
   }
}

@media (max-width: 767px) {
   .topic-list-pro {
      grid-template-columns: 1fr;
   }
   .course-title {
      font-size: 20px;
   }
   .card-featured-ribbon {
      top: 10px;
      right: 10px;
      font-size: 10px;
      padding: 4px 10px;
   }
   .highlight-col {
      padding: 10px 12px;
   }
   .highlight-val {
      font-size: 14px;
   }
}

@media (max-width: 575px) {
   .course-card-pro .card-body {
      padding: 18px 16px;
   }
   .card-footer-box {
      padding: 16px;
   }
   .course-nav-bar {
      margin-top: -20px;
      padding: 6px;
   }
   .course-nav-link {
      font-size: 12px;
      padding: 8px 6px;
   }
}