/* course-details.css — page-specific styles for resources/views/courseDetails.blade.php
   Reuses site tokens/utilities from style.css (--Primary, font-48, Mfont-32, theme-btn,
   btn-white/btn-primary, rounded-sm, .hidden/.from-bottom/.from-top/.appear scroll-reveal). */

html {
    scroll-behavior: smooth;
}

/* style.css's generic .container carries its own vertical padding/margin (a base rule plus
   several breakpoint-specific overrides, e.g. margin-top/bottom:50px between 1280-1600px)
   which stacks with each section's own padding below, inflating the gap between sections.
   Neutralized here since this file only loads on this page and every section here already
   controls its own vertical rhythm explicitly. */
.container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cd-hero-img-col {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 32px;
}

/* Overall hero height is driven by this content column (the image column is
   absolutely positioned to match it — see .fullW-hero-sec in style.css), so
   trimming this vertical rhythm is what actually shrinks the section. */
.cd-hero-content-row {
    margin-top: 20px;
}

.cd-hero-content {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* The course photos coming out of the CMS are modest resolution (often well under
   1000px wide) — stretching them full-bleed across a wide hero column with
   object-fit:cover upscales them well past their native size and looks soft/pixelated.
   Framing them at a capped, downscaled size keeps them sharp and reads as an
   intentional "photo card" rather than a blown-up thumbnail. */
.cd-hero-img-frame {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
    border: 6px solid rgba(255, 255, 255, 0.18);
}

.cd-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cd-breadcrumbs {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 18px;
}

.cd-breadcrumbs a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cd-breadcrumbs a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.cd-breadcrumb-sep {
    margin: 0 8px;
}

.cd-hero-desc {
    margin-top: 14px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.6;
    max-width: 560px;
}

.cd-session-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 18px;
}

.cd-hidden-content {
    display: none !important;
}

.cd-mini-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.cd-mini-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cd-mini-row + .cd-mini-row {
    margin-top: 10px;
}

.cd-mini-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
}

.cd-mini-icon-check {
    background: #eef7ff;
    color: #04749f;
}

.cd-mini-icon-star {
    background: #fff8f0;
    color: #fea130;
}

.cd-mini-row strong {
    display: block;
    font-size: 13px;
    color: #303030;
}

.cd-mini-row span {
    font-size: 12px;
    color: #52595b;
}

.cd-hero-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-enrolled-count {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 600;
}

/* ===== Level info strip ===== */

.cd-level-info {
    padding: 46px 0;
}

.cd-level-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.cd-level-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cd-level-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
}

.cd-level-item picture img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.cd-level-item h2 {
    font-weight: normal;
    font-size: 15px;
    color: #52595b;
    margin: 0;
}

.cd-level-item h3 {
    font-weight: bold;
    font-size: 15px;
    color: #303030;
    margin: 2px 0 0;
}

/* ===== Sticky in-page nav ===== */

.cd-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #F4ECF5;
    padding: 14px 0;
}

.cd-sticky-nav .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cd-sticky-link {
    font-weight: bold;
    font-size: 15px;
    color: var(--Primary, #964097);
    background-color: #fff;
    border-radius: 100px;
    padding: 8px 22px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.cd-sticky-link:hover,
.cd-sticky-link.active {
    background: var(--Primary, #964097);
    color: #fff;
    text-decoration: none;
}

/* ===== About ===== */

.cd-about {
    padding: 60px 0;
}

.cd-about-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: start;
}

.cd-about-text h2 {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
}

.cd-about-text p {
    font-weight: normal;
    font-size: 17px;
    color: #52595b;
    line-height: 28px;
    margin-top: 10px;
}

.cd-about-skills {
    background: #fff7f6;
    border-radius: 20px;
    padding: 28px 26px;
}

.cd-about-skills h3 {
    font-weight: bold;
    font-size: 19px;
    color: #303030;
    margin: 0 0 16px;
}

.cd-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cd-skill-tags a {
    text-decoration: none;
}

.cd-skill-tags span {
    display: inline-block;
    font-weight: normal;
    font-size: 13px;
    color: #ff8f00;
    background: #fff2e0;
    border: 1px solid rgba(255, 143, 0, 0.15);
    padding: 8px 18px;
    border-radius: 100px;
    transition: all 0.25s ease;
}

.cd-skill-tags a:hover span {
    background: #ff8f00;
    color: #fff;
}

/* ===== Syllabus ===== */

.cd-syllabus {
    padding: 30px 0 60px;
}

.cd-syllabus-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cd-syllabus-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid #e7e7e7;
    background: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cd-syllabus-item:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}

.cd-syllabus-chapter {
    flex-shrink: 0;
    width: 63px;
    height: 61px;
    background: #f4ecf5;
    border-radius: 8px;
    text-align: center;
    padding-top: 8px;
}

.cd-syllabus-chapter h3 {
    font-weight: 600;
    font-size: 11px;
    color: #964097;
    margin: 0 0 3px;
}

.cd-syllabus-chapter h2 {
    font-weight: bold;
    font-size: 20px;
    color: #964097;
    margin: 0;
}

.cd-syllabus-img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
}

.cd-syllabus-content h2 {
    font-weight: bold;
    font-size: 18px;
    color: #303030;
    margin: 0 0 8px;
}

