/**
 * apartments.css — Fichas de los cinco apartamentos y visor de fotos.
 *
 * Una ficha por apartamento (portada + tira de miniaturas) en vez de un
 * mosaico de fotos sueltas: así se ve de quién es cada foto.
 * Depende de las variables de css/roadcycling.css, así que va después.
 */

.apartments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; }

.apt-card { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.apt-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* La imagen va en absoluto: si se deja en el flujo, una foto vertical
   estira el botón y se pierde el 3:2 (le pasaba a La Blava). */
.apt-card-cover { position: relative; display: block; width: 100%; padding: 0; border: none; background: #e9ecf2; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; }
.apt-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.apt-card-count { position: absolute; right: 12px; bottom: 12px; background: rgba(22, 28, 45, 0.78); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 5px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; }
.apt-card-count i { font-size: 0.7rem; }

.apt-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; text-align: left; }
.apt-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.apt-card-head h3 { font-size: 1.2rem; color: var(--color-secondary); margin: 0; }
.apt-card-sleeps { flex: 0 0 auto; font-size: 0.75rem; font-weight: 600; color: var(--color-grey); background: var(--color-light); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.apt-card-body p { font-size: 0.9rem; line-height: 1.55; color: var(--color-grey); margin: 0 0 16px; }

.apt-card-strip { margin-top: auto; display: flex; gap: 8px; }
.apt-card-mini { flex: 1 1 0; min-width: 0; padding: 0; border: none; border-radius: 8px; overflow: hidden; background: #e9ecf2; cursor: pointer; aspect-ratio: 1 / 1; transition: var(--transition); }
.apt-card-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apt-card-mini:hover { transform: scale(1.05); }
.apt-card-cover:focus-visible, .apt-card-mini:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ── Visor ─────────────────────────────────────────────────────────────── */
.apt-viewer { position: fixed; inset: 0; z-index: 200; background: rgba(12, 16, 26, 0.93); display: none; align-items: center; justify-content: center; padding: 56px 20px; }
.apt-viewer.is-open { display: flex; }
.apt-viewer img { max-width: min(1100px, 92vw); max-height: 78vh; object-fit: contain; border-radius: 8px; }
.apt-viewer-caption { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: #fff; font-size: 0.88rem; opacity: 0.85; margin: 0; }
.apt-viewer-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.apt-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.apt-viewer-nav.prev { left: 16px; }
.apt-viewer-nav.next { right: 16px; }
.apt-viewer button:hover { background: rgba(255, 255, 255, 0.28); }
.apt-viewer button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 560px) {
    .apt-viewer { padding: 56px 10px; }
    .apt-viewer-nav { width: 40px; height: 40px; font-size: 1.6rem; }
    .apt-viewer-nav.prev { left: 6px; }
    .apt-viewer-nav.next { right: 6px; }
}