/* The look both list blocks share. unicorn/list fills its cells from what an
 * editor typed, unicorn/brand-list from the content binding, but the table, the
 * row grid and the way a row folds on a phone are one design, defined once. */

.unicorn-list-outer {
    --bgColor: var(--surfaces-background);
    /* Resolved here and inherited as a colour, so a descendant that redefines
       --bgColor for itself (a row, the ticket stub) can still reach the block's
       own surface — the ticket's notches have to match it. */
    --list-bg: var(--bgColor);
    /* The phone breakpoints below query this element's own width, not the
       viewport's, so a list nested in a narrow cell (a Cards brand cell) still
       collapses the way it does on a phone. */
    container-type: inline-size;
    margin-block: 10px;
    /* Inside the surface, not outside it: margin alone left a coloured wrapper clipped
       flush to the first and last row, with no band to read as one. */
    padding-block: 10px;
    background-color: var(--bgColor);
}
@supports (color: contrast-color(red)) {
    .unicorn-list-outer { color: contrast-color(var(--bgColor)); }
}

.unicorn-list-table {
    border: 1px solid var(--border-stroke);
    border-radius: var(--block-radius, 16px);
    overflow: hidden;
}

.unicorn-list-row {
    --logo-bg: var(--surfaces-background-light);
    --bgColor: var(--row-bg);
    display: grid;
    /* Each block names one track per surviving column, so a two-column list is
       two tracks and not the design's four with two left blank. */
    grid-template-columns: var(--list-track, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-stroke);
    background-color: var(--bgColor);
}
@supports (color: contrast-color(red)) {
    .unicorn-list-row { color: contrast-color(var(--bgColor)); }
}
.unicorn-list-row:last-child {
    border-bottom: none;
}
.unicorn-list-row:not(.unicorn-list-head):hover {
    --bgColor: color-mix(in srgb, var(--row-bg) 90%, var(--accent) 6%);
}

.unicorn-list-rank {
    font-size: var(--text-md);
    font-weight: var(--cc-font-weight-bold);
    color: color-mix(in srgb, currentColor 55%, transparent);
    font-variant-numeric: tabular-nums;
}

/* The framed media cell: a logo on a brand row, any image on a custom one. */
.unicorn-list-logo,
.unicorn-list-image {
    --image-bg: var(--logo-bg);
    flex-shrink: 0;
    width: 104px;
    height: 52px;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--image-bg);
}
.unicorn-list-logo img,
.unicorn-list-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.unicorn-list-name,
.unicorn-list-title {
    font-size: var(--text-md);
    font-weight: var(--cc-font-weight-bold);
    text-decoration: none;
    color: inherit; /* an <a> otherwise takes the theme's link colour instead of the row's contrast */
}
a.unicorn-list-title:hover,
a.unicorn-list-name:hover {
    color: var(--accent);
}

/* color:inherit above loses to the theme's link rule, so a link on a coloured
   row keeps the site blue against the row's own contrast colour. Same colour,
   !important only to beat the theme. Buttons carry their own fill; :not(:hover)
   leaves the accent hover above intact. */
.unicorn-list-outer a:not([class*="unicorn-button"]):not(:hover) {
    color: inherit !important;
}

.unicorn-list-detail,
.unicorn-list-sub {
    font-size: var(--text-sm);
    line-height: var(--cc-line-height-lg);
    color: color-mix(in srgb, currentColor 72%, transparent);
    margin: 0;
}

.unicorn-list-badge {
    display: inline-block;
    font-size: var(--text-xxs);
    font-weight: var(--cc-font-weight-bold);
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 9999px;
    padding: 4px 10px;
}

.unicorn-list-ratingnum {
    font-size: var(--text-xxs);
    font-weight: var(--cc-font-weight-bold);
    color: color-mix(in srgb, currentColor 72%, transparent);
}

/* One column per line on a phone: four of these side by side are four slivers,
   and six would be worse. */
@container (max-width: 720px) {
    .unicorn-list-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px;
    }
    /* A row is one column wide here, so an 88px thumbnail sitting in it reads as
       a stray box. The cell takes the width; the logo inside stays a logo. */
    .unicorn-list-logo,
    .unicorn-list-image {
        width: 100%;
        height: auto;
        min-height: 60px;
        max-height: 100px;
    }
    .unicorn-list-logo img,
    .unicorn-list-image img {
        max-width: 50cqi;
        /* The cell's own padding is the gutter; a logo as tall as the box has
           none and reads as cropped. */
        max-height: 84px;
    }
}

/* A button style that is no button: the row's own colour with an underline,
   for a list where a filled CTA would shout. */
