/* ==========================================================
   DIRECTORIOS DE CENTROS UNIVERSITARIOS — Diseño 2026
   ========================================================== */

.cd-page,
.cd-page * {
    box-sizing: border-box;
}

.cd-page {
    width: min(1460px, calc(100% - 30px));
    margin: 0 auto;
    padding: 12px 0 26px;
    color: #0b1d3a;
    font-family: "Inter", "Open Sans", sans-serif;
}

.cd-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 22px;
    margin: 0 6px 8px;
    color: #62738d;
    font-size: 12px;
}

.cd-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cd-accent);
    font-weight: 600;
    text-decoration: none;
}

.cd-breadcrumbs strong {
    color: #142846;
}

.cd-shell {
    overflow: hidden;
    padding: 14px 18px 18px;
    border: 1px solid #dce7f3;
    border-radius: 18px;
    background:
        radial-gradient(circle at 91% 7%, var(--cd-soft) 0, transparent 26%),
        #fff;
    box-shadow: 0 12px 34px rgba(23, 54, 94, .09);
}

.cd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 14px;
    min-height: 112px;
    align-items: center;
}

.cd-hero-copy {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cd-center-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border: 2px solid color-mix(in srgb, var(--cd-accent) 75%, white);
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, var(--cd-soft));
    color: var(--cd-accent);
    box-shadow: 0 11px 25px color-mix(in srgb, var(--cd-accent) 13%, transparent);
}

.cd-center-symbol i {
    font-size: 29px;
}

.cd-heading-copy {
    min-width: 0;
}

.cd-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--cd-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.cd-title-line {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.cd-title-line h1 {
    max-width: 880px;
    margin: 0;
    color: #071a39;
    font-size: clamp(22px, 1.9vw, 28px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.cd-center-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin-bottom: 2px;
    padding: 2px 9px;
    border: 1px solid color-mix(in srgb, var(--cd-accent) 55%, white);
    border-radius: 999px;
    background: var(--cd-soft);
    color: var(--cd-accent);
    font-size: 10px;
    font-weight: 800;
}

.cd-heading-copy > p {
    max-width: 710px;
    margin: 6px 0 0;
    color: #536782;
    font-size: 11px;
    line-height: 1.35;
}

.cd-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(500px, .95fr);
    align-items: stretch;
    gap: 14px;
    margin-top: 2px;
}

.cd-navigation-panel {
    min-width: 0;
    padding-top: 1px;
}

.cd-search {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 40px;
    overflow: hidden;
    border: 1px solid #cbd9ea;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(21, 71, 126, .07);
}

.cd-search > i {
    color: #45617f;
    font-size: 16px;
    text-align: center;
}

.cd-search input[type="search"] {
    min-width: 0;
    height: 38px;
    padding: 0 12px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #102541;
    font: inherit;
    font-size: 12px;
}

.cd-search input::placeholder {
    color: #8a9ab0;
}

.cd-search button,
.cd-bottom-cta > a {
    border: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cd-accent) 82%, #1685ff), var(--cd-accent));
    color: #fff;
    font-family: inherit;
    font-weight: 750;
    cursor: pointer;
}

.cd-search button {
    align-self: stretch;
    min-width: 100px;
    padding: 0 18px;
    font-size: 12px;
}

.cd-search button:hover,
.cd-bottom-cta > a:hover {
    filter: brightness(.93);
}

.cd-owl-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 112px;
    padding-right: 5px;
}

.cd-owl-area img {
    position: relative;
    z-index: 1;
    width: 108px;
    max-height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(25, 55, 94, .15));
}

.cd-speech {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 0;
    width: 96px;
    padding: 7px 8px;
    border: 1px solid #cbd9ea;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    color: #18304f;
    box-shadow: 0 7px 16px rgba(27, 58, 98, .07);
    line-height: 1.35;
}

.cd-speech::after {
    position: absolute;
    right: -12px;
    bottom: 15px;
    width: 17px;
    height: 17px;
    border-top: 1px solid #cbd9ea;
    border-right: 1px solid #cbd9ea;
    background: #fff;
    content: "";
    transform: rotate(45deg);
}

.cd-speech strong,
.cd-speech span {
    position: relative;
    z-index: 1;
    display: block;
}

.cd-speech strong {
    font-size: 9px;
}

