/* EARN — LOGO-FIRST OFFERWALL DESK (2026-08-02)
   Dark-only and token-driven. The page intentionally shows partner walls,
   not cached individual offers, so every primary card opens a live wall. */

.ew-page { display: grid; gap: 2.35rem; padding-block: 1.25rem 2.8rem; }
.ew-section { min-width: 0; }
.ew-section__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ew-section__head h2 { margin: 0; color: var(--text-primary); font-size: 1.15rem; font-weight: 820; letter-spacing: -0.02em; }
.ew-section__head p { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.75rem; }
.ew-section__head > a { color: var(--accent); font-size: 0.72rem; font-weight: 750; }

.ew-resume { display: grid; grid-template-columns: auto minmax(12rem, 1.4fr) minmax(9rem, 0.9fr) minmax(7rem, 0.55fr) minmax(6.5rem, 0.45fr) auto; gap: 1rem; align-items: center; padding: 0.75rem 0; border-block: 1px solid var(--border-subtle); }
.ew-resume__image, .pf-offer-row__image { position: relative; display: grid; place-items: center; width: 3.35rem; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--accent); }
.ew-resume__image img, .pf-offer-row__image img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ew-resume span, .ew-resume strong, .ew-resume small { min-width: 0; }
.ew-resume__copy, .ew-resume__state, .ew-resume__activity, .ew-resume__reward { display: grid; gap: 0.22rem; }
.ew-resume__copy strong, .ew-resume__state strong, .ew-resume__activity strong { overflow: hidden; color: var(--text-primary); font-size: 0.78rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.ew-resume__copy small, .ew-resume__state small, .ew-resume__activity small, .ew-resume__reward small { overflow: hidden; color: var(--text-muted); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.ew-resume__reward strong { color: var(--money); font-size: 0.82rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.ew-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.7rem 1rem; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent); color: var(--bg-base); font-size: 0.78rem; font-weight: 850; transition: background 0.16s ease, transform 0.16s ease; }
.ew-button:hover { background: var(--accent-hover); color: var(--bg-base); transform: translateY(-1px); }
.ew-button--small { min-height: 2.25rem; padding: 0.52rem 0.8rem; font-size: 0.7rem; }
.ew-empty-line { display: flex; align-items: center; gap: 0.8rem; min-height: 4.4rem; padding-block: 0.75rem; border-block: 1px solid var(--border-subtle); color: var(--text-muted); }
.ew-empty-line > i { color: var(--accent); }
.ew-empty-line span { display: grid; gap: 0.2rem; }
.ew-empty-line strong { color: var(--text-primary); font-size: 0.8rem; }
.ew-empty-line small { color: var(--text-muted); font-size: 0.7rem; }

.ew-api-controls { display: inline-flex; align-items: center; gap: 0.45rem; }
.ew-api-controls button { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease; }
.ew-api-controls button:hover:not(:disabled) { border-color: var(--accent-border); background: var(--bg-card); color: var(--accent); transform: translateY(-1px); }
.ew-api-controls button:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ew-api-controls button:disabled { color: var(--text-faint); cursor: default; opacity: 0.45; }
.ew-api-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 18rem); gap: 0.8rem; overflow-x: auto; padding: 0.4rem 0.15rem 0.8rem; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
.ew-api-rail::-webkit-scrollbar { display: none; }
.ew-api-offer { display: grid; grid-template-rows: 8.4rem minmax(7.2rem, auto); min-width: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-card-end); color: var(--text-primary); scroll-snap-align: start; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.ew-api-offer:hover { transform: translateY(-2px); border-color: var(--accent-border); background: var(--bg-card); color: var(--text-primary); }
.ew-api-offer:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ew-api-offer__art { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--bg-surface); }
.ew-api-offer__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ew-api-offer__art strong { display: none; max-width: 85%; color: var(--text-primary); font-size: 0.9rem; font-weight: 820; text-align: center; }
.ew-api-offer__art.is-fallback img { display: none; }
.ew-api-offer__art.is-fallback strong { display: block; }
.ew-api-offer__body { display: grid; grid-template-rows: auto minmax(2.3rem, 1fr) auto; gap: 0.45rem; min-width: 0; padding: 0.85rem; }
.ew-api-offer__body > strong { overflow: hidden; color: var(--text-primary); font-size: 0.8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ew-api-offer__body small { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: 0.68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ew-api-offer__body b { color: var(--money); font-size: 0.8rem; font-weight: 850; font-variant-numeric: tabular-nums; }

.ew-wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.ew-wall-card { position: relative; display: grid; grid-template-rows: minmax(6.5rem, 1fr) auto; min-width: 0; min-height: 9.6rem; overflow: hidden; padding: 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-card-end); color: var(--text-primary); box-shadow: var(--shadow-xs); transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.ew-wall-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 65%, var(--border-strong)); background: var(--bg-card); color: var(--text-primary); }
.ew-wall-card:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.ew-wall-card__logo { display: grid; place-items: center; min-width: 0; padding: 0.65rem 0.75rem 1rem; }
.ew-wall-card__logo img { display: block; width: auto; height: auto; max-width: min(12.5rem, 88%); max-height: 4.7rem; object-fit: contain; }
.ew-wall-card__logo strong { display: none; max-width: 100%; color: inherit; font-size: 1.1rem; font-weight: 820; text-align: center; }
.ew-wall-card__logo.is-fallback img { display: none; }
.ew-wall-card__logo.is-fallback strong { display: block; }
.ew-wall-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 0.67rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.ew-wall-card__foot i { color: inherit; font-size: 0.65rem; }

