/* app/assets/stylesheets/miniatures.css */

.miniatures-intro {
  padding: 72px 64px 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.miniatures-intro h1 {
  font-family: "Playfair Display", serif;
  font-size: 42px;
  margin: 0;
  color: var(--text-primary, #2A241E);
}

.miniatures-intro p {
  color: var(--text-secondary, #6B6256);
  font-size: 15px;
  max-width: 540px;
  line-height: 1.7;
  margin: 0;
}

.miniatures-section {
  padding: 0 64px 130px;
}

.miniatures-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(170px, auto);
  grid-auto-flow: dense;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.miniature-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px;
  min-height: 170px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.miniature-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(27, 22, 17, 0.15);
}

.miniature-tile--feature {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end; /* sa photo reste un accent en position absolute (non flex), donc le texte doit se recaler lui-même en bas */
  background: linear-gradient(150deg, #2a2119, var(--dark-charcoal, #1B1611));
  color: #faf6f0;
  /* La colonne de texte (eyebrow/nom/description/CTA) est empilée en flex
     column et occupe par défaut toute la largeur de la tuile — rien ne la
     tenait à l'écart de la photo, en position absolute au-dessus d'elle.
     Avec un nom et une description longs (contenu réel en production, plus
     long que les textes de test utilisés en développement), le titre
     passait sous la photo. Les points de rupture tablette et mobile
     réservaient déjà cet espace via padding-right ; il manquait ici, à la
     taille desktop de base. La valeur suit exactement la largeur et le
     décalage de la photo, pour rester correcte à toute largeur de tuile. */
  padding-right: calc(22px + clamp(180px, 46%, 300px) + 24px);
}

.miniature-tile--wide {
  grid-column: span 2;
}

/* Photo en enfant flex qui prend l'espace restant (flex:1) : sa taille
   s'adapte toujours à ce qu'il reste une fois le texte placé, donc elle
   ne peut jamais chevaucher l'eyebrow/nom/prix, quelle que soit la
   longueur du texte (contrairement à une hauteur en %, qui suppose à
   tort que le texte prend toujours la même place). */
.miniature-tile-photo {
  position: static;
  flex: 1 1 auto;
  min-height: 60px;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin-bottom: 10px;
}

/* Dimensions relatives à la tuile : à 140x170 fixes, la photo ne couvrait
   que 6% d'une carte de 602x629 et se lisait comme une vignette perdue.
   Les bornes empêchent qu'elle écrase le texte sur une tuile étroite. */
.miniature-tile--feature .miniature-tile-photo {
  position: absolute;
  flex: none;
  top: 22px;
  right: 22px;
  left: auto;
  width: clamp(180px, 46%, 300px);
  height: clamp(215px, 52%, 330px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
  object-fit: contain;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 0;
  mix-blend-mode: normal; /* La règle de base met "multiply", inadapté sur fond sombre */
}

.miniature-tile-eyebrow {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #9a8f7e;
  margin-bottom: 4px;
}

.miniature-tile--feature .miniature-tile-eyebrow {
  color: var(--gold-accent, #C9A227);
}

.miniature-tile-name {
  font-family: "Lora", "Playfair Display", serif;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  margin: 0;
}

.miniature-tile--feature .miniature-tile-name {
  font-size: 24px;
  margin-bottom: 8px;
}

.miniature-tile-price {
  font-size: 12px;
  color: #5c5347;
}

.miniature-tile--feature .miniature-tile-price {
  color: #c3b8a9;
  font-size: 13px;
  max-width: 300px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.miniature-tile-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--gold-accent, #C9A227);
  color: var(--dark-charcoal, #1B1611);
  border-radius: 2px;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 4px;
}

.miniature-tile--editorial {
  background: linear-gradient(135deg, var(--accent-rose, #B5693F), #8a4d2a);
  color: #faf6f0;
  justify-content: center;
  align-items: flex-start;
}

.miniature-tile--editorial .miniature-tile-eyebrow {
  color: rgba(250, 246, 240, 0.75);
}

.miniature-tile--editorial .miniature-tile-name {
  font-size: 19px;
  font-weight: 500;
}

.miniature-tile--teaser {
  background: var(--soft-cream, #FAF6F0);
  justify-content: center;
  align-items: center;
  text-align: center;
}

.miniature-tile--teaser .miniature-tile-name {
  font-size: 16px;
}

.miniatures-empty {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 40px;
  background: #ffffff;
  border: 1px solid rgba(201, 162, 39, 0.15);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Une règle `display` sur cette classe a la même spécificité que la règle
   UA `[hidden]{display:none}` ; sans ceci, la dernière chargée gagnerait
   et l'état vide resterait visible même avec l'attribut `hidden`. */
.miniatures-empty[hidden] {
  display: none;
}

.miniatures-empty h2 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  margin: 0;
  color: var(--text-primary, #2A241E);
}

.miniatures-empty p {
  color: var(--text-secondary, #6B6256);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 960px) {
  .miniatures-section {
    padding: 0 24px 100px;
  }
  .miniatures-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* La tuile n'occupe plus qu'une rangée : la photo passe en largeur fixe
     et la tuile réserve la place correspondante à droite, pour que le texte
     ne puisse pas glisser dessous — comme sous 560px. */
  .miniature-tile--feature {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 240px;
    padding-right: 218px;
  }
  .miniature-tile--feature .miniature-tile-photo {
    top: 16px;
    bottom: 16px;
    right: 16px;
    width: 186px;
    height: auto;
    padding: 16px;
  }
  .miniature-tile--wide {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  .miniatures-intro {
    padding: 56px 24px 40px;
  }
}

@media (max-width: 560px) {
  .miniatures-grid {
    grid-template-columns: 1fr;
  }
  .miniature-tile--feature,
  .miniature-tile--wide {
    grid-column: span 1;
  }
  .miniature-tile {
    min-height: 220px;
  }
  .miniature-tile--feature {
    padding-top: 22px;
    padding-right: 150px;
    min-height: 190px;
  }
  .miniature-tile--feature .miniature-tile-photo {
    top: 22px;
    bottom: 22px;
    right: 22px;
    width: 110px;
    height: auto;
  }
}