/* Modernes Styling für Foto-Freigabe (Deutsch)
   Datei: module/photo_approve/photo_approve.css
*/

.pa-container h2{
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  color: #1b2632;
  margin: 12px 0 18px 0;
}

.pa-grid{
  display: grid;
  /* Fewer columns so each card is significantly wider (~70% wider than 3-column layout) */
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 6px;
}


.pa-card{
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  transition: transform .18s ease;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

/* .pa-card:hover{
  transform: translateY(-4px);
} */


/* If the template outputs a raw <img> as child of the card, make it behave like a compact avatar */
.pa-card > img{
  height: 110px;
  width: auto;
  max-width: 78%;
  object-fit: cover;
  display: block;
  margin: 14px auto 6px auto;
  border-radius: 8px;
  background: #fff;
}

/* keep a compatible image wrapper rule in case markup changes */
.pa-card .img-wrap{
  height: 110px;
  background: #f7f8fa;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.pa-card .img-wrap img{ max-height:100%; width:auto; border-radius:10px; }

.meta{
  padding: 12px 14px 6px 14px;
  flex: 1 1 auto;
}

.meta .username{
  font-weight: 600;
  color: #122230;
  margin-bottom: 6px;
  font-size: 1rem;
}

.meta .created{
  font-size: 0.85rem;
  color: #6f7b86;
}


.pa-actions{
  padding: 12px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}

/* Make each form take equal space so buttons align perfectly */
.pa-actions form{ flex: 1 1 0; }
.pa-actions form:first-child{ margin-right:6px; }
.pa-actions form:last-child{ margin-left:6px; }
.pa-actions button.ui{ width:100%; }

/* Buttons (leicht angepasste Farben) */

button.ui{
  /* Increase button size ~70%: larger padding and slightly larger font */
  padding: 10px 30px;
  font-size: 1.05rem;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .2px;
  transition: transform .12s ease, opacity .12s ease;
}

button.ui:active{ transform: translateY(1px); }

button.ui.positive{
  background: #28a745;
  color: #ffffff;
}

button.ui.positive:hover{ opacity: 0.95; transform: translateY(-2px); }

button.ui.negative{
  background: #e00304;
  color: #ffffff;
}

button.ui.negative:hover{ opacity: 0.95; transform: translateY(-2px); }

/* Meldungen */
.successbox{
  padding:10px 12px;
  background: #f3fff6;
  border: 1px solid #28a745;
  color: #0f4e2b;
  border-radius: 6px;
  margin-bottom: 12px;
}

.errorbox{
  padding:10px 12px;
  background: #fff6f6;
  border: 1px solid #e00304;
  color: #5a2220;
  border-radius: 6px;
  margin-bottom: 12px;
}

.pa-actions form {
    padding: 0px;
}

/* Responsive Grid */
@media (max-width: 1200px){ .pa-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 992px){ .pa-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .pa-grid{ grid-template-columns: repeat(2,1fr); } 
  .pa-card > img, .pa-card .img-wrap{ height: 90px; }
}
@media (max-width: 420px){ .pa-grid{ grid-template-columns: 1fr; } }

/* Kleinere Hilfsanpassungen */
.pa-container{ padding: 6px 8px; }

/* Verkleinere Buttons auf sehr kleinen Bildschirmen */
@media (max-width:420px){ button.ui{ padding:6px 10px; font-size:0.95rem; } 
  .pa-actions{ gap:8px; }
}
