/* ============================================================================
   wall-of-swaps.css — public Wall of Swaps (#STONswap feed)

   Layered after the global chain (tokens → base → components → layout).
   Page-scoped under .wall-* classes; nothing here leaks into other pages.

   Layout strategy: CSS columns for masonry packing. Cross-browser, no
   Firefox-only grid-template-rows, deterministic break behaviour.
   Cards are inline-block w/100% width + break-inside:avoid so they
   pack densely without tearing.

   Visual hierarchy:
   - Wall cards are CONTENT cards, not feature cards — they use
     --color-bg-2 (subtle) rather than --grad-card-glow (heavy).
   - The hero & tail keep the same eyebrow/title/subtitle pattern as
     the rest of the site (per design-system §5 "Card (feature)").
   - One primary CTA, in the tail. Hashtag mentions get cyan accent
     via --color-cyan, not the CTA gradient (which is reserved for the
     single primary action per screen).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.wall-hero {
    padding-top:    var(--sp-7-px, 40px);
    padding-bottom: var(--sp-6-px, 30px);
}

.wall-hero__hashtag {
    color: var(--color-cyan);
    font-weight: 600;
    letter-spacing: 0;
}

.wall-hero__counter {
    margin-top: 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    border: var(--hairline);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--color-fg-2);
}

.wall-hero__counter strong {
    font-weight: 600;
    color: var(--color-cyan);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.wall-hero__counter-label {
    font-size: 11px;
    color: var(--color-fg-3);
}

/* ---------------------------------------------------------------------------
   Empty state — what visitors see before the first organic post lands
   --------------------------------------------------------------------------- */

.wall-empty {
    text-align: center;
    padding: 60px 24px;
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    background: var(--color-bg-2);
    margin-bottom: 32px;
}

.wall-empty__line {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-fg);
    letter-spacing: -0.5px;
}

.wall-empty__sub {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--color-fg-2);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.wall-empty__sub strong {
    color: var(--color-cyan);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The feed section — overrides the global .section vertical padding.

   Stock .section gives every section sp-9/sp-10 of top+bottom padding so
   adjacent sections breathe. The hero already provides enough bottom
   space (its own padding-bottom + the counter pill's intrinsic gap), so
   stacking sp-9 on top of that pushed the first card ~110-130px below
   the counter — visually disconnected. Zero out the top here; keep the
   bottom so the load-more / tail-CTA boundary still reads as a section
   break.
   --------------------------------------------------------------------------- */

.wall-feed {
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   The grid — masonry via CSS columns
   --------------------------------------------------------------------------- */

.wall-grid {
    column-count: 1;
    column-gap: 16px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .wall-grid { column-count: 2; }
}
@media (min-width: 960px) {
    .wall-grid { column-count: 3; }
}

/* ---------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------- */

.wall-card {
    display: inline-block;          /* required: lets columns lay out cards as wholes */
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 16px;
    padding: 18px;
    background: var(--color-bg-2);
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wall-card:hover {
    border-color: var(--color-stroke-2);
    background: var(--color-bg-3);
}

/* ---- Head: avatar + name + handle + X icon -------------------------------- */

.wall-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.wall-card__author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;       /* lets the inner ellipsis kick in */
    flex: 1;
}

.wall-card__author:hover .wall-card__name {
    color: var(--color-fg);
    text-decoration: underline;
    text-decoration-color: var(--color-stroke-2);
    text-underline-offset: 2px;
}

.wall-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-bg-3);
    /* Avatars come from pbs.twimg.com which the existing img-src
       'self' data: blob: https: covers — no CSP edit needed. */
}

.wall-card__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-blue), var(--color-cyan));
    color: rgb(8, 16, 32);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.wall-card__author-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.wall-card__name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wall-card__handle {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wall-card__source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    color: var(--color-fg-3);
    transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}

.wall-card__source svg {
    width: 14px;
    height: 14px;
}

.wall-card__source:hover {
    color: var(--color-fg);
    background: rgba(255, 255, 255, 0.06);
}

/* ---- Body: tweet text + media tile (one anchor wraps both) ---------------- */

.wall-card__body {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wall-card__text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-fg);
    white-space: pre-wrap;          /* preserves tweet line breaks */
    word-break: break-word;         /* long URLs / handles can't blow up the column width */
    overflow-wrap: anywhere;
}

.wall-card__media {
    display: block;
    margin-top: 12px;
    position: relative;
    border-radius: var(--radius-sharp);
    overflow: hidden;
    border: var(--hairline);
    line-height: 0;                 /* kill the inline-img descender gap */
}

.wall-card__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    background: var(--color-bg-3);
}

.wall-card__media-badge,
.wall-card__media-count {
    position: absolute;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.62);
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.wall-card__media-badge {
    left: 8px;
}

.wall-card__media-count {
    right: 8px;
}

/* ---- Foot: time + metrics ------------------------------------------------- */

.wall-card__foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--color-fg-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.wall-card__time {
    color: var(--color-fg-3);
    font-variant-numeric: tabular-nums;
}

.wall-card__metrics {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.wall-card__metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-fg-3);
    font-variant-numeric: tabular-nums;
}

.wall-card__metric svg {
    width: 11px;
    height: 11px;
}

/* ---------------------------------------------------------------------------
   Load-more
   --------------------------------------------------------------------------- */

.wall-loadmore {
    margin: 32px auto 0;
    text-align: center;
    min-height: 60px;
}

.wall-loadmore[data-wall-loadmore-state="loading"] .wall-loadmore__status,
.wall-loadmore[data-wall-loadmore-state="error"]   .wall-loadmore__status,
.wall-loadmore[data-wall-loadmore-state="end"]     .wall-loadmore__status {
    display: block;
}

.wall-loadmore[data-wall-loadmore-state="loading"] [data-wall-loadmore-button],
.wall-loadmore[data-wall-loadmore-state="end"]     [data-wall-loadmore-button] {
    display: none;
}

.wall-loadmore__status {
    margin: 12px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-fg-3);
    text-transform: lowercase;
}

/* ---------------------------------------------------------------------------
   Tail CTA section
   --------------------------------------------------------------------------- */

.wall-tail {
    padding-top:    var(--sp-9-px, 80px);
    padding-bottom: var(--sp-9-px, 80px);
    text-align: center;
}

.wall-tail .section__header {
    margin: 0 auto 28px;
}

.wall-tail__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Smaller-headline variant for the tail. The class extends section__title
   so it inherits the colour / family / weight, and just shrinks the size. */
.section__title--small {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

@media (max-width: 600px) {
    .section__title--small {
        font-size: 26px;
    }
}