/* SEO landing pages (ec/services/seo_pages.py). Loaded after style.css, so shared
   tokens (--color-*, .btnOutline, .btnPrimar, .breadcrumbs, .l-footer) come from there.
   style.css sets html { font-size: 62.5% }: 1rem = 10px, body text is 1.4rem. */
/* Header: logo · text links · Shop in one centred row on desktop. On phones the logo and Shop share
   the first row and the links scroll sideways on a second row, so no link is cut off at the edge.
   style.css top-aligns `.l-navbar .l-container` on desktop for the shop's two-row header, so these
   selectors carry the same weight to centre this one-row header */
.seoNavbar .seoNavbar__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px
}

.seoNavbar__logo {
    flex: 0 0 auto;
    width: 40px
}

.seoNav {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    gap: 20px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none
}

.seoNav::-webkit-scrollbar {
    display: none
}

.seoNav__item a {
    display: block;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: none;
    white-space: nowrap
}

.seoNav__item a:hover,
.seoNav__item a[aria-current="page"] {
    color: var(--color-primary)
}

.seoNav__item a[aria-current="page"] {
    border-bottom-color: var(--color-primary)
}

/* .btnOutline is 240x56 by default; the header shop link and every Buy / Pre-order link
   use a compact size instead */
.seoNavbar__shop,
.seoBtn {
    width: auto;
    min-width: 88px;
    height: 36px;
    padding: 0 16px;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap
}

.seoNavbar__shop {
    flex: 0 0 auto;
    order: 2;
    margin-left: auto
}

/* 6 links + logo + Shop need about 820px, so tablets keep the two-row layout */
@media (min-width: 1024px) {
    .seoNavbar .seoNavbar__inner {
        flex-wrap: nowrap;
        gap: 32px
    }

    .seoNavbar__logo {
        width: 56px
    }

    .seoNav {
        order: 2;
        flex: 1 1 auto;
        gap: 28px
    }

    .seoNav__item a {
        font-size: 1.5rem
    }

    .seoNavbar__shop {
        order: 3
    }
}

.seoMain {
    padding: 8px 0 32px
}

.seoHead {
    margin-bottom: 8px
}

.seoHead__sub {
    display: block;
    font-size: 0.6em;
    font-weight: 400;
    color: var(--color-text-muted)
}

.seoLead {
    max-width: 760px;
    /* Centered under the centered .sectionHead; text itself stays left-aligned */
    margin: 0 auto 24px;
    font-size: 1.5rem;
    line-height: 1.7;
    color: #333
}

.seoSection {
    margin: 32px 0 0
}

.seoSection__ttl {
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-gray);
    font-size: 2rem;
    line-height: 1.4
}

.seoSection__ttl--lead {
    margin-top: 32px;
    border-bottom-color: var(--color-primary)
}

.seoNote {
    margin: 24px 0 0;
    padding: 12px 16px;
    background: var(--color-gray-bg);
    border-radius: 8px;
    line-height: 1.6
}

/* Set index */
.seoSetList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.seoSetList__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    color: var(--color-black);
    text-decoration: none
}

.seoSetList__link:hover {
    border-color: var(--color-primary)
}

.seoSetList__code {
    font-family: var(--font-number);
    font-weight: 700;
    color: var(--color-primary)
}

.seoSetList__meta {
    font-size: 1.3rem;
    color: var(--color-text-muted)
}

/* Fixed-size thumbnail: 5:7 card aspect, reserves space before lazy images load.
   The placeholder (name + number) sits underneath; the picture covers it once loaded. */
.seoThumb {
    position: relative;
    width: 96px;
    height: 134px;
    aspect-ratio: 5 / 7;
    margin: 0;
    background: var(--color-gray-bg);
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto
}

.seoThumb__pic {
    position: absolute;
    inset: 0
}

.seoThumb__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-gray-bg)
}

.seoThumb__empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden
}

.seoThumb__label {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-black);
    word-break: break-word
}

.seoThumb__sub {
    font-family: var(--font-number);
    font-size: 1.1rem;
    color: var(--color-text-muted)
}

/* Set page: vertical card tiles (image on top) so no row leaves a blank right half.
   2 columns on phones, about 6 on desktop */
.seoCards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

@media (min-width: 768px) {
    .seoCards {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr))
    }
}

.seoCard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    background: #fff;
    /* Sets run to hundreds of cards: skip layout for off-screen tiles, keep their size reserved */
    content-visibility: auto;
    contain-intrinsic-size: auto 170px auto 380px
}

.seoCard--in_stock {
    border-color: var(--color-green)
}

.seoCard__media {
    display: block;
    width: 100%
}

/* The tile thumbnail fills the tile width; aspect-ratio keeps its height reserved */
.seoCard .seoThumb {
    width: 100%;
    height: auto
}

.seoCard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.seoCard__body p {
    margin: 0
}

.seoCard__no {
    font-family: var(--font-number);
    font-size: 1.3rem;
    color: var(--color-text-muted)
}

.seoCard__rarity {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--color-gray);
    color: var(--color-black);
    font-weight: 700
}

.seoCard__variant {
    text-transform: capitalize
}

.seoCard__name {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3
}

.seoCard__price {
    margin-top: auto !important;
    font-family: var(--font-number);
    font-size: 1.5rem;
    font-weight: 700
}

.seoCard__price--soldout,
.seoCard__price--unlisted,
.seoRelease__price--pending {
    color: var(--color-text-muted);
    font-weight: 400
}

