/* ============================================================
   MARÉS — bloco «Marés hoje» ([data-mares-hoje]) e página
   /pages/mares ([data-mares-semana]). Usa os tokens de style.css.
   Seletores com dois níveis de classe para vencerem
   .page-main p/ul/ol de style.css sem !important.
   ============================================================ */

.mares-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mares-nowrap { white-space: nowrap; }

/* O contentor chega vazio no HTML e é o mares.js que lhe põe o texto de espera (e o aria-busy),
   para nunca ficar «A carregar…» se o script não correr. Sem JavaScript fica escondido (vale o
   <noscript>, fora do contentor). Com JavaScript, o bloco da página inicial reserva a altura
   desde o primeiro desenho (ver «Enquanto carrega», mais abaixo): escondido até o script correr,
   empurrava as Notícias ~480 px depois de já estarem no ecrã (CLS 0,18 a 390×844). Se o script
   nunca correr, a reserva vazia recolhe ao fim de 20 s, em vez de ficar uma caixa vazia. */
.mares-semana:empty { display: none; }
@media (scripting: none) {
  .mares-hoje:empty { display: none; }
}
.mares-hoje:empty { animation: mares-recolher 0s 20s forwards; }
@keyframes mares-recolher {
  to { min-height: 0; padding: 0; background-color: transparent; }
}
.mares-hoje .mares-carregar,
.mares-semana .mares-carregar {
  color: var(--text-light);
  font-size: .95rem;
  margin: 0;
}

/* Aviso sem JavaScript (<noscript>, a seguir ao contentor) */
p.mares-noscript {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  hyphens: none;
}
.mares-inicio p.mares-noscript {
  background: var(--bg-links);
  border-radius: var(--radius);
  padding: 1.25rem;
}
p.mares-noscript a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ícones ▲ / ▼ (SVG decorativo; o nome da maré vai sempre em texto) */
.mares-icone {
  width: .7em;
  height: .7em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Marca «Próxima» */
.mares-marca {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  border-radius: 4px;
  padding: .05rem .45rem;
  white-space: nowrap;
}

/* Linha de estado: «A maré está a subir · Preia-mar às 18:38, daqui a 2 h 10 min» */
.mares-hoje .mares-estado,
.mares-semana .mares-estado {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  hyphens: none;
  margin: 0;
  text-wrap: pretty;
}
.mares-estado strong { color: var(--navy-dark); font-weight: 700; white-space: nowrap; }

.mares-hoje .mares-indisponivel,
.mares-semana .mares-indisponivel {
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  margin: 0;
}
.mares-indisponivel a,
.mares-hoje__mais,
.mares-hoje__fonte a,
.mares-nota a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mares-indisponivel a:hover,
.mares-hoje__mais:hover,
.mares-hoje__fonte a:hover,
.mares-nota a:hover { color: var(--navy-dark); }


/* ============================================================
   BLOCO «MARÉS HOJE» (página inicial)
   ============================================================ */
.mares-hoje {
  background: var(--bg-links);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--text);
}
/* Enquanto carrega, reserva a altura do bloco final com a marca «Próxima» (medida em set. 2026,
   de 2 em 2 h ao longo de 7 dias: 463 px até 360 px de largura, 483 px de 375 a 480 px,
   323 px a partir de 768 px), para as Notícias não saltarem quando os dados chegam. :empty é
   o intervalo antes de o script correr. */
.mares-hoje:empty,
.mares-hoje[aria-busy="true"] { min-height: 30rem; }
@media (max-width: 22.5rem) {
  .mares-hoje:empty,
  .mares-hoje[aria-busy="true"] { min-height: 29rem; }
}
@media (min-width: 40rem) {
  .mares-hoje:empty,
  .mares-hoje[aria-busy="true"] { min-height: 20rem; }
}

.mares-hoje .mares-hoje__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-bottom: .5rem;
}
.mares-hoje .mares-hoje__titulo {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
  padding: 0;
  border: 0;
}
.mares-hoje .mares-hoje__data {
  font-size: .95rem;
  font-weight: 600;
  color: #4d5562;
  margin: 0;
}

