/* ============================================================
   BLOQUE DE APARTAMENTOS GLOBAL (landings de Granada)
   Duplicado visual de .global-hotels* (postload-style.css ~L7848).
   Reutilizan sin redefinir: .section-heading*, .content-holder__text-holder,
   .show-more, .icon-arrow-right, .h1
   Base tipográfica del proyecto: html { font-size: 10px } → 1rem = 10px
   ============================================================ */

.global-apartments {
  padding: var(--separation-section-mobile) 0;
  background-color: var(--secondary-color);
  margin-bottom: var(--separation-section-mobile);
}

/* Cabecera / descripción del bloque */
.global-apartments__description .section-heading__heading-holder {
  text-align: center;
}

.global-apartments__description .content-holder__text-holder {
  text-align: center;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 3rem;
}

/* Contenedor del carrusel: el desplazamiento en sí lo gestiona el JS del slider */
.global-apartments__slider {
  position: relative;
  width: 100%;
}

/* Tarjeta de apartamento */
.global-apartments__item {
  padding: 1.5rem;
}

.global-apartments__item__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 767 / 382;
  object-fit: cover;
}

.global-apartments__item__text {
  display: flex !important;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s;
  margin: 0 1.5rem;
  padding: 3rem 1.5rem;
}

/* Efecto hover/foco: la ficha sube y oscurece, igual que en .global-hotels */
.global-apartments__item:hover .global-apartments__item__text,
.global-apartments__item:focus-within .global-apartments__item__text {
  transform: translateY(-4rem);
  background: rgba(var(--primary-color-rgb), 0.9);
}

.global-apartments__item:hover .global-apartments__item__text h3,
.global-apartments__item:hover .global-apartments__item__text .section-heading__text-block,
.global-apartments__item:hover .global-apartments__item__text .show-more,
.global-apartments__item:hover .global-apartments__item__text .show-more .icon-arrow-right,
.global-apartments__item:focus-within .global-apartments__item__text h3,
.global-apartments__item:focus-within .global-apartments__item__text .section-heading__text-block,
.global-apartments__item:focus-within .global-apartments__item__text .show-more,
.global-apartments__item:focus-within .global-apartments__item__text .show-more .icon-arrow-right {
  color: var(--secondary-color);
}

/* Foco visible accesible en la tarjeta (WCAG 2.1 AA) */
.global-apartments__item a:focus-visible {
  outline: 0.2rem solid var(--secondary-color);
  outline-offset: -0.2rem;
}

/* ============================================================
   FLECHAS DEL CARROUSEL (Slick)
   Réplica visual de .hotel-menu__arrow (postload-style.css ~L7892
   y preload/layout-shift.css ~L135): mismo círculo, mismo icono,
   misma posición sobre el slider. Solo cambia el selector porque
   el carrusel de apartamentos usa sus propias clases
   (.global-apartments__arrow) generadas por granada-apartments.js.
   .slick-arrow (postload-style.css ~L3817) ya aporta cursor:pointer
   y z-index:10 de forma genérica; aquí solo se define lo propio
   del círculo (tamaño, color, posición).
   ============================================================ */
.global-apartments__slider .global-apartments__arrow {
  position: absolute;
  top: 33%;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--secondary-color);
}

.global-apartments__arrow img {
  width: 1.1rem;
}

.global-apartments__arrow--prev {
  left: 2rem;
}

.global-apartments__arrow--next {
  right: 2rem;
}

/* Foco visible accesible en las flechas (WCAG 2.1 AA) */
.global-apartments__arrow:focus-visible {
  outline: 0.2rem solid var(--primary-color);
  outline-offset: 0.2rem;
}

/* Desktop pequeño: 992px - 1920px */
@media (min-width: 992px) {
  .global-apartments {
    padding: var(--separation-section-desktop) 0;
    margin-bottom: var(--separation-section-desktop);
  }

  .global-apartments__item__text {
    margin: 0 4rem;
  }

  .global-apartments__slider .global-apartments__arrow {
    top: 32%;
    width: 6rem;
    height: 6rem;
  }
}

/* Desktop grande: mayor de 1920px */
@media (min-width: 1920px) {
  .global-apartments__description .content-holder__text-holder {
    max-width: 110rem;
  }

  .global-apartments__item {
    padding: 2rem;
  }

  .global-apartments__item__text {
    margin: 0 5rem;
    padding: 3.5rem 2rem;
  }
}

/* ============================================================
   ANTI-CLS: revert del ocultamiento del preload
   Pareja de preload/layout-shift.css (.global-apartments__item
   display:none / :first-child display:block). Una vez Slick ha
   inicializado el carrusel, se revierte el ocultamiento para que
   todas las tarjetas queden visibles dentro del track.
   Breakpoint 1023px: coincide con el "breakpoint: 1024" de Slick
   en js/modules/granada-apartments.js (mismo criterio que usa
   .global-hotels__item en postload-style.css).
   ============================================================ */
@media (max-width: 1023px) {
  .global-apartments__item {
    display: block;
  }
}