.pf-offers { overflow: hidden; }
.pf-offers__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border-subtle); }
.pf-offers__head h2 { margin: 0.2rem 0 0; color: var(--text-primary); font-size: 1rem; font-weight: 850; }
.pf-offers__head > a { color: var(--accent); font-size: 0.72rem; font-weight: 750; }
.pf-offer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.85rem; align-items: center; min-height: 4.3rem; padding: 0.55rem 1.15rem; }
.pf-offer-row + .pf-offer-row { border-top: 1px solid var(--border-subtle); }
.pf-offer-row__image { width: 2.8rem; }
.pf-offer-row > span:nth-child(2) { display: grid; gap: 0.18rem; min-width: 0; }
.pf-offer-row > span:nth-child(2) strong { overflow: hidden; color: var(--text-primary); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.pf-offer-row > span:nth-child(2) small { color: var(--text-muted); font-size: 0.65rem; }
.pf-offer-row__points { color: var(--money); font-size: 0.75rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.pf-offer-row > a { color: var(--accent); font-size: 0.7rem; font-weight: 780; }

@media (max-width: 1180px) {
    .ew-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ew-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ew-resume { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ew-resume__state, .ew-resume__activity { display: none; }
    .ew-resume__reward { justify-items: end; }
    .ew-button--small { grid-column: 2 / -1; justify-self: end; }
}
@media (max-width: 560px) {
    .ew-page { gap: 1.8rem; }
    .ew-api-rail { grid-auto-columns: minmax(14.5rem, 82vw); }
    .ew-wall-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .ew-wall-card { min-height: 8.8rem; }
    .ew-wall-card__logo img { max-height: 4.25rem; }
    .ew-resume { grid-template-columns: auto minmax(0, 1fr); }
    .ew-resume__reward { justify-items: start; grid-column: 2; }
    .ew-button--small { grid-column: 2; justify-self: start; }
    .pf-offer-row { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 0.8rem; }
    .pf-offer-row__points { grid-column: 2; }
    .pf-offer-row > a { grid-column: 3; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .ew-api-rail { scroll-behavior: auto; }
    .ew-button, .ew-api-controls button, .ew-api-offer, .ew-wall-card { transition: none; }
    .ew-api-offer:hover, .ew-wall-card:hover { transform: none; }
}