.mares-hoje .mares-estado { margin-bottom: 1rem; }

/* As marés do dia: grelha com filetes de 1px (a cor do fundo da lista
   aparece nos intervalos). 2 × 2 no telemóvel, uma linha em ecrãs largos.
   Dentro de cada maré, tudo empilhado e a marca «Próxima» na última linha: ao lado
   do nome não cabia nas células estreitas (telemóvel e tablet) e tapava «Preia-mar». */
.mares-hoje .mares-hoje__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(27, 63, 122, .16);
  border: 1px solid rgba(27, 63, 122, .16);
  border-radius: 8px;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.3;
}
.mares-hoje .mares-hoje__lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.mares-hoje .mares-hoje__mare {
  margin: 0;
  padding: .8rem .9rem .85rem;
  background: var(--bg-links);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "tipo"
    "hora"
    "altura"
    "marca";
  align-content: start; /* numa linha com a marca, as outras células não esticam as horas para baixo */
  align-items: center;
  row-gap: .15rem;
}
.mares-hoje__tipo {
  grid-area: tipo;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  min-width: 0;
  white-space: nowrap;
}
.mares-hoje__hora {
  grid-area: hora;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: #1f2733;
}
.mares-hoje__altura {
  grid-area: altura;
  font-size: .95rem;
  color: #4d5562;
  font-variant-numeric: tabular-nums;
}
.mares-hoje .mares-marca { grid-area: marca; justify-self: start; margin-top: .4rem; }

.mares-hoje .mares-hoje__mare.is-proxima { background: var(--white); }
.mares-hoje .mares-hoje__mare.is-proxima .mares-hoje__hora { color: var(--navy-dark); }

/* Já passou: esmaecida mas legível (#666 sobre #eef3f9 = 5,2:1) */
.mares-hoje .mares-hoje__mare.is-passada .mares-hoje__tipo,
.mares-hoje .mares-hoje__mare.is-passada .mares-hoje__hora,
.mares-hoje .mares-hoje__mare.is-passada .mares-hoje__altura { color: #666; }
.mares-hoje .mares-hoje__mare.is-passada .mares-hoje__hora { font-weight: 500; }
.mares-hoje__mare.is-passada .mares-icone { opacity: .55; }

.mares-hoje .mares-hoje__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.25rem;
  margin-top: .75rem;
}
.mares-hoje .mares-hoje__fonte {
  font-size: .85rem;
  line-height: 1.5;
  color: #4d5562;
  margin: 0;
  text-align: left;
}
.mares-hoje__mais {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .95rem;
}
.mares-hoje__mais::after {
  content: "\2192";
  margin-left: .35rem;
  text-decoration: none;
  display: inline-block;
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mares-hoje__mais:hover::after { transform: translateX(3px); }
}

/* Telemóveis muito estreitos (320 px): cabe «▲ Preia-mar» sem partir no hífen */
@media (max-width: 22.5rem) {
  .mares-hoje { padding: 1.1rem .9rem; }
  .mares-hoje .mares-hoje__mare { padding: .7rem .6rem .75rem; }
  .mares-hoje__tipo { font-size: .88rem; gap: .3rem; }
  .mares-hoje__hora { font-size: 1.6rem; }
}

@media (min-width: 40rem) {
  .mares-hoje { padding: 1.5rem 1.75rem; }
  .mares-hoje .mares-hoje__lista {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .mares-hoje .mares-hoje__lista > li:last-child:nth-child(odd) { grid-column: auto; }
  .mares-hoje .mares-hoje__mare { padding: .9rem 1.1rem 1rem; }
  .mares-hoje__hora { font-size: 2rem; }
}


/* ============================================================
   PÁGINA /pages/mares — 7 dias
   ============================================================ */
.page-main.mares-pagina { max-width: 1136px; margin: 0 auto; }
.page-main .mares-pagina__intro { max-width: 68ch; text-align: left; hyphens: none; }

.mares-semana { margin: 1.5rem 0 0; }

.mares-semana .mares-semana__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2rem;
}

