/* ==========================================================================
   Woode Indica — estilos da descoberta, cards, detalhe e formulário.
   Identidade: tokens globais (--brand-*), .card/.btn existentes, Inter/
   Plus Jakarta Sans. Mobile-first (spec §14): 1 coluna; ≥900px lista+mapa.
   ========================================================================== */

/* ------------------------------------------------------------- hero */
.ind-hero {
    background: linear-gradient(160deg, var(--brand-900) 0%, var(--brand-800) 70%, var(--brand-700) 100%);
    color: #fff; padding: 34px 0 26px;
}
.ind-hero-title {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 800; margin: 0 0 6px;
    letter-spacing: -0.02em;
    color: #fff; /* explícito: o h1 global (style.css) pinta ink-900 direto no
                    elemento e vence a herança do .ind-hero — sem isto o título
                    ficava escuro sobre o gradiente escuro (ilegível) */
}
.ind-hero-sub { color: var(--brand-100); margin: 0 0 18px; font-size: 1rem; max-width: 60ch; }
.ind-search { max-width: 720px; }
.ind-search-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ind-search-row input[type="search"] {
    flex: 1 1 220px; min-width: 0; border-radius: 10px; border: 1px solid var(--brand-600);
    padding: 11px 14px; font-size: 1rem; background: #fff; color: var(--ink-900);
}
.ind-search-row select {
    flex: 0 1 190px; min-width: 0; border-radius: 10px; border: 1px solid var(--brand-600);
    padding: 11px 10px; font-size: 0.92rem; background: #fff; color: var(--ink-900);
}
.ind-filters-details { margin-top: 10px; color: var(--brand-100); }
.ind-filters-details summary { cursor: pointer; font-size: 0.9rem; user-select: none; }
.ind-filters-extra {
    display: flex; gap: 10px 14px; flex-wrap: wrap; padding: 12px 0 2px;
    color: var(--ink-900); background: rgba(255, 255, 255, 0.06); border-radius: 10px;
    padding: 12px; margin-top: 8px;
}
.ind-filters-extra label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--brand-100); }
.ind-filters-extra input[type="text"], .ind-filters-extra select {
    border-radius: 8px; border: 1px solid var(--brand-500); padding: 8px 10px; background: #fff; color: var(--ink-900);
}
.ind-check { flex-direction: row !important; align-items: center; gap: 8px !important; padding-top: 22px; }
.ind-hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* ------------------------------------------------- alternador lista/mapa */
.ind-view-toggle { display: inline-flex; border: 1px solid var(--brand-400); border-radius: 999px; overflow: hidden; }
.ind-vt {
    padding: 8px 16px; font-size: 0.9rem; font-weight: 600; color: var(--brand-100);
    text-decoration: none; background: transparent;
}
.ind-vt.is-on { background: var(--brand-600); color: #fff; }
.ind-vt:focus-visible { outline: 3px solid var(--brand-300); outline-offset: -3px; }

/* --------------------------------------------------------- categorias */
.ind-cats {
    display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.ind-cat-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
    text-decoration: none; color: var(--brand-700);
    background: var(--brand-100); border: 1px solid transparent; white-space: nowrap;
    transition: background 0.15s ease;
}
.ind-cat-chip:hover { background: var(--brand-100); border-color: var(--brand-300); }
.ind-cat-chip.is-on { background: var(--brand-700); color: #fff; }
.ind-cat-chip:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 2px; }

/* ------------------------------------------------------------- seções */
.ind-main { padding-bottom: 40px; }
.ind-section { margin: 26px 0; }
.ind-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ind-section-head h2 { font-size: 1.15rem; margin: 0; font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
.ind-count { color: var(--ink-600); font-size: 0.82rem; font-weight: 600; }
.ind-clear { font-size: 0.85rem; color: var(--brand-700); }
.ind-empty { text-align: center; padding: 34px 20px; display: grid; gap: 10px; justify-items: center; }

/* --------------------------------------------------------------- cards */
.ind-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ind-card {
    background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(6, 23, 15, 0.05);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ind-card:hover { box-shadow: 0 6px 18px rgba(6, 23, 15, 0.10); border-color: var(--brand-300); }
.ind-card:focus-within { border-color: var(--brand-600); }
.ind-card.is-map-active { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.ind-card-cover { display: block; aspect-ratio: 16 / 10; background: var(--brand-100); }
.ind-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ind-card-cover--empty { display: flex; align-items: center; justify-content: center; }
.ind-card-emoji { font-size: 2.6rem; opacity: 0.85; }
.ind-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ind-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ind-card-cat { font-size: 0.78rem; font-weight: 700; color: var(--brand-700); text-decoration: none; }
.ind-card-cat:hover { text-decoration: underline; }
.ind-card-rate { font-size: 0.82rem; font-weight: 700; color: #8a6d1a; white-space: nowrap; }
.ind-card-votes { color: var(--ink-600); font-weight: 500; font-size: 0.76rem; }
.ind-card-title { font-size: 1.02rem; margin: 0; line-height: 1.3; }
.ind-card-title a { color: var(--ink-900); text-decoration: none; }
.ind-card-title a:hover { color: var(--brand-700); }
.ind-card-loc { font-size: 0.82rem; color: var(--ink-600); margin: 0; }
.ind-card-sum { font-size: 0.88rem; margin: 0; color: var(--ink-700); flex: 1; }
.ind-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ind-tag {
    font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: var(--brand-100); color: var(--brand-800);
}
.ind-tag--acc { background: #e8f4fd; color: #14528a; }
.ind-tag--help { background: var(--brand-100); color: var(--brand-700); }
.ind-tag--muted { background: var(--bg-subtle, #f2f4f3); color: var(--ink-600); font-weight: 600; }
.ind-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.ind-fav-btn { margin-left: auto; border: none; background: transparent; font-size: 1.15rem; cursor: pointer; color: var(--brand-700); padding: 6px 8px; border-radius: 8px; }
.ind-fav-btn:hover { background: var(--brand-100); }
.ind-fav-btn.is-on { color: #c0392b; }
.ind-fav-btn:focus-visible { outline: 3px solid var(--brand-300); }

/* ----------------------------------------------------- lista + mapa (§5/§13) */
.ind-layout { display: flex; flex-direction: column; gap: 16px; }
.ind-map-side { display: flex; flex-direction: column; gap: 10px; }
.ind-map { height: 300px; }
.ind-map .leaflet-popup-content { font-size: 0.85rem; }
.ind-map .ind-pop-title { font-weight: 700; margin: 0 0 2px; }
.ind-map .ind-pop-meta { color: var(--ink-600); font-size: 0.78rem; margin: 0 0 4px; }
.ind-map .ind-pop-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ind-map .ind-pop-links a {
    font-size: 0.75rem; font-weight: 700; text-decoration: none; color: var(--brand-700);
    background: var(--brand-100); padding: 4px 9px; border-radius: 999px;
}
@media (min-width: 900px) {
    /* modo mapa no desktop: lista compacta à esquerda, mapa fixo à direita */
    .ind-layout.is-map-mode { flex-direction: row; align-items: flex-start; }
    .ind-layout.is-map-mode .ind-list { flex: 1 1 58%; }
    .ind-layout.is-map-mode .ind-map-side { flex: 0 0 40%; position: sticky; top: 70px; }
    .ind-layout.is-map-mode .ind-map { height: 520px; }
    .ind-layout.is-map-mode .ind-grid { grid-template-columns: 1fr; }
    /* modo lista: mapa vai para baixo (opcional) — mantém layout limpo */
}

/* --------------------------------------------------------------- pager */
.ind-pager { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.ind-pg {
    min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
    color: var(--ink-900); font-weight: 600; font-size: 0.9rem; background: #fff;
}
.ind-pg.is-on { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* --------------------------------------------------------------- detalhe */
.ind-breadcrumb { display: flex; gap: 14px; margin: 18px 0; font-size: 0.9rem; }
.ind-breadcrumb a { color: var(--brand-700); text-decoration: none; }
.ind-breadcrumb a:hover { text-decoration: underline; }
.ind-gallery { margin: 8px 0 16px; }
.ind-gallery-main { margin: 0 0 8px; border-radius: 14px; overflow: hidden; max-height: 460px; }
.ind-gallery-main img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }
.ind-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.ind-gallery-thumbs img { height: 76px; width: 110px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ind-detail-head { display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; padding: 18px; }
.ind-detail-titles h1 { margin: 0 0 4px; font-size: 1.5rem; font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
.ind-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.ind-two-col { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) {
    .ind-two-col { flex-direction: row; align-items: flex-start; }
    .ind-detail-main { flex: 1 1 62%; }
    .ind-detail-side { flex: 0 0 34%; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
}
.ind-block { padding: 18px; margin-bottom: 14px; }
.ind-block:last-child { margin-bottom: 0; }
.ind-block h2 { font-size: 1.05rem; margin: 0 0 10px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
.ind-why blockquote {
    margin: 0 0 8px; padding: 10px 14px; border-left: 4px solid var(--brand-600);
    background: var(--brand-100); border-radius: 0 10px 10px 0; font-style: italic;
}
.ind-info { display: grid; gap: 10px; margin: 0; }
.ind-info dt { font-weight: 700; font-size: 0.85rem; }
.ind-info dd { margin: 2px 0 0; font-size: 0.92rem; }
.ind-review { border-top: 1px dashed var(--line); padding: 12px 0; }
.ind-review header { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ind-review:first-child { border-top: none; }
.ind-stars { color: #d4a017; letter-spacing: 2px; font-size: 0.9rem; }
.ind-stars-input { display: flex; gap: 10px; flex-wrap: wrap; }
.ind-stars-input label { cursor: pointer; font-size: 1.5rem; color: #d4a017; position: relative; }
.ind-stars-input input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ind-stars-input input:checked + span, .ind-stars-input input:focus-visible + span { text-shadow: 0 0 0 #b8860b; }
.ind-stars-input input:focus-visible + span { outline: 2px solid var(--brand-600); border-radius: 4px; }
.ind-review-form, .ind-report-details { margin-bottom: 14px; }
.ind-report-details summary { cursor: pointer; color: var(--ink-600); font-size: 0.85rem; }

/* ------------------------------------------------------------ formulário */
.ind-form-wrap { max-width: 760px; padding-bottom: 46px; }
.ind-form-wrap h1 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.5rem; }
.ind-form { padding: 20px; display: grid; gap: 14px; }
.ind-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; font-weight: 600; }
.ind-field input, .ind-field select, .ind-field textarea {
    font-weight: 400; font-size: 0.95rem; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff; color: var(--ink-900); font-family: inherit;
}
.ind-field input:focus-visible, .ind-field select:focus-visible, .ind-field textarea:focus-visible {
    outline: 2px solid var(--brand-600); outline-offset: 1px;
}
.ind-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ind-field-row .ind-field { flex: 1 1 200px; }
.ind-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ind-form-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ind-form-photos img { height: 70px; width: 100px; object-fit: cover; border-radius: 8px; }
.ind-del-form { margin-top: 18px; padding: 14px 18px; border-top: 1px dashed var(--line); }
.btn-danger-ghost {
    --btn-bg: transparent; --btn-fg: #b3261e; --btn-bd: #e6c9c7;
    background: transparent; color: #b3261e; border: 1px solid #e6c9c7;
    border-radius: 10px; padding: 9px 16px; font-weight: 600; cursor: pointer;
}
.btn-danger-ghost:hover { background: #fdeeec; }

/* ------------------------------------------------------------ utilitários */
.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;
}
.btn.is-on { background: var(--brand-100); color: var(--brand-700); }

/* ---------------------------------------------------- telas pequenas (§14) */
@media (max-width: 640px) {
    .ind-hero { padding: 24px 0 18px; }
    .ind-grid { grid-template-columns: 1fr; }
    .ind-card-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; min-height: 42px; }
    .ind-search-row select { flex: 1 1 100%; }
    .ind-map { height: 260px; }
    .ind-pg { min-width: 44px; height: 44px; }  /* alvo de toque ≥44px */
    .ind-detail-head { padding: 14px; }
    .ind-block { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .ind-card, .ind-vt, .ind-fav-btn { transition: none; }
}

/* ============================== Quem Indica? (descoberta social) */
.ind-tabs {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.ind-tab {
    flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; font-size: 0.9rem;
    font-weight: 600; text-decoration: none; color: var(--brand-700);
    background: var(--brand-100); border: 1px solid transparent; white-space: nowrap;
}
.ind-tab:hover { border-color: var(--brand-300); }
.ind-tab.is-on { background: var(--brand-700); color: #fff; }
.ind-tab:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 2px; }

.qi-hero { margin: 6px 0 10px; }
.qi-hero h1 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 1.6rem; margin: 0 0 4px; }
.qi-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.qi-filter input[type="search"] {
    flex: 1 1 220px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff; color: var(--ink-900); font-size: 0.95rem;
}
.qi-cats { padding-left: 0; }

.qi-people-grid, .qi-feed {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.qi-feed { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.qi-author {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--brand-100); border-radius: 12px;
}
.qi-author--compact { padding: 8px 10px; }
.qi-author-link { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.qi-author-avatar {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-300); color: var(--brand-900); font-weight: 800;
}
.qi-author--compact .qi-author-avatar { width: 34px; height: 34px; }
.qi-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qi-author-initial { font-size: 1.1rem; }
.qi-author-names { display: flex; flex-direction: column; min-width: 0; }
.qi-author-name { font-weight: 700; color: var(--ink-900); font-size: 0.95rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.qi-badge {
    font-size: 0.68rem; font-weight: 700; color: var(--brand-800);
    background: #fff; border: 1px solid var(--brand-400); padding: 2px 8px; border-radius: 999px;
}
.qi-author-user { color: var(--muted, var(--ink-600)); font-size: 0.8rem; }
.qi-author-city { color: var(--ink-600); font-size: 0.76rem; }
.qi-author-stats { margin: 0; padding: 0 12px; }
.qi-follow-btn { flex: 0 0 auto; }
.qi-follow-btn.is-following { background: var(--brand-100); color: var(--brand-800); }
.qi-detail-author { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.qi-match-cats { grid-column: 1 / -1; margin: -8px 0 0; padding: 0 12px; }
.qi-place-wrap { display: flex; flex-direction: column; gap: 8px; }
.qi-place-wrap .ind-card { margin: 0; }

.qi-list-form { padding: 16px; display: grid; gap: 12px; margin: 12px 0 20px; }
.ind-check-line { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; font-weight: 600; }
.qi-add-list { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qi-add-list select {
    padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-900); font-size: 0.9rem; max-width: 220px;
}
.qi-remove-item { margin-top: -10px; justify-self: end; }

@media (max-width: 640px) {
    .qi-people-grid, .qi-feed { grid-template-columns: 1fr; }
    .qi-author-avatar { width: 38px; height: 38px; }
    .qi-follow-btn, .qi-add-list button { min-height: 42px; }
}