/* ===========================================================
   Férias Portugal — secção de Praias (individual + coleções)
   Usa as variáveis globais do style.css
   =========================================================== */

.muted { color: var(--color-muted); font-size: .92rem; }

/* Factos rápidos (página individual) */
.praia-facts { display: flex; flex-wrap: wrap; gap: 12px; }
.praia-fact {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px; min-width: 160px;
}
.praia-fact__k { display: block; font-size: .8rem; color: var(--color-muted); }
.praia-fact__v { display: block; font-weight: 600; margin-top: 2px; }

/* Como chegar */
.praia-dist { border-collapse: collapse; width: 100%; max-width: 480px; }
.praia-dist th, .praia-dist td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border);
}
.praia-dist th { color: var(--color-muted); font-weight: 600; }

/* Clima — barras */
.clima-bars { display: flex; align-items: flex-end; gap: 6px; margin-top: 14px; }
.clima-bar { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.clima-bar__col {
    width: 60%; background: var(--color-primary); border-radius: 4px 4px 0 0; opacity: .55;
}
.clima-bar--epoca .clima-bar__col { background: var(--color-accent); opacity: 1; }
.clima-bar__val { font-size: .72rem; color: var(--color-muted); }
.clima-bar__m { font-size: .72rem; color: var(--color-muted); }

/* Contraste do subtítulo/breadcrumb quando há foto no topo */
.hero-page--photo .lead-intro { color: #fff; opacity: .92; }
.hero-page--photo .breadcrumb,
.hero-page--photo .breadcrumb a,
.hero-page--photo .breadcrumb span { color: rgba(255,255,255,.9); }

/* Crédito da foto no topo */
.hero-credit {
    position: absolute; right: 10px; bottom: 8px; margin: 0;
    font-size: .72rem; background: rgba(0,0,0,.45); color: #fff;
    padding: 3px 8px; border-radius: 6px; max-width: 70%;
}
.hero-credit a { color: #fff; text-decoration: none; }
.hero-credit a:hover { text-decoration: underline; }

/* Mapa */
.praia-map { margin-top: 8px; }

/* POIs à volta */
.praia-pois { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.praia-pois__col h3 { margin: 0 0 8px; font-size: 1.05rem; }
.praia-pois__list { list-style: none; padding: 0; margin: 0; }
.praia-pois__list li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px dashed var(--color-border);
}
.poi-dist { color: var(--color-muted); font-size: .85rem; white-space: nowrap; }

/* Serviços */
.praia-serv { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.praia-serv li { color: var(--color-success); font-weight: 500; }

/* Fontes */
.praia-sources { margin: 0 0 10px; padding-left: 18px; }
.praia-datanote { font-size: .82rem; }

/* Relatos de utilizadores */
.relato-ok  { background:#e6f4ea; color:#1e6b3a; border:1px solid #bfe3ca; padding:10px 14px; border-radius:var(--radius-sm); }
.relato-erro{ background:#fdecec; color:#a12626; border:1px solid #f3c4c4; padding:10px 14px; border-radius:var(--radius-sm); }
.relato-list { list-style:none; padding:0; margin:16px 0; display:grid; gap:14px; }
.relato { background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:12px 16px; }
.relato-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.relato-autor { font-weight:600; }
.relato-stars { color:var(--color-accent); letter-spacing:1px; }
.relato-stars-off { color:var(--color-border); }
.relato-data { margin-left:auto; }
.relato-texto { margin:0; }
.relato-form-wrap { margin-top:18px; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:12px 16px; }
.relato-form-wrap summary { cursor:pointer; font-weight:600; color:var(--color-primary); }
.relato-form { display:grid; gap:12px; margin-top:14px; max-width:560px; }
.relato-form label { display:grid; gap:4px; font-size:.9rem; }
.relato-form input, .relato-form select, .relato-form textarea {
    padding:9px 12px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font:inherit; width:100%;
}
.relato-form .btn { justify-self:start; }
.relato-nota { margin:0; }
.relato-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } /* honeypot */

/* Coleções — chips + tabela */
.praia-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.praia-chip {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--color-bg);
    color: var(--color-text); text-decoration: none; font-size: .9rem;
}
.praia-chip.is-active, .praia-chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.praia-filter {
    width: 100%; max-width: 420px; padding: 10px 14px; margin-bottom: 14px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem;
}
.praia-table { border-collapse: collapse; width: 100%; }
.praia-table th, .praia-table td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: .95rem;
}
.praia-table th { color: var(--color-muted); font-weight: 600; }
.praia-table tbody tr:hover { background: var(--color-bg-soft); }
.praia-table a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.praia-table a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .clima-bar__val { display: none; }
    .praia-table th:nth-child(5), .praia-table td:nth-child(5) { display: none; } /* esconde qualidade no telemóvel */
}

/* editorial description (generated, PT) — intro block before "Como chegar" */
.praia-descricao p { max-width: 72ch; line-height: 1.7; margin: 0 0 14px; font-size: 1.02rem; }
.praia-descricao p:last-child { margin-bottom: 0; }