/* ==================================================
   MINTAGALÉRIA
   Nagy képernyőn 3, közepesen 2, mobilon 1 oszlop.
   ================================================== */


/* 1. A KÁRTYÁK ELRENDEZÉSE */

.auto-gallery-grid {
  display: grid;

  /* Három egyforma szélességű oszlop */
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* Távolság a kártyák között */
  gap: 1.5rem;
}


/* 2. EGY MINTA KÁRTYÁJA */

.auto-gallery-card {
  /* A hosszú tartalom ne szélesítse túl az oszlopot */
  min-width: 0;

  /* Keret, lekerekítés és háttér */
  border: 1px solid var(--line, #35475a);
  border-radius: 1rem;
  background: var(--surface, #18263a);

  /* A tartalom ne lógjon túl a lekerekített sarkokon */
  overflow: hidden;
}


/* 3. A KÉPET TARTALMAZÓ LINK */

.auto-gallery-image {
  display: block;
  background: #18263a;
  text-decoration: none;
}

/* Billentyűzetes navigációnál látható kiemelés */
.auto-gallery-image:focus-visible {
  outline: 3px solid var(--cyan, #75d4f0);
  outline-offset: -4px;
}


/* 4. A TERMÉKFOTÓ */

.auto-gallery-image img {
  display: block;

  /* A képterület kitölti a kártya szélességét */
  width: 100%;
  height: 260px;

  /* A teljes fotó látszik, arányosan, levágás nélkül */
  object-fit: contain;
}


/* 5. A KÉP ALATTI SZÖVEGES RÉSZ */

.auto-gallery-caption {
  /* Belső térköz a szöveg körül */
  padding: 1.1rem;
}

/* A TXT első sorából készülő cím */
.auto-gallery-caption h2 {
  margin: 0 0 0.75rem;

  /* A túl hosszú szó szükség esetén megtörhető */
  overflow-wrap: anywhere;
}

/* A TXT további soraiból készülő leírás */
.auto-gallery-description {
  margin: 0;

  /* Megőrzi a TXT sortöréseit */
  white-space: pre-line;

  /* A hosszú szavak vagy címek ne lógjanak ki */
  overflow-wrap: anywhere;
}


/* 6. BETÖLTÉSI, ÜRES GALÉRIA- ÉS HIBAÜZENET */

.auto-gallery-status {
  padding: 1.5rem;
  border: 1px solid var(--line, #35475a);
  border-radius: 1rem;
}


/* 7. KÖZEPES KÉPERNYŐ: KÉT OSZLOP */

@media (max-width: 950px) {
  .auto-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 8. MOBIL: EGY OSZLOP */

@media (max-width: 650px) {
  .auto-gallery-grid {
    grid-template-columns: 1fr;
  }

  .auto-gallery-image img {
    height: 280px;
  }
}