/* =========================================================
   Projekti Manager – minimal clean CSS
   ========================================================= */


/* Hide ACF image text “Ei kuvia valittu” (keep button visible) */
.projekti-manager .acf-field-image .hide-if-value p {
  font-size: 0;
}
.projekti-manager .acf-field-image .hide-if-value p .acf-button {
  font-size: initial;
}


/* ---------- Featured image (3:4 portrait) ---------- */

.projekti-manager .pm-fi-frame--portrait {
  width: 240px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.projekti-manager .pm-fi-frame--portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projekti-manager .pm-fi-empty {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.04);
}

/* Featured image buttons spacing */
.projekti-manager .pm-fi-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Remove button (red) */
.projekti-manager #pm-fi-remove {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
.projekti-manager #pm-fi-remove:hover {
  background: #a81f1f;
  border-color: #a81f1f;
}


/* ---------- Form fields ---------- */

/* Make custom WP title/content match ACF styling */
.projekti-manager .pm-field-wptitle input[type="text"],
.projekti-manager .pm-field-wpcontent textarea {
  width: 100%;
  background: #fff;
}

/* Align submit button right */
.projekti-manager .acf-form-submit {
  display: flex;
  justify-content: flex-end;
}


/* ---------- Hide unused ACF controls ---------- */

/* Hide repeater add-row */
.projekti-manager .acf-repeater .acf-actions {
  display: none !important;
}

/* Hide gallery bulk actions */
.projekti-manager .acf-field-gallery .acf-gallery-toolbar li.acf-fr {
  display: none !important;
}


/* ---------- List delete link ---------- */

.projekti-manager .pm-link--danger {
  color: #c62828;
}
.projekti-manager .pm-link--danger:hover {
  color: #a81f1f;
  text-decoration: underline;
}


/* ---------- Frontend gallery grid ---------- */

.pm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pm-gallery-grid .pm-g-item.is-landscape {
  grid-column: 1 / -1;
}

.pm-gallery-grid .pm-g-frame {
  width: 100%;
  overflow: hidden;
}

.pm-gallery-grid .ratio-16x9 { aspect-ratio: 16 / 9; }
.pm-gallery-grid .ratio-3x4  { aspect-ratio: 3 / 4; }

.pm-gallery-grid .pm-g-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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