/* Coaching Page Specific Styles */

.coaching-hero {
    background-color: var(--purple);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 50px;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 50px;
    color: white;
    overflow: hidden;
}

.coaching-hero h1 {
    color: white;
    font-size: 36px;
     font-weight: 400 ;
     line-height: 40px ;
    margin: 10px 0 20px;
}
.eyebrow{
    color: #FAF677 !important;
    font-size: 16px !important; 
    font-weight: 400 !important;
     line-height: 25px !important;

}
.coaching-hero p {
    color: #F8F8F8;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
}

.coaching-hero-image img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

/* Course Card V2 (Exact Figma Specs) */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.course-card-v2 {
    background: #FFFFFF;
    max-width: 400px;
    border-radius: 10px;
    overflow: hidden;
    /* Box Shadow from Figma: 0px 4px 20px 5px #C7C7C7 25% */
    box-shadow: 0px 4px 20px 5px rgba(199, 199, 199, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0px 12px 30px rgba(199, 199, 199, 0.4);
}

.card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.course-card-v2 h3 {
    font-size: 18px;
    font-weight: 400;
    color: #292929;
    margin: 0 0 12px;
}

.card-desc {
    font-size: 16px;
    color: #3F3F3F;
     font-weight: 400;
    line-height: 25px;
    margin-bottom: 20px;
    min-height: 60px;
}

.card-meta-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.card-meta-v2 > div {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 11px;
    color: #AAA;
    text-transform: none;
}

.meta-value {
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

/* Pricing Box */
.price-box {
    background: #9D2222; /* Adhikari Red */
    border-radius: 8px;
    padding: 15px 20px;
    color: white;
    margin-bottom: 15px;
}

.price-header {
    font-size: 13px;
    font-weight: 700;
    color: #fff490; /* Yellow from Figma */
    margin-bottom: 4px;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.current-price {
    font-size: 28px;
    font-weight: 700;
}

.old-price {
    font-size: 14px;
    text-decoration: line-through;
    opacity: 0.6;
}

.price-footer {
    font-size: 12px;
    margin-top: 5px;
    opacity: 0.9;
}

.batch-note {
    font-size: 11px;
    color: #777;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .coaching-hero {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* --- ADHIKARI ACADEMY PIXEL-PERFECT FIGMA CARD --- */

.course-card-v2 {
    width: 400px !important;
    height: 559px !important; /* Hug height from Figma */
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0px 4px 20px 5px rgba(199, 199, 199, 0.25) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto;
}

/* Image Section: Width 380, Height 200, Radius 10, Padding 10 */
.card-image-container {
    padding: 10px 10px 0 10px !important;
}

.card-top-img {
    width: 380px !important;
    height: 200px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
}

/* Body Section: Padding L:10, R:10, B:20 from Figma shot */
.card-body {
    padding: 13px 10px 20px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Title: Sofia Pro, 18px, Line Height 20px, Color #292929 */
.card-title {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 18px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #292929 !important;
    margin: 0 0 5px 0 !important;
}

/* Description: Sofia Pro, 16px, Line Height 25px, Color #3F3F3F */
.card-desc {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 16px !important;
    line-height: 25px !important;
    font-weight: 400 !important;
    color: #3F3F3F !important;
    margin: 0 0 20px 0 !important;
}

/* Metadata Row: Gap 12px based on Frame 128 */
.card-meta-row {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

/* Labels: Sofia Pro, 12px, Line Height 15px, Color #9C9C9C */
.meta-label {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 12px !important;
    line-height: 15px !important;
    color: #9C9C9C !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* Values: Sofia Pro, Size 14px, Color #292929 */
.meta-value {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #292929 !important;
    display: block !important;
}

/* Pricing Box: BG #B32022, Radius 8 */
.price-container {
    background: #9D2222!important;
    border-radius: 8px !important;
    padding: 15px 15px !important;
    margin-top: auto !important;
}

/* Price Header: 16px, #FAF677 */
.price-eyebrow {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 16px !important;
    line-height: 25px !important;
    color: #FAF677 !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.price-flex {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}

/* Price Main: 32px, White */
.price-now {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 32px !important;
    line-height: 100% !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
}

/* Strikethrough: 16px, #9C9C9C */
.price-was {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 16px !important;
    line-height: 25px !important;
    color: #9C9C9C !important;
    text-decoration: strikethrough !important;
}

.price-gst {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    display: block !important;
    margin-top: 4px !important;
}

/* Footer Note: 12px, #887F88 */
.card-footer-note {
    font-family: "Sofia Pro", sans-serif !important;
    font-size: 12px !important;
    color: #887F88 !important;
    margin: 15px 0 0 0 !important;
}
/* --- FIXES TO ALIGN LEFT, SHOW 4 CARDS, AND FIX TEXT CUT-OFF --- */

/* 1. Update Grid to allow 4 columns and align with the hero section */
.courses-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Forces 4 cards per row */
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    justify-items: start !important;
}

/* 2. Fix Card sizing and prevent text cut-off */
.course-card-v2 {
    width: 100% !important; /* Makes card responsive to the 4-column grid */
    min-width: 400px !important; 
    height: auto !important; /* REMOVES the fixed height that cut off your footer */
    min-height: 560px !important; /* Ensures consistent look without hiding content */
    margin: 0 !important; /* Aligns cards to the left of the grid cell */
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Ensure image scales to fit the new card width */
.card-image-container {
    width: 100% !important;
    padding: 10px 10px 0 10px !important;
    box-sizing: border-box !important;
}

.card-top-img {
    width: 100% !important; /* Image fills the container */
    height: 200px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
}

/* 4. Fix the strikethrough (CSS uses line-through, not strikethrough) */
.price-was {
    text-decoration: line-through !important; 
    color: #9C9C9C !important;
    font-size: 16px !important;
    opacity: 1 !important;
}

/* 5. Ensure the footer note is visible and styled */
.card-footer-note {
    display: block !important;
    visibility: visible !important;
    margin-top: 15px !important;
    padding-bottom: 5px !important;
    font-size: 12px !important;
    color: #887F88 !important;
}

/* 6. Responsive adjustments for smaller screens so it doesn't break */
@media (max-width: 1300px) {
    .courses-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1000px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 650px) {
    .courses-grid {
        grid-template-columns: 1fr !important;
    }
}