/* ==========================================================
   AUTOCLIMAS - GALERÍA COMPACTA RESPONSIVE

   Escritorio grande:
   conserva la galería original.

   <= 1280px:
   cada categoría se convierte en una tarjeta tipo "deck".
   ========================================================== */


/* En desktop grande el control compacto no existe visualmente */
.gallery-group__card-toggle{
  display:none;
}


/* ==========================================================
   TABLET / MINI LAPTOP / MÓVIL
   ========================================================== */

@media (max-width:1280px){

  .gallery-page.gallery-cards-ready .gallery-group{
    position:relative;

    padding:18px;

    border:
      1px solid
      rgba(255,255,255,.09);

    border-radius:20px;

    background:
      linear-gradient(
        145deg,
        rgba(15,37,54,.96),
        rgba(7,20,31,.98)
      );

    box-shadow:
      0 18px 42px
      rgba(0,0,0,.20);

    overflow:hidden;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group + .gallery-group{
    margin-top:28px;
  }


  /* ------------------------------------------
     TÍTULO REAL DE CADA CATEGORÍA
     ------------------------------------------ */

  .gallery-page.gallery-cards-ready
  .gallery-group__heading{
    position:relative;
    z-index:4;

    margin-bottom:16px;
  }


  /* ------------------------------------------
     BOTÓN / TARJETA COMPLETA
     ------------------------------------------ */

  .gallery-group__card-toggle{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    border:0;

    background:transparent;

    color:inherit;

    font:inherit;

    text-align:left;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
  }


  .gallery-group__card-toggle:focus-visible{
    outline:
      3px solid
      rgba(30,111,235,.75);

    outline-offset:5px;

    border-radius:14px;
  }


  /* ------------------------------------------
     MAZO DE 3 FOTOGRAFÍAS
     ------------------------------------------ */

  .gallery-deck{
    position:relative;

    display:block;

    width:100%;

    height:clamp(230px,30vw,330px);

    margin:
      4px 0
      20px;

    perspective:1000px;
  }


  .gallery-deck__card{
    position:absolute;

    left:50%;
    top:50%;

    display:block;

    width:min(72%,440px);

    aspect-ratio:4 / 3;

    overflow:hidden;

    border:
      3px solid
      rgba(255,255,255,.92);

    border-radius:16px;

    background:#0d1d29;

    box-shadow:
      0 16px 34px
      rgba(0,0,0,.38);

    transform-origin:center;

    transition:
      transform .28s ease,
      box-shadow .28s ease;
  }


  .gallery-deck__card img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border-radius:12px;
  }


  /*
     Las 3 fotografías forman el efecto
     de cartas/naipes.
  */

  .gallery-deck__card:nth-child(1){
    z-index:1;

    transform:
      translate(-55%,-48%)
      rotate(-7deg);
  }


  .gallery-deck__card:nth-child(2){
    z-index:2;

    transform:
      translate(-45%,-50%)
      rotate(7deg);
  }


  .gallery-deck__card:nth-child(3){
    z-index:3;

    transform:
      translate(-50%,-52%)
      rotate(0deg);
  }


  .gallery-group__card-toggle:hover
  .gallery-deck__card:nth-child(3){
    transform:
      translate(-50%,-54%)
      scale(1.015);
  }


  /* ------------------------------------------
     BOTÓN VER GALERÍA
     ------------------------------------------ */

  .gallery-group__card-meta{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    width:fit-content;

    min-height:44px;

    margin:
      0 auto
      2px;

    padding:
      10px
      17px;

    border:
      1px solid
      rgba(255,255,255,.14);

    border-radius:999px;

    background:#1e6feb;

    color:#fff;

    font-size:14px;
    font-weight:800;

    line-height:1;

    letter-spacing:.01em;

    box-shadow:
      0 8px 20px
      rgba(0,0,0,.18);
  }


  .gallery-group__card-meta::after{
    content:"";

    width:8px;
    height:8px;

    border-right:
      2px solid currentColor;

    border-bottom:
      2px solid currentColor;

    transform:
      rotate(45deg)
      translateY(-2px);

    transition:
      transform .25s ease;
  }


  /* ========================================================
     ESTADO CERRADO
     ======================================================== */

  .gallery-page.gallery-cards-ready
  .gallery-group:not(.is-open)
  > .gallery-page__grid{
    display:none;
  }


  /* ========================================================
     ESTADO ABIERTO
     ======================================================== */

  .gallery-page.gallery-cards-ready
  .gallery-group.is-open
  > .gallery-page__grid{
    display:grid;

    margin-top:18px;
  }


  /*
     Una vez abierta no necesitamos volver
     a mostrar las tres cartas grandes.
  */

  .gallery-page.gallery-cards-ready
  .gallery-group.is-open
  .gallery-deck{
    display:none;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group.is-open
  .gallery-group__card-toggle{
    margin-top:2px;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group.is-open
  .gallery-group__card-meta{
    background:
      rgba(30,111,235,.14);

    border-color:
      rgba(30,111,235,.55);

    color:#fff;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group.is-open
  .gallery-group__card-meta::after{
    transform:
      rotate(225deg)
      translate(-2px,-2px);
  }
}


/* ==========================================================
   TABLET PEQUEÑA
   ========================================================== */

@media (max-width:820px){

  .gallery-page.gallery-cards-ready
  .gallery-group{
    padding:
      17px 15px
      18px;

    border-radius:18px;
  }


  .gallery-deck{
    height:clamp(220px,43vw,310px);

    margin-bottom:17px;
  }


  .gallery-deck__card{
    width:min(76%,390px);
  }
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width:560px){

  .gallery-page.gallery-cards-ready
  .gallery-group{
    padding:
      15px 12px
      17px;

    border-radius:17px;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group + .gallery-group{
    margin-top:20px;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group__heading{
    margin-bottom:8px;
  }


  .gallery-page.gallery-cards-ready
  .gallery-group__heading h2{
    font-size:23px;
    line-height:1.12;
  }


  .gallery-deck{
    height:235px;

    margin:
      5px 0
      13px;
  }


  .gallery-deck__card{
    width:min(78%,320px);

    border-width:2px;

    border-radius:14px;
  }


  .gallery-group__card-meta{
    min-height:43px;

    padding:
      10px
      15px;

    font-size:13px;
  }


  /*
     Al abrir una categoría,
     las fotos continúan una por una,
     grandes y fáciles de ver.
  */

  .gallery-page.gallery-cards-ready
  .gallery-group.is-open
  > .gallery-page__grid{
    margin-top:15px;
  }
}


/* ==========================================================
   REDUCIR MOVIMIENTO
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  .gallery-deck__card,
  .gallery-group__card-meta::after{
    transition:none!important;
  }
}