/* ==========================================================================
   Lab 4 — País. Herda os tokens do lab 1, os componentes do lab 2 e do lab 3.
   Cabeçalho de página "país" (mapa, título, salas, introdução), zonas de
   blocos antes e depois das peças, filtros por categoria e grelha de peças.
   ========================================================================== */

:root {
  --pieces-columns: 2;
  --pieces-column-gap: var(--space-3);   /* 16 */
  --pieces-row-gap: var(--space-5);      /* 36 em todas as larguras (revisto no lab 9; antes 24 em telemóvel) */
}
@media (min-width: 48em) { :root { --pieces-columns: 3; --pieces-column-gap: var(--grid-gap); --pieces-row-gap: var(--space-5); } }
@media (min-width: 64em) { :root { --pieces-columns: 5; --pieces-column-gap: var(--space-6); } }

.country [hidden] { display: none; }

/* ---------- Ritmo vertical: igual à peça ---------- */
.country__head { padding-top: 0; }
.country > .container > * + * { margin-top: var(--space-section); }

/* Migalhas: as reticências só aparecem quando há um nível escondido à frente */
@media (max-width: 47.99em) {
  .breadcrumbs__list:not(:has(> :nth-child(5))) > .breadcrumbs__more { display: none; }
}

/* ---------- Cabeçalho de país: mapa, título com salas, introdução ---------- */
.country__intro-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 64em) { .country__intro-grid { margin-top: var(--space-6); } }
.country__map { margin: 0; }
.country__map img { display: block; width: 100%; height: auto; }
/* O mapa é branco sobre transparente: no tema claro passa a preto */
[data-theme="light"] .country__map img { filter: invert(1); }
.country__title { margin: 0; font-size: var(--text-h1-entry); }
.country__intro { max-width: var(--measure); margin-top: var(--space-block); }
.country__intro p { margin: 0; }
/* Chat 36: o espaço entre parágrafos da introdução, como no texto */
.country__intro p + p { margin-top: var(--space-paragraph); }

@media (min-width: 64em) {
  .country__intro-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 0; align-items: start; }
  .country__map { grid-column: 1 / span 4; grid-row: 1; }
  .country__heading { grid-column: 5 / span 8; grid-row: 1; padding-top: var(--space-4); }
  /* A introdução sobe para dentro da altura do mapa, como no desenho atual */
  .country__intro { grid-column: 7 / span 6; grid-row: 2; margin-top: calc(-1 * var(--space-7)); }
  /* Sem mapa (0.21.0, chat 34): o título fica à esquerda, nas colunas 1 a 6; a introdução não muda */
  .country__intro-grid--no-map .country__heading { grid-column: 1 / span 6; }
}

/* ---------- Filtros: traço entre opções, como as migalhas (sem traço antes da primeira) ----------
   Opção ativa: fundo na cor do texto e texto na cor do fundo (branco e preto no escuro, o
   inverso no claro). Todas as opções têm a mesma margem interior: a fila não mexe ao trocar. */
.filters__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--breadcrumb-gap); margin: 0; padding: 0; list-style: none; }
.filters__item { display: flex; align-items: center; gap: var(--breadcrumb-gap); }
.filters__item::before { content: ""; width: 1.125rem; height: 2px; background: currentColor; flex: none; }
.filters__item:first-child::before { display: none; }
.filters__button {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 0;
  color: var(--color-link);
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--ls-body);   /* chat 18: sem maiúsculas, espaçamento do texto */
  line-height: var(--lh-tight);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
  cursor: pointer;
  transition: color var(--duration-fade) var(--ease), background-color var(--duration-fade) var(--ease), text-decoration-thickness var(--duration-fade) var(--ease);
}
.filters__button:hover { color: var(--color-link-hover); }
.filters__button[aria-pressed="true"] { color: var(--color-bg); background: var(--color-text); text-decoration-line: none; cursor: default; }

