/* ===== Page-owned styles for Galerie et Desserts ===== */

#galerie-et-desserts-main {
  --gd-copy-measure: 65ch;
  --gd-copy-measure-narrow: 60ch;
  --gd-copy-measure-hero: 720px;
  --gd-copy-measure-cta: 600px;
  --gd-gap-16: var(--space-16);
  --gd-gap-24: var(--space-24);
  --gd-gap-32: var(--space-32);
  --gd-gap-48: var(--space-48);
  --gd-gap-64: var(--space-64);
  --gd-gap-96: var(--space-96);
  --gd-card-padding: var(--space-24);
  --gd-card-padding-desktop: var(--space-32);
  --gd-card-radius: var(--radius-8);
  --gd-card-border: var(--border-subtle);
  --gd-card-border-hover: var(--border-active);
  --gd-image-border: var(--border-image);
  --gd-image-veil: rgba(30, 20, 34, 0.2);
  --gd-hero-gradient: linear-gradient(180deg, rgba(18, 12, 20, 0.15) 0%, rgba(18, 12, 20, 0.65) 55%, rgba(18, 12, 20, 0.92) 100%);
}

/* ===== Hero ===== */
.gd-hero {
  position: relative;
  background-color: var(--color-encre-nuit);
  overflow: hidden;
  padding-block: var(--gd-gap-96) var(--gd-gap-64);
  min-height: 520px;
  display: flex;
  align-items: flex-end;
}

.gd-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gd-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gd-hero-gradient);
}

.gd-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.gd-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.gd-hero-copy {
  max-width: var(--gd-copy-measure-hero);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-24);
  align-items: flex-start;
  text-align: left;
}

.gd-hero-copy h1 {
  margin-block-end: 0;
  color: var(--color-champagne);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-tracking);
  max-width: 100%;
}

.gd-hero-subtitle {
  margin-block-end: 0;
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  color: var(--color-texte-attenue);
  max-width: 100%;
}

/* ===== Shared section spacing ===== */
.gd-section {
  padding-block: var(--gd-gap-64);
}

.gd-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
  margin-block-end: var(--gd-gap-48);
  max-width: var(--gd-copy-measure);
}

.gd-section-heading-centered {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.gd-section-heading h2 {
  margin-block-end: 0;
}

.gd-section-heading p {
  margin-block-end: 0;
  color: var(--color-texte-clair);
}

/* ===== Introduction ===== */
.gd-intro {
  background-color: var(--color-prune-profonde);
}

.gd-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gd-gap-48);
  align-items: start;
}

.gd-intro-copy {
  min-width: 0;
  max-width: var(--gd-copy-measure);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-24);
}

.gd-intro-copy h2 {
  margin-block-end: 0;
}

.gd-intro-copy p {
  margin-block-end: 0;
}

.gd-intro-benefits {
  min-width: 0;
  background-color: var(--surface-secondary);
  border-radius: var(--gd-card-radius);
  padding: var(--gd-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
}

.gd-intro-benefits h3 {
  margin-block-end: 0;
}

.gd-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
}

.gd-benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--gd-gap-16);
  min-width: 0;
}

.gd-benefit-icon {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-rose-poudre);
  margin-block-start: 0.55em;
}

/* ===== Album creation ===== */
.gd-album-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gd-gap-48);
  align-items: start;
}

.gd-album-copy {
  min-width: 0;
  max-width: var(--gd-copy-measure-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-24);
}

.gd-album-copy h2,
.gd-album-copy h3 {
  margin-block-end: 0;
}

.gd-album-copy p {
  margin-block-end: 0;
}

.gd-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
  counter-reset: gd-step;
}

.gd-steps-list li {
  counter-increment: gd-step;
  display: flex;
  align-items: flex-start;
  gap: var(--gd-gap-16);
  min-width: 0;
}

.gd-steps-list li::before {
  content: counter(gd-step);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-rose-poudre);
  color: var(--color-encre-nuit);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  line-height: 1;
}

.gd-album-figure {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
}

.gd-album-figure img {
  width: 100%;
  height: auto;
  border: var(--gd-image-border);
  border-radius: var(--gd-card-radius);
  display: block;
}

.gd-album-figure figcaption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
  color: var(--color-texte-attenue);
  text-align: center;
}

/* ===== Cake gallery ===== */
.gd-cake-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gd-gap-32);
  margin-block-end: var(--gd-gap-48);
}

.gd-cake-card,
.gd-dessert-card {
  min-width: 0;
  background-color: var(--surface-card);
  border: var(--gd-card-border);
  border-radius: var(--gd-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base);
}

.gd-cake-card:hover,
.gd-dessert-card:hover {
  border-color: var(--color-rose-poudre);
}

.gd-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-prune-brume);
}

.gd-dessert-card .gd-card-media {
  aspect-ratio: 4 / 3;
}

.gd-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--gd-image-veil);
  pointer-events: none;
}

.gd-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gd-card-body {
  padding: var(--gd-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
  text-align: left;
}

.gd-card-body h3 {
  margin-block-end: 0;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
}

.gd-card-body p {
  margin-block-end: 0;
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-texte-clair);
}

.gd-cake-tip {
  background-color: var(--surface-secondary);
  border-inline-start: 3px solid var(--color-or-ancien);
  border-radius: var(--gd-card-radius);
  padding: var(--gd-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
  max-width: var(--gd-copy-measure);
}

.gd-cake-tip h3 {
  margin-block-end: 0;
}

.gd-cake-tip p {
  margin-block-end: 0;
}

/* ===== Decoration ===== */
.gd-decoration-grid,
.gd-photo-tips-grid,
.gd-sharing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gd-gap-32);
}

.gd-decoration-copy,
.gd-photo-tips-copy,
.gd-sharing-copy {
  min-width: 0;
  max-width: var(--gd-copy-measure);
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-24);
}

.gd-decoration-copy h2,
.gd-decoration-copy h3,
.gd-photo-tips-copy h2,
.gd-photo-tips-copy h3,
.gd-sharing-copy h2,
.gd-sharing-copy h3 {
  margin-block-end: 0;
}

.gd-decoration-copy p,
.gd-photo-tips-copy p,
.gd-sharing-copy p {
  margin-block-end: 0;
}

.gd-decoration-list,
.gd-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gd-gap-16);
}

.gd-decoration-list li,
.gd-tips-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--gd-gap-16);
  min-width: 0;
}

.gd-decoration-list li::before,
.gd-tips-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-or-ancien);
  margin-block-start: 0.55em;
}

/* ===== Dessert gallery ===== */
.gd-dessert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gd-gap-32);
}

/* ===== Final CTA ===== */
.gd-final-cta {
  background-color: var(--color-prune-profonde);
  padding-block: var(--gd-gap-96);
}

.gd-final-cta-inner {
  max-width: var(--gd-copy-measure-cta);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gd-gap-24);
}

.gd-final-cta-inner h2 {
  margin-block-end: 0;
}

.gd-final-cta-inner p {
  margin-block-end: 0;
  color: var(--color-texte-clair);
}

.gd-download-btn {
  width: 100%;
  max-width: 300px;
  justify-content: center;
}

/* ===== Tablet ===== */
@media (min-width: 768px) {
  .gd-section {
    padding-block: var(--gd-gap-96);
  }

  .gd-hero {
    min-height: 580px;
    padding-block: var(--gd-gap-128) var(--gd-gap-96);
  }

  .gd-hero-copy h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
  }

  .gd-intro-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--gd-gap-48);
  }

  .gd-album-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: var(--gd-gap-48);
  }

  .gd-album-figure {
    order: 2;
  }

  .gd-cake-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gd-gap-32);
  }

  .gd-dessert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gd-gap-32);
  }

  .gd-card-body {
    padding: var(--gd-card-padding-desktop);
  }

  .gd-cake-tip {
    padding: var(--gd-card-padding-desktop);
  }

  .gd-intro-benefits {
    padding: var(--gd-card-padding-desktop);
  }
}

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  .gd-hero {
    min-height: 640px;
  }

  .gd-hero-copy h1 {
    font-size: var(--text-h1-size);
  }

  .gd-decoration-grid,
  .gd-photo-tips-grid,
  .gd-sharing-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .gd-decoration-copy,
  .gd-photo-tips-copy,
  .gd-sharing-copy {
    grid-column: 1 / 2;
  }
}

/* ===== Mobile refinements ===== */
@media (max-width: 767px) {
  .gd-hero {
    min-height: 480px;
    padding-block: var(--gd-gap-64) var(--gd-gap-48);
  }

  .gd-hero-copy h1 {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }

  .gd-hero-subtitle {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
  }

  .gd-section {
    padding-block: var(--gd-gap-64);
  }

  .gd-section-heading {
    margin-block-end: var(--gd-gap-32);
  }

  .gd-cake-grid,
  .gd-dessert-grid {
    gap: var(--gd-gap-16);
  }

  .gd-card-body {
    padding: var(--gd-gap-16);
  }

  .gd-cake-tip,
  .gd-intro-benefits {
    padding: var(--gd-gap-16);
  }

  .gd-final-cta {
    padding-block: var(--gd-gap-64);
  }

  .gd-download-btn {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gd-cake-card,
  .gd-dessert-card {
    transition: none;
  }
}