/* ─────────────────────────────────────────────────────────────────
 * "Servers in stock in <city>" — inc/nr-ready-strip.php
 *
 * Three cards a row on desktop, a swipeable row on phones. Built on the
 * nr26 tokens (nr26.css) so it sits with the redesigned sections around it.
 * Series colours match the plan grid (CLAUDE.md, series-family badges).
 * ───────────────────────────────────────────────────────────────── */
.nr-ready {
    scroll-margin-top: 72px;   /* clear the sticky header when the hero links here */
    background: var(--nr26-cloud, #F1F2EF);
    border-top: 1px solid var(--nr26-line, #E2E3DC);
    border-bottom: 1px solid var(--nr26-line, #E2E3DC);
    color: var(--nr26-text, #3E4742);
}
.nr-ready__inner {
    max-width: var(--nr26-container, 1280px);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) var(--nr26-gutter, 24px);
}
.nr-ready__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.nr-ready__eyebrow {
    margin: 0 0 10px;
    color: var(--nr26-pine-soft, #2E6B5E);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.nr-ready__headline {
    margin: 0;
    color: var(--nr26-ink, #0A0C29);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.nr-ready .nr-ready__sub {
    margin: 12px 0 0;
    max-width: 560px;
    color: var(--nr26-muted, #6B7470);
    font-size: 17px;
    line-height: 1.55;
}
.nr-ready .nr-ready__total {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 4px;
    background: var(--nr26-pine-tint, #E6EFE9);
    color: var(--nr26-pine, #1C3F3A);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.nr-ready__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #21D974;
    box-shadow: 0 0 0 3px rgba(33, 217, 116, .22);
    flex: none;
}

.nr-ready__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.nr-ready__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--nr26-white, #fff);
    border: 1px solid var(--nr26-line, #E2E3DC);
    border-radius: 6px;
    transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.nr-ready__card:hover {
    border-color: rgba(28, 63, 58, .35);
    box-shadow: 0 12px 28px -18px rgba(10, 12, 41, .35);
    transform: translateY(-2px);
}
.nr-ready__card[hidden] { display: none; }

.nr-ready__series {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--nr26-muted, #6B7470);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}
.nr-ready__series--edge        { background: #f08608; }
.nr-ready__series--memory      { background: #0071c5; }
.nr-ready__series--compute     { background: #14bb60; }
.nr-ready__series--frontier    { background: #4b3a8b; }
.nr-ready__series--accelerator { background: #e63946; }
.nr-ready__series--express     { background: #ff8b00; }
.nr-ready__series--unmetered   { background: #0a8a4d; }
.nr-ready__series--bandwidth   { background: #2a7fc4; }

.nr-ready__title {
    margin: 0;
    color: var(--nr26-ink, #0A0C29);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
.nr-ready .nr-ready__specs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}
.nr-ready .nr-ready__specs li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px dashed var(--nr26-line, #E2E3DC);
    font-size: 14px;
    line-height: 1.4;
    list-style: none;
}
.nr-ready__specs li span   { color: var(--nr26-muted, #6B7470); }
.nr-ready__specs li strong { color: var(--nr26-ink, #0A0C29); font-weight: 600; text-align: right; }

.nr-ready__foot {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 12px;
    padding-top: 8px;
}
.nr-ready .nr-ready__price {
    margin: 0;
    color: var(--nr26-ink, #0A0C29);
    font-size: 15px;
}
.nr-ready__price strong { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.nr-ready__price span   { color: var(--nr26-muted, #6B7470); margin-left: 2px; }
.nr-ready .nr-ready__stock {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--nr26-pine-soft, #2E6B5E);
    font-size: 13px;
    font-weight: 600;
}
.nr-ready__buy {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: 4px;
    background: var(--nr26-pine, #1C3F3A);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .18s ease-out;
}
.nr-ready__buy:hover { background: var(--nr26-pine-deep, #142D29); }
.nr-ready__buy span  { transition: transform .18s cubic-bezier(.16, 1, .3, 1); }
.nr-ready__buy:hover span { transform: translateX(3px); }

.nr-ready__more {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 28px;
}
.nr-ready__more a {
    color: var(--nr26-pine, #1C3F3A) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.nr-ready__more a:hover { text-decoration: underline !important; }
.nr-ready__more .nr-ready__talk { color: var(--nr26-muted, #6B7470) !important; font-weight: 500; }

@media (max-width: 1024px) {
    .nr-ready__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Header right-hand side: the "N servers ready now" pill and, on a
 * carousel, the previous / next buttons. */
.nr-ready__side {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.nr-ready__nav { display: inline-flex; gap: 8px; }
/* Three or fewer fit the desktop grid: buttons only on phones (below). */
.nr-ready:not(.nr-ready--carousel) .nr-ready__nav { display: none; }
.nr-ready__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--nr26-line, #E2E3DC);
    border-radius: 4px;
    background: var(--nr26-white, #fff);
    color: var(--nr26-pine, #1C3F3A);
    cursor: pointer;
    transition: border-color .15s ease-out, background .15s ease-out;
}
.nr-ready__btn:hover:not(:disabled) { border-color: var(--nr26-pine, #1C3F3A); }
.nr-ready__btn:focus-visible { outline: 2px solid var(--nr26-pine, #1C3F3A); outline-offset: 2px; }
.nr-ready__btn:disabled { opacity: .35; cursor: default; }

/* More than three servers: one row, three cards a page, paged by the
 * buttons or by swiping / trackpad. Cards keep their grid width. */
.nr-ready--carousel .nr-ready__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 32px) / 3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* room for the hover lift and shadow, which overflow would clip */
    padding: 4px 2px 18px;
    margin: -4px -2px -18px;
}
.nr-ready--carousel .nr-ready__grid::-webkit-scrollbar { display: none; }
.nr-ready--carousel .nr-ready__card { scroll-snap-align: start; }
/* The last card's left edge is past the furthest the row can scroll: snap it
 * by its right edge, or the row snaps back a page short of the end. */
.nr-ready--carousel .nr-ready__card:last-child { scroll-snap-align: end; }
.nr-ready--carousel .nr-ready__grid:focus-visible { outline: 2px solid var(--nr26-pine, #1C3F3A); outline-offset: 4px; }
@media (max-width: 1024px) {
    .nr-ready--carousel .nr-ready__grid { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 720px) {
    .nr-ready__head { flex-direction: column; align-items: flex-start; }
    /* One whole card at a time, paged by the buttons or by swiping, instead
     * of stacking them. (A card cut off at the screen edge read as broken.) */
    .nr-ready__grid,
    .nr-ready--carousel .nr-ready__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin: 0;
        padding: 0 0 8px;
    }
    .nr-ready__grid::-webkit-scrollbar { display: none; }
    .nr-ready .nr-ready__nav,
    .nr-ready:not(.nr-ready--carousel) .nr-ready__nav { display: inline-flex; }
    .nr-ready__card { scroll-snap-align: start; }
    .nr-ready__card:hover { transform: none; }
    .nr-ready__side { width: 100%; justify-content: space-between; }
    .nr-ready__foot { grid-template-columns: 1fr; }
    .nr-ready__buy  { grid-column: 1; grid-row: auto; justify-content: center; margin-top: 6px; }
}

/* ─────────────────────────────────────────────────────────────────
 * "Our sites in <city>": which facility does what, inside a city
 * page's introduction. Markup comes from
 * deploy/migrations/content-2026-10-23/data-centers.php.
 * ───────────────────────────────────────────────────────────────── */
.nr-city-sites {
    margin: 24px 0 8px;
    border-top: 1px solid var(--nr26-line, #E2E3DC);
}
.nr-product-highlight .nr-city-sites__title {
    margin: 18px 0 10px;
    color: var(--nr26-pine-soft, #2E6B5E);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.nr-product-highlight .nr-city-sites ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.nr-product-highlight .nr-city-sites li {
    display: grid;
    grid-template-columns: minmax(130px, auto) 1fr;
    gap: 4px 16px;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px dashed var(--nr26-line, #E2E3DC);
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
}
.nr-product-highlight .nr-city-sites li        { color: #5D6661; }   /* same as the introduction's paragraphs */
.nr-product-highlight .nr-city-sites li strong { color: #0C1210; font-weight: 700; }
.nr-product-highlight .nr-city-sites li span   { color: #5D6661; }
@media (max-width: 600px) {
    .nr-product-highlight .nr-city-sites li { grid-template-columns: 1fr; }
}