.cd-speech span {
    margin-top: 4px;
    color: #718096;
    font-size: 7px;
}

.cd-alphabet {
    display: grid;
    grid-template-columns: minmax(58px, 1.7fr) repeat(26, minmax(0, 1fr));
    gap: 3px;
    margin-top: 6px;
    padding: 3px;
    border: 1px solid #d8e5f2;
    border-radius: 11px;
    background: #f8fbff;
}

.cd-alphabet a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 26px;
    border: 1px solid #cfe0f4;
    border-radius: 6px;
    background: #fff;
    color: #1764c5;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.cd-alphabet a:hover,
.cd-alphabet a.is-active {
    border-color: var(--cd-accent);
    background: var(--cd-accent);
    color: #fff;
    box-shadow: 0 4px 9px color-mix(in srgb, var(--cd-accent) 24%, transparent);
}

.cd-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 0;
}

.cd-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 82px;
    padding: 7px 5px;
    border: 1px solid #dbe6f1;
    border-radius: 10px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 20px rgba(26, 61, 102, .07);
    text-align: center;
}

.cd-metric > i {
    width: 27px;
    height: 27px;
    margin-bottom: 4px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 27px;
    text-align: center;
}

.cd-metric--professors > i {
    background: #f0eaff;
    color: #8d65e8;
}

.cd-metric--opinions > i {
    background: #e9f4ff;
    color: #4f9eee;
}

.cd-metric--rating > i {
    background: #fff6d9;
    color: #f4b000;
}

.cd-metric--evaluated > i {
    background: #e8f8ee;
    color: #17934c;
}

.cd-metric strong {
    color: #081c3b;
    font-size: 16px;
    line-height: 1.1;
}

.cd-metric strong small {
    margin-left: 2px;
    color: #718096;
    font-size: 9px;
    font-weight: 600;
}

.cd-metric span {
    margin-top: 3px;
    color: #61738c;
    font-size: 8px;
    line-height: 1.25;
}

.cd-results-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    margin-top: 7px;
    padding: 4px 9px;
    border: 1px solid #dbe6f2;
    border-radius: 10px;
    background: #f8fbff;
}

.cd-opinion-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

.cd-only-opinions {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    cursor: pointer;
}

.cd-toggle-copy strong,
.cd-toggle-copy small {
    display: block;
    text-align: right;
}

.cd-toggle-copy strong {
    color: #17304f;
    font-size: 12px;
}

.cd-toggle-copy small {
    display: none;
}

.cd-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 43px;
    width: 43px;
    height: 24px;
}

.cd-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cd-switch > span {
    position: absolute;
    inset: 0;
    border: 1px solid #b7c6d8;
    border-radius: 999px;
    background: #d8e1eb;
    transition: background .2s ease, border-color .2s ease;
}

.cd-switch > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(22, 48, 79, .25);
    content: "";
    transition: transform .2s ease;
}

.cd-switch input:checked + span {
    border-color: var(--cd-accent);
    background: var(--cd-accent);
}

.cd-switch input:checked + span::after {
    transform: translateX(19px);
}

.cd-switch input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--cd-accent) 23%, transparent);
    outline-offset: 2px;
}

.cd-active-subject {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: min(520px, 50vw);
    overflow: hidden;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, white);
    border-radius: 999px;
    background: var(--cd-soft);
    color: #415975;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-active-subject i,
.cd-active-subject a {
    flex: 0 0 auto;
    color: var(--cd-accent);
}

.cd-active-subject a {
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.cd-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1.25fr) minmax(180px, .8fr) minmax(200px, .9fr) auto auto;
    align-items: end;
    gap: 11px;
    padding: 15px;
    border: 1px solid #dbe6f2;
    border-radius: 12px;
    background: #f8fbff;
}

.cd-filters label {
    min-width: 0;
    margin: 0;
}

.cd-filters label > span {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px 2px;
    color: #51657e;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.cd-filters select {
    width: 100%;
    height: 43px;
    padding: 0 35px 0 12px;
    border: 1px solid #cbd9e8;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: #1c304e;
    font-family: inherit;
    font-size: 12px;
}

