/* Páginas públicas do Mural (/ e /p/:id). Cores, fontes e peças comuns em bento.css. */

body { font-size: 16px; line-height: 1.55; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; padding-top: env(safe-area-inset-top); }
@media (min-width: 720px) { .wrap { padding-left: 24px; padding-right: 24px; } }

/* ── Topo ──────────────────────────────────────────────────────────────────── */

.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 14px; }
.brand-name { font: 800 22px/1 'Bricolage', sans-serif; letter-spacing: -.03em; }
.brand-sub { background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.theme-toggle .i-sun { display: none; }
[data-theme='dark'] .theme-toggle .i-sun { display: block; }
[data-theme='dark'] .theme-toggle .i-moon { display: none; }
html:not([data-theme]) .theme-toggle { display: none; }

/* ── Abertura da lista: o bloco índigo com "Mural" e o bloco do app ─────────── */

.intro { display: grid; gap: 16px; margin-top: 4px; }
@media (min-width: 860px) { .intro { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); } }
.intro-main {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--indigo); color: var(--on-indigo); border-radius: 28px;
  padding: clamp(24px, 4vw, 40px); min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end;
}
.intro-main::before, .intro-main::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: .08; }
.intro-main::before { width: 340px; height: 340px; right: -90px; top: -150px; }
.intro-main::after { width: 170px; height: 170px; right: 150px; bottom: -110px; }
.intro-main h1 {
  margin: 0; font: 800 clamp(76px, 15vw, 150px)/.84 'Bricolage Display', 'Bricolage', sans-serif; letter-spacing: -.055em;
  margin-left: -.04em;
}
.intro-main p { margin: 16px 0 0; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--on-indigo-muted); }
.intro-tile {
  position: absolute; top: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px);
  width: 64px; height: 64px; border-radius: 22px; background: var(--lime); color: var(--on-vivid);
  display: grid; place-items: center; transform: rotate(-8deg);
}
.intro-tile svg { width: 32px; height: 32px; }

.get-app {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--surface); color: var(--ink); border-radius: 28px; padding: 24px; text-decoration: none;
}
.get-app .app-icon { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 0 0 1px var(--hairline); }
.get-app-text { display: flex; flex-direction: column; gap: 6px; }
.get-app-text strong { font: 800 21px/1.2 'Bricolage', sans-serif; letter-spacing: -.02em; }
.get-app-text span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.get-app .btn { margin-top: auto; }
.get-app:hover .btn.lime { background: #C6EA55; }
/* Celular: o bloco do app fica compacto para os posts aparecerem logo. */
@media (max-width: 859px) {
  .intro-main { min-height: 0; padding-top: 100px; }
  .intro .get-app { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 16px; border-radius: 24px; }
  .intro .get-app .app-icon { width: 48px; height: 48px; border-radius: 14px; }
  .intro .get-app .get-app-text strong { font-size: 18px; }
  .intro .get-app .get-app-text span { font-size: 14px; }
  .intro .get-app .btn { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; }
}

/* ── Filtros ───────────────────────────────────────────────────────────────── */

.filters { display: flex; gap: 8px; margin: 24px 0 16px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-left: -2px; margin-right: -2px; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.filter .n { color: var(--muted); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.filter[aria-current='page'] { background: var(--ink); color: var(--surface); }
.filter[aria-current='page'] .n { color: inherit; opacity: .7; }

/* ── Grade bento dos posts ─────────────────────────────────────────────────── */

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card.feature { grid-column: span 2; } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card-link {
  height: 100%; display: flex; flex-direction: column; background: var(--surface); color: var(--ink);
  border-radius: 24px; overflow: hidden; text-decoration: none;
}
.card-link:focus-visible { outline-offset: 3px; }
.card .cover { height: 140px; }
.card-body { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.card-title { margin: 0; font: 700 19px/1.27 'Bricolage', sans-serif; letter-spacing: -.015em; overflow-wrap: anywhere; }
.card-sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 16px; }
.read { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 14px; }
.read svg { width: 17px; height: 17px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.card-link:hover .read svg { transform: translateX(3px); }

@media (min-width: 640px) {
  .card.feature .card-link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .card.feature .cover { grid-row: span 2; height: 100%; min-height: 280px; --tile: 76px; --big: 96px; }
  .card.feature .card-body { padding: 24px 24px 0; }
  .card.feature .card-title { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
  .card.feature .card-sub { font-size: 16px; }
  .card.feature .card-foot { padding: 16px 24px 22px; }
  .card.feature .card-link:not(:has(> .cover)) { display: flex; }
}

.meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 13.5px; }
.pinned { display: inline-flex; align-items: center; gap: 3px; }
.pinned svg { width: 14px; height: 14px; }

.empty { background: var(--surface); border-radius: 24px; padding: 40px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.empty p { margin: 0; max-width: 40ch; }

/* ── Página do post ────────────────────────────────────────────────────────── */

.page-post main, .page-missing main { max-width: 760px; margin: 0 auto; }
.back {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 10px; margin: 4px 0 16px;
  border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none;
}
.back svg { width: 20px; height: 20px; }

.post { background: var(--surface); border-radius: 28px; overflow: hidden; padding-bottom: 26px; }
.post > .cover { aspect-ratio: 16 / 7; min-height: 170px; --tile: 72px; --big: clamp(72px, 12vw, 104px); }
.post-head { padding: 22px 24px 0; }
.post-title {
  margin: 12px 0 18px; font: 800 clamp(30px, 5.6vw, 46px)/1.04 'Bricolage Display', 'Bricolage', sans-serif;
  letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: balance;
}
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post-actions .likes { height: 40px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--muted-bg); font-size: 14.5px; }
.post-actions .likes-word { font-weight: 600; }

.prose { padding: 10px 24px 0; font-size: 17px; line-height: 1.68; max-width: calc(68ch + 48px); }
.prose p { margin: 14px 0; }
.prose h2 { margin: 30px 0 6px; font: 700 22px/1.25 'Bricolage', sans-serif; letter-spacing: -.02em; }
.prose ul, .prose ol { margin: 14px 0; padding-left: 24px; }
.prose li { margin: 6px 0; padding-left: 2px; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 700; }
.prose a { overflow-wrap: anywhere; }

.practice { margin: 26px 24px 0; background: var(--muted-bg); border-radius: 24px; padding: 18px 20px 20px; }
.practice-head { display: flex; align-items: center; gap: 12px; }
.practice-head h2 { margin: 0; font: 700 18px/1.25 'Bricolage', sans-serif; letter-spacing: -.015em; }
.tick { width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--mint); color: var(--on-pastel); display: grid; place-items: center; }
.tick svg { width: 18px; height: 18px; }
.practice ol { list-style: none; counter-reset: step; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.practice li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.5; }
.practice li::before {
  content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font: 800 13px/1 'DM Sans', sans-serif; margin-top: -1px;
}
.practice-link, .post-link { margin-top: 18px; }
.post-link { padding: 0 24px; }
.post-link .btn, .practice-link .btn { width: 100%; }
@media (min-width: 640px) { .post-link .btn, .practice-link .btn { width: auto; } }

.note { margin: 22px 24px 0; color: var(--muted); font-size: 13.5px; }

.page-post .get-app { margin-top: 16px; }
@media (min-width: 640px) {
  .page-post .get-app { flex-direction: row; align-items: center; gap: 18px; }
  .page-post .get-app .btn { margin: 0 0 0 auto; }
}

.missing { background: var(--surface); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 28px; }
.missing .cover { width: 100%; height: 150px; }
.missing h1 { margin: 12px 24px 0; font: 800 clamp(26px, 5vw, 36px)/1.1 'Bricolage', sans-serif; letter-spacing: -.03em; }
.missing p { margin: 0 24px; color: var(--muted); }
.missing .btn { margin: 8px 24px 0; }

/* ── Rodapé ────────────────────────────────────────────────────────────────── */

.site-foot { margin: 40px 0 0; padding: 20px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--muted); font-size: 14px; }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-foot a { color: var(--muted); font-weight: 600; }
.site-foot a:hover { color: var(--ink); }

/* ── Transição entre a lista e o post (Chrome e Edge; nos outros, troca normal) ── */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(root) { animation: .2s ease both fade-out; }
  ::view-transition-new(root) { animation: .3s ease .06s both fade-in; }
}