/* Collecting page - custom overrides only. Shared styles in sections.css */

.collecting {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   HERO CARDS - three-step path overview
   ═══════════════════════════════════════════════════════════════ */

.cl-hero-cards {
    margin-top: 56px;
}

.cl-rare-cards {
    margin-top: 40px;
}

.cl-rare-cards .tile {
    display: flex;
    flex-direction: column;
}

.cl-rare-cards .tile__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cl-rare-cards .tile__body p {
    margin-bottom: 24px;
}

.cl-rare-cards .tile__body .sec-btn {
    margin-top: auto;
    align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════════
   SIMPLE TWO-COLUMN LIST - SVG + title, no cards
   ═══════════════════════════════════════════════════════════════ */

.cl-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 48px;
    row-gap: 4px;
    max-width: 1100px;
}

.cl-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sec-border);
}

.cl-list__item svg {
    width: 22px;
    height: 22px;
    color: var(--sec-accent);
    flex-shrink: 0;
}

.cl-list__item span {
    font-size: 1em;
    font-weight: 600;
    color: var(--sec-strong, #111);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION SCREENSHOT - browser-frame wrapper + caption
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   RARITY CAN CHANGE - split layout: bullets on left, demo card on right
   ═══════════════════════════════════════════════════════════════ */

.cl-rarity-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cl-rarity-bullets li {
    position: relative;
    padding-left: 28px;
    color: var(--sec-muted);
    line-height: 1.6;
    font-size: 1em;
}

.cl-rarity-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sec-accent);
    opacity: 0.85;
}

