/* Courses & Tutoring (375) — layout owned here; CLI-authored Spectra emits no CSS */
.ct-hero { background: linear-gradient(105deg,#2B7FC4 0%,#1B4A7A 100%); padding: 4rem 1.5rem !important; display:block !important; }
.ct-hero__title .uagb-heading-text { color:#fff; font-size:2.6rem; font-weight:700; text-align:center; margin:0; }

.ct-offer, .ct-lcg { background:#fff; padding:4.5rem 1.5rem !important; display:block !important; }
.ct-why { background:#1B2E4B; padding:4.5rem 1.5rem !important; display:block !important; }

.ct-section__head { max-width:900px; margin:0 auto 3rem !important; display:block !important; text-align:center; padding:0 !important; }
.ct-section__title .uagb-heading-text { color:#1B2E4B; font-size:2rem; font-weight:700; line-height:1.3; margin:0; text-align:center; }
.ct-section__title--light .uagb-heading-text { color:#fff; }
.ct-lcg__lede { color:#383838; line-height:1.75; margin:1rem auto 0; max-width:70ch; text-align:center; }

.ct-grid, .ct-why__grid, .ct-lcg__grid {
    display:grid !important; gap:2rem; max-width:1140px; margin:0 auto !important; padding:0 !important;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.ct-card, .ct-why__item, .ct-lcg__card { display:block !important; padding:0 !important; }
.ct-card { background:#F7F9FB; border-radius:12px; padding:1.75rem !important; border-top:4px solid #267CC0; }
.ct-card__title .uagb-heading-text { color:#1B2E4B; font-size:1.15rem; font-weight:700; margin:0 0 .75rem; line-height:1.35; }
.ct-card__text { color:#383838; line-height:1.7; font-size:.95rem; margin:0; }

.ct-why__item { border-left:3px solid #F58331; padding-left:1.5rem !important; }
.ct-why__title .uagb-heading-text { color:#fff; font-size:1.1rem; font-weight:700; margin:0 0 .6rem; }
.ct-why__text { color:rgba(255,255,255,.85); line-height:1.7; font-size:.95rem; margin:0; }

.ct-lcg__card { background:#fff; border:1px solid #E3E9EF; border-radius:12px; padding:2rem !important; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.ct-lcg__title .uagb-heading-text { color:#F58331; font-size:1.2rem; font-weight:700; margin:0 0 1.25rem; text-align:center; }
.ct-lcg__card .wp-block-uagb-buttons { display:flex !important; justify-content:center !important; }

.ct-offer__cta, .ct-why__cta { display:flex !important; justify-content:center !important; margin-top:2.5rem !important; padding:0 !important; }
.ct-offer__cta .wp-block-uagb-buttons, .ct-why__cta .wp-block-uagb-buttons { width:auto !important; flex:0 0 auto !important; }

.ma-btn--outline-orange a { background:transparent !important; color:#F58331 !important; border:2px solid #F58331 !important; }
.ma-btn--outline-orange a:hover { background:#F58331 !important; color:#fff !important; }

@media (max-width:921px){
  .ct-hero{padding:3rem 1.25rem !important;} .ct-hero__title .uagb-heading-text{font-size:1.9rem;}
  .ct-offer,.ct-why,.ct-lcg{padding:3rem 1.25rem !important;}
  .ct-section__title .uagb-heading-text{font-size:1.6rem;}
}

/* --- added 2026-09-22.1: sections recovered in the parity check --- */
.ct-live { background:#F4F6F8; padding:4.5rem 1.5rem !important; display:block !important; }
.ct-live__grid { display:grid !important; gap:1.75rem; max-width:1140px; margin:0 auto !important; padding:0 !important; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.ct-live__card { display:block !important; background:#fff; border-radius:12px; padding:1.75rem !important; border-left:4px solid #F58331; box-shadow:0 6px 18px rgba(0,0,0,.07); }
.ct-live__name .uagb-heading-text { color:#1B2E4B; font-size:1.1rem; font-weight:700; margin:0 0 .5rem; line-height:1.35; }
.ct-live__when { color:#267CC0; font-size:.9rem; font-weight:600; margin:0 0 1.25rem; }
.ct-live__card .wp-block-uagb-buttons { width:auto !important; flex:0 0 auto !important; }

.ct-staff { background:#1B2E4B; padding:4.5rem 1.5rem !important; display:block !important; }
.ct-staff__intro, .ct-staff__list, .ct-faq { display:block !important; max-width:1000px; margin:0 auto 2.5rem !important; padding:0 !important; }
.ct-staff__sub .uagb-heading-text { color:#F58331; font-size:1.05rem; font-weight:700; margin:1.5rem 0 .5rem; }
.ct-staff p { color:rgba(255,255,255,.88); line-height:1.75; margin:0 0 .5rem; }
.ct-staff__listtitle .uagb-heading-text { color:#fff; font-size:1.3rem; font-weight:700; margin:0 0 1rem; }
.ct-traininglist { columns:2; column-gap:2.5rem; margin:0 !important; padding:0 0 0 1.1rem !important; }
.ct-traininglist li { color:rgba(255,255,255,.88); line-height:1.6; margin-bottom:.55rem; break-inside:avoid; }
.ct-faq__item { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px; margin-bottom:.75rem; }
.ct-faq__item summary { cursor:pointer; padding:1rem 1.25rem; color:#fff; font-weight:600; list-style:none; }
.ct-faq__item summary::-webkit-details-marker { display:none; }
.ct-faq__item summary::after { content:"+"; float:right; color:#F58331; font-size:1.3rem; line-height:1; }
.ct-faq__item[open] summary::after { content:"–"; }
.ct-faq__answer { padding:0 1.25rem 1.1rem; }
.ct-faq__answer p { color:rgba(255,255,255,.82); margin:0; font-size:.95rem; }
.ct-staff__cta { display:block !important; text-align:center; margin-top:2.5rem !important; padding:0 !important; }
.ct-staff__ctatitle .uagb-heading-text { color:#fff; font-size:1.6rem; font-weight:700; margin:0 0 1.5rem; text-align:center; }
.ct-staff__cta .wp-block-uagb-buttons { display:flex !important; justify-content:center !important; width:auto !important; }
@media (max-width:768px){ .ct-traininglist{columns:1;} .ct-live,.ct-staff{padding:3rem 1.25rem !important;} }

/* ---------------------------------------------------------------------------
   2026-10-06: Courses & Tutoring changes from MedAcademy Website updates.docx
   - circular category icon at the top of each card
   - Why Choose Our Courses moved to MedAcademy blue and orange, aligned
   --------------------------------------------------------------------------- */

/* --- Category icons -------------------------------------------------------- */

.ct-card {
    /* Cards sit in a grid; stretching makes the top borders line up. */
    display: flex !important;
    flex-direction: column;
}

.ct-card__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: rgba(38, 124, 192, .10);
    color: #267CC0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ct-card__icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.ct-card__title .uagb-heading-text {
    text-align: center;
}

/* --- Why Choose Our Courses ------------------------------------------------ */

/*
 * Was navy with an orange rule. The doc asks for MedAcademy blue and orange,
 * and for the boxes and text to line up, so these are equal-height cards on a
 * blue band rather than three bare text columns of differing heights.
 */
.ct-why {
    background: #267CC0 !important;
}

.ct-why__grid {
    align-items: stretch;
}

.ct-why__item {
    display: flex !important;
    flex-direction: column;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-left: 4px solid #F58331;
    border-radius: 10px;
    padding: 1.6rem 1.5rem !important;
}

.ct-why__title .uagb-heading-text {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 .65rem;
    line-height: 1.35;
    min-height: 2.7em;   /* keeps the body copy starting on the same line */
    display: flex;
    align-items: flex-start;
}

.ct-why__text {
    color: rgba(255, 255, 255, .92);
    line-height: 1.7;
    font-size: .95rem;
    margin: 0;
    flex: 1 1 auto;
}

@media (max-width: 921px) {
    .ct-why__title .uagb-heading-text {
        min-height: 0;
    }

    .ct-card__icon {
        width: 58px;
        height: 58px;
    }

    .ct-card__icon svg {
        width: 27px;
        height: 27px;
    }
}

/*
 * .ct-card became a flex column so the cards line up, which made the icon a
 * flex item and stretched its circle into a 293px pill. align-self stops it
 * inheriting the default stretch.
 */
.ct-card__icon {
    align-self: center;
}

/*
 * Spectra generates a per-page rule forcing every direct child of a container
 * to full width. Its selector (body + container class + inner-wrap class +
 * nth-child) scores 0,3,1 and beats a plain .ct-card__icon at 0,1,0, which is
 * why the icon kept rendering as a 293px pill instead of a 68px circle.
 *
 * Matching that specificity would mean hardcoding Spectra internal wrapper
 * class names, which break whenever they are renamed, so !important is the
 * stabler choice. This is not overriding a value set in the editor: Spectra
 * exposes no width control for a raw HTML child.
 */
.ct-card__icon {
    width: 68px !important;
    height: 68px !important;
    align-self: center;
}

@media (max-width: 921px) {
    .ct-card__icon {
        width: 58px !important;
        height: 58px !important;
    }
}

/* ---------------------------------------------------------------------------
   2026-10-20, from the 10/16 notes.

   The notes call these "bands"; the screenshots show they mean the coloured
   rules on the cards, not full-width section bands:

   - category card top stripe: blue -> orange
     ("Maybe make these bands orange - instead of blue")
   - Why Choose left border: orange -> white
     ("And then these bands white - not orange - no orange on blue")

   Note this deliberately does NOT use the rotating blue/orange stripe applied
   to the instructor cards. The note asks for orange on all six here. Say the
   word if the alternating pattern is wanted instead for consistency.
   --------------------------------------------------------------------------- */

.ct-card {
    border-top-color: #F58331 !important;
}

.ct-card__icon {
    background: rgba(245, 131, 49, .12);
    color: #F58331;
}

/*
 * White rather than orange on the blue band. Orange on this blue is the
 * combination the note objects to, and white also carries far better contrast
 * against #267CC0.
 */
.ct-why__item {
    border-left-color: #fff !important;
}