.cd-filters select:focus {
    border-color: var(--cd-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

.cd-filters button {
    height: 43px;
    padding: 0 17px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
}

.cd-filters button i {
    margin-right: 6px;
}

.cd-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    color: #63758d;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.cd-results-meta {
    margin: 0;
    color: #718096;
    font-size: 11px;
}

.cd-results-meta strong {
    color: #142c4d;
}

.cd-results {
    overflow: hidden;
    border: 1px solid #d7e3ef;
    border-radius: 12px;
    background: #fff;
}

.cd-results-head,
.cd-professor-row {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(240px, 1.55fr) minmax(160px, 1fr) minmax(180px, 1.05fr) minmax(115px, .7fr);
    align-items: center;
}

.cd-results-head {
    min-height: 42px;
    grid-template-rows: minmax(42px, auto);
    grid-auto-rows: 0;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #061d3d, #0d315f);
    color: #fff;
}

.cd-results-head span {
    grid-row: 1;
    min-width: 0;
    padding: 10px 18px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

/* Google Auto Ads y otros proveedores pueden insertar un elemento adicional
   dentro de la cuadrícula. Se fijan las cinco columnas y se descarta cualquier
   nodo publicitario no autorizado para que los encabezados nunca se recorran. */
.cd-results-head > span:nth-of-type(1) { grid-column: 1; }
.cd-results-head > span:nth-of-type(2) { grid-column: 2; }
.cd-results-head > span:nth-of-type(3) { grid-column: 3; }
.cd-results-head > span:nth-of-type(4) { grid-column: 4; }
.cd-results-head > span:nth-of-type(5) { grid-column: 5; }

.cd-results > :not(.cd-results-head):not(.cd-professor-row):not(.cd-empty-state),
.cd-results-head > :not(span),
.cd-professor-row > :not(.cd-professor-main):not(.cd-subjects):not(.cd-opinions):not(.cd-rating):not(.cd-action),
.cd-shell > :not(.cd-hero):not(.cd-overview):not(.cd-results-tools):not(.cd-results):not(.cd-pagination):not(.cd-bottom-cta):not(.cd-directory-ad),
.cd-overview > :not(.cd-navigation-panel):not(.cd-metrics),
.cd-results-tools > :not(.cd-results-meta):not(.cd-opinion-filter) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.cd-professor-row {
    min-height: 104px;
    border-bottom: 1px solid #e0e8f1;
    transition: background .18s ease, box-shadow .18s ease;
}

.cd-professor-row:last-child {
    border-bottom: 0;
}

.cd-professor-row:hover {
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--cd-soft) 45%, white);
    box-shadow: inset 4px 0 0 var(--cd-accent);
}

.cd-professor-row > div {
    min-width: 0;
    padding: 15px 18px;
}

