/* Cartao de praia v2 — /beaches e /en/beaches — Portal Turismo Portugal — 2026-10-06
 * Objetivo: comparar praias depressa e converter (hoteis via Stay22, planeador), nao ler artigos.
 * Classes .bc2* sobre o .beach-card existente (mantido por causa dos filtros, paginacao e tracking).
 * Carregado depois do <style> inline da pagina.
 */
.beaches-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px;}

.beach-card.bc2{
  --bc2-navy:#0a3d6b; --bc2-ink:#07152A; --bc2-gold:#c9a84c; --bc2-gold-l:#e8c97a; --bc2-line:#e6ecf3;
  position:relative; display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
  background:#fff; border:1px solid var(--bc2-line); border-top:1px solid var(--bc2-line); border-radius:18px;
  box-shadow:0 1px 2px rgba(10,61,107,.05), 0 10px 28px -16px rgba(10,61,107,.28);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.beach-card.bc2:hover{transform:translateY(-4px); border-color:#d7e1ec; box-shadow:0 2px 4px rgba(10,61,107,.06), 0 22px 44px -18px rgba(10,61,107,.38);}
.beach-card.bc2:focus-visible{outline:3px solid var(--bc2-gold-l); outline-offset:3px;}

/* ── Foto ───────────────────────────────────────────────────────────────── */
.bc2__media{position:relative; aspect-ratio:3/2; overflow:hidden; margin:0; background:linear-gradient(135deg,#dfe9f3 0%,#f1f5f9 100%);}
.bc2__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.22,1,.36,1);}
.beach-card.bc2:hover .bc2__media img{transform:scale(1.05);}
.bc2__media::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(7,21,42,.62) 0%, rgba(7,21,42,0) 46%), linear-gradient(to bottom, rgba(7,21,42,.22) 0%, rgba(7,21,42,0) 30%);}
.bc2__fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 24px; text-align:center;
  color:#e8c97a; background:radial-gradient(120% 120% at 100% 0%, rgba(201,168,76,.22) 0%, rgba(201,168,76,0) 50%), linear-gradient(140deg,#07152A 0%,#0B1B2B 55%,#10304F 100%);
}
.bc2__fallback svg{width:40px; height:40px; stroke:currentColor; fill:none; stroke-width:1.4; opacity:.85;}
.bc2__fallback span{font-family:'Bodoni Moda',Georgia,serif; font-style:italic; font-size:1.15rem; color:rgba(255,255,255,.82); line-height:1.2;}

.bc2__chip{
  position:absolute; z-index:2; top:12px; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--bc2-navy); box-shadow:0 2px 8px rgba(7,21,42,.18);
}
.bc2__chip--region{left:12px;}
.bc2__chip--quality{right:12px; color:#0f766e; letter-spacing:.03em; text-transform:none; font-size:.72rem;}
.bc2__chip svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}

/* Condicoes ao vivo (preenchido por JS; escondido ate haver dados) */
.bc2__live{
  position:absolute; z-index:2; left:12px; bottom:12px; max-width:calc(100% - 40px);
  display:none; align-items:center; gap:8px; padding:6px 11px 6px 9px; border-radius:999px;
  background:rgba(7,21,42,.62); color:#fff; font-size:.76rem; font-weight:500; line-height:1.2; white-space:nowrap;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(7,21,42,.25);
}
.bc2__live.is-on{display:inline-flex;}
.bc2__live b{font-weight:600;}
.bc2__dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:#94a3b8; box-shadow:0 0 0 3px rgba(255,255,255,.18);}
.bc2__live[data-level="calm"] .bc2__dot{background:#22c55e;}
.bc2__live[data-level="moderate"] .bc2__dot{background:#f59e0b;}
.bc2__live[data-level="rough"] .bc2__dot{background:#ef4444;}
@keyframes bc2pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.18);}50%{box-shadow:0 0 0 6px rgba(255,255,255,0);}}
.bc2__live.is-on .bc2__dot{animation:bc2pulse 2.4s ease-in-out infinite;}

