/* =========================
   Residence Hub — FULL CSS
   - 3 sloupce na desktopu (gap 32px)
   - poměr 16:9
   - badge vpravo nahoře → na hover doprostřed (menší logo)
   - text VŽDY dole, HORIZONTÁLNĚ na střed
   - spodní gradient stále + celoplošné podbarvení (scrim) jen na hover
   - žádné zaoblení rohů
   ========================= */

/* --- GRID --- */
.rh-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
}
@media (max-width: 1200px) { .rh-grid { grid-template-columns: repeat(8, 1fr); gap: 15px; } }
@media (max-width: 768px)  { .rh-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } }

/* 3 sloupce (12/3=4); na tabletu 2 (8/4=2); na mobilu 1 (4/4=1) */
.rh-card { grid-column: span 4; }

/* --- KARTA + poměr stran --- */
.rh-box {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 0 !important;
  isolation: isolate;
}

/* 16:9 → 56.25% */
.rh-ratio { display: block; padding-top: 56.25%; }

/* Klikací vrstva (jen pro residence) — držíme nad textem */
.rh-hit { position: absolute; inset: 0; z-index: 7; }

/* --- POZADÍ --- */
.rh-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease, filter .35s ease;
  border-radius: 0 !important;
}
.rh-box:hover .rh-bg {
  transform: scale(1.05);
  filter: brightness(.94) contrast(1.05) saturate(1.05);
}

/* Spodní gradient — VŽDY přítomný (pro čitelnost titulků) */
.rh-gradient {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Celoplošné podbarvení — na hover se přimíchá jemný scrim */
.rh-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background .25s ease;
  pointer-events: none;
  z-index: 2;
}
.rh-box:hover .rh-scrim { background: rgb(0 0 0 / 50%); }

/* --- BADGE = jediné logo ---
   default: malý štítek vpravo nahoře
   hover: přesun doprostřed a mírné zvětšení (menší než plné logo) */
@media (min-width: 1600px) {
.rh-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  width: 84px;              /* výchozí malá velikost */
  height: auto;
  border-radius: 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition:
    top .35s ease,
    left .35s ease,
    right .35s ease,
    width .35s ease,
    transform .35s ease;
}
  }

@media (min-width: 1200px) and (max-width: 1600px) {
.rh-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  width: 60px;              /* výchozí malá velikost */
  height: auto;
  border-radius: 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition:
    top .35s ease,
    left .35s ease,
    right .35s ease,
    width .35s ease,
    transform .35s ease;
}
  }

@media (max-width: 1200px) {
.rh-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  width: 84px;              /* výchozí malá velikost */
  height: auto;
  border-radius: 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition:
    top .35s ease,
    left .35s ease,
    right .35s ease,
    width .35s ease,
    transform .35s ease;
}
  }

@media (min-width: 700px) and (max-width: 900px) {
.rh-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 6;
  width: 50px;              /* výchozí malá velikost */
  height: auto;
  border-radius: 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition:
    top .35s ease,
    left .35s ease,
    right .35s ease,
    width .35s ease,
    transform .35s ease;
}
  }

.rh-box:hover .rh-badge {
  right: auto;              /* uprostřed */
  left: 50%;
  top: 40%;
  width: min(170px, 28%);   /* cílová velikost (menší logo) */
  transform: translate(-50%, -50%) scale(1.02);
}

/* --- TITULEK: vždy dole, HORIZONTÁLNĚ na střed --- */
.rh-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 20px 18px 22px;
  color: #fff;
  text-align: center;       /* jen horizontální centrování */
}

@media (min-width: 1400px) {
.rh-title {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.2em, 2vw, 1.6em);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: font-size .35s ease;
}
.rh-box:hover .rh-title {
  font-size: clamp(1.1em, 1.8vw, 1.2em);
}
  }

@media (min-width: 768px) and (max-width: 1400px) {
.rh-title {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.1em, 1vw, 1.3em);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: font-size .35s ease;
}
.rh-box:hover .rh-title {
  font-size: clamp(1.0em, 1.2vw, 1.1em);
}
  }

@media (max-width: 500px) {
.rh-title {
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.1em, 1vw, 1.3em);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: font-size .35s ease;
}
.rh-box:hover .rh-title {
  font-size: clamp(1.0em, 1.2vw, 1.1em);
}
  }

//* =========================
   SPECIAL TILES (Sleva / Katalog) – 1:1 dle náhledu
   ========================= */

/* fotka pro speciály je viditelná a desaturovaná */
.is-special .rh-bg {
  display: block;
  filter: grayscale(100%) brightness(1.05) contrast(1.05);
  transition: filter .25s ease;
}

/* spodní gradient necháváme aktivní – pomáhá čitelnosti */
.is-special .rh-gradient {
  height: 46%;
  opacity: 1;
}

/* jemný celoplošný scrim v defaultu, na hover výrazně ztmaví */
.is-special .rh-scrim {
  background: rgb(255 255 255 / 10%);
  transition: background .25s ease;
}
.is-special .rh-box:hover .rh-scrim {
  background: rgb(255 255 255 / 55%);
}

/* rozvržení textů: vlevo a vertikálně na střed */
.is-special .rh-caption {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertikální střed */
  text-align: center;             /* vlevo */
  padding: 24px 24px 28px;
  color: #ffffff;                  /* tmavý text v defaultu */
}

/* typografie */
@media (min-width: 1400px) {
.is-special .rh-special-h {
  margin: 0;
  font-weight: 900;
  font-size: clamp(28px, 2.6vw, 42px);
  color: currentColor;          /* dědí z .rh-caption */
  text-shadow: none;
}
.is-special .rh-special-s {
  margin-top: 6px;
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .9;
  color: currentColor;
}
  }

@media (max-width: 1400px) {
.is-special .rh-special-h {
  margin: 0;
  font-weight: 900;
  font-size: clamp(20px, 2vw, 30px);
  color: currentColor;          /* dědí z .rh-caption */
  text-shadow: none;
}
.is-special .rh-special-s {
  margin-top: 6px;
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .9;
  color: currentColor;
}
  }

@media (max-width: 1200px) {
.is-special .rh-special-h {
  margin: 0;
  font-weight: 900;
  font-size: clamp(28px, 2.6vw, 42px);
  color: currentColor;          /* dědí z .rh-caption */
  text-shadow: none;
}
.is-special .rh-special-s {
  margin-top: 6px;
  font-size: clamp(14px, 1.2vw, 18px);
  opacity: .9;
  color: currentColor;
}
  }

/* CTA = plné červené tlačítko, lehce zaoblené jako ve vzoru */
.is-special .rh-special-cta { margin-top: 18px; }
.is-special .rh-btn {
  display: inline-block;
  background: #b3231d;          /* červená */
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: background .2s ease, transform .2s ease;
}
.is-special .rh-btn:hover {
  background: #a11f1a;
  transform: translateY(-1px);
}

/* na hover se text přepne do bílé (kontrast na tmavém scrimu) */
.is-special .rh-box:hover .rh-caption { color: #fff; }

/* badge u speciálních dlaždic nepoužíváme */
.is-special .rh-badge { display: none !important; }


/* --- RESET proti motivu --- */
.rh-card, .rh-box, .rh-grid img { border-radius: 0 !important; }
.rh-grid h1, .rh-grid h2, .rh-grid h3, .rh-grid p { margin: 0; }