/* Page Galerie — styles owned by galerie/index.php */

.galerie-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-encre);
}

.galerie-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.galerie-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galerie-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 49, 58, 0.1) 0%, rgba(38, 49, 58, 0.55) 55%, rgba(38, 49, 58, 0.85) 100%);
}

.galerie-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  padding-block-end: var(--spacing-6);
  color: var(--color-porcelaine);
}

.galerie-hero__content .text-overline {
  color: var(--color-laiton);
  margin-block-end: var(--spacing-2);
}

.galerie-hero__content h1 {
  color: var(--color-porcelaine);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: var(--leading-display);
  margin-block-end: var(--spacing-4);
  max-width: 60%;
}

.galerie-hero__lead {
  max-width: 60%;
  color: var(--color-porcelaine);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-block-end: 0;
}

.galerie-philosophie {
  background-color: var(--color-porcelaine);
}

.galerie-philosophie__inner {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.galerie-philosophie__inner .text-overline {
  margin-block-end: 0;
}

.galerie-philosophie__inner h2 {
  margin-block-end: 0;
}

.galerie-philosophie__lead,
.galerie-philosophie__inner p {
  margin-block-end: 0;
}

.galerie-philosophie__quote {
  max-width: 60%;
  margin-inline: auto;
  margin-block-start: var(--spacing-4);
  margin-block-end: 0;
  padding: var(--spacing-4);
  background-color: rgba(126, 136, 121, 0.18);
  border-inline-start: 2px solid var(--color-laiton);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-style: italic;
  font-weight: 300;
  line-height: var(--leading-h3);
  color: var(--color-encre);
}

.galerie-plats {
  background-color: var(--color-porcelaine);
}

.galerie-plats__header {
  max-width: 80%;
  margin-block-end: var(--spacing-5);
}

.galerie-plats__header .text-overline {
  margin-block-end: var(--spacing-2);
}

.galerie-plats__header h2 {
  margin-block-end: var(--spacing-3);
}

.galerie-plats__intro {
  max-width: 80%;
  margin-block-end: 0;
}

.galerie-plats__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--spacing-4);
  align-items: start;
}

.galerie-plats__item {
  margin-block-end: 0;
  min-width: 0;
}

.galerie-plats__item a {
  display: block;
  border-radius: var(--radius-3);
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.galerie-plats__item a:hover {
  opacity: 0.85;
}

.galerie-plats__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-3);
  transition: transform var(--transition-fast);
}

.galerie-plats__item a:hover img {
  transform: scale(1.03);
}

.galerie-plats__item figcaption {
  margin-block-start: var(--spacing-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-encre);
}

.galerie-interieur {
  background-color: var(--color-calcaire);
}

.galerie-interieur__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-5);
  align-items: center;
}

.galerie-interieur__content {
  min-width: 0;
}

.galerie-interieur__content .text-overline {
  margin-block-end: var(--spacing-2);
}

.galerie-interieur__content h2 {
  margin-block-end: var(--spacing-3);
}

.galerie-interieur__content p {
  margin-block-end: var(--spacing-3);
}

.galerie-interieur__content p:last-child {
  margin-block-end: 0;
}

.galerie-interieur__media {
  margin-block-end: 0;
  min-width: 0;
}

.galerie-interieur__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-3);
  display: block;
}

.galerie-interieur__media figcaption {
  margin-block-start: var(--spacing-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-encre);
}

.galerie-salons {
  background-color: var(--color-porcelaine);
}

.galerie-salons__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-5);
  align-items: center;
}

.galerie-salons__media {
  margin-block-end: 0;
  min-width: 0;
}

.galerie-salons__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-3);
  display: block;
}

.galerie-salons__media figcaption {
  margin-block-start: var(--spacing-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-encre);
}

.galerie-salons__content {
  min-width: 0;
  text-align: right;
}

.galerie-salons__content .text-overline {
  margin-block-end: var(--spacing-2);
}

.galerie-salons__content h2 {
  margin-block-end: var(--spacing-3);
}

.galerie-salons__content p {
  margin-block-end: var(--spacing-3);
}

.galerie-salons__content p:last-child {
  margin-block-end: 0;
}

.galerie-casino {
  background-color: rgba(126, 136, 121, 0.18);
}

