/* ============================================================
   Career Mosaic - revised website styles
   Added for the "Revised CM Website Changes" update
   ============================================================ */

/* --- Partner Universities ticker (home page / logo.php) ---
   Continuous marquee: 10 logos on screen at a time on desktop.
   The track holds the logo list twice, so translating it by -50%
   lands exactly back on the first logo and the loop is seamless.
   Speed is set per page by the inline animation-duration in logo.php. */
.uni-ticker {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
}

.uni-ticker-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-animation-name: uni-ticker-scroll;
    animation-name: uni-ticker-scroll;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.uni-ticker:hover .uni-ticker-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.uni-ticker-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 117px;
    height: 90px;
    padding: 0 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.uni-ticker-item a {
    display: block;
    line-height: 0;
}

.uni-ticker-item img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
}

@-webkit-keyframes uni-ticker-scroll {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(-50%, 0, 0);
    }
}

@keyframes uni-ticker-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 1199px) {
    .uni-ticker-item {
        width: 160px;
    }
}

@media (max-width: 991px) {
    .uni-ticker-item {
        width: 185px;
    }
}

@media (max-width: 767px) {
    .uni-ticker-item {
        width: 150px;
        height: 75px;
    }

    .uni-ticker-item img {
        max-height: 65px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uni-ticker-track {
        -webkit-animation: none;
        animation: none;
    }

    .uni-ticker {
        overflow-x: auto;
    }
}

/* --- Countries row (students page) --- */
.country-row-horizontal .team-block figure {
    margin: 0;
}

.country-row-horizontal .country-img img {
    max-height: 90px;
}

/* --- Service tiles that link out to the marketplace (students page) --- */
.service-tile {
    display: block;
    position: relative;
    background: #f7f7f7;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.service-tile:hover,
.service-tile:focus-visible {
    background: #1281c5;
    border-color: #1281c5;
    text-decoration: none;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* A mouse click leaves the link focused; without this the tile would stay in
   its blue "active" look after the new tab opens and you return. Keep the plain
   background on lingering (non-keyboard) focus. */
.service-tile:focus:not(:focus-visible) {
    background: #f7f7f7;
    border-color: #ececec;
    -webkit-transform: none;
    transform: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.service-tile .service-tile-icon {
    display: block;
    color: #1281c5;
    margin-bottom: 18px;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

/* Thin-stroke outline icons: outline only, no fill, and the line weight is set
   here for all six tiles at once. stroke-width is relative to the icon's 24x24
   viewBox, so at a 46px icon 0.8 renders as a ~1.5px hairline. Drop it to 0.6
   for even finer lines, raise it towards 1.5 for heavier ones. */
.service-tile .service-tile-icon svg {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.service-tile .service-tile-title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #232323;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.service-tile:hover .service-tile-icon,
.service-tile:hover .service-tile-title,
.service-tile:focus-visible .service-tile-icon,
.service-tile:focus-visible .service-tile-title {
    color: #fff;
}

.service-tile-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.service-tile-row>[class*="col-"] {
    margin-bottom: 30px;
}

/* --- Accreditations & memberships (about page) --- */
/* Accreditation logos row (about.php): AIRC + ICEF + NAFSA side by side,
   all the same height, widths vary with each logo's aspect ratio, no captions. */
.accreditation-logos-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.accreditation-logos-row img {
    height: 90px;
    /* equal height for all three logos */
    width: auto;
    max-width: 100%;
    margin: 0 22px 10px;
}

@media (max-width: 991px) {
    .accreditation-logos-row img {
        height: 72px;
        margin: 0 16px 10px;
    }
}

@media (max-width: 767px) {
    .accreditation-logos-row img {
        height: 60px;
        margin: 0 12px 10px;
    }
}

/* --- Agency Partners map + scrollable city list (contact page) --- */
.cm-map-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.cm-india-map {
    display: block;
    width: 100%;
    max-width: 560px;      /* a bit larger than before */
    height: auto;
    margin: 0 auto;
}
/* States/cities in a true masonry — each state block packs under the previous
   one in the shortest column (no gaps from uneven state sizes). Columns are
   built by a small script in contact-us.php; before it runs this is a single
   column (graceful fallback). Responsive: 3 / 2 / 1 columns by screen size. */
.cm-cities-scroll {
    text-align: left;
    overflow-y: auto;
    max-height: 520px;       /* fallback; JS caps it to the map height on desktop */
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
}
.cm-cities-scroll::-webkit-scrollbar { width: 6px; }
.cm-cities-scroll::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 3px; }
.cm-masonry-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.cm-mcol {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
}
.cm-mcol:first-child { padding-left: 0; }
.cm-mcol:last-child { padding-right: 0; }
.cm-state { margin: 0 0 18px; }
.cm-state-name { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.cm-city-list { margin: 0; padding: 0; }
.cm-city-list li { list-style: none; font-size: 13px; color: #555; padding: 2px 0; }
@media (max-width: 767px) {
    .cm-cities-scroll { margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 15px; }
}

/* --- Partner Universities slider (logo.php) ---
   Theme CSS forces .swiper-slider-clients img to width:200px, which makes
   square logos huge and wide logos tiny. Normalise: every logo sits in a
   uniform, centered box scaled to fit — so all rows/columns line up. */
.swiper-slider-clients .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.swiper-slider-clients .swiper-slide a {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 90px;                 /* uniform box height per logo */
    margin: 6px 0;
}
.swiper-slider-clients .swiper-slide img {
    width: auto !important;       /* beat the theme's width:200px */
    max-width: 85%;
    max-height: 60px;             /* uniform cap; aspect ratio preserved */
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.swiper-slider-clients .swiper-slide br { display: none; }

/* --- Press & Media --- */
/* The global `section { overflow: hidden }` breaks position:sticky, so allow
   this section to overflow visibly (its content only animates vertically). */
.press-list-section {
    overflow: visible !important;
}

/* Sticky year navigation: stays pinned to the top of the viewport while you
   scroll through the list, so you can switch year (2024 / 2025 / future years)
   at any point. Direct child of .container so it sticks over the whole list. */
.press-year-nav-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 61px;
    /* sit flush below the sticked desktop header (61px tall) */
    z-index: 30;
    /* below the header (z-index 99), above the list */
    background: #fff;
    padding: 14px 0 4px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ececec;
}

/* Offset anchor jumps so a year heading clears both the header and the year bar.
   The sticked header is 61px (desktop) / 74px (mobile); this clears the taller
   case plus the year bar. */
div[id^="press-2"] {
    scroll-margin-top: 140px;
}

.press-year-nav {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.press-year-nav li {
    display: inline-block;
    margin: 0 5px 10px;
}

.press-year-nav li a {
    display: block;
    padding: 5px 30px;
    border: 1px solid #d5d5d5;
    border-radius: 30px;
    color: #232323;
    font-weight: 600;
}

.press-year-nav li a:hover,
.press-year-nav li.active a {
    background: #1281c5;
    border-color: #1281c5;
    color: #fff;
    text-decoration: none;
}

.press-item {
    border-bottom: 1px solid #ececec;
    padding: 22px 0;
}

.press-item:last-child {
    border-bottom: 0;
}

.press-item .press-date {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #939393;
    margin-bottom: 6px;
}

.press-item .press-title {
    font-size: 18px;
    font-weight: 600;
    color: #232323;
    margin: 0 0 6px;
}

/* Clickable titles (entries that have a link) */
.press-item .press-title a {
    color: #232323;
}

.press-item .press-title a:hover,
.press-item .press-title a:focus {
    color: #1281c5;
    text-decoration: underline;
}

.press-item .press-source {
    color: #1281c5;
    font-weight: 600;
}

.press-item .press-person {
    color: #939393;
    font-weight: 400;
}

.press-year-heading {
    border-bottom: 2px solid #1281c5;
    display: inline-block;
    padding-bottom: 6px;
}

.press-month {
    margin-bottom: 30px;
}

.press-month-name {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #232323;
    background: #f2f2f2;
    padding: 10px 15px;
    margin-bottom: 5px;
}

/* --- Agency partner network map (universities page) --- */
.cm-network-map {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto;
}

/* --- Market Entry partner university logos (in-country rep page) --- */
/* Market Entry logos: transparent logos, each in a uniform fixed-height box so
   differently-shaped wordmarks line up neatly and sit vertically centred. */
.me-uni-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.me-uni-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 20px 10px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.me-uni-logo-box {
    height: 90px;                 /* fixed, uniform box for every logo */
    padding: 0 16px;              /* dead space on the sides so logos don't touch edges */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;          /* vertically centre every logo in the same box */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 16px;
}
.me-uni-logo {
    display: block;
    max-height: 60px;             /* same cap for all -> consistent visual size */
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}
.me-uni-loc { font-size: 13px; margin: 0; }
@media (max-width: 991px) {
    .me-uni-item { -ms-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; margin-bottom: 10px; }
}
@media (max-width: 767px) {
    .me-uni-item { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    .me-uni-logo-box { height: 70px; }
}

/* Partner Universities slider: continuous linear glide (paired with the Swiper
   config in js/main.js — loop + high speed + autoplay delay 0). Without linear
   timing the logos ease in/out and look like they step rather than scroll. */
.swiper-slider-clients .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* Testimonials carousel (university + agent): continuous linear glide. Also give
   every slide equal height so the cards line up horizontally regardless of text
   length (fixes the uneven agent-testimonial layout). */
.swiper-three-slides .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.swiper-three-slides .swiper-slide {
    height: auto;
}
.swiper-three-slides .swiper-slide > .margin-half-all {
    height: 100%;
}

/* Testimonials "Option B": clamp each card to 6 lines with a Read-more link that
   opens the full text in a modal (script in js/main.js). Keeps every card an even
   height regardless of how long the individual testimonial is. */
.testi-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testi-more {
    display: inline-block;
    margin-top: 12px;
    color: #1281c5;
    font-weight: 600;
    cursor: pointer;
}
.testi-more:hover {
    color: #1281c5;
    text-decoration: underline;
}
#testiModal .modal-content { border: 0; border-radius: 8px; }
#testiModal .modal-body { padding: 10px 30px 34px; }
#testiModal .modal-body p { color: #555; line-height: 1.8; }

/* ==== About: Accreditations & Memberships (single card per row, logo centered on top) ==== */
.accred-band { background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 30px 34px 34px; margin-bottom: 26px; -webkit-box-shadow: 0 6px 18px rgba(0,0,0,.05); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.accred-band .accred-logo { text-align: center; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid #ececec; }
.accred-band .accred-logo img { max-height: 120px; max-width: 100%; width: auto; object-fit: contain; display: inline-block; }
.accred-band .accred-desc > h5 { margin: 0 0 12px; }
.accred-band .accred-desc > p { text-align: left; color: #555; line-height: 1.75; margin-bottom: 14px; }
.accred-sub { margin: 0; padding: 14px 0 0; border-top: 1px dashed #e6e6e6; }
.accred-sub .item { text-align: left; font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 8px; }
.accred-sub .item strong { color: #1281c5; }
.accred-link { display: inline-block; margin-top: 6px; color: #1281c5; font-weight: 600; }
.accred-link:hover { text-decoration: underline; color: #1281c5; }
@media (max-width: 767px) { .accred-band { padding: 24px 20px 26px; } }