.cd-professor-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.cd-avatar {
    display: inline-flex;
    flex: 0 0 49px;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    border: 1px solid color-mix(in srgb, var(--cd-accent) 15%, white);
    border-radius: 50%;
    background: linear-gradient(145deg, #f7fbff, var(--cd-soft));
    color: var(--cd-accent);
    font-size: 14px;
    font-weight: 800;
}

.cd-professor-main div {
    min-width: 0;
}

.cd-professor-main a {
    display: block;
    overflow: hidden;
    color: #0d2343;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-professor-main a:hover {
    color: var(--cd-accent);
}

.cd-professor-main div span {
    display: block;
    margin-top: 5px;
    color: var(--cd-accent);
    font-size: 10px;
    font-weight: 800;
}

.cd-subjects {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.cd-subjects a {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #31577f;
    font-size: 11px;
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-subjects a::before {
    margin-right: 6px;
    color: var(--cd-accent);
    content: "•";
}

.cd-subjects a:hover {
    color: var(--cd-accent);
    text-decoration: underline;
}

.cd-more-subjects,
.cd-no-data {
    color: #8795a8;
    font-size: 10px;
    font-style: italic;
}

.cd-opinions {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    color: #62758d;
    font-size: 11px;
}

.cd-opinions > i {
    grid-row: 1 / 3;
    color: var(--cd-accent);
    font-size: 14px;
}

.cd-opinions strong {
    color: var(--cd-accent);
    font-size: 11px;
}

.cd-opinions span,
.cd-opinions small {
    display: block;
    margin-top: 3px;
    color: #8290a2;
    font-size: 9px;
}

.cd-rating {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.cd-stars {
    position: relative;
    width: 90px;
    height: 18px;
    overflow: hidden;
    color: #dce3eb;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 18px;
    white-space: nowrap;
}

.cd-stars span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #ffb400;
}

.cd-rating > strong {
    color: #13843f;
    font-size: 21px;
    font-weight: 800;
}

.cd-rating.is-mid > strong {
    color: #a96b05;
}

.cd-rating.is-low > strong {
    color: #c53b45;
}

.cd-rating.is-empty > strong {
    color: #8694a6;
}

.cd-rating strong small {
    margin-left: 3px;
    color: #718096;
    font-size: 9px;
    font-weight: 600;
}

.cd-action {
    text-align: right;
}

.cd-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 105px;
    min-height: 39px;
    padding: 7px 13px;
    border: 1px solid color-mix(in srgb, var(--cd-accent) 55%, white);
    border-radius: 8px;
    background: #fff;
    color: var(--cd-accent);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.cd-action a:hover {
    background: var(--cd-accent);
    color: #fff;
}

.cd-empty-state {
    padding: 55px 20px;
    color: #718096;
    text-align: center;
}

.cd-empty-state > i {
    color: var(--cd-accent);
    font-size: 29px;
}

.cd-empty-state h1,
.cd-empty-state h2 {
    margin: 12px 0 5px;
    color: #142a49;
    font-size: 19px;
}

.cd-empty-state p {
    margin: 0 0 14px;
    font-size: 12px;
}

.cd-empty-state a {
    color: var(--cd-accent);
    font-weight: 750;
}

.cd-pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.cd-pagination ul {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.cd-pagination li {
    list-style: none;
}

.cd-pagination a,
.cd-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d4e0ec;
    border-radius: 7px;
    background: #fff;
    color: #405774;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.cd-pagination span.current,
.cd-pagination a:hover {
    border-color: var(--cd-accent);
    background: var(--cd-accent);
    color: #fff;
}

.cd-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
    padding: 17px 22px;
    border: 1px solid #d8e7f5;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--cd-soft), #f5faff);
}

.cd-bottom-cta > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.cd-bottom-cta > div > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--cd-accent);
    font-size: 20px;
}

.cd-bottom-cta span,
.cd-bottom-cta strong {
    display: block;
}

.cd-bottom-cta strong {
    margin-bottom: 3px;
    color: var(--cd-accent);
    font-size: 12px;
}

.cd-bottom-cta span {
    color: #526880;
    font-size: 11px;
}

.cd-bottom-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--cd-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.cd-directory-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 10px;
}

