/* ==========================================================================
   Lab 5 — Índice da coleção. Herda os labs 1 a 4.
   Cabeçalho de página "display" (migalhas e título em destaque) e grelha
   de países (country_grid): foto da sala, salas e nome do país.
   ========================================================================== */

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

/* ---------- Ritmo vertical: igual à peça e ao país ---------- */
.collection > .container > * + * { margin-top: var(--space-section); }

/* ---------- Grelha de países ---------- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(var(--countries-columns), minmax(0, 1fr));
  column-gap: var(--countries-column-gap);
  row-gap: var(--countries-row-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.country-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "rooms" "title";
  align-content: start;
}
.country-card__media { grid-area: media; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.country-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.country-card .country-card__rooms {
  grid-area: rooms;
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}
.country-card__title {
  grid-area: title;
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body-xl);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-body);   /* chat 18: sem maiúsculas */
}
.country-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 o país; a ligação continua a ser só uma */
.country-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.country-card__link:focus-visible { outline: none; box-shadow: none; }
.country-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.country-card:hover .country-card__link, .country-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .country-card__link:focus-visible { color: var(--color-link); }

/* Cards links (chat 27): a grelha de países é o desenho do Cards links. Colunas do bloco a partir
   de 1024px (3 por omissão); abaixo, 2. */
@media (min-width: 64em) {
  .country-grid--1 { --countries-columns: 1; }
  .country-grid--2 { --countries-columns: 2; }
  .country-grid--4 { --countries-columns: 4; }
}