.skipton-tutor-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
}
.skipton-tutor-filters button {
    appearance: none;
    border: 1px solid #286e7a;
    background: #fff;
    color: #286e7a;
    padding: 9px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.skipton-tutor-filters button:hover,
.skipton-tutor-filters button.is-active {
    background: #286e7a;
    color: #fff;
}
.skipton-tutors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.skipton-tutors-grid--1 { grid-template-columns: 1fr; }
.skipton-tutors-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skipton-tutors-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skipton-tutor-card {
    background: #fff;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.skipton-tutor-card[hidden] { display: none; }

/* Directory thumbnails stay uniform. Cropping favours the upper part of the image,
   where faces are most commonly positioned. */
.skipton-tutor-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8e3d6;
}
.skipton-tutor-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
}
.skipton-tutor-content {
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex: 1;
    flex-direction: column;
}
.skipton-tutor-categories {
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.skipton-tutor-title {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.15;
}
.skipton-tutor-title a,
.skipton-tutor-view a { color: inherit; text-decoration: none; }
.skipton-tutor-title a:hover,
.skipton-tutor-view a:hover { text-decoration: underline; }
.skipton-tutor-excerpt { flex: 1; }
.skipton-tutor-excerpt p { margin-top: 0; }
.skipton-tutor-view { margin: 18px 0 0; font-weight: 700; }
.skipton-no-tutors { margin: 0; }

.skipton-single-tutor-wrap {
    width: min(1100px, calc(100% - 40px));
    margin: 48px auto 72px;
}
.skipton-single-tutor { background: #fff; }

/* Individual profiles never crop the supplied photograph. This safely handles
   portrait, landscape, square and older low-resolution images. */
.skipton-single-tutor-image {
    height: clamp(320px, 52vw, 650px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #e8e3d6;
}
.skipton-single-tutor-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.skipton-single-tutor-body {
    max-width: 820px;
    margin: 0 auto;
    padding: 38px 30px 48px;
}
.skipton-single-tutor-back { margin: 0 0 22px; font-weight: 700; }
.skipton-single-tutor-back a { text-decoration: none; }
.skipton-single-tutor-categories {
    margin: 0 0 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.skipton-single-tutor-title { margin: 0 0 28px; }
.skipton-single-tutor-content > :first-child { margin-top: 0; }
.skipton-single-tutor-content > :last-child { margin-bottom: 0; }
.skipton-single-tutor-contact {
    margin: 32px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid #d9d9d9;
}
.skipton-single-tutor-contact h2 { margin-top: 0; }
.skipton-single-tutor-contact ul { list-style: none; padding: 0; margin: 0; }
.skipton-single-tutor-contact li + li { margin-top: 8px; }
.skipton-single-tutor-contact a { word-break: break-word; }

@media (max-width: 1000px) {
    .skipton-tutors-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .skipton-tutors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .skipton-tutors-grid,
    .skipton-tutors-grid--2,
    .skipton-tutors-grid--4 {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .skipton-single-tutor-wrap {
        width: min(100% - 24px, 1100px);
        margin-top: 24px;
    }
    .skipton-single-tutor-image { height: 420px; }
    .skipton-single-tutor-body { padding: 28px 20px 36px; }
}