.seoCard__body .seoBtn {
    width: 100%;
    min-width: 0;
    margin-top: 4px
}

.seoCard__notify,
.seoRelease__notify,
.seoSoldOut__tag {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary)
}

/* Ranking: tile grid like the set card list (a full-width row left the right half blank on
   desktop). The rank number sits on the image's top-left corner. */
.seoRank {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

@media (min-width: 768px) {
    .seoRank {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr))
    }
}

.seoRank__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    background: #fff;
    content-visibility: auto;
    contain-intrinsic-size: auto 190px auto 420px
}

.seoRank__pos {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-number);
    font-size: 1.5rem;
    font-weight: 700
}

.seoRank__media {
    display: block;
    width: 100%
}

.seoRank .seoThumb {
    width: 100%;
    height: auto
}

.seoRank__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.seoRank__body p {
    margin: 0
}

/* Long product names: clamp to 3 lines so tiles in a row stay aligned */
.seoRank__name a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-black);
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.35
}

.seoRank__name a:hover {
    color: var(--color-primary)
}

.seoRank__badge {
    font-size: 1.2rem;
    color: var(--color-text-muted)
}

.seoRank__price,
.seoRelease__price {
    font-family: var(--font-number);
    font-size: 1.7rem;
    font-weight: 700
}

.seoRank__body .seoRank__price {
    margin-top: auto
}

.seoRank__body .seoBtn {
    width: 100%;
    min-width: 0;
    margin-top: 4px
}

.seoSoldOut {
    margin: 0;
    padding: 0 0 0 18px;
    line-height: 1.8
}

.seoChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.seoChip {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--color-gray);
    border-radius: 999px;
    color: var(--color-black);
    font-size: 1.3rem;
    text-decoration: none
}

.seoChip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

/* Release calendar: one row per set, its boxes / packs / cartons listed inside */
.seoReleases {
    margin: 0;
    padding: 0;
    list-style: none
}

/* Wide screens: two release rows side by side so the right half is not left blank. From 1200px
   only: below that a half-width row leaves the price column too narrow between the fixed kind
   (120px) and button (112px) columns, and the price ran under the button */
@media (min-width: 1200px) {
    .seoReleases {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px
    }
}

.seoRelease {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 155px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray);
    content-visibility: auto;
    contain-intrinsic-size: auto 100% 155px
}

.seoRelease__date {
    flex: 0 0 56px;
    font-family: var(--font-number);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary)
}

.seoRelease__year {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-muted)
}

/* Month-only announcement ("Jan 2027"): the day is not published yet */
.seoRelease__tba {
    display: block;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-text-muted)
}

.seoRelease__media {
    flex: 0 0 auto
}

.seoRelease__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.seoRelease__body p {
    margin: 0
}

.seoRelease__name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35
}

.seoRelease__products {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none
}

/* Grid (kind | price | button) so Pre-order / Buy / Notify me line up in one column whatever
   the price width ("/ 50 packs" pushed them right when they followed the price inline) */
.seoRelease__product {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 112px;
    align-items: center;
    gap: 6px 12px;
    min-height: 36px
}

.seoRelease__kind {
    font-size: 1.3rem;
    color: var(--color-text-muted)
}

.seoRelease__product .seoBtn {
    width: 100%;
    min-width: 0
}

.seoRelease__product .seoRelease__notify {
    justify-self: center
}

.seoRelease__product .seoRelease__price {
    font-size: 1.5rem
}

.seoRelease__unit {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-muted)
}

@media (max-width: 767px) {
    .seoRelease__date {
        flex-basis: 44px;
        font-size: 1.3rem
    }

    /* Phones: the body is too narrow for price and button side by side, so stack kind / price /
       button; the full-width button keeps them aligned */
    .seoRelease__product {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px
    }

    .seoRelease__product .seoRelease__notify {
        justify-self: start
    }
}

.seoList {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7
}

/* Guides */
.seoArticle {
    max-width: 760px;
    /* Readable line length, centered so wide screens do not leave a blank right half */
    margin: 0 auto;
    font-size: 1.5rem;
    line-height: 1.75
}

.seoArticle h2 {
    margin: 36px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-gray);
    font-size: 2.2rem;
    line-height: 1.4
}

.seoArticle h3 {
    margin: 20px 0 6px;
    font-size: 1.7rem
}

.seoArticle p,
.seoArticle ul,
.seoArticle ol {
    margin: 0 0 12px
}

.seoArticle li {
    margin-bottom: 4px
}

.seoArticle table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 1.4rem
}

.seoArticle th,
.seoArticle td {
    padding: 8px 10px;
    border: 1px solid var(--color-gray);
    text-align: left;
    vertical-align: top
}

.seoArticle th {
    background: var(--color-gray-bg)
}

.seoToc {
    margin: 0 0 24px;
    padding: 12px 16px 12px 32px;
    background: var(--color-gray-bg);
    border-radius: 8px
}

/* CTA block */
.seoCta {
    margin: 40px 0 0;
    padding: 20px;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    line-height: 1.6
}

.seoCta__ttl {
    margin: 0 0 6px;
    font-size: 1.7rem;
    font-weight: 700
}

.seoCta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0
}

/* .btnPrimar is a full-width block by default */
.seoCta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    padding: 0 20px;
    font-size: 1.5rem;
    text-decoration: none
}