/* Student Council members: arrow banners, house shields and photo cards. Scoped to .sc. */
.sc {
    --navy: #0b2f78;
    --ink: #0d2147;
    position: relative;
    padding: 64px 20px 90px;
    overflow: hidden;
    font-family: Lexend, sans-serif;
    background:
        radial-gradient(circle at 100% 100%, rgba(120, 170, 235, 0.28), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(120, 170, 235, 0.22), transparent 34%),
        linear-gradient(180deg, #f4f8fe 0%, #ffffff 55%, #f3f8ff 100%);
}

.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }

.sc ul { margin: 0; padding: 0; list-style: none; }
.sc p, .sc h2, .sc h3 { margin: 0; }

.sc__inner { max-width: 1180px; margin: 0 auto; }

/* Section titles with lines on both sides */
.sc .sc__title {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 64px 0 36px;
    color: var(--navy);
    font: 700 28px/1.2 Lexend, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sc__title::before,
.sc__title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(11, 47, 120, 0.15), rgba(11, 47, 120, 0.7));
}

.sc__title::after { transform: scaleX(-1); }

/* Arrow banners */
.sc__arrows { display: grid; gap: 40px 36px; }
.sc__arrows--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc .sc__arrows--assist { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
.sc__arrows--junior { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sc-arrow {
    --c1: #1f6fe0; --c2: #0a47ad; --tip: #4f93f1;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 130px;
    padding-left: 70px;
    filter: drop-shadow(0 8px 14px rgba(13, 33, 71, 0.18));
}

.sc-arrow--blue   { --c1: #1f77ee; --c2: #0b47b0; --tip: #58a1ff; }
.sc-arrow--pink   { --c1: #ee3d86; --c2: #bd1c5c; --tip: #ff7db0; }
.sc-arrow--green  { --c1: #2eb34a; --c2: #12792b; --tip: #6fd685; }
.sc-arrow--orange { --c1: #f9a11b; --c2: #d36a05; --tip: #ffc65a; }
.sc-arrow--purple { --c1: #8a52e0; --c2: #5a2aa6; --tip: #b48df2; }
.sc-arrow--teal   { --c1: #19b2b8; --c2: #0b7480; --tip: #5fd9dd; }

.sc-arrow__body {
    position: relative;
    flex: 1;
    min-height: 106px;
    margin-left: -64px;
    padding: 16px 52px 16px 82px;
    color: #fff;
    background: linear-gradient(120deg, var(--c1), var(--c2));
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* lighter arrow tip behind the banner */
.sc-arrow::after {
    content: "";
    position: absolute;
    top: 14px;
    right: -8px;
    bottom: 14px;
    width: 60px;
    z-index: -1;
    background: var(--tip);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sc .sc-arrow__photo {
    position: relative;
    z-index: 2;
    width: 124px;
    height: 124px;
    flex: none;
    object-fit: cover;
    object-position: center top;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #e9f1fb;
    box-shadow: 0 0 0 7px var(--c1), 0 8px 18px rgba(13, 33, 71, 0.25);
}

.sc .sc-arrow__role {
    font: 500 20px/1.2 Lexend, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sc-arrow__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    max-width: 420px;
}

.sc-arrow__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: var(--c2);
}

.sc-arrow__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* three slanted stripes near the top edge and a lighter band along the arrow tip */
.sc-arrow__body::before {
    content: "";
    position: absolute;
    top: 0;
    right: 120px;
    width: 46px;
    height: 7px;
    background: repeating-linear-gradient(115deg, var(--tip) 0 7px, transparent 7px 14px);
}

.sc-arrow__body::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52px;
    background: var(--tip);
    opacity: 0.55;
    clip-path: polygon(0 0, 34px 0, 100% 50%, 34px 100%, 0 100%, 18px 50%);
}

.sc .sc-arrow__name {
    margin-top: 12px;
    font: 600 28px/1.2 Lexend, sans-serif;
}

.sc__arrows--junior .sc-arrow { min-height: 110px; }
.sc .sc__arrows--junior .sc-arrow__photo { width: 104px; height: 104px; }
.sc__arrows--junior .sc-arrow__body { margin-left: -54px; padding-left: 70px; min-height: 92px; }
.sc__arrows--junior .sc-arrow { padding-left: 58px; }
.sc .sc__arrows--junior .sc-arrow__role { font-size: 15px; }
.sc .sc__arrows--junior .sc-arrow__name { font-size: 20px; }
.sc__arrows--junior .sc-arrow__icon { width: 36px; height: 36px; }
.sc__arrows--junior .sc-arrow__icon svg { width: 20px; height: 20px; }

/* House shields */
.sc__houses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.sc-house {
    --h1: #e0242f; --h2: #a30f1b; --ring: #ff6a73;
    text-align: center;
}

.sc-house--red   { --h1: #e5252f; --h2: #a1101c; --ring: #ff7a82; }
.sc-house--navy  { --h1: #1f6fe0; --h2: #0a3fa6; --ring: #6aa6f5; }
.sc-house--gold  { --h1: #f5b014; --h2: #d27f05; --ring: #ffd465; }
.sc-house--green { --h1: #2eb34a; --h2: #12792b; --ring: #7edb92; }

.sc .sc-house__name {
    margin-bottom: 22px;
    color: var(--h2);
    font: 700 19px/1.2 Lexend, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-house__people { display: grid; gap: 34px; }

.sc-shield {
    position: relative;
    padding: 120px 14px 56px;
    color: #fff;
    background: linear-gradient(170deg, var(--h1), var(--h2));
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    filter: drop-shadow(0 10px 14px rgba(13, 33, 71, 0.22));
}

.sc-shield::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 40%);
    pointer-events: none;
}

.sc .sc-shield__photo {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 96px;
    height: 96px;
    object-fit: cover;
    object-position: center top;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px var(--ring);
    transform: translate(-50%, 14px);
}

.sc .sc-shield__role {
    font: 700 15px/1.25 Lexend, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sc .sc-shield__name {
    margin-top: 6px;
    font: 500 16px/1.3 Lexend, sans-serif;
}

/* House shields keep their photo circle outside the clipped shape, so wrap the list item */
.sc-house__people > li {
    position: relative;
}

/* Other members: photo and a soft card */
.sc__members {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, minmax(0, 275px));
    gap: 34px 26px;
}

.sc-member {
    position: relative;
    padding-top: 52px;
    text-align: center;
}

.sc .sc-member__photo {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 104px;
    height: 104px;
    object-fit: cover;
    object-position: center top;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px var(--navy), 0 8px 16px rgba(13, 33, 71, 0.2);
    transform: translateX(-50%);
}

.sc-member__card {
    padding: 62px 14px 18px;
    border: 1px solid #cfe0f6;
    border-radius: 12px;
    background: linear-gradient(180deg, #eaf3ff, #dcebff);
    box-shadow: 0 8px 18px rgba(13, 33, 71, 0.08);
}

.sc .sc-member__name {
    color: var(--ink);
    font: 600 17px/1.3 Lexend, sans-serif;
}

.sc .sc-member__role {
    margin-top: 6px;
    color: var(--navy);
    font: 600 13px/1.3 Lexend, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Tablet */
@media (max-width: 1024px) {
    .sc { padding: 48px 20px 70px; }
    .sc .sc__title { font-size: 24px; margin-top: 52px; }
    .sc__houses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
    .sc__members { grid-template-columns: repeat(2, minmax(0, 275px)); }
    .sc__arrows--lead, .sc__arrows--assist, .sc__arrows--junior { gap: 24px; }
    .sc .sc-arrow__role { font-size: 17px; }
    .sc .sc-arrow__name { font-size: 22px; }
}

/* Mobile */
@media (max-width: 767px) {
    .sc { padding: 36px 14px 56px; }
    .sc .sc__title { gap: 12px; margin: 44px 0 28px; font-size: 19px; letter-spacing: 0.06em; }
    .sc__arrows--lead, .sc__arrows--assist, .sc__arrows--junior { grid-template-columns: 1fr; }
    .sc-arrow { min-height: 112px; padding-left: 52px; }
    .sc .sc-arrow__photo { width: 100px; height: 100px; }
    .sc-arrow__body { margin-left: -50px; padding: 12px 44px 12px 64px; min-height: 88px; }
    .sc .sc-arrow__role { font-size: 14px; }
    .sc .sc-arrow__name { font-size: 19px; }
    .sc-arrow__icon { width: 34px; height: 34px; }
    .sc-arrow__icon svg { width: 19px; height: 19px; }
    .sc-arrow__head { gap: 10px; }
    .sc-arrow__body::before { right: 60px; }
    .sc__houses { grid-template-columns: 1fr; gap: 36px; }
    .sc-house__people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .sc-shield { padding: 104px 8px 50px; }
    .sc .sc-shield__photo { width: 80px; height: 80px; }
    .sc .sc-shield__role { font-size: 12px; }
    .sc .sc-shield__name { font-size: 14px; }
    .sc__members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
    .sc .sc-member__photo { width: 88px; height: 88px; }
    .sc-member__card { padding: 54px 8px 14px; }
    .sc .sc-member__name { font-size: 15px; }
    .sc .sc-member__role { font-size: 11px; }
}

/* Space between the house shields and the photo cards below them (there is no heading between them). */
.sc .sc__members { margin-top: 80px; }

@media (max-width: 767px) {
    .sc .sc__members { margin-top: 56px; }
}

/* Responsive fixes: banners must never be wider than their grid cell. */
.sc .sc-arrow { min-width: 0; }
.sc .sc-arrow__body { min-width: 0; }
.sc .sc-arrow__name,
.sc .sc-arrow__role { overflow-wrap: anywhere; }
.sc .sc-arrow__head { min-width: 0; }

/* Tablet: two banners per row in a narrower cell, so the banner is a little smaller */
@media (max-width: 1024px) {
    .sc .sc-arrow { padding-left: 50px; min-height: 104px; }
    .sc .sc-arrow__photo { width: 100px; height: 100px; }
    .sc .sc-arrow__body { margin-left: -48px; padding: 12px 40px 12px 64px; min-height: 84px; }
    .sc .sc-arrow__head { gap: 10px; padding-bottom: 8px; }
    .sc .sc-arrow__icon { width: 34px; height: 34px; }
    .sc .sc-arrow__icon svg { width: 19px; height: 19px; }
    .sc .sc-arrow__role, .sc .sc__arrows--junior .sc-arrow__role { font-size: 13px; letter-spacing: 0.04em; }
    .sc .sc-arrow__name, .sc .sc__arrows--junior .sc-arrow__name { font-size: 17px; margin-top: 8px; }
    .sc .sc__arrows--junior .sc-arrow { padding-left: 50px; }
    .sc .sc__arrows--junior .sc-arrow__photo { width: 100px; height: 100px; }
    .sc .sc__arrows--junior .sc-arrow__body { margin-left: -48px; padding-left: 64px; }
    .sc .sc-arrow__body::before { right: 70px; }
}

/* Mobile: one banner per row (all four banner lists, including the assistants) */
@media (max-width: 767px) {
    .sc .sc__arrows,
    .sc .sc__arrows--lead,
    .sc .sc__arrows--assist,
    .sc .sc__arrows--junior { grid-template-columns: 1fr; gap: 26px; }
    .sc .sc__arrows--assist { margin-top: 26px; }
    .sc .sc-arrow { margin-right: 10px; padding-left: 46px; }
    .sc .sc-arrow__photo, .sc .sc__arrows--junior .sc-arrow__photo { width: 92px; height: 92px; }
    .sc .sc-arrow__body, .sc .sc__arrows--junior .sc-arrow__body { margin-left: -44px; padding: 10px 34px 10px 58px; min-height: 80px; }
    .sc .sc-arrow__role, .sc .sc__arrows--junior .sc-arrow__role { font-size: 12px; }
    .sc .sc-arrow__name, .sc .sc__arrows--junior .sc-arrow__name { font-size: 16px; }
    .sc .sc-arrow__icon, .sc .sc__arrows--junior .sc-arrow__icon { width: 30px; height: 30px; }
    .sc .sc-arrow__icon svg, .sc .sc__arrows--junior .sc-arrow__icon svg { width: 17px; height: 17px; }
}

/* Keep text clear of the lighter arrow-tip band and avoid breaking inside words where possible. */
.sc .sc-arrow__name,
.sc .sc-arrow__role { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

@media (max-width: 1024px) {
    .sc .sc-arrow__body, .sc .sc__arrows--junior .sc-arrow__body { padding-right: 58px; }
}

@media (max-width: 767px) {
    .sc .sc-arrow__body, .sc .sc__arrows--junior .sc-arrow__body { padding-right: 54px; margin-left: -40px; padding-left: 54px; }
    .sc .sc-arrow__name, .sc .sc__arrows--junior .sc-arrow__name { font-size: 15px; }
}

/* Very small phones (320 px) */
@media (max-width: 360px) {
    .sc .sc-arrow { padding-left: 40px; }
    .sc .sc-arrow__photo, .sc .sc__arrows--junior .sc-arrow__photo { width: 80px; height: 80px; }
    .sc .sc-arrow__body, .sc .sc__arrows--junior .sc-arrow__body { margin-left: -38px; padding: 8px 40px 8px 48px; min-height: 72px; }
    .sc .sc-arrow__role, .sc .sc__arrows--junior .sc-arrow__role { font-size: 11px; letter-spacing: 0.02em; }
    .sc .sc-arrow__icon, .sc .sc__arrows--junior .sc-arrow__icon { width: 26px; height: 26px; }
    .sc .sc-arrow__icon svg, .sc .sc__arrows--junior .sc-arrow__icon svg { width: 15px; height: 15px; }
    .sc .sc-arrow__head { gap: 8px; }
    .sc .sc-arrow__name, .sc .sc__arrows--junior .sc-arrow__name { font-size: 14px; }
}