/* ---------- Filtros em telemóvel: select (combobox de escolha única do site SCML, Fix 07) ----------
   Abaixo de 768px os botões dão lugar ao select; em desktop ficam os botões.
   Desenho próprio, diferente do índice (chat 17): sem título à vista (como em desktop; o nome do
   grupo fica para leitores de ecrã), campo de 48px com linha cinza de 2px em baixo e chevron à
   direita. Campo e opções com 52px e o mesmo fundo (--color-surface: --neutral-20 / --neutral-90).
   A opção escolhida com o filete cinza de 4px à esquerda, como a página atual no submenu.
   Espaço: 24px do título ao select e 36px do select à grelha. Hover das opções: sublinhado.
   Não fica preso ao topo. */
.filter-select { --filter-row: 3.25rem; }   /* 52px */
@media (max-width: 47.99em) {
  .listing .filters.has-select { margin-top: var(--space-4); }
  .filters.has-select + .listing__grid,
  .filters.has-select + .pieces__grid { margin-top: var(--space-5); }
}
.filter-select { display: none; }
@media (max-width: 47.99em) {
  .filters.has-select .filters__list { display: none; }
  .filter-select { position: relative; display: block; }
}
.filter-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--filter-row);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 2px solid var(--color-text-subtle);
  color: var(--color-text);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: var(--ls-body);
  text-align: start;
  cursor: pointer;
}
.filter-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-select__chevron { flex: none; width: 1.5rem; height: 1.5rem; }
.filter-select__trigger[aria-expanded="true"] .filter-select__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .filter-select__chevron { transition: transform var(--duration-motion) var(--ease); } }
.filter-select__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  max-height: calc(6 * var(--filter-row));
  overflow-y: auto;
  background: var(--color-surface);
}
.filter-select__list[hidden] { display: none; }
/* A lista recebe o foco ao abrir; o foco à vista é o anel da opção em destaque */
.filter-select__list:focus-visible { outline: none; box-shadow: none; }
.filter-select__option {
  display: flex;
  align-items: center;
  min-height: var(--filter-row);
  padding: 0 var(--space-3);
  border-inline-start: 4px solid transparent;
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--lh-tight);
  cursor: pointer;
}
.filter-select__option + .filter-select__option { border-top: var(--border-width) solid var(--color-divider); }
.filter-select__option[aria-selected="true"] { border-inline-start-color: var(--color-text-subtle); }
@media (hover: hover) { .filter-select__option:hover { text-decoration: underline; text-underline-offset: 0.3em; } }
/* Opção em destaque ao navegar com o teclado: o anel de foco, por dentro */
.filter-select__option.is-active { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }

/* ---------- Grelha de peças ---------- */
.pieces__grid {
  display: grid;
  grid-template-columns: repeat(var(--pieces-columns), minmax(0, 1fr));
  column-gap: var(--pieces-column-gap);
  row-gap: var(--pieces-row-gap);
  align-items: start;
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}
.piece-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "title" "details" "inventory";
  align-content: start;
}
.piece-card__media { grid-area: media; margin: 0; overflow: hidden; }
/* Hover 3D: regra partilhada no CSS do lab 3 (só a imagem se mexe; o cartão nunca) */
.piece-card__media img { display: block; width: 100%; height: auto; }
.piece-card__title { grid-area: title; margin: var(--space-3) 0 0; font-family: var(--font-body); letter-spacing: var(--ls-body); font-size: var(--text-body-xl); }
.piece-card__link {
  color: var(--color-link);
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fade) var(--ease);
}
/* O cartão inteiro abre a peça; a ligação continua a ser só uma */
.piece-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.piece-card__link:focus-visible { outline: none; box-shadow: none; }
.piece-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.piece-card:hover .piece-card__link, .piece-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .piece-card__link:focus-visible { color: var(--color-link); }
.piece-card__details { grid-area: details; margin: var(--space-2) 0 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-muted); }
/* Inventário por baixo da ficha, sem badge, a 14px; o mesmo espaço do título para a ficha (chat 38) */
.piece-card .piece-card__inventory { grid-area: inventory; margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }