/* Shared RAC stylesheet — all Reading Achievement pages */
.rac-intro{margin:0 0 18px;padding:14px 16px;border-left:4px solid #0dcaf0;border-radius:10px;background:#f7fbfc;color:#555;line-height:1.65}
.rac-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 5px 18px rgba(0,0,0,.05)}
.rac-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding:11px 14px;border:1px solid #dbeafe;border-radius:11px;background:#f0f9ff}
.rac-card-header h3{margin:0;font-size:1.05rem;font-weight:700;color:#333}
.rac-count{padding:5px 11px;border-radius:50px;background:#0dcaf0;color:#fff;font-size:.76rem;font-weight:700;white-space:nowrap}
.rac-session-title{margin-bottom:18px;padding:10px 14px;border-radius:10px;background:#1e3d87;color:#fff;text-align:center;font-weight:700}
.rac-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 12px}
.rac-item{min-width:0;text-align:center}
.rac-photo-wrap{position:relative}
.rac-image{display:block;width:100%;height:210px;padding:5px;object-fit:contain;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
.rac-image:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.12)}
.rac-name{margin-top:7px;font-size:.80rem;line-height:1.3;font-weight:700;color:#333}
.rac-class{margin-top:2px;color:#6c757d;font-size:.72rem}
.rac-badge{position:absolute;top:7px;left:7px;z-index:2;padding:3px 6px;border-radius:6px;background:#212529;color:#fff;font-size:.72rem;line-height:1}
.rac-feature{margin:0 auto 22px;max-width:900px;text-align:center}
.rac-feature-image{display:block;width:100%;max-height:650px;object-fit:contain;padding:4px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;cursor:zoom-in}
.rac-feature-caption{margin-top:7px;color:#666;font-size:.88rem;font-weight:600}
.rac-student-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rac-student{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border:1px solid #e8edf2;border-radius:8px;background:#f8fafc;color:#333;font-size:.84rem;line-height:1.3}
.rac-student i{flex:0 0 auto;color:#0d6efd}
#imageModal .modal-dialog{max-width:calc(100vw - 30px);margin:15px auto}
#imageModal .modal-content{width:fit-content;max-width:100%;margin:auto;overflow:hidden;border:0;border-radius:12px;background:#111}
#imageModal .modal-body{position:relative;padding:0;line-height:0;background:#111}
#modalImage{display:block;width:auto;height:auto;max-width:calc(100vw - 30px);max-height:calc(100vh - 30px);object-fit:contain}
#imageCaption{position:absolute;right:0;bottom:0;left:0;padding:28px 16px 12px;color:#fff;text-align:center;font-size:.95rem;font-weight:700;line-height:1.35;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,0))}
.rac-modal-close{position:absolute;top:8px;right:8px;z-index:3;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:23px;line-height:30px;cursor:pointer}
@media(max-width:1199px){.rac-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:991px){.rac-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rac-student-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.rac-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rac-student-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rac-card{padding:14px}.rac-image{height:190px}}
@media(max-width:575px){.rac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 9px}.rac-student-grid{grid-template-columns:1fr}.rac-image{height:200px}.rac-card-header{flex-direction:column;text-align:center}.rac-name{font-size:.76rem}}
/* =========================================================
   IMAGE FALLBACK
========================================================= */

.rac-image-fallback {
    display: none;

    width: 100%;
    height: 210px;

    padding: 20px 10px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    border-radius: 10px;

    border: 1px solid #dbeafe;

    background:
        radial-gradient(
            circle at top right,
            rgba(13, 202, 240, .22),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #f0f9ff,
            #eef2ff
        );

    color: #334155;
}

.rac-image-fallback.show {
    display: flex;
}

.rac-fallback-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background: #fff;

    color: #0d6efd;

    font-size: 1.25rem;

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);
}

.rac-fallback-title {
    font-size: .95rem;
    font-weight: 700;

    line-height: 1.25;

    color: #1e293b;
}

.rac-fallback-class {
    margin-top: 3px;

    font-size: .78rem;
    font-weight: 600;

    color: #0d6efd;
}

.rac-fallback-text {
    margin-top: 8px;

    font-size: .68rem;

    color: #64748b;
}
/* =========================================================
   SUMMER READING CHALLENGE - YEAR NAVIGATION
========================================================= */

.src-year-nav {
    padding: 18px 20px;

    border: 1px solid #dbeafe;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #eef8ff
        );

    box-shadow:
        0 5px 18px rgba(15, 23, 42, .06);
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.src-year-nav-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;
}

.src-year-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: #fff;

    color: #0d6efd;

    font-size: 1.15rem;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .08);
}

.src-year-heading {
    font-size: .95rem;
    font-weight: 700;

    color: #1e293b;
}

.src-year-subheading {
    margin-top: 2px;

    font-size: .74rem;

    color: #64748b;
}


/* ---------------------------------------------------------
   BUTTON CONTAINER
--------------------------------------------------------- */

.src-year-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* ---------------------------------------------------------
   YEAR BUTTON
--------------------------------------------------------- */

.src-year-button {
    display: flex;
    align-items: center;

    min-width: 170px;

    padding: 9px 12px;

    border: 1px solid #cfe3f5;
    border-radius: 12px;

    background: #fff;

    color: #334155;

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.src-year-button:hover {
    transform: translateY(-2px);

    border-color: #0dcaf0;

    background: #fff;

    color: #0d6efd;

    box-shadow:
        0 7px 18px rgba(13, 110, 253, .12);
}


/* ---------------------------------------------------------
   BUTTON ICON
--------------------------------------------------------- */

.src-year-button-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 10px;

    border-radius: 9px;

    background: #eaf7ff;

    color: #0d6efd;

    font-size: .85rem;
}


/* ---------------------------------------------------------
   BUTTON TEXT
--------------------------------------------------------- */

.src-year-button-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.src-year-button-text strong {
    font-size: .85rem;
}

.src-year-button-text small {
    margin-top: 3px;

    font-size: .68rem;

    color: #64748b;
}


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.src-year-arrow {
    margin-left: auto;

    font-size: .8rem;

    color: #94a3b8;

    transition:
        transform .2s ease,
        color .2s ease;
}

.src-year-button:hover .src-year-arrow {
    color: #0d6efd;

    transform: translateX(3px);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 575px) {

    .src-year-nav {
        padding: 15px;
    }

    .src-year-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .src-year-button {
        width: 100%;
    }

}