@import '/../projects/base_peinture.scss';

/* ─── NOUVELLES PEINTURES (Sous le Soleil / Hommage Hockney) ─── */

.section-nouvelles {
  padding: 0 2rem 7rem;

  .nouvelles-grid {
    display: grid;
    grid-template-columns: 529px 529px;
    gap: 9rem;
    margin: 0 auto;
    width: fit-content;
  }

  .nouvelles-item {
    img {
      display: block;
      width: 529px;
      height: 529px;
      object-fit: cover;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
      transition: transform 0.3s ease-in-out;
      cursor: pointer;
    }

    img:hover {
      transform: scale(1) rotate(2deg);
    }
  }
}

@media screen and (max-width: 900px) {
  .section-nouvelles {
    padding: 0 1.5rem 4rem;

    .nouvelles-grid {
      grid-template-columns: 1fr;
      width: 100%;
      max-width: 529px;
      gap: 5rem;
    }

    .nouvelles-item a img {
      width: 100%;
      height: auto;
    }
  }
}

/* ─── BESTIAIRE COLLECTION ──────────────────────────────── */

.section-bestiaire {
  padding: 4rem 2rem 4rem;
  background: linear-gradient(to bottom, #ffffff 0%, #f7f3f0 10%, #f7f3f0 80%, #ffffff 100%);
  margin-bottom: 5rem;

  .bestiaire-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3.5rem;

    .bestiaire-header-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, #5c1c1c66);

      &:last-child {
        background: linear-gradient(to left, transparent, #5c1c1c66);
      }
    }
  }

  .bestiaire-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #5c1c1c;
    white-space: nowrap;
  }

  /* 80×80 cm — 4 colonnes qui remplissent toute la largeur */
  .bestiaire-grid--4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
  }

  /* 40×40 cm — 3 colonnes centrées sur 55 % de la largeur */
  .bestiaire-grid--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 55%;
    margin: 0 auto;
  }

  .bestiaire-footer {
    margin-top: 3.5rem;

    .bestiaire-footer-line {
      height: 1px;
      background: linear-gradient(to right, transparent, #5c1c1c55, transparent);
    }
  }

  .bestiaire-item {
    a {
      display: block;
      overflow: hidden;

      img {
        display: block;
        width: 100%;
        height: auto;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
      }

      &:hover img {
        transform: scale(1.02) rotate(1deg);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
      }
    }
  }
}

/* 1040px : passe à 2 colonnes pour que les images ne soient pas minuscules */
@media screen and (max-width: 1100px) {
  .section-bestiaire {
    .bestiaire-grid--4col {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.8rem;
    }
    .bestiaire-grid--3col {
      grid-template-columns: repeat(2, 1fr);
      max-width: 75%;
      gap: 1.8rem;
    }
  }
}

/* En dessous de 901px : 1 peinture par ligne, même gabarit que DIVERSITY */
@media screen and (max-width: 900px) {
  .section-bestiaire {
    padding: 3rem 1.2rem 3rem;

    .bestiaire-grid--4col {
      grid-template-columns: 1fr;
      gap: 5rem;
      margin-bottom: 0;

      .bestiaire-item {
        max-width: 529px;
        margin: 0 auto;
        width: 100%;
      }
    }

    .bestiaire-grid--3col {
      grid-template-columns: 1fr;
      max-width: 100%;
      gap: 5rem;
      margin-top: 5rem;

      .bestiaire-item {
        max-width: 350px;
        margin: 0 auto;
        width: 100%;
      }
    }
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#page-peinture {
    padding: 1rem 2rem;

    /* Estilos globales para el cuadrado de todos los contenedores de la pagina */
    .item {    
        
        img {
            transition: transform 0.3s ease-in-out;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
            cursor: pointer;
        }     
        img:hover {
            transform: scale(1) rotate(2deg);
            
        }   
        

    }

    /* Estilos para la linea 1 */
    .row-1 {
        display: grid;
        grid-template-columns: 1fr 1.2fr 0.9fr;
        grid-gap: 2rem;
        margin-bottom: 10rem;
    
        .container-img-row-1 {
            width: fit-content;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0 auto;    
            
            img {
                width: 100%;
                max-width: 529px;
                height: auto;
            }
        }
    }
    /* Estilos para las lineas 2-3-4 */
    .row-2-3-4 {
        display: flex;    
        justify-content: space-between;
        gap: 4rem;
    
        .item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 10rem;
        }
        .peinture-bigone {
            img {
                width: 100%;
                max-width: 960px;
                height: auto;
                object-fit: contain;
            }
        }
    
        .peinture-smallone {            
            img {
                display: block;
                width: 100%;
                max-width: 650px;
                max-height: 646px;
                object-fit: contain;
                margin: 0 auto;
            }
        }
    }

    /* Estilos para la linea 5 */
    .row-5 {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 10rem;
        gap: 4rem;

        .row-5-item {            
            img {
                width: 100%;
                max-width: 700px;
                height: auto;
            }
        }
    }

    /* Estilos para la linea 6 */
    .row-6 {
        display: flex;
        justify-content: center;
        margin-bottom: 10rem;

        img {
            width: 100%;
            max-width: 960px;
            height: auto;
        }
    }

    /* Estilos para la linea 7 */
    .row-7 {
        display: flex;
        justify-content: center;
        margin-bottom: 10rem;

        img {
            width: 100%;
            max-width: 1600px;
            height: auto;
        }
    }
    
}

@media screen and (max-width: 900px) {
    #page-peinture {

        /* Estilos para la linea 1 */
        .row-1 {
            grid-template-columns: 1fr;
            row-gap: 5rem;

            .container-img-row-1 {
                max-width: fit-content;
            }
        }

        /* Estilos para las lineas 2-3-4 */
        .row-2-3-4 {
            flex-direction: column;
            align-items: center;
            gap: 5rem;

            .peinture-bigone {
                margin-bottom: 0;
            }
            .peinture-smallone {
                margin-bottom: 5rem;
            }
        }

        /* Estilos para la linea 5 */
        .row-5 {
            flex-direction: column;
            gap: 5rem;

            .row-5-item {
                max-width: fit-content;
                margin: 0 auto;
            }
        }
    }
}

@media screen and (max-width: 600px) {
    #page-peinture {
        padding: 1rem;

        /* Estilos para la linea 1 */
        .row-1 {
            .container-img-row-1 {
                width: 100%;
            }
        }
    }
}