@media (max-width: 1199px) {
    .cd-shell {
        padding: 14px 16px 17px;
    }

    .cd-hero {
        grid-template-columns: minmax(0, 1fr) 180px;
    }

    .cd-hero-copy {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 13px;
    }

    .cd-center-symbol {
        width: 64px;
        height: 64px;
    }

    .cd-center-symbol i {
        font-size: 27px;
    }

    .cd-owl-area img {
        width: 104px;
        max-height: 110px;
    }

    .cd-speech {
        left: -8px;
        width: 117px;
    }

    .cd-alphabet {
        display: flex;
        flex-wrap: wrap;
    }

    .cd-alphabet a {
        flex: 1 0 35px;
    }

    .cd-alphabet a:first-child {
        flex-basis: 76px;
    }

    .cd-results-head,
    .cd-professor-row {
        grid-template-columns: minmax(245px, 1.8fr) minmax(190px, 1.35fr) minmax(135px, .9fr) minmax(145px, .95fr) 110px;
    }

    .cd-professor-row > div,
    .cd-results-head span {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (max-width: 991px) {
    .cd-page {
        width: min(100% - 22px, 940px);
        padding-top: 14px;
    }

    .cd-hero {
        grid-template-columns: minmax(0, 1fr) 155px;
    }

    .cd-owl-area {
        min-height: 110px;
    }

    .cd-owl-area img {
        width: 102px;
        max-height: 110px;
    }

    .cd-speech {
        display: none;
    }

    .cd-overview {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .cd-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cd-filters button {
        grid-column: 1 / 3;
    }

    .cd-results-head {
        display: none;
    }

    .cd-results {
        display: grid;
        gap: 11px;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .cd-professor-row {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
        border: 1px solid #dae5ef;
        border-radius: 11px;
        background: #fff;
    }

    .cd-professor-row > .cd-professor-main {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .cd-professor-row > .cd-subjects {
        grid-column: 2;
        grid-row: 1;
        padding-bottom: 5px;
    }

    .cd-professor-row > .cd-opinions {
        grid-column: 2;
        grid-row: 2;
        padding-top: 5px;
    }

    .cd-professor-row > .cd-rating {
        grid-column: 3;
        grid-row: 1;
    }

    .cd-professor-row > .cd-action {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 767px) {
    .cd-page {
        width: calc(100% - 14px);
        padding-bottom: 18px;
    }

    .cd-breadcrumbs {
        margin-bottom: 8px;
        font-size: 10px;
    }

    .cd-shell {
        padding: 17px;
        border-radius: 14px;
    }

    .cd-hero {
        display: block;
        min-height: 0;
    }

    .cd-hero-copy {
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }

    .cd-center-symbol {
        width: 72px;
        height: 72px;
    }

    .cd-center-symbol i {
        font-size: 31px;
    }

    .cd-title-line {
        display: block;
    }

    .cd-title-line h1 {
        font-size: clamp(22px, 7vw, 29px);
    }

    .cd-center-badge {
        min-height: 26px;
        margin-top: 7px;
        margin-bottom: 0;
        padding: 4px 11px;
        font-size: 11px;
    }

    .cd-heading-copy > p {
        margin-top: 10px;
        font-size: 12px;
    }

    .cd-owl-area {
        display: flex;
        min-height: 132px;
        margin-top: 5px;
        padding-right: 12px;
    }

    .cd-owl-area img {
        width: 124px;
        max-height: 132px;
    }

    .cd-search {
        grid-template-columns: 36px minmax(0, 1fr);
        min-height: 48px;
        overflow: visible;
        margin-bottom: 68px;
    }

    .cd-search input[type="search"] {
        height: 46px;
        font-size: 12px;
    }

    .cd-search button {
        position: absolute;
        top: 55px;
        left: 0;
        width: 100%;
        min-height: 44px;
        border-radius: 8px;
    }

    .cd-alphabet {
        gap: 4px;
        margin-top: 8px;
    }

    .cd-alphabet a {
        flex: 1 0 33px;
        min-height: 34px;
        font-size: 11px;
    }

    .cd-metrics {
        grid-template-columns: repeat(2, 1fr);
        margin: 14px 0;
    }

    .cd-metric {
        min-height: 104px;
        padding: 11px;
    }

    .cd-metric > i {
        width: 34px;
        height: 34px;
        font-size: 17px;
        line-height: 34px;
    }

    .cd-metric strong {
        font-size: 19px;
    }

    .cd-metric span {
        font-size: 9px;
    }

    .cd-opinion-filter {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .cd-results-tools {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding: 8px 10px;
    }

    .cd-only-opinions {
        justify-content: space-between;
        width: 100%;
    }

    .cd-toggle-copy strong,
    .cd-toggle-copy small {
        text-align: left;
    }

    .cd-active-subject {
        max-width: 100%;
    }

    .cd-filters {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .cd-filters button,
    .cd-clear {
        grid-column: auto;
        width: 100%;
    }

    .cd-professor-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 14px;
    }

    .cd-professor-row > div {
        padding: 7px 0;
    }

    .cd-professor-row > .cd-professor-main {
        grid-column: 1 / 3;
        grid-row: 1;
        padding-top: 0;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5ebf2;
    }

    .cd-professor-row > .cd-subjects {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .cd-professor-row > .cd-opinions {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
    }

    .cd-professor-row > .cd-rating {
        grid-column: 1 / 3;
        grid-row: 4;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid #e5ebf2;
    }

    .cd-professor-row > .cd-action {
        grid-column: 2;
        grid-row: 3;
    }

    .cd-action a {
        min-width: 98px;
    }

    .cd-bottom-cta {
        display: block;
        padding: 15px;
    }

    .cd-bottom-cta > a {
        justify-content: center;
        width: 100%;
        margin-top: 14px;
    }
}

@media (max-width: 390px) {
    .cd-shell {
        padding: 14px;
    }

    .cd-metric {
        text-align: center;
    }

    .cd-metric > i {
        display: inline-block;
    }
}