/* ============================================================================
   selective_papers.css - /selective-entry-practice-papers.html
   Base type, buttons and xl-* layout come from style.css + home_v5.css (the
   page sits inside .xl). Everything page-specific lives under `spp-`.
   Brand palette: navy #1e3a8a, blue #2253c6, sky #0ea4e9.
   ========================================================================== */

.spp-page {
    --spp-navy: #1e3a8a;
    --spp-blue: #2253c6;
    --spp-blue-deep: #1b44a6;
    --spp-sky: #0ea4e9;
    --spp-wash: #eef4ff;
    /* Re-point home_v5's accent at the brand blue (focus rings, text links). */
    --indigo: #2253c6;
    --indigo-deep: #1b44a6;
}

/* ---------- Hero ---------- */
.spp-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2253c6 62%, #0ea4e9 130%);
    color: #fff;
    padding: 34px 0 60px;
}
.spp-crumbs {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 13.5px; color: #c7d7fb; margin-bottom: 30px;
}
.xl .spp-crumbs a { color: #fff; }
.xl .spp-crumbs a:hover { text-decoration: underline; }
.spp-hero__badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-data);
    font-size: 12.5px; font-weight: 500; letter-spacing: .05em;
    margin-bottom: 18px;
}
.spp-hero h1 {
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 800; line-height: 1.12;
    max-width: 18ch;
    margin-bottom: 16px;
}
.xl .spp-hero__sub {
    font-size: 18px; line-height: 1.6;
    color: #dbe7ff; max-width: 60ch;
    margin-bottom: 26px;
}
.spp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Buttons (a.-prefixed to outrank `.xl a { color: inherit }`) ---------- */
.xl .spp-btn--primary, .xl a.spp-btn--primary { background: var(--spp-blue); color: #fff; }
.xl .spp-btn--primary:hover, .xl a.spp-btn--primary:hover { background: var(--spp-navy); color: #fff; }
.xl .spp-btn--onhero, .xl a.spp-btn--onhero { background: #fff; color: var(--spp-navy); }
.xl .spp-btn--onhero:hover, .xl a.spp-btn--onhero:hover { background: var(--spp-wash); color: var(--spp-navy); }
.xl .spp-btn--heroghost, .xl a.spp-btn--heroghost {
    background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45);
}
.xl .spp-btn--heroghost:hover, .xl a.spp-btn--heroghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.xl .spp-btn--outline, .xl a.spp-btn--outline { background: var(--card); color: var(--spp-blue); border-color: var(--spp-blue); }
.xl .spp-btn--outline:hover, .xl a.spp-btn--outline:hover { background: var(--spp-wash); color: var(--spp-navy); }
.xl .spp-format { margin-top: 10px; }
.xl a.spp-link { color: var(--spp-blue); font-weight: 600; }
.xl a.spp-link:hover { color: var(--spp-navy); text-decoration: underline; }

.spp-section--tight { padding: 44px 0; }

/* ---------- Offers ---------- */
.spp-offers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.spp-offer {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--spp-sky);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
}
.spp-offer__tag {
    align-self: flex-start;
    font-family: var(--font-data); font-size: 11.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--spp-navy); background: var(--spp-wash);
    border-radius: 999px; padding: 4px 10px;
}
.spp-offer__name { font-size: 20px; font-weight: 700; color: var(--spp-navy); }
.xl .spp-offer__desc { font-size: 15px; line-height: 1.55; color: var(--ink-2); flex: 1; }
.spp-offer__price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 6px; }
.spp-offer__amt { font-family: var(--font-data); font-size: 28px; font-weight: 600; color: var(--ink); }
.spp-offer__per { font-size: 14px; color: var(--muted); }
.xl .spp-offers__note { margin-top: 14px; font-size: 14.5px; color: var(--muted); }

/* ---------- Paper groups + cards ---------- */
/* ---------- Paper cards: one grid, equal-height cards ---------- */
.spp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;            /* every row, and so every card, the same height */
    gap: 20px;
    margin-top: 8px;
}
.spp-card {
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 90px;
}
.spp-card__thumb {
    display: block; flex: none;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--spp-wash);
    border-bottom: 1px solid var(--line);
}
.spp-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.spp-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px; }
.spp-card__section {
    font-family: var(--font-data); font-size: 11.5px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--spp-sky);
}
.xl .spp-card__title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.xl .spp-card__part { font-size: 13.5px; font-weight: 600; color: var(--spp-navy); margin: -4px 0 0; }
.xl .spp-card__topic {
    font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.spp-card__meta {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; margin: 4px 0 0;
}
.spp-card__meta div {
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--paper); border-radius: 8px; padding: 7px 9px;
}
.spp-card__meta dt {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
.spp-card__meta dd { font-family: var(--font-data); font-size: 15px; font-weight: 600; color: var(--ink); margin: 2px 0 0; }
.xl .spp-card__note { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 0; }
.spp-card .spp-btn { margin-top: auto; }
@media (max-width: 1099px) { .spp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px)  { .spp-cards { grid-template-columns: 1fr; } }

.xl .spp-tocome {
    margin-top: 28px; padding: 14px 16px;
    background: var(--spp-wash); border-radius: 10px;
    font-size: 15px; color: var(--ink-2);
}

/* ---------- Steps ---------- */
.spp-steps {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px; counter-reset: spp; list-style: none; padding: 0; margin: 0;
}
.spp-steps li {
    counter-increment: spp;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px;
}
.spp-steps li::before {
    content: counter(spp);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--spp-navy); color: #fff;
    font-family: var(--font-data); font-weight: 600; font-size: 14px;
    margin-bottom: 12px;
}
.spp-steps h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px !important; }
.xl .spp-steps p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.xl .spp-more { margin-top: 24px; font-size: 15.5px; color: var(--ink-2); }

/* ---------- Bottom band ---------- */
.spp-band {
    background: var(--spp-navy); color: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 28px; margin-bottom: 18px;
}
.spp-band h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; margin-bottom: 6px !important; }
.xl .spp-band p { color: #dbe7ff; font-size: 16px; }

/* ---------- Disclaimer ---------- */
.xl .spp-disclaimer {
    font-size: 14px; line-height: 1.6; color: var(--muted);
    border-left: 3px solid var(--spp-sky); padding-left: 14px; max-width: 75ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .spp-offers, .spp-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .xl-wrap { padding: 0 18px; }
    .spp-hero { padding: 24px 0 44px; }
    .spp-crumbs { margin-bottom: 22px; }
    .xl .spp-hero__sub { font-size: 16.5px; }
    .spp-hero__ctas .spp-btn { width: 100%; }
    .spp-card__body { padding: 14px; }
    .spp-band { padding: 22px 20px; }
}