.unicorn-list-textlink {
    font-size: var(--text-sm);
    font-weight: var(--cc-font-weight-bold);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.unicorn-list-textlink:hover {
    color: var(--accent);
}

/* ---- Designs. One class on the wrapper; the content is the same in every one. */

/* Columns: every chosen brand is a column, read side by side. Nothing falls
   through to the table, so the track is the whole design. */
.unicorn-list--columns .unicorn-list-columns {
    display: grid;
    /* One track per brand, all equal, every one of them in view: the whole point
       is reading them against each other, so on a wide screen nothing scrolls. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    /* Every card prints the same slots, so one set of rows across the whole grid
       puts every logo, every button and every chip run on the same line. Without
       this each card sizes its own rows and the set reads as waves. */
    grid-template-rows: repeat(var(--col-slots, 1), auto);
}
.unicorn-list--columns .unicorn-list-row {
    /* The DOM stays in ranking order for a screen reader; the raised card is
       moved to the centre visually, and only visually. */
    order: var(--col-order, 0);
    grid-template-columns: minmax(0, 1fr);
    /* A column is read top to bottom, so its cells start at the top edge and the
       shortest brand does not float its content to the middle. */
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px 16px;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    /* Sharing a row is not the same as lining up in it: centred, a one-line name
       starts lower than a three-line one and the eye still sees a wave. Every slot
       starts at its row's top line, and the spacing comes from the gap. */
    align-items: start;
}
/* The wrapper would otherwise be one row holding three; flattened, its children
   take their own slots on the shared grid. */
.unicorn-list--columns .unicorn-list-main {
    display: contents;
}
/* A slot with nothing in it still holds its line open, so the card below it does
   not ride up and break the row. */
.unicorn-list--columns .unicorn-list-offer:empty,
.unicorn-list--columns .unicorn-list-meta:empty {
    display: block;
    min-height: 0;
}
.unicorn-list--columns .unicorn-list-rankwrap {
    flex-direction: column;
    gap: 8px;
}
.unicorn-list--columns .unicorn-list-rank {
    font-size: var(--text-sm);
}
.unicorn-list--columns .unicorn-list-titlerow {
    justify-content: center;
}
.unicorn-list--columns .unicorn-list-main,
.unicorn-list--columns .unicorn-list-cta {
    width: 100%;
}
.unicorn-list--columns .unicorn-list-detail {
    display: none;
}

/* Separate: a panel per column, standing on its own. */
.unicorn-list--columns.is-separate .unicorn-list-columns {
    gap: 12px;
}
.unicorn-list--columns.is-separate .unicorn-list-row {
    background-color: var(--row-bg);
    border: 1px solid var(--border-stroke);
    border-radius: var(--block-radius, 16px);
}

/* Podium: one of the columns is the winner. It is raised, a step larger and
   marked out with the accent — not a layout of its own any more. */
/* Room for the winner's panel to sit proud of the row without being clipped. */
.unicorn-list--columns.has-podium .unicorn-list-columns {
    padding-top: 24px;
    padding-bottom: 16px;
}
/* The winner's panel is drawn AROUND the card, by a pseudo-element with negative
   insets, and the card keeps the same padding as its neighbours. Growing the card
   itself — bigger padding, negative margins — moved its content off the shared row
   grid, so its logo, its button and its chips no longer lined up with the columns
   beside it. The box still reads as larger and raised; only the rows stay put. */
.unicorn-list--columns.has-podium .unicorn-list-row--podium {
    --bgColor: color-mix(in srgb, var(--row-bg) 86%, var(--accent) 14%);
    position: relative;
    z-index: 1;
    border-color: transparent;
}
.unicorn-list--columns.has-podium .unicorn-list-row--podium::before {
    content: "";
    position: absolute;
    inset: -20px -6px -12px;
    z-index: -1;
    border: 2px solid var(--accent);
    border-radius: var(--block-radius, 16px);
    background-color: var(--bgColor);
    box-shadow: 0 6px 18px color-mix(in srgb, currentColor 14%, transparent);
}
.unicorn-list--columns.has-podium .unicorn-list-row--podium .unicorn-list-logo {
    width: 140px;
    height: 70px;
}
.unicorn-list--columns.has-podium .unicorn-list-row--podium .unicorn-list-name {
    font-size: var(--text-lg);
}
/* Ticket: the offer is the headline, the brand a panel in its own colour down
   the left of the box. */
.unicorn-list--ticket .unicorn-list-table {
    border: none;
    border-radius: 0;
    overflow: visible;
    display: grid;
    gap: 14px;
}
.unicorn-list--ticket .unicorn-list-row {
    position: relative;
    grid-template-columns: 180px minmax(0, 1fr) 200px;
    /* Named explicitly so the stub and the CTA can span the whole ticket:
       `grid-row: 1 / -1` only reaches the EXPLICIT grid, and with implicit rows
       it resolves to a zero span and the stub stops halfway down. */
    grid-template-rows: auto auto;
    /* A brand with no colour of its own gets the box's own surface, not the
       light panel the other designs use: a white slab on a coloured row reads
       as a mistake. An inline --logo-bg from the brand still wins. */
    --logo-bg: var(--row-bg);
    padding: 0;
    border: 1px solid var(--border-stroke);
    /* The base row centres its cells; the stub has to run the full height. */
    align-items: stretch;
    border-radius: var(--block-radius, 16px);
    overflow: hidden;
    gap: 0;
}
.unicorn-list--ticket .unicorn-list-rankwrap {
    /* --logo-bg is set on the row, so this panel can read it. */
    --bgColor: var(--logo-bg);
    /* The stub is the full height of the ticket whatever the rest of the row
       holds, with the logo centred in it. */
    grid-row: 1 / -1;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    background-color: var(--bgColor);
    border-right: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.unicorn-list--ticket .unicorn-list-rank {
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: inherit;
}
@supports (color: contrast-color(red)) {
    .unicorn-list--ticket .unicorn-list-rankwrap { color: contrast-color(var(--bgColor)); }
}
/* The logo sits straight on the brand colour — an inner panel would box it in. */
.unicorn-list--ticket .unicorn-list-logo {
    width: 130px;
    height: 62px;
    background-color: transparent;
    padding: 0;
}
.unicorn-list--ticket .unicorn-list-ratingnum {
    color: inherit;
}
.unicorn-list--ticket .unicorn-list-main {
    padding: 20px 24px;
}
.unicorn-list--ticket .unicorn-list-offer {
    display: block;
    font-size: var(--text-xl);
    font-weight: var(--cc-font-weight-bold);
    line-height: var(--cc-line-height-sm);
    margin-bottom: 6px;
}
.unicorn-list--ticket .unicorn-list-name {
    font-size: var(--text-sm);
    font-weight: var(--cc-font-weight-regular);
    color: color-mix(in srgb, currentColor 72%, transparent);
}
.unicorn-list--ticket .unicorn-list-detail {
    display: none;
}
.unicorn-list--ticket .unicorn-list-cta {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding: 20px;
    align-self: center;
}

@container (max-width: 720px) {
    /* Ticket: the stub becomes a band across the top, notches move to its sides. */
    .unicorn-list--ticket .unicorn-list-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .unicorn-list--ticket .unicorn-list-rankwrap {
        flex-direction: row;
        justify-content: center;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    }
    /* The stub is the width of the phone, so the logo gets to be a real logo
       instead of the 88px thumbnail the other designs use. */
    .unicorn-list--ticket .unicorn-list-brand {
        width: 100%;
    }
    .unicorn-list--ticket .unicorn-list-logo {
        width: 50cqi;
        height: auto;
        max-height: 100px;
    }
    .unicorn-list--ticket .unicorn-list-logo img {
        max-height: 100px;
    }
    .unicorn-list--ticket .unicorn-list-main {
        padding: 16px;
    }
    .unicorn-list--ticket .unicorn-list-cta {
        grid-column: auto;
        grid-row: auto;
        padding: 0 16px 16px;
    }

    /* Columns: the sideways swipe. The track narrows so two columns stay in
       view and the reader scrolls, snapping one square. Stacking would make it
       the rows design again, on the device where comparing matters most. */
    .unicorn-list--columns .unicorn-list-columns {
        overflow-x: auto;
        grid-auto-columns: minmax(180px, 46%);
        gap: 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .unicorn-list--columns .unicorn-list-columns::-webkit-scrollbar { display: none; }
    .unicorn-list--columns .unicorn-list-row {
        scroll-snap-align: start;
        padding: 16px 12px;
    }
    /* The shared phone rule blows every logo cell up to the full row width; in a
       column that is already the width, so it stays a logo. */
    .unicorn-list--columns .unicorn-list-logo img {
        max-width: 100%;
        max-height: 60px;
    }
    /* A panel proud of its card clips against the scroller's own edge, so here it
       fills the column exactly and the winner reads by its tint and its border. */
    .unicorn-list--columns.has-podium .unicorn-list-columns {
        padding-top: 0;
        padding-bottom: 0;
    }
    .unicorn-list--columns.has-podium .unicorn-list-row--podium::before {
        inset: 0;
        border-radius: var(--block-radius, 16px);
        box-shadow: none;
    }
}