/* =============================================================
   TZ Hotel Districts Grid — 17.07.2026
   Static responsive district tiles for /hotel-booking
   Prefix: .fcc-hg  |  Linked only on the hotel hub page
   ============================================================= */
.fcc-hg {
  --fcc-gold: #a8863f;
  --fcc-ink: #1a1a1a;
  --fcc-cream: #f2f0ec;
  --fcc-hairline: #e4dfd3;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--fcc-cream);
  color: var(--fcc-ink);
  padding: 56px 0 56px;
}
.fcc-hg * { box-sizing: border-box; margin: 0; padding: 0; }

.fcc-hg__head { text-align: center; padding: 0 20px 40px; }
.fcc-hg__eyebrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--fcc-gold); font-weight: bold;
}
.fcc-hg__title { font-size: clamp(24px, 4vw, 34px); font-weight: normal; margin-top: 8px; }
.fcc-hg__rule { width: 54px; height: 2px; background: var(--fcc-gold); margin: 16px auto 0; }

.fcc-hg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px 22px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  list-style: none;
}

.fcc-hg__tile a {
  display: block; text-decoration: none; color: inherit; outline: none;
}
.fcc-hg__imgbox {
  border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2;
  border: 1px solid var(--fcc-hairline);
  background: #e9e6df;
}
.fcc-hg__imgbox img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease;
}
.fcc-hg__tile a:hover .fcc-hg__imgbox img,
.fcc-hg__tile a:focus-visible .fcc-hg__imgbox img { transform: scale(1.08); }

.fcc-hg__name {
  font-size: 18px; margin-top: 12px; font-weight: normal;
  transition: color .3s ease;
}
.fcc-hg__tile a:hover .fcc-hg__name,
.fcc-hg__tile a:focus-visible .fcc-hg__name { color: var(--fcc-gold); }

.fcc-hg__count {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #8a8578; margin-top: 4px;
}

.fcc-hg__line {
  width: 26px; height: 2px; background: var(--fcc-gold);
  margin-top: 10px; transition: width .4s ease;
}
.fcc-hg__tile a:hover .fcc-hg__line,
.fcc-hg__tile a:focus-visible .fcc-hg__line { width: 100%; }

.fcc-hg__tile a:focus-visible .fcc-hg__imgbox {
  outline: 2px solid var(--fcc-gold); outline-offset: 3px;
}

@media (max-width: 560px) {
  .fcc-hg__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; padding: 0 16px; }
  .fcc-hg__name { font-size: 15px; margin-top: 9px; }
  .fcc-hg__count { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fcc-hg__imgbox img, .fcc-hg__line, .fcc-hg__name { transition: none; }
}