/* =========================================================
   style.css — frasespravoce (sem Tailwind, mais fiel ao layout)
   ========================================================= */

/* Reset básico */
*,
*::before,
*::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"; color: #0f172a; background: linear-gradient(to bottom,#ffffff,#f8fafc); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; background: transparent; border: 0; }
input { background: transparent; }

:root{
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569;
  --slate-700:#334155; --slate-800:#1f2937; --slate-900:#0f172a;
  --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca; --indigo-900:#1e1b4b;
  --fuchsia-500:#d946ef; --fuchsia-600:#c026d3;
  --white:#fff; --ring: var(--indigo-500);
}

/* Tipografia */
.text-xs{font-size:.75rem;line-height:1rem;}
.text-sm{font-size:.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.leading-5{line-height:1.25rem;}
.leading-tight{line-height:1.25;}
.leading-relaxed{line-height:1.625;}
.text-slate-500{color:var(--slate-500);}
.text-slate-600{color:var(--slate-600);}
.text-slate-700{color:var(--slate-700);}
.text-slate-800{color:var(--slate-800);}
.text-slate-900{color:var(--slate-900);}
.text-indigo-700{color:var(--indigo-700);}
.text-indigo-900{color:var(--indigo-900);}
.text-white{color:#fff;}
.text-transparent{color:transparent;}
.bg-clip-text{-webkit-background-clip:text;background-clip:text;}

/* Espaços */
.mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;} .mt-6{margin-top:1.5rem;} .mt-8{margin-top:2rem;} .mt-10{margin-top:2.5rem;}
.mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;} .mb-6{margin-bottom:1.5rem;} .mb-10{margin-bottom:2.5rem;}
.ml-auto{margin-left:auto;}
.my-2{margin-top:.5rem;margin-bottom:.5rem;}
.my-4{margin-top:1rem;margin-bottom:1rem;}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
.p-4{padding:1rem;} .p-6{padding:1.5rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.pr-2{padding-right:.5rem;} .pr-4{padding-right:1rem;}
.pl-2{padding-left:.5rem;} .pl-4{padding-left:1rem;}
.py-1{padding-top:.25rem;padding-bottom:.25rem;}
.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.pb-10{padding-bottom:2.5rem;} .pb-16{padding-bottom:4rem;}

/* Dimensões e container */
.mx-auto{margin-left:auto;margin-right:auto;}
.max-w-6xl{max-width:72rem;}
.w-full{width:100%;}
.h-full{height:100%;}
.h-8{height:2rem;} .w-8{width:2rem;}
.h-10{height:2.5rem;} .w-10{width:2.5rem;}
.h-12{height:3rem;}
.min-h-screen{min-height:100vh;}

/* Layout */
.flex{display:flex;} .grid{display:grid;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.place-items-center{place-items:center;}
.gap-2{gap:.5rem;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;} .gap-6{gap:1.5rem;}

/* Grids responsivas usadas */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* mobile default = 1col; sm = 2 ou 3 col; lg = 2 ou 3 col conforme classe */
.sm\:grid-cols-2{grid-template-columns:repeat(1,minmax(0,1fr));}
.sm\:grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
.lg\:grid-cols-2{grid-template-columns:repeat(1,minmax(0,1fr));}
.lg\:grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr));}

@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:768px){
  .md\:flex{display:flex;}
}
@media (min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Posições */
.sticky{position:sticky;} .top-0{top:0;}
.z-40{z-index:40;}
.relative{position:relative;}
.absolute{position:absolute;}
.left-0{left:0;} .right-0{right:0;}
.text-center{text-align:center;}
.z-10{z-index:10;}
.overflow-hidden{overflow:hidden;}

/* Bordas/raios/sombras */
.border{border:1px solid var(--slate-200);}
.border-b{border-bottom:1px solid var(--slate-200);}
.rounded-full{border-radius:9999px;}
.rounded-xl{border-radius:.75rem;}
.rounded-2xl{border-radius:1rem;}
.rounded-3xl{border-radius:1.5rem;}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08);}
.shadow-xl{box-shadow:0 10px 15px rgba(0,0,0,.10),0 4px 6px rgba(0,0,0,.06);}

