/* ============================================================
   tiles.css - grelha de tiles do my bygga (menu principal e hubs
   de sub-módulos). Ficheiro único, partilhado pela plataforma
   (assets/css/style.css) e pelas páginas do PAT, que têm folhas
   de estilo próprias. Foi essa duplicação que fez a app-bar do
   PAT ficar para trás; aqui não se repete.
   ============================================================ */
.area-reservada-platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 1080px) {
  .area-reservada-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 148px;
  border: 1px solid rgba(29,31,36,0.15);
  padding: 1.75rem 1rem 1.5rem;
  transition: border-color 0.2s, background 0.2s;
}
.tile-card:hover { border-color: var(--cor-base); background: rgba(29,31,36,0.03); }
.tile-card.is-locked { opacity: 0.55; pointer-events: none; cursor: default; }
/* A etiqueta tem de se ler mesmo com o tile esbatido. */
.tile-card.is-locked .tile-soon-tag { opacity: 1; font-weight: 500; }
.tile-card.is-soon { opacity: 0.4; pointer-events: none; position: relative; }
.tile-soon-tag {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

/* Hubs de sub-módulos (Definições, Entidades, Ferramentas, Dados &
   Regulamentos): seguem o menu principal - mesmo tamanho de tile,
   mesmo espaçamento, conjunto centrado nos dois eixos. A única
   diferença é o número de colunas, até 4, porque têm poucos itens
   (Filipe, 18/08/2026: o browser e as apps devem comportar-se o mais
   parecido possível). */
.area-reservada-card-tiles4 { max-width: none; }

/* ---- Uma só medida de tile, para o menu principal e para os hubs ----
   O lado sai do ECRÃ, não da largura do contentor: os hubs estão dentro
   de uma caixa estreita e o cálculo pela caixa dava tiles minúsculos.
   É o menor entre o que a largura dá para 6 colunas e o que a altura dá
   para 2 filas - assim um tile de sub-módulo tem exatamente o tamanho de
   um tile de módulo, e nunca há scroll. */
.area-reservada-platform-grid-6,
.area-reservada-platform-grid-4 {
  --espacoTile: clamp(0.5rem, 1.2vw, 1rem);
  /* Largura realmente utilizável: a .inner está limitada a 1200px e
     traz 40px de margem de cada lado. Assumir o ecrã inteiro dava seis
     colunas que não cabiam, e a grelha caía para quatro. */
  --larguraUtil: calc(min(100vw, 1200px) - 80px);
  --ladoTile: min(
    calc((var(--larguraUtil) - 5 * var(--espacoTile)) / 6),
    calc((100dvh - 52px - 72px - 4rem - var(--espacoTile)) / 2)
  );
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--ladoTile));
  justify-content: center;
  align-content: center;
  gap: var(--espacoTile);
  margin-bottom: 0;
}
.area-reservada-platform-grid-6 { max-width: calc(6 * var(--ladoTile) + 5 * var(--espacoTile)); margin-inline: auto; }
/* Os hubs cabem numa linha até seis tiles, como o menu principal -
   só passam a duas quando forem mais de seis (Filipe, 18/08/2026).
   Estava limitado a quatro, e o quinto tile caía para baixo. */
.area-reservada-platform-grid-4 { max-width: calc(6 * var(--ladoTile) + 5 * var(--espacoTile)); margin-inline: auto; }

.area-reservada-platform-grid-6 .tile-card,
.area-reservada-platform-grid-4 .tile-card {
  aspect-ratio: 1;
  min-height: 0;
  padding: clamp(0.4rem, 1.2vh, 1rem) 0.35rem;
  overflow: hidden;
}
.area-reservada-platform-grid-6 .tile-icon,
.area-reservada-platform-grid-4 .tile-icon { margin-bottom: clamp(0.4rem, 1.4vh, 1.25rem); }
.area-reservada-platform-grid-6 .tile-icon svg,
.area-reservada-platform-grid-4 .tile-icon svg {
  width: clamp(22px, 3vw, 44px); height: clamp(22px, 3vw, 44px);
}
.area-reservada-platform-grid-6 .tile-card h3,
.area-reservada-platform-grid-4 .tile-card h3 {
  font-size: clamp(0.5rem, 0.8vw, 0.875rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
  hyphens: auto;
}

/* Em ecrãs estreitos as filas de seis deixam de fazer sentido. Aqui as
   colunas passam a fracções: com medida fixa em px o número de colunas
   dependia da largura exata do contentor e caía para uma só. */
@media (max-width: 860px) {
  .area-reservada-platform-grid-6,
  .area-reservada-platform-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    max-width: none;
  }
}
@media (max-width: 520px) {
  .area-reservada-platform-grid-6,
  .area-reservada-platform-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A secção do menu traz 7rem de padding vertical; com a grelha à altura
   do ecrã isso empurrava-a para baixo e obrigava a rolar. Encolhe e
   centra-se - vale para o menu principal e para os hubs. */
.section:has(> .inner > #ar-tiles-view:not([hidden])),
.section:has(> .inner > .area-reservada-card-tiles4:not([hidden])) {
  /* A secção vive entre a barra (52px) e o rodapé (72px). Centrada nela
     própria, o conjunto ficava 10px acima do centro do ecrã - metade da
     diferença. A margem de cima leva essa compensação. */
  padding: calc(2rem + 20px) 0 2rem;
  min-height: calc(100dvh - 52px - 72px);
  display: flex;
  align-items: center;
}

.tile-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-base);
  margin-bottom: 1.75rem;
}
.tile-icon svg { width: 56px; height: 56px; }
.tile-card h3 {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

@media (max-width: 640px) {
  .area-reservada-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Envelope para hubs fora da plataforma (páginas do PAT, que não têm
   .area-reservada-inner). Mesma largura de 4 tiles. */
.tiles-hub { width: 100%; margin: 0 auto; }