/* Credito (licenca CC BY-SA): fino e vertical na margem direita, para nunca colidir com o selo ao vivo */
.bc2__credit{position:absolute; z-index:2; right:5px; bottom:10px; margin:0; max-height:calc(100% - 56px); overflow:hidden; text-overflow:ellipsis;
  writing-mode:vertical-rl; transform:rotate(180deg); font-size:8.5px; line-height:1; color:#fff; opacity:.38; letter-spacing:.03em; pointer-events:none; white-space:nowrap;}

/* ── Corpo ──────────────────────────────────────────────────────────────── */
.bc2__body{display:flex; flex-direction:column; gap:10px; padding:16px 18px 18px; flex:1;}
.bc2__name{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-weight:700; font-size:1.28rem; line-height:1.18; color:var(--bc2-ink); letter-spacing:-.005em;}
.bc2__hook{margin:0; font-size:.86rem; line-height:1.5; color:#526077; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.bc2__feats{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;}
.bc2__feats li{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:8px; background:#f2f6fa; color:#334155; font-size:.74rem; font-weight:500;}
.bc2__feats svg{width:13px; height:13px; stroke:#0a3d6b; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ── Acoes ──────────────────────────────────────────────────────────────── */
.bc2__actions{margin-top:auto; padding-top:4px; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.bc2__hotels{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:48px; padding:0 16px; border-radius:12px; text-decoration:none;
  background:linear-gradient(135deg,var(--bc2-gold) 0%,var(--bc2-gold-l) 100%); color:var(--bc2-ink);
  font-weight:600; font-size:.94rem; box-shadow:0 8px 20px -10px rgba(201,168,76,.9), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.bc2__hotels:hover{transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(201,168,76,1), inset 0 1px 0 rgba(255,255,255,.5);}
.bc2__hotels-l{display:inline-flex; align-items:center; gap:9px; white-space:nowrap;}
.bc2__hotels-r{display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:600; opacity:.78; white-space:nowrap;}
.bc2__hotels svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.bc2__hotels-r svg{width:14px; height:14px; transition:transform .2s ease;}
.bc2__hotels:hover .bc2__hotels-r svg{transform:translateX(3px);}
.bc2__ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:0 10px; border-radius:12px;
  border:1px solid #d9e2ec; background:#fff; color:var(--bc2-navy); font-size:.84rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:border-color .2s ease, background .2s ease;
}
.bc2__ghost:hover{border-color:var(--bc2-navy); background:#f6f9fc;}
.bc2__ghost svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.bc2__hotels:focus-visible,.bc2__ghost:focus-visible{outline:3px solid var(--bc2-navy); outline-offset:2px;}

/* style.css (global, !important) forca 1 coluna e +16px de padding em todos os "-grid" ate 768px:
   aqui so para esta grelha (o #id ganha em especificidade) — 2 colunas no tablet, sem gutter triplo no telemovel. */
@media (max-width:768px){
  #beaches-grid.beaches-grid{padding-left:0 !important; padding-right:0 !important;}
}
@media (min-width:600px) and (max-width:768px){
  #beaches-grid.beaches-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px;}
}
@media (max-width:360px){
  .bc2__pr, .bc2__ghost svg{display:none;}
  .bc2__hotels{padding:0 14px;}
}
@media (max-width:640px){
  .beaches-grid{grid-template-columns:1fr; gap:16px;}
  .bc2__media{aspect-ratio:16/10;}
  .bc2__body{padding:14px 16px 16px;}
  .bc2__name{font-size:1.22rem;}
}
@media (prefers-reduced-motion:reduce){
  .beach-card.bc2, .bc2__media img, .bc2__hotels, .bc2__hotels-r svg{transition:none;}
  .beach-card.bc2:hover, .beach-card.bc2:hover .bc2__media img{transform:none;}
  .bc2__live.is-on .bc2__dot{animation:none;}
}

/* Creditos de fotos quase invisiveis (pedido do Ricardo, 07/10/2026). O texto fica na pagina porque as licencas CC/Pexels/Unsplash exigem atribuicao; so aparece melhor com o rato/foco. */
.bc2__credit{opacity:.28 !important; font-size:9px !important; letter-spacing:0 !important; text-shadow:none !important; transition:opacity .2s ease;}
.bc2__credit:hover, .bc2__credit:focus-within{opacity:.75 !important;}