/* Shared clean-up for the inner pages (About, Contact, Gallery, Courses, Workshops, detail pages).
   Loaded at the end of each page so it wins over the page's own older styles.
   Colours follow the home page: navy #002b6e (hover #0b3f94), light grey band #f3f5f8. */

/* ---------- Typography ---------- */
html body {
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Fonts that were never loaded (Outfit, Inter, Roboto) fell back to Times; use the site font */
html body :is(.clp-main-title, .clp-description, .workshop-card-value, .workshop-overview-feature-item,
              .attend-card-desc, .mentors-subtitle-text, .mentor-description-text) {
    font-family: sans-serif !important;
}
html body p { line-height: 1.65; }

/* Section headings: one size and colour across the inner pages */
html body :is(.thinthick, .section-titlehistory, .oreol-leadership-title, .flagship-main-title,
              .learning-modes-title, .workshop-overview-title, .mentors-main-title, .attend-main-title,
              .faq-title, .section-title) {
    font-size: clamp(26px, 2.4vw, 32px) !important;
    line-height: 1.25 !important;
    color: #111827 !important;
    letter-spacing: -0.2px;
    margin-bottom: 10px !important;
}
html body :is(.section-subtitle, .flagship-subtitle-text, .learning-modes-subtitle, .mentors-subtitle-text,
              .workshop-subtitle, .oreol-leadership-subtitle) {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #5b6475 !important;
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Banners (Courses, Workshops, course and workshop pages) ----------
   Same look as the home page banner: photo, dark navy overlay, white text. */
html body .hero-section {
    min-height: 380px !important;  /* +40px agreed with the owner, Oct 2026 */
    height: auto !important;
    padding: 76px 0 68px !important;
    background: #0b1f3a !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
html body .hero-section::before { display: none !important; }
html body .hero-section .hero-bg-image {
    background-size: cover !important;
    background-position: center 35% !important;
}
html body .hero-section .hero-video-overlay {
    background: linear-gradient(to bottom, rgba(6, 18, 38, .80) 0%, rgba(6, 18, 38, .62) 50%, rgba(6, 18, 38, .85) 100%) !important;
}
html body .hero-section .hero-title,
html body .hero-section .hero-title strong,
html body .hero-section .hero-title span {
    color: #ffffff !important;
}
html body .hero-section .hero-title {
    font-size: clamp(30px, 3.2vw, 44px) !important;
    line-height: 1.18 !important;
    font-weight: 400 !important;
    letter-spacing: -0.4px;
    margin: 0 auto 16px !important;
}
html body .hero-section .hero-title strong { font-weight: 800 !important; }
html body .hero-section .hero-description {
    color: rgba(255, 255, 255, .92) !important;
    font-size: clamp(15px, 1.1vw, 17px) !important;
    line-height: 1.65 !important;
    font-style: normal !important;
    max-width: 760px;
    margin: 0 auto 26px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
html body .hero-section .hero-buttons { margin-top: 0 !important; }
html body .hero-section .surgical-secondary-button {
    background: #ffffff !important;
    color: #002b6e !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
html body .hero-section .surgical-secondary-button:hover {
    background: #e8eefb !important;
    color: #0b3f94 !important;
}
/* Duration / Students / Level boxes on the course page banner: glass cards like the home stats */
html body .hero-section .info-cards {
    position: relative !important;
    z-index: 2;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 28px auto 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
}
html body .hero-section .info-card {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
}
html body .hero-section .info-card :is(.info-value, .info-icon, .info-icon i) { color: #ffffff !important; }
html body .hero-section .info-card .info-label { color: #ffd2a8 !important; }

/* ---------- Compact cards ---------- */
html body :is(.oreol-academy-card, .feature-card) {
    padding: 28px 24px !important;
    min-height: 0 !important;
    height: 100% !important;
}
html body .cards-grid .card {
    padding: 26px 24px !important;
    min-height: 0 !important;
}
html body :is(.oreol-academy-card, .feature-card, .cards-grid .card) :is(h3, .feature-title) {
    font-size: 19px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}
html body :is(.oreol-academy-card, .feature-card, .cards-grid .card) p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    margin-bottom: 0 !important;
}
html body .contact-team-card {
    min-height: 0 !important;
    height: 100% !important;
    padding: 24px 22px !important;
}
html body .oreol-member-card,
html body .oreol-leadership-card {
    padding: 26px 20px !important;
}
html body .career_card_wrapper {
    padding: 36px 32px !important;
}
html body .diploma-details-container {
    padding: 26px 28px !important;
}

/* Course cards: readable description and no overflow */
html body .flagship-course-card .flagship-course-description {
    color: #5b6475 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Space between the banner and the first section title: 70px, same as the home page */
html body .hero-section + :is(.flagship-section-container, .workshop-section, .learning-modes-section, .workshop-details-container) {
    padding-top: 70px !important;
}
html body .hero-section + .container-fluid { padding-top: 40px !important; }  /* Gallery: filter buttons, no title */
@media (max-width: 680px) {
    html body .hero-section + :is(.flagship-section-container, .workshop-section, .learning-modes-section, .workshop-details-container) {
        padding-top: 48px !important;
    }
}

/* ---------- Courses page: Our Flagship Courses cards (premium look, more space) ---------- */
html body .flagship-courses-grid { gap: 30px !important; padding: 12px 0 8px !important; }
html body .flagship-courses-grid .flagship-course-card {
    width: calc(33.333% - 20px) !important;
    max-width: 370px !important;
    border-radius: 18px !important;
    border: 1px solid #e6ebf2 !important;
    box-shadow: 0 10px 30px rgba(0, 43, 110, .08) !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
html body .flagship-courses-grid .flagship-course-card:hover {
    transform: translateY(-6px) !important;
    border-color: #c9d5ea !important;
    box-shadow: 0 18px 40px rgba(0, 43, 110, .16) !important;
}
html body .flagship-courses-grid :is(.flagship-card-image, .flagship-card-image-placeholder) {
    height: 210px !important;
    transition: transform .5s ease !important;
}
html body .flagship-courses-grid .flagship-course-card:hover .flagship-card-image { transform: scale(1.04) !important; }
html body .flagship-courses-grid .flagship-card-body {
    padding: 22px 24px 24px !important;
    gap: 14px;
    position: relative;
    background: #fff;
}
html body .flagship-courses-grid .flagship-icon-star { display: none !important; }
html body .flagship-courses-grid .flagship-badge-text-wrapper { gap: 10px !important; }
html body .flagship-courses-grid .flagship-badge-label {
    align-self: flex-start;
    background: #fff4e8;
    color: #c05f00 !important;
    border-radius: 999px;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
}
html body .flagship-courses-grid .flagship-course-title {
    font-size: 19px !important;
    line-height: 1.35 !important;
    color: #002b6e !important;
    min-height: 2.7em;  /* two lines, so every card's details line up */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html body .flagship-courses-grid .flagship-course-card .flagship-course-description {
    margin: 0 !important;
    min-height: 3.1em;
    flex: 0 0 auto !important;
}
html body .flagship-courses-grid .flagship-divider-line { display: none !important; }
html body .flagship-courses-grid .flagship-info-row {
    background: #f3f5f8;
    border-radius: 12px;
    padding: 14px 16px;
    margin: auto 0 0 !important;
    gap: 10px !important;
}
html body .flagship-courses-grid .flagship-info-label {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280 !important;
}
html body .flagship-courses-grid .flagship-info-value {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #002b6e !important;
}
html body .flagship-courses-grid .flagship-info-item:last-child .flagship-info-value { color: #E47600 !important; }
html body .flagship-courses-grid .flagship-buttons-row { gap: 12px !important; }
html body .flagship-courses-grid :is(.flagship-btn-outline, .flagship-btn-solid) {
    padding: 11px 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    border-width: 1.5px !important;
}
html body .flagship-courses-grid .flagship-btn-solid:hover { background: #0b3f94 !important; border-color: #0b3f94 !important; color: #fff !important; }
@media (max-width: 1100px) {
    html body .flagship-courses-grid .flagship-course-card { width: calc(50% - 15px) !important; }
}
@media (max-width: 680px) {
    html body .flagship-courses-grid { gap: 22px !important; }
    html body .flagship-courses-grid .flagship-course-card { width: 100% !important; max-width: 420px !important; }
    html body .flagship-courses-grid .flagship-buttons-row { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- About Us history timeline: less empty space ---------- */
html body .milestone-content-bottom { padding-top: 70px !important; }
html body .milestone-content-top { padding-bottom: 70px !important; }
html body .milestone-year {
    font-size: 26px !important;
    line-height: 1.2 !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
    html body .hero-section { min-height: 340px !important; padding: 68px 0 60px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
    /* side gutter so cards never touch the screen edge */
    html body :is(.cards-grid, .features-grid, .oreol-academy-grid, .contact-team-cards-grid, .benefits-grid,
                  .oreol-leadership-grid, .mentors-cards-grid) {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 14px !important;
    }
    html body .hero-section { min-height: 0 !important; padding: 40px 0 32px !important; }
    html body .hero-section .hero-title { font-size: clamp(26px, 7vw, 32px) !important; }
    html body .hero-section .hero-description { font-size: 15px !important; }
    html body .hero-section .info-cards { gap: 10px !important; padding: 0 16px; }
    html body :is(.oreol-academy-card, .feature-card, .cards-grid .card) { padding: 22px 18px !important; }
    html body :is(.thinthick, .section-titlehistory, .oreol-leadership-title, .flagship-main-title,
                  .learning-modes-title, .workshop-overview-title, .mentors-main-title, .attend-main-title,
                  .faq-title, .section-title) {
        font-size: 26px !important;
    }
    html body .career_card_wrapper { padding: 28px 20px !important; margin-left: 16px !important; margin-right: 16px !important; }
    html body .oreol-member-card,
    html body .oreol-leadership-card { padding: 22px 18px !important; }
}

/* ---------- About Us: room under the menu and between the intro and Our Story ---------- */
html body .about-story-wrapper .about-section { padding-top: 48px !important; padding-bottom: 12px !important; }
html body .about-story-wrapper .about-section h1 { font-size: clamp(30px, 3.2vw, 42px) !important; margin-bottom: 10px !important; }
html body .about-story-wrapper .story-section { padding-top: 24px !important; }
@media (max-width: 768px) {
    html body .about-story-wrapper .about-section { padding: 32px 16px 4px !important; }
}

/* ---------- Workshop sliders: centre the cards only when they all fit, never cut them off ---------- */
html body :is(.workshop-slider-track, .past-ws-slider-track) {
    justify-content: flex-start !important;
    justify-content: safe center !important;
}

/* ---------- About Us history on phones: no big gaps, every step reads dot - title - text ---------- */
@media (max-width: 768px) {
    html body :is(.milestone-content-bottom, .milestone-content-top) {
        padding: 0 !important;
        margin: 0 !important;
    }
    html body .milestone-content-top { display: flex; flex-direction: column-reverse; align-items: center; }
    html body .timeline-item { margin: 0 0 28px !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
    html body .timeline-items { gap: 0 !important; }
    html body .milestone-description { background: #ffffff; padding: 2px 6px; }
}

/* ---------- Phone & tablet fixes ---------- */
/* old page styles added side padding to <body> on phones, which pushed the footer in from the edges */
html body { padding: 0 !important; }

/* course page "Details" box: the 236px gap became an empty block when the items wrapped */
html body .detail-meta-row { gap: 12px 48px !important; }

/* text set to "justify" leaves big holes between words on narrow screens */
@media (max-width: 992px) {
    html body .medical-course-description-text { text-align: left !important; }
    /* course / workshop tabs: one swipeable row instead of wrapping onto two lines */
    html body .course-nav-tabs {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 22px !important;
    }
    html body .course-nav-tabs::-webkit-scrollbar { display: none; }
    html body .course-nav-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* Workshops page "Why Get Certified": three side by side on tablets */
@media (max-width: 992px) and (min-width: 681px) {
    html body .features-container .features-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; padding-left: 16px !important; padding-right: 16px !important; }
    html body .features-container .feature-card { padding: 22px 14px !important; }
}

@media (max-width: 768px) {
    /* registration steps: all steps fit on the screen */
    html body .progress-steps { min-width: 0 !important; width: 100%; }
    html body .step { min-width: 0; }
    html body .step-number { width: 30px !important; height: 30px !important; font-size: 13px !important; }
    html body .step-line { top: 15px !important; }
    html body .step-label { font-size: 10px !important; line-height: 1.25; padding: 0 2px; }
    /* Contact / Certificate illustrations: smaller so they don't leave a big empty area */
    html body :is(.cfx-animation, .faq-animation) { height: auto !important; min-height: 0 !important; margin: 0 auto !important; }
    html body :is(.cfx-animation, .faq-animation) lottie-player { width: 190px !important; height: 190px !important; }
}

@media (max-width: 640px) {
    /* workshop page "Workshop Details": two small boxes per row instead of eight tall ones */
    html body .workshop-details-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    html body .workshop-detail-card { padding: 14px 12px !important; min-width: 0; }
    html body .workshop-detail-card .workshop-card-label { font-size: 12.5px; }
    /* workshop sliders: small round arrows over the photo, not over the text */
    html body :is(.ws-nav-btn, .past-ws-nav-btn) {
        width: 36px !important; height: 36px !important; padding: 0 !important;
        border-radius: 50% !important; font-size: 22px !important; line-height: 1 !important;
        top: 90px !important; transform: translateY(-50%) !important;
        box-shadow: 0 4px 12px rgba(11, 31, 58, .25);
    }
}

/* Gallery on phones: two photos per row, so the page is not one very long column */
@media (max-width: 576px) {
    html body .masonry-grid { column-count: 2 !important; column-gap: 10px !important; padding: 0 4px !important; }
    html body .masonry-item { margin-bottom: 10px !important; }
}

/* ---------- Workshops: comfortable spacing around the section titles and the month / location buttons ---------- */
html body .workshop-header .workshop-main-title,
html body .past-ws-header .past-ws-main-title { margin-bottom: 14px !important; }
html body .workshop-header .workshop-subtitle { margin-bottom: 0 !important; line-height: 1.6; }
html body :is(.workshop-header, .past-ws-header) { margin-bottom: 34px !important; }
html body :is(.workshop-controls-row, .past-ws-controls-row) { margin-bottom: 30px !important; row-gap: 14px; }
html body .past-ws-section { padding-top: 70px !important; padding-bottom: 40px !important; }
@media (max-width: 768px) {
    html body .past-ws-section { padding-top: 48px !important; }
    html body :is(.workshop-header, .past-ws-header) { margin-bottom: 26px !important; }
    html body :is(.workshop-controls-row, .past-ws-controls-row) { margin-bottom: 24px !important; }
}