.cl-rarity-bullets li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: calc(0.55em + 4px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.cl-rarity-bullets strong {
    color: var(--sec-strong, #111);
    font-weight: 700;
    margin-right: 4px;
}



/* ═══════════════════════════════════════════════════════════════
   RARITY DEMO - reuses .city-page-tag from cities.css. Activates the
   bar + stats view inline (without needing .city-page.stats-mode parent,
   which would set height:100vh and break body scroll).
   ═══════════════════════════════════════════════════════════════ */

.cl-rarity-demo {
    margin: 0;
    margin-top: 62px;
}

.cl-rarity-demo__city {
    margin: 0 0 16px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--sec-strong, #111);
    letter-spacing: -0.01em;
}

.cl-rarity-demo .city-page-tags {
    margin-bottom: 0;
}

/* Larger, more legible tags for the marketing context. Names visible by default
   (so you can read "Commerce 5" rather than seeing an anonymous 90px pill), with
   the rarity bar always visible behind the text to show contribution.

   Selectors chain .city-page-tags to outrank cities.css (which loads AFTER
   collecting.css, so equal-specificity rules there would otherwise win). */
.cl-rarity-demo .city-page-tags .city-page-tag {
    height: 28px;
    padding: 4px 14px 4px 4px;
    font-size: 0.875rem;
    gap: 10px;
}

.cl-rarity-demo .city-page-tags .city-page-tag .icon,
.cl-rarity-demo .city-page-tags .city-page-tag .size-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

/* Stronger dark tint so white text reads on bright city backgrounds (e.g. desert cities). */
.cl-rarity-demo .city-page-tags .city-page-tag::after {
    background: rgba(0, 0, 0, 0.55);
}
.cl-rarity-demo .city-page-tags .city-page-tag:hover::after {
    background: rgba(0, 0, 0, 0.75);
}

/* Bars always on, sitting behind the names. */
.cl-rarity-demo .city-page-tags .city-page-tag .bar {
    width: var(--bar-pct, 0%);
    opacity: 1;
    transition: none;
}
.cl-rarity-demo .city-page-tags .city-page-tag.blue::after {
    background: rgba(33, 150, 243, 0.95);
}

/* Hover swaps to the count ("15 cities") so users can see how scarce the trait is. */
.cl-rarity-demo .city-page-tags .city-page-tag.tag-preview .text-normal {
    visibility: hidden;
}
.cl-rarity-demo .city-page-tags .city-page-tag.tag-preview .text-stats {
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   "BUILD A COMPLETE SET" SPLIT - left column of explainer text,
   right column of stacked SetDemo widgets. Each widget reuses the
   .yours-set classes from yours.css so visuals match the dashboard
   exactly; the overrides strip dashboard-only padding/container
   queries that don't apply on a marketing page.
   ═══════════════════════════════════════════════════════════════ */

.cl-sets-split {
    margin-top: 48px;
    align-items: start;
}

/* Left column - vertical stack of conceptual mini-sections */
.cl-set-explainers {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cl-set-explainer {
    border-left: 3px solid var(--sec-accent);
    padding: 4px 0 4px 18px;
}

.cl-set-explainer h3 {
    margin: 0 0 8px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--sec-strong, #111);
    line-height: 1.3;
}

.cl-set-explainer p {
    margin: 0;
    color: var(--sec-muted);
    line-height: 1.65;
    font-size: 0.95em;
}

/* Right column - stacked set demos with arrow connectors. The container-type
   lets the 10-tile row collapse to 5×2 when the column itself is narrow,
   regardless of viewport width (handles the awkward 860-1100px range where
   the split is still active but the right column is < 600px). */
.cl-set-demos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    container-type: inline-size;
}

.cl-set-demos__item {
    width: 100%;
}

.cl-set-demos__arrow {
    align-self: center;
    width: 28px;
    height: 28px;
    margin: 14px 0;
    color: var(--sec-faint);
    flex-shrink: 0;
}

/* Override .yours-set defaults (which assume the dashboard panel context). */
.cl-set-demo.yours-set {
    padding: 0;
    background: transparent;
}

.cl-set-demo .yours-set-slots {
    grid-template-columns: repeat(10, minmax(35px, 1fr));
}

/* Container query: collapse to 5×2 when the demo column is narrow. */
@container (max-width: 580px) {
    .cl-set-demo .yours-set-slots {
        grid-template-columns: repeat(5, minmax(35px, 1fr));
    }
}


/* ═══════════════════════════════════════════════════════════════
   TIER LADDER - foundation → apex set progression
   ═══════════════════════════════════════════════════════════════ */

.cl-sets__ladder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 32px;
}

/* Inline variant - five tier cards in a row (no longer in a sticky right column). */
.cl-sets__ladder--inline {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.cl-tier-card {
    background: #fff;
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-sm, 12px);
    padding: 20px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.cl-tier-card:hover {
    border-color: #c0c8d4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.cl-tier-card__title {
    font-size: 0.95em;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--sec-strong, #111);
}

.cl-tier-card__rule {
    font-size: 0.82em;
    color: var(--sec-faint);
    margin: 0 0 12px;
    line-height: 1.4;
}

.cl-tier-card__mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

/* Level tiles - numbered, grey-to-purple spectrum */
.cl-tile {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
}

.cl-tile--1 { background: #dfe3ea; color: #9ca3af; }
.cl-tile--2 { background: #c0c5cf; color: #6b7280; }
.cl-tile--3 { background: #d4c4ec; color: #7b42b8; }
.cl-tile--4 { background: #b59dd6; color: #5b2e94; }
.cl-tile--5 { background: #7b42b8; color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .cl-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

@media (max-width: 860px) {
    .cl-hero-cards { margin-top: 32px; }
    .cl-rare-cards { margin-top: 24px; }
    .cl-rarity-demo { margin-top: 36px; }
    .cl-sets-split { margin-top: 32px; }
    .cl-sets__ladder--inline { margin-top: 24px; }
}

@media (max-width: 560px) {
    .cl-hero-cards { margin-top: 24px; }
    .cl-rarity-demo { margin-top: 28px; }
    .cl-sets-split { margin-top: 24px; }
}

@media (max-width: 860px) {
    .cl-sets__ladder {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .cl-sets__ladder--inline {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .cl-sets__ladder,
    .cl-sets__ladder--inline {
        grid-template-columns: 1fr;
    }
}