.cd-syllabus-content p {
    font-weight: normal;
    font-size: 15px;
    color: #52595b;
    line-height: 24px;
    margin: 0;
}

/* ===== Testimonials ===== */

.cd-testimonials {
    padding: 60px 0;
    background: #FFF7F6;
}

.cd-testimonials-head {
    text-align: center;
    margin-bottom: 40px;
}

.cd-testimonials-head h2 {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
}

.cd-testimonials-head p {
    font-size: 16px;
    color: #52595b;
    margin-top: 8px;
}

.cd-testimonials-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

.cd-testimonial-slide {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

.cd-testimonial-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cd-testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
}

.cd-testimonial-media {
    position: relative;
}

.cd-testimonial-media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.cd-testimonial-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Primary, #fb5850);
    cursor: pointer;
    transition: transform 0.25s ease;
}

.cd-testimonial-play svg {
    width: 22px;
    height: 22px;
}

.cd-testimonial-play:hover {
    transform: scale(1.1);
}

.cd-testimonial-content {
    padding: 18px;
}

.cd-testimonial-content h2 {
    font-size: 15px;
    font-weight: 600;
    color: #303030;
    margin: 0 0 6px;
    line-height: 22px;
}

.cd-testimonial-content h3 {
    font-size: 14px;
    font-weight: bold;
    color: var(--Primary, #fb5850);
    margin: 0;
}

.cd-testimonial-content h4 {
    font-size: 13px;
    font-weight: normal;
    color: #999;
    margin: 2px 0 0;
}

.cd-video-modal .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

.cd-video-modal .close_popup {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* ===== Certification ===== */

.cd-certification {
    padding: 60px 0;
}

.cd-cert-heading {
    font-weight: bold;
    font-size: 30px;
    color: #303030;
    text-align: center;
    margin-bottom: 40px;
}

.cd-cert-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    align-items: center;
}

.cd-cert-image {
    display: flex;
    justify-content: center;
}

.cd-cert-image img {
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: 20px;
}

.cd-cert-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 20px;
}

.cd-cert-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cd-cert-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.cd-cert-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff8f00;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.cd-cert-item h5 {
    font-weight: bold;
    font-size: 17px;
    color: #303030;
    margin: 0 0 8px;
}

.cd-cert-item h3 {
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: #52595b;
    margin: 0;
}

.cd-cert-features .theme-btn {
    grid-column: 1 / -1;
    justify-self: start;
}

/* ===== FAQ ===== */

.cd-faq {
    padding: 60px 0 70px;
    background: #FFF7F6;
}

.cd-faq-heading {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    color: #303030;
    margin-bottom: 34px;
}

.cd-faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cd-faq-item {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.cd-faq-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cd-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
}

.cd-faq-question h3 {
    font-weight: bold;
    font-size: 17px;
    color: #000;
    margin: 0;
}

.cd-faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.cd-faq-toggle::before,
.cd-faq-toggle::after {
    content: "";
    position: absolute;
    background: var(--Primary, #964097);
    transition: transform 0.25s ease;
}

.cd-faq-toggle::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

.cd-faq-toggle::after {
    top: 0;
    left: 8px;
    width: 2px;
    height: 18px;
}

.cd-faq-question.collapsed .cd-faq-toggle::after {
    transform: scaleY(1);
}

.cd-faq-question:not(.collapsed) .cd-faq-toggle::after {
    transform: scaleY(0);
}

.cd-faq-list .collapse p,
.cd-faq-list .collapsing p {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 15px;
    line-height: 24px;
    color: #52595b;
}

/* ===== Global Offices ===== */

.cd-offices {
    padding: 50px 0 60px;
}

.cd-offices-heading {
    font-weight: bold;
    font-size: 26px;
    color: #303030;
    text-align: center;
    margin-bottom: 30px;
}

.cd-offices-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cd-office-item {
    background: #fff;
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cd-office-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
}

.cd-office-item h5 {
    font-weight: bold;
    font-size: 15px;
    color: var(--Primary, #fb5850);
    margin: 0 0 10px;
    letter-spacing: 0.02em;
}

.cd-office-item p {
    font-size: 13px;
    color: #52595b;
    line-height: 20px;
    margin: 0 0 10px;
}

.cd-office-item a {
    font-size: 14px;
    font-weight: 600;
    color: #303030;
    text-decoration: none;
}

.cd-office-item a:hover {
    color: var(--Primary, #fb5850);
}

/* The floating Call button now comes from the shared partials/floating-call.blade.php
   (included by layouts/app.blade.php), styled by its own <style> block. */

/* ===== Responsive ===== */

@media (max-width: 991px) {
    .cd-level-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cd-about-grid {
        grid-template-columns: 1fr;
    }

    .cd-cert-grid {
        grid-template-columns: 1fr;
    }

    .cd-cert-features {
        grid-template-columns: 1fr;
    }

    .cd-offices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .cd-level-grid {
        grid-template-columns: 1fr;
    }

    .cd-offices-grid {
        grid-template-columns: 1fr;
    }

    .cd-hero-desc {
        max-width: 100%;
    }

    .cd-mini-card {
        max-width: 100%;
    }

    .cd-testimonial-slide {
        flex-basis: 82vw;
    }

    .cd-sticky-nav .container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cd-sticky-link {
        flex-shrink: 0;
    }
}