/* "Watch Out" toppers marquee — Stage J token pass. The seamless-loop
   mechanics are untouched: the list renders twice and scroll50 translates
   -50% with a per-column inline animation-duration (DYNAMIC_MIGRATION_PLAN
   §8.4). Used by home AND highsec. */

.sec-marks-scroll {
    background: var(--sj-veil), url('/photos/schname.jpg') center / cover;
    padding: 25px;
}
.sec-marks-scroll h2 {
    font-family: var(--sj-font-head);
    color: var(--sj-gold);
    text-align: center;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 400;
    padding: 15px;
}
.sec-marks-scroll h2::after {
    content: ""; display: block;
    width: 44px; height: 4px; border-radius: 2px;
    background: var(--sj-gold); margin: 12px auto 0;
}
.marks-container {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    padding: 25px;
    background: transparent;
    gap: 10px;
}

.carousel-marks {
    width: 80%;
    height: 450px;
    overflow: hidden;
    position: relative;
    margin: 0 10px;
    float: left;
    border-radius: var(--sj-r-card);
    box-shadow: var(--sj-shadow-1);
}

.carousel-marks h2 {
    font-family: var(--sj-font-head);
    color: #fff;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    font-weight: 400;
    margin: 0;
    z-index: 1;
}

.carousel-marks .marks-carousel-inner {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50px;
    /* list is rendered twice; -50% + per-column duration = seamless loop at any
       item count (DYNAMIC_MIGRATION_PLAN.md §8.4) */
    animation: scroll50 20s linear infinite;
}

.carousel-marks .carousel-inner-container {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.carousel-marks .marks-carousel-item {
    color: var(--sj-gold);
    font-family: var(--sj-font-body);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    padding: 10px;
    box-sizing: border-box;
}
.carousel-marks .marks-carousel-item span {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}
.carousel-left, .carousel-right {
    background-image: var(--sj-grad-brand);
}

@keyframes scroll50 {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
/* K1 (owner decision): on phones the year columns STACK full-width instead of
   crushing side by side — each keeps its own scrolling toppers list. */
@media (max-width: 900px) {
    .marks-container { flex-direction: column; padding: 14px; }
    .carousel-marks {
        width: 100%;
        float: none;
        margin: 0 0 16px;
        height: 360px;
    }
    .carousel-marks .marks-carousel-item { font-size: 15px; padding: 8px; text-align: center; }
    .carousel-marks .marks-carousel-item span { font-size: 16px; }
    .carousel-marks h2 { font-size: 22px; }
}

/* ===== K13 mobile — small phones. The marquee needs a FIXED window (the
   seamless -50% loop), so we only tighten it. NOTE: this partial is shared
   with the highsec section page — the same improvement renders there too. */
@media (max-width: 576px) {
    .sec-marks-scroll { padding: 18px 10px; }
    .sec-marks-scroll h2 { font-size: clamp(24px, 7vw, 28px); }
    .carousel-marks { height: 340px; }
    /* K13-fix: the year title was position:absolute at left:50% with no width,
       so on a narrow card it shrank to the right half and wrapped to 3 lines;
       having no background, the scrolling entries showed THROUGH it ("text goes
       under the bar, not hidden"). Make it a full-width OPAQUE header band on
       one line, and start the scroll window right below it with no residual top
       offset — so nothing overlaps the bar and nothing peeks above the window. */
    .carousel-marks h2 {
        left: 0; right: 0; top: 0;
        transform: none; text-align: center; white-space: nowrap;
        margin: 0; padding: 13px 8px; font-size: 20px;
        background: var(--sj-navy-dark);
    }
    .carousel-marks .carousel-inner-container { top: 52px; }
    .carousel-marks .marks-carousel-inner { top: 0; }
}