/* ============================================================================
   "Goes with this" — the cross-sell rail.
   ============================================================================

   ONE FILE, FOUR SHELLS. This rail renders on the guest package page (hn-* /
   au-*), the student series page and result page (.eduui / edu-*), and the
   checkout (co-*). Those are three different design systems with three
   different token sets, and a rail that inherited from whichever one it landed
   in would look like three different features.

   So it inherits nothing. Every value below is either a literal or an --xs-*
   token, and the tokens take the host's brand colour ONLY where the host has
   one to give — var(--edu-primary, var(--ia-primary, #27237F)). A shell that
   defines neither gets the default indigo rather than a broken cascade.

   The same reasoning, and the same solution, as exam-plate.css: a package has
   to look like the same package on every page that shows it.

   PHONE FIRST. Below 700px the cards become a scroll-snapped rail rather than a
   stack, because this is an ASIDE — three full-width cards stacked under the
   thing the student came for pushes the page's real content off the screen. The
   rail says "there is more here" in 140px of height. */

.xs-rail {
    --xs-ink:      #14122E;
    --xs-mut:      #5C5776;
    --xs-line:     #E6E2F2;
    --xs-card:     #FFFFFF;
    --xs-ground:   #F7F5FD;
    --xs-brand:    var(--edu-primary, var(--ia-primary, #27237F));
    --xs-brand-sf: var(--edu-primary-soft, #F1EEFC);
    --xs-accent:   #6F2DF7;

    /* Symmetric. The rail used to carry a top margin and no bottom one, which is fine
       where it is the last thing on a page and wrong on the result page, where the exam
       details card follows it: 24px of air above the rail and none at all below, so the
       panel and the card underneath it shared an edge. */
    margin: 22px 0;
    padding: 18px;
    border: 1px solid var(--xs-line);
    border-radius: 16px;
    background: var(--xs-ground);
    /* The student shell's .eduui :where() resets zero out borders inside blocks
       like this one; naming the property here beats a zero-specificity reset. */
    box-sizing: border-box;
}

.xs-rail * { box-sizing: border-box; }

.xs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

.xs-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xs-ink);
    letter-spacing: -.01em;
}

.xs-note {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--xs-mut);
}

/* ---------------------------------------------------------------- the cards */

.xs-list {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .xs-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

/* Below 700px, a rail. scroll-padding keeps the first card off the left edge
   after a snap, which is the difference between a rail and a clipped card. */
@media (max-width: 699px) {
    .xs-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(78%, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .xs-list::-webkit-scrollbar { height: 0; }
    .xs-card { scroll-snap-align: start; }

    /* ONE OFFER, ONE FRAME. A bordered card inside the rail's own bordered panel says
       the same thing twice and charges 28px of a 360px screen for it — on the result
       page the offer's title started 14px further in than the text of every card above
       and below it, and the whole aside took 247px of height to show four short lines.
       The panel is already the frame when there is only one thing in it.

       Two or more and the frames stay: there they are what separates one card in the
       scroll rail from the next, which is the whole reason the rail reads as a rail.

       is-flush is excluded because it is the opposite arrangement — the checkout drops
       the PANEL and keeps the cards, so this would leave its offers with no frame at
       all on a white page. */
    .xs-rail:not(.is-flush) .xs-list > li:only-child .xs-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

.xs-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 13px 12px;
    border: 1px solid var(--xs-line);
    border-radius: 13px;
    background: var(--xs-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    min-width: 0;
}

.xs-card:hover,
.xs-card:focus-visible {
    border-color: var(--xs-brand);
    box-shadow: 0 6px 18px rgba(39, 35, 127, .10);
    text-decoration: none;
    color: inherit;
}

@media (hover: hover) {
    .xs-card:hover { transform: translateY(-2px); }
}

.xs-kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--xs-brand-sf);
    color: var(--xs-brand);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
}

.xs-kind.is-included {
    background: #E8F6EF;
    color: #0B7A54;
}

.xs-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.32;
    color: var(--xs-ink);
    /* Two lines, then ellipsis. A four-line title in a 210px card is the card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xs-meta {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--xs-mut);
}

.xs-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.xs-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--xs-ink);
    letter-spacing: -.01em;
}

.xs-price.is-free { color: #0B7A54; }

.xs-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--xs-brand);
}

.xs-go .material-symbols-outlined,
.xs-go .fa { font-size: 15px; line-height: 1; }

/* The checkout placement is an add-on LINE, not a shelf: it sits inside a panel
   that already has its own frame, so the rail drops its own. */
.xs-rail.is-flush {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Dark shells (the exam-flow result page runs light, but the app shell can be
   asked for dark) — only the surfaces move, so contrast is kept deliberate
   rather than inherited. */
@media (prefers-color-scheme: dark) {
    body.edu-theme-dark .xs-rail {
        --xs-ink:    #F3F1FA;
        --xs-mut:    #B9B3D0;
        --xs-line:   #322D52;
        --xs-card:   #211D3C;
        --xs-ground: #1A1730;
    }
}