.galerie-casino__header {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--spacing-5);
}

.galerie-casino__header .text-overline {
  margin-block-end: var(--spacing-2);
}

.galerie-casino__header h2 {
  margin-block-end: var(--spacing-3);
}

.galerie-casino__intro {
  margin-block-end: 0;
}

.galerie-casino__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.galerie-casino__item {
  margin-block-end: 0;
  min-width: 0;
}

.galerie-casino__item a {
  display: block;
  border-radius: var(--radius-3);
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.galerie-casino__item a:hover {
  opacity: 0.85;
}

.galerie-casino__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-3);
}

.galerie-casino__item figcaption {
  margin-block-start: var(--spacing-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-encre);
}

.galerie-ambiance {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-encre);
}

.galerie-ambiance__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.galerie-ambiance__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galerie-ambiance__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 49, 58, 0.1) 0%, rgba(38, 49, 58, 0.45) 55%, rgba(38, 49, 58, 0.8) 100%);
}

.galerie-ambiance__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  padding-block-end: var(--spacing-5);
  color: var(--color-porcelaine);
}

.galerie-ambiance__content .text-overline {
  color: var(--color-laiton);
  margin-block-end: var(--spacing-2);
}

.galerie-ambiance__content h2 {
  color: var(--color-porcelaine);
  margin-block-end: var(--spacing-3);
  max-width: 50%;
}

.galerie-ambiance__content p {
  max-width: 50%;
  color: var(--color-porcelaine);
  margin-block-end: 0;
}

.galerie-reservation {
  background-color: var(--color-bordeaux);
  color: var(--color-porcelaine);
}

.galerie-reservation__inner {
  max-width: 60%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.galerie-reservation__inner .text-overline {
  color: var(--color-laiton);
  margin-block-end: 0;
}

.galerie-reservation__inner h2 {
  color: var(--color-porcelaine);
  margin-block-end: 0;
}

.galerie-reservation__lead {
  color: var(--color-porcelaine);
  margin-block-end: 0;
}

.galerie-reservation__contact {
  color: var(--color-porcelaine);
  margin-block-end: 0;
}

.galerie-reservation__button {
  margin-block-start: var(--spacing-2);
}

@media (max-width: 1024px) {
  .galerie-hero__content h1,
  .galerie-hero__lead {
    max-width: 75%;
  }

  .galerie-philosophie__inner {
    max-width: 85%;
  }

  .galerie-philosophie__quote {
    max-width: 75%;
  }

  .galerie-plats__header,
  .galerie-plats__intro {
    max-width: 90%;
  }

  .galerie-casino__header {
    max-width: 85%;
  }

  .galerie-ambiance__content h2,
  .galerie-ambiance__content p {
    max-width: 65%;
  }

  .galerie-reservation__inner {
    max-width: 75%;
  }
}

@media (max-width: 768px) {
  .galerie-hero {
    min-height: 70vh;
  }

  .galerie-hero__content {
    padding-block-end: var(--spacing-5);
  }

  .galerie-hero__content h1,
  .galerie-hero__lead {
    max-width: 100%;
  }

  .galerie-philosophie__inner {
    max-width: 100%;
    text-align: left;
  }

  .galerie-philosophie__quote {
    max-width: 100%;
    margin-inline: 0;
  }

  .galerie-plats__header,
  .galerie-plats__intro {
    max-width: 100%;
  }

  .galerie-plats__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .galerie-interieur__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .galerie-salons__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .galerie-salons__content {
    text-align: left;
  }

  .galerie-casino__header {
    max-width: 100%;
    text-align: left;
  }

  .galerie-casino__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .galerie-ambiance {
    min-height: 55vh;
  }

  .galerie-ambiance__content h2,
  .galerie-ambiance__content p {
    max-width: 100%;
  }

  .galerie-reservation__inner {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .galerie-hero {
    min-height: 65vh;
  }

  .galerie-hero__content h1 {
    font-size: 2.25rem;
  }

  .galerie-hero__lead {
    font-size: var(--text-body);
  }

  .galerie-philosophy__quote {
    font-size: 1.25rem;
  }

  .galerie-plats__grid,
  .galerie-casino__grid {
    gap: var(--spacing-3);
  }

  .galerie-reservation__button {
    width: 100%;
  }
}