/* Backgrounds e variantes usadas */
.bg-white{background:#fff;}
.bg-white\/80{background:rgba(255,255,255,.8);}
.bg-white\/60{background:rgba(255,255,255,.6);}
.bg-slate-50{background:var(--slate-50);}
.bg-slate-100{background:var(--slate-100);}
.bg-gradient-to-b{background:linear-gradient(to bottom,var(--white),var(--slate-50));}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--fuchsia-500),var(--indigo-500));}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--fuchsia-600),var(--indigo-600));}
.from-fuchsia-600{} .to-indigo-600{} /* marcadores */
.bg-gradient-to-b.from-white.to-slate-50{background:linear-gradient(to bottom,#ffffff,var(--slate-50));}

.hover\:bg-slate-50:hover{background:var(--slate-50);}
.hover\:bg-slate-100:hover{background:var(--slate-100);}

/* Texto/links */
.hover\:underline:hover{text-decoration:underline;}
.underline-offset-4{text-underline-offset:4px;}

/* Header com blur */
header.sticky{backdrop-filter:saturate(140%) blur(8px);}
.backdrop-blur{backdrop-filter:saturate(140%) blur(8px);}
.supports-\[backdrop-filter\]\:bg-white\/60{background:rgba(255,255,255,.6);} /* aproximação */

/* Cartão de frase */
article.group{transition:transform .12s ease;}
article.group:hover{transform:translateY(-1px);}
.break-any{word-break:break-word;overflow-wrap:anywhere;}
.whitespace-pre-line{white-space:pre-line;}
.line-clamp-2,.line-clamp-3,.line-clamp-6{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
.line-clamp-2{-webkit-line-clamp:2;}
.line-clamp-3{-webkit-line-clamp:3;}
.line-clamp-6{-webkit-line-clamp:6;}

/* Formulários / busca */
.outline-none{outline:0;}
.placeholder\:text-slate-400::placeholder{color:var(--slate-400);}
.focus-within\:ring-2:focus-within{ box-shadow:0 0 0 2px var(--ring) inset; border-color:rgba(99,102,241,.4); }
.focus-within\:ring-indigo-500:focus-within{ box-shadow:0 0 0 2px var(--indigo-500) inset; border-color:rgba(99,102,241,.4); }

/* Botões e tags */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--slate-200);border-radius:9999px;background:var(--slate-50);padding:.25rem .75rem;font-size:.875rem;line-height:1.25rem;}
.btn:hover{background:var(--slate-100);}
.tag{font-size:.75rem;border:1px solid var(--slate-200);border-radius:9999px;background:var(--slate-50);padding:.25rem .75rem;display:inline-block;}
.tag:hover{background:var(--slate-100);}

/* Grids de cartões usadas no site */
.grid-cards{display:grid;gap:.75rem;}
@media (min-width:640px){ .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1024px){ .grid-cards{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* Utilidades diversas */
.scroll-mt-24{scroll-margin-top:6rem;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.hover\:text-indigo-900:hover{ color: var(--indigo-900); }

/* Containers padronizados */
.container { width:100%; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; max-width:72rem; }

/* =====================
   HERO / CAIXA DE BUSCA
   ===================== */
.hero-card{
  border:1px solid var(--slate-200);
  border-radius:1.5rem; /* ~rounded-3xl */
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  padding:1.5rem;
}
.search-wrap{
  display:flex; align-items:center; height:3rem; width:100%;
  border:1px solid var(--slate-200); border-radius:1rem; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  overflow:hidden;
}
.search-wrap:focus-within{
  box-shadow:0 0 0 2px var(--indigo-500) inset;
  border-color:rgba(99,102,241,.4);
}
.search-icon{ padding-left:1rem; padding-right:.5rem; color:#94a3b8; }
.search-input{ width:100%; padding-right:1rem; outline:none; }
.autocomplete{
  position:absolute; left:0; right:0; margin-top:.5rem; max-height:20rem;
  border:1px solid var(--slate-200); background:#fff; border-radius:1rem;
  box-shadow:0 10px 15px rgba(0,0,0,.10),0 4px 6px rgba(0,0,0,.06);
  overflow:auto; z-index:10;
}
.autocomplete.hidden{ display:none; }
.autocomplete button{
  width:100%; text-align:left; padding:.75rem 1rem; background:#fff; border:0;
}
.autocomplete button:hover{ background:var(--slate-50); }

/* =====================
   CARDS DE CATEGORIA
   ===================== */
.category-card{
  border:1px solid var(--slate-200);
  border-radius:1rem;
  background: var(--slate-50);
  padding:1rem;
  transition: background .15s ease, transform .12s ease;
}
.category-card:hover{
  background: var(--slate-100);
  transform: translateY(-1px);
}
/* ============================
   PÁGINA DE FRASE — REFINOS UI
   ============================ */

.breadcrumbs { display:flex; align-items:center; gap:.5rem; }
.breadcrumbs a { color: var(--slate-600); }
.breadcrumbs .sep { color: var(--slate-400); }

.phrase-hero{
  border:1px solid var(--slate-200);
  border-radius:1.5rem;
  background:#fff;
  padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
@media (min-width:640px){
  .phrase-hero{ padding:1.5rem 1.5rem 1.75rem; }
}

.phrase-meta{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }

.phrase-text{
  font-size:1.5rem; line-height:1.35; color:var(--slate-900);
  margin: .5rem 0 1rem;
  word-break: break-word; overflow-wrap: anywhere;
}
@media (min-width:640px){
  .phrase-text{ font-size:1.75rem; }
}
@media (min-width:1024px){
  .phrase-text{ font-size:2rem; }
}

.phrase-actions{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1rem;
}
.btn-primary{
  background: linear-gradient(135deg, var(--fuchsia-500), var(--indigo-600));
  color:#fff;
  border:0;
}
.btn-primary:hover{
  filter: brightness(0.98);
}

.phrase-search{ margin-top:.25rem; }

/* Reduz a altura visual da barra de busca na página de frase (fica mais elegante) */
.phrase-search .search-wrap{
  height:2.75rem;
  border-radius: .875rem;
}

/* Cards dentro das “Frases parecidas”: dá um respiro e evita quebras */
.grid-cards article.group .text-sm{
  line-height:1.55;
}
.grid-cards article.group .line-clamp-6{
  -webkit-line-clamp: 4; /* menos linhas nos relacionados */
}

/* Pequenos ajustes responsivos */
@media (min-width:1024px){
  .phrase-actions .btn { font-size:.8125rem; }
}
/* ===== v2: reforço do layout dos cards ===== */

/* Tipografia do texto da frase nos cards */
.grid-cards article.group .text-base{
  font-size:1rem;
  line-height:1.6;
}

/* Botões “pill” consistentes nos cards */
.grid-cards article.group .btn{
  border:1px solid var(--slate-200);
  border-radius:9999px;
  background:var(--slate-50);
  padding:.25rem .75rem;
  font-size:.875rem;
  line-height:1.25rem;
}
.grid-cards article.group .btn:hover{ background:var(--slate-100); }

/* -------- Fallback para MARCAÇÃO ANTIGA --------
   (quando hashtag e botões vinham na mesma linha)  */
.grid-cards article.group > .mt-3.flex.items-center.justify-between{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  border-top:1px solid var(--slate-200);
  padding-top:.75rem;
  margin-top:.75rem;
}
.grid-cards article.group > .mt-3.flex.items-center.justify-between > .flex{ order:1; }
.grid-cards article.group > .mt-3.flex.items-center.justify-between > a:first-child{
  order:2;
  align-self:flex-end;
  font-size:.75rem;
  color:var(--slate-500);
}

/* --- FIX utilitárias de flex ausentes --- */
.flex { display: flex; }              /* deixe ATIVADO */
.flex-col { flex-direction: column; } /* faltava */
.flex-wrap { flex-wrap: wrap; }       /* usada nos botões */

/* Garantia extra: cartões dentro dos grids sempre em coluna */
.grid-cards > article { display: flex; flex-direction: column; }

/* ---------------------------------------------- */