/* Hoje: faixa tingida com o estado da maré e a tabela do dia */
.mares-semana__dia--hoje {
  background: var(--bg-links);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem .6rem;
  display: grid;
  gap: .9rem;
}
.mares-semana__dia--hoje .mares-estado { font-size: 1.1rem; }
.mares-semana .mares-semana__local {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: #4d5562;
  text-align: left;
  hyphens: none;
}

/* Colunas de largura fixa (46 / 30 / 24 %): as horas ficam alinhadas de uma tabela para a
   outra, com ou sem a marca «Próxima» (que vai por baixo do nome, sem alargar a coluna). */
.mares-tabela {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
}
.mares-tabela__legenda {
  caption-side: top;
  text-align: left;
  padding: 0 0 .45rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}
.mares-tabela__relativo {
  display: inline-block;
  margin-left: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: .12em;
  color: #4d5562;
}
.mares-tabela thead th:nth-child(1) { width: 46%; }
.mares-tabela thead th:nth-child(2) { width: 30%; }
.mares-tabela thead th {
  font-size: .85rem;
  font-weight: 600;
  color: #4d5562;
  text-align: left;
  padding: .5rem .5rem .35rem 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mares-tabela__nota { font-weight: 400; }
.mares-tabela tbody th,
.mares-tabela tbody td {
  padding: .55rem .5rem .55rem 0;
  border-bottom: 1px solid #e6ebf2;
  vertical-align: middle;
  text-align: left;
}
.mares-tabela tbody tr:last-child th,
.mares-tabela tbody tr:last-child td { border-bottom: 0; }
.mares-tabela th:last-child,
.mares-tabela td:last-child { padding-right: 0; }
.mares-tabela .mares-tabela__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mares-tabela__tipo {
  font-weight: 600;
  color: var(--navy);
}
.mares-tabela__tipo .mares-icone { margin-right: .4rem; vertical-align: .02em; }
.mares-tabela__tipo .mares-marca { display: table; margin: .2rem 0 0 1.1rem; } /* 1.1rem = ícone + espaço */
.mares-tabela__hora {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1f2733;
}
.mares-tabela tr.is-proxima .mares-tabela__hora { color: var(--navy-dark); }
.mares-tabela tr.is-passada th,
.mares-tabela tr.is-passada td,
.mares-tabela tr.is-passada .mares-tabela__hora { color: #666; }
.mares-tabela tr.is-passada .mares-tabela__hora { font-weight: 500; }
.mares-tabela tr.is-passada .mares-icone { opacity: .55; }

.mares-semana .mares-semana__falta {
  margin: 1.25rem 0 0;
  color: var(--text-light);
  text-align: left;
}

/* Nota legal por baixo da tabela */
.mares-nota {
  scroll-margin-top: 6rem; /* âncora #fonte (bloco da página inicial) abaixo do cabeçalho fixo */
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  max-width: 78ch;
}
.page-main .mares-nota p {
  font-size: .9rem;
  line-height: 1.7;
  color: #4d5562;
  text-align: left;
  hyphens: none;
  margin-bottom: .75rem;
}
.page-main .mares-nota h2 { font-size: 1.05rem; margin-top: 0; }

@media (min-width: 40rem) {
  .mares-semana .mares-semana__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mares-semana__dia--hoje { grid-column: 1 / -1; padding: 1.35rem 1.5rem .75rem; }
}

@media (min-width: 58rem) {
  .mares-semana .mares-semana__grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2.5rem; }
  /* Hoje ocupa a linha inteira: estado à esquerda, tabela à direita */
  .mares-semana__dia--hoje {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: 3rem;
    padding: 1.5rem 1.75rem 1rem;
  }
  .mares-semana__agora { padding-top: .2rem; }
  .mares-semana__dia--hoje .mares-estado { font-size: 1.35rem; line-height: 1.45; }
}

@media print {
  .mares-hoje, .mares-semana__dia--hoje { background: none; }
  .mares-marca { color: #000; background: none; border: 1px solid #000; }
}