/* css/beaches-bottom.css — /beaches e /en/beaches: tudo o que vem depois da lista de praias (Lote E, 09/10/2026)
 * Substitui: bloco GYG "№ 05", "Vai além das praias", "Guias aprofundados por região", "Como escolher a praia certa"
 * e a faixa "Escolheu a praia. E o alojamento?".
 * Ordem: 1) Que praia procura? (perfis com contagem real -> filtram a lista)  2) Depois da praia (GetYourGuide)
 *        3) Guias por região + por tema  4) Antes de ir (webcams/surf/pesca/planear)  5) Onde dormir (Stay22).
 * Mesma linguagem do resto do site: tinta #07152A, dourado #c9a84c/#e8c97a, Bodoni Moda nos títulos, Inter no texto.
 * Nota: style.css tem [class*="-card"]{width:100% !important} no telemóvel -> nenhuma classe aqui tem "-card".
 */
.bb{--ink:#07152A; --ink2:#0b2340; --gold:#c9a84c; --gold-l:#e8c97a; --gold-t:#8a6a1f; --paper:#f6f3ec; --line:#e4ddcc; --mute:#5b6b7f; --sea:#1c8fd6;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); box-sizing:border-box;}
.bb *,.bb *::before,.bb *::after{box-sizing:border-box;}
.bb a{text-decoration:none;}
/* style.css (telemóvel) poe section{padding:0 16px !important} -> aqui o recuo vem de .bb__in */
.bb > section{padding-left:0 !important; padding-right:0 !important;}
.bb__in{max-width:1180px; margin:0 auto; padding:0 28px;}
.bb__h{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-weight:700; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-.01em;}
.bb__lead{margin:12px 0 0; max-width:600px; font-size:1rem; line-height:1.6; color:var(--mute);}
.bb__top{display:flex; align-items:flex-end; justify-content:space-between; gap:18px 32px; flex-wrap:wrap;}
.bb__more{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:#0a3d6b; white-space:nowrap;}
.bb__more svg{width:16px; height:16px; flex:0 0 16px;}
.bb__more:hover{text-decoration:underline;}
.bb svg{fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.bb :focus-visible{outline:2px solid #0a64c8; outline-offset:3px;}

/* ── 1. Que praia procura? ───────────────────────────────────────────── */
.bb-pick{background:var(--paper); padding:56px 0 72px;}
.bb-pick__row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:30px 0 0; padding:0; list-style:none;}
.bb-tile{position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; width:100%; aspect-ratio:3/4; padding:16px 16px 24px;
  border:0; border-radius:18px; overflow:hidden; cursor:pointer; text-align:left; color:#fff; background:var(--ink2); font:inherit;}
.bb-tile img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1);}
.bb-tile::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(7,21,42,.05) 30%,rgba(7,21,42,.86) 100%);}
.bb-tile:hover img{transform:scale(1.05);}
.bb-tile__n{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin:0 0 auto; padding:5px 10px; border-radius:999px;
  font-size:.72rem; font-weight:600; color:var(--ink); background:rgba(255,255,255,.92);}
.bb-tile__n::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--sea);}
.bb-tile__n:empty{display:none;}
.bb-tile__t{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-size:1.3rem; font-weight:700; line-height:1.1;}
.bb-tile__d{margin:6px 0 0; font-size:.8rem; line-height:1.4; color:rgba(255,255,255,.8);}
.bb-tile__go{margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:var(--gold-l);}
.bb-tile__go svg{width:14px; height:14px; transition:transform .2s ease;}
.bb-tile:hover .bb-tile__go svg{transform:translateX(3px);}
.bb-tile__cr{position:absolute; left:16px; right:12px; bottom:7px; z-index:1; font-size:8.5px; line-height:1.2; color:rgba(255,255,255,.4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bb-tile[aria-pressed="true"]{box-shadow:0 0 0 3px var(--gold);}

/* ── 2. Depois da praia (GetYourGuide) ───────────────────────────────── */
.bb-do{background:linear-gradient(180deg,#061224 0%,var(--ink) 55%,var(--ink2) 100%); color:#fff; padding:76px 0 80px; position:relative; overflow:hidden;}
.bb-do::before{content:''; position:absolute; right:-160px; top:-200px; width:560px; height:560px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(201,168,76,.16) 0%,rgba(201,168,76,0) 65%);}
.bb-do .bb__lead{color:rgba(255,255,255,.72);}
.bb-do__chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.bb-do__chips a{display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:999px; font-size:.84rem; font-weight:500; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); transition:background .2s ease, border-color .2s ease;}
.bb-do__chips a:hover{background:rgba(232,201,122,.14); border-color:rgba(232,201,122,.5);}
.bb-do__panel{position:relative; margin-top:30px; padding:22px 22px 14px; border-radius:20px; background:#fff; color:var(--ink);}
.bb-do__panel [data-gyg-widget]{min-height:140px;}
.bb-do__note{margin:16px 0 0; font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.55);}

/* ── 3. Guias ────────────────────────────────────────────────────────── */
.bb-guides{background:#fff; padding:76px 0 64px;}
.bb-reg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--line);}
.bb-reg li{border-bottom:1px solid var(--line);}
.bb-reg a{display:grid; grid-template-columns:76px minmax(0,1fr) 22px; align-items:center; gap:18px; padding:16px 0; color:var(--ink);}
.bb-reg img{width:76px; height:76px; border-radius:14px; object-fit:cover; background:#dfe6ee;}
.bb-reg__t{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-size:1.18rem; font-weight:700; line-height:1.2;}
.bb-reg__d{margin:4px 0 0; font-size:.84rem; line-height:1.45; color:var(--mute);}
.bb-reg svg{width:18px; height:18px; color:var(--gold-t); transition:transform .2s ease;}
.bb-reg a:hover .bb-reg__t{color:#0a3d6b;}
.bb-reg a:hover svg{transform:translateX(4px);}
.bb-theme{margin-top:34px;}
.bb-theme__h{margin:0 0 12px; font-size:.86rem; font-weight:600; color:var(--mute);}
.bb-theme ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.bb-theme a{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; font-size:.88rem; font-weight:500; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); transition:border-color .2s ease, background .2s ease;}
.bb-theme a:hover{border-color:var(--gold); background:#fbf6e8;}

/* ── 4. Antes de ir ──────────────────────────────────────────────────── */
.bb-go{background:#fff; padding:0 0 76px;}
.bb-go__row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.bb-go__row li + li{border-left:1px solid var(--line);}
.bb-go__row a{display:flex; flex-direction:column; gap:4px; height:100%; padding:22px 22px 20px; color:var(--ink); transition:background .2s ease;}
.bb-go__row a:hover{background:#fbf8f1;}
.bb-go__n{font-family:'Bodoni Moda',Georgia,serif; font-weight:700; font-size:2.3rem; line-height:1; color:var(--gold-t);}
.bb-go__t{margin-top:6px; font-size:.95rem; font-weight:600;}
.bb-go__d{font-size:.82rem; line-height:1.45; color:var(--mute);}

/* ── 5. Onde dormir (Stay22) ─────────────────────────────────────────── */
.bb-stay{background:var(--paper); padding:64px 0 72px;}
.bb-stay__box{display:grid; grid-template-columns:minmax(0,1fr); gap:22px; padding:36px 40px; border-radius:24px;
  background:linear-gradient(120deg,var(--ink2) 0%,var(--ink) 70%); color:#fff;}
.bb-stay .bb__h{font-size:clamp(1.6rem,2.6vw,2.2rem);}
.bb-stay .bb__lead{color:rgba(255,255,255,.72); font-size:.95rem;}
.bb-stay__form{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto; gap:1px; background:rgba(255,255,255,.14); border-radius:16px; overflow:hidden; margin:0;}
.bb-stay__f{display:flex; flex-direction:column; gap:3px; min-width:0; padding:10px 14px 9px; background:#fff; color:var(--ink);}
.bb-stay__l{font-size:.72rem; font-weight:600; color:var(--gold-t);}
.bb-stay__f select,.bb-stay__f input{appearance:none; -webkit-appearance:none; width:100%; min-width:0; min-height:26px; margin:0; padding:2px 0 0; border:0; background:transparent;
  font:600 .95rem/1.3 'Inter',system-ui,sans-serif; color:var(--ink); outline:none; cursor:pointer;}
.bb-stay__go{appearance:none; border:0; padding:0 22px; min-height:60px; cursor:pointer; white-space:nowrap; font:700 .92rem/1 'Inter',system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(135deg,var(--gold),var(--gold-l));}
.bb-stay__go:hover{filter:brightness(1.06);}
.bb-stay__alt{grid-column:1 / -1; margin:0; font-size:.8rem; color:rgba(255,255,255,.6);}
.bb-stay__alt a{color:var(--gold-l); font-weight:600;}
.bb-stay__alt a:hover{text-decoration:underline;}

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .bb-pick__row{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  .bb__in{padding:0 18px;}
  .bb-pick{padding:52px 0 56px;}
  /* style.css tem *{max-width:100%} -> sem max-width:none as linhas com margem negativa nao chegam a borda */
  .bb-pick__row{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:22px -18px 0; padding:0 18px 4px; scrollbar-width:none; max-width:none; width:calc(100% + 36px); scroll-padding:0 18px;}
  .bb-pick__row::-webkit-scrollbar{display:none;}
  .bb-pick__row > li{flex:0 0 62%; scroll-snap-align:start;}
  .bb-tile{border-radius:16px;}
  .bb-do{padding:54px 0 56px;}
  .bb-do__chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -18px; padding:0 18px; scrollbar-width:none; max-width:none; width:calc(100% + 36px);}
  .bb-do__chips::-webkit-scrollbar{display:none;}
  .bb-do__chips a{white-space:nowrap;}
  .bb-do__panel{margin:22px -6px 0; padding:14px 12px 8px; border-radius:16px; max-width:none; width:calc(100% + 12px);}
  .bb-guides{padding:52px 0 44px;}
  .bb-reg{grid-template-columns:minmax(0,1fr); margin-top:22px;}
  .bb-reg a{grid-template-columns:60px minmax(0,1fr) 18px; gap:14px; padding:13px 0;}
  .bb-reg img{width:60px; height:60px; border-radius:12px;}
  .bb-reg__t{font-size:1.06rem;}
  .bb-go{padding:0 0 52px;}
  .bb-go__row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bb-go__row li:nth-child(3){border-left:0;}
  .bb-go__row li:nth-child(n+3){border-top:1px solid var(--line);}
  .bb-go__row a{padding:16px 16px 15px;}
  .bb-go__n{font-size:1.8rem;}
  .bb-stay{padding:44px 0 52px;}
  .bb-stay__box{padding:24px 18px; border-radius:20px; margin:0 -6px; max-width:none; width:calc(100% + 12px);}
  .bb-stay__f{padding:10px 10px 9px;}
  .bb-stay__f input::-webkit-calendar-picker-indicator{margin-left:0; padding:0; width:14px; height:14px;}
  .bb-stay__form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .bb-stay__f--where{grid-column:1 / -1;}
  .bb-stay__go{grid-column:1 / -1; min-height:52px;}
  .bb-stay__f select,.bb-stay__f input{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){ .bb *{transition:none !important;} }