/**
 * children.css — "Our Children" card grid on each O-8 family page, plus the
 * child landing page hero. Self-contained: the individual family pages load
 * donlawana.css (not families.css), so all card + cameo styles live here.
 * Modeled on the .o8-grid / .family-tile rules in families.css.
 */

/* ── Our Children section — a .dl-gallery-section inside the right 2/3 column,
      so it sits below "Family Years" and stays the same width as the galleries. ── */
.our-children-body {
  padding: 12px 18px 16px;
}
.child-intro {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 14px;
}

.child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.child-tile {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s, box-shadow 0.18s;
}
.child-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.child-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.child-tile-photo {
  height: 210px;
  background: linear-gradient(135deg, var(--color-brown-600), var(--accent-forest));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 14px;
}
.child-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.3s ease;
}
.child-tile:hover .child-tile-photo img {
  transform: scale(1.04);
}
.child-tile-photo .photo-fallback {
  font-size: 38px;
  position: absolute;
  opacity: 0.85;
}
/* Hide the emoji fallback when a cameo image is showing */
.child-tile-photo img ~ .photo-fallback { display: none; }
.child-tile-photo.no-photo img { display: none; }
.child-tile-photo.no-photo .photo-fallback { display: block !important; }

.child-tile-info {
  padding: 13px 14px;
  border-top: 3px solid var(--accent-primary);
}
.child-tile-info h3 {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--surface-mid);
  margin: 0 0 3px;
}
.child-tile-info .child-role {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
/* Unfilled slots read as muted placeholders */
.child-tile-info h3:empty::before { content: "To be specified"; opacity: 0.6; }

/* ── Cameo edit (page-photo-editor.js) — parents/editors/admins ──
      Two circular controls in the top-right corner: green "+" upload, red "×" delete. */
.child-tile .cameo-edit { display: none; }
body.is-site-admin   .child-tile .cameo-edit,
body.is-admin        .child-tile .cameo-edit,
body.is-branch-parent .child-tile .cameo-edit,
body.is-branch-editor .child-tile .cameo-edit {
  display: flex;
  gap: 5px;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
}
.child-tile .cameo-edit button {
  /* Override donlawana.css's global .btn-photo-upload/.btn-photo-remove rules
     (position:absolute + bottom/left/transform) so these sit as normal flex
     items inside the top-right .cameo-edit row. */
  position: static;
  inset: auto;
  transform: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* dark halo + drop shadow so the circle reads clearly on the green card photo */
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4), 0 2px 7px rgba(0, 0, 0, 0.55);
}
.child-tile .cameo-edit .btn-photo-upload { background: #2e7d32; }  /* green + */
.child-tile .cameo-edit .btn-photo-remove { background: #c62828; }  /* red × */

/* Show only "+" when there's no cameo yet, only "×" once one is uploaded.
   page-photo-editor.js toggles .no-photo on the zone (removed on upload, re-added on delete). */
.child-tile-photo.no-photo .btn-photo-remove { display: none; }
.child-tile-photo:not(.no-photo) .btn-photo-upload { display: none; }

/* ── Card add/delete (child-cards.js) — admins only ── */
.child-tile .btn-delete-card { display: none; }
body.is-admin      .child-tile .btn-delete-card,
body.is-site-admin .child-tile .btn-delete-card {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid #eedcdc;
  background: #f6eaea;
  color: #c62828;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px;
  cursor: pointer;
}
.child-tile .btn-delete-card:hover { background: #f0dada; }

.child-slot-empty {
  border: 2px dashed var(--surface-border, #cbb9a6);
  border-radius: 8px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.025);
}
.child-slot-empty .btn-add-card {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #2e7d32;
  color: #fff;
}
.child-slot-empty .btn-add-card:hover { background: #276b2b; }

/* ── Name/role pencil (child-cards.js) — same role gate as cameo ── */
.child-name-edit { display: none; }
body.is-site-admin   .child-name-edit,
body.is-admin        .child-name-edit,
body.is-branch-parent .child-name-edit,
body.is-branch-editor .child-name-edit {
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-size: 13px;
  line-height: 1;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--surface-mid);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

/* ── Child name/role edit modal ── */
.cc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.cc-panel {
  position: fixed; z-index: 9999; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 8px; padding: 20px; width: min(420px, 92vw);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.cc-panel h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 18px; }
.cc-panel label { display: block; font-size: 13px; color: #555; margin: 10px 0 4px; }
.cc-panel input {
  width: 100%; box-sizing: border-box; font: inherit; padding: 8px;
  border: 1px solid #ccc; border-radius: 5px;
}
.cc-hint { font-size: 12px; color: #777; margin: 8px 0 0; }
.cc-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; }
.cc-actions .cc-status { font-size: 12px; color: #777; margin-right: auto; }
.cc-actions button { font: inherit; padding: 6px 16px; border-radius: 5px; cursor: pointer; border: 1px solid #bbb; background: #f3f3f3; }
.cc-actions .cc-save { background: var(--accent-primary, #b5651d) !important; color: #fff !important; border-color: transparent !important; }

/* ── Child landing page body ── */
.child-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg, 22px);
  margin-bottom: var(--space-lg, 22px);
}
.child-gallery { margin-top: var(--space-lg, 22px); }
@media (max-width: 720px) {
  .child-text-row { grid-template-columns: 1fr; }
}

/* ── Child landing page hero ── */
.child-hero-photo {
  width: 129px; height: 129px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--color-brown-600), var(--accent-forest));
  display: flex; align-items: center; justify-content: center;
}
.child-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.child-hero-photo .photo-fallback { font-size: 40px; }
.child-hero-photo img ~ .photo-fallback { display: none; }

@media (max-width: 720px) {
  .child-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Memorable Events & Experiences tile grid (Sage 2026-07-18) ──
   Mirrors .child-grid/.child-tile; server-rendered (not JS-managed) since
   tiles come from the family-events registry, edited via /manage/family-events/. */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.event-tile {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.event-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.event-tile-photo {
  position: relative;
  height: 150px;
  background: linear-gradient(135deg, var(--color-brown-600), var(--accent-forest));
  overflow: hidden;
}
.event-tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.event-tile:hover .event-tile-photo img { transform: scale(1.04); }
.event-tile-photo .photo-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 34px;
}
.event-tile-photo:not(.no-photo) .photo-fallback { display: none; }
.event-tile-info { padding: 10px 12px; border-top: 3px solid var(--accent-primary); }
.event-tile-info h3 { margin: 0 0 2px; font-family: var(--font-display); font-size: 14.5px; color: var(--surface-mid); }
.event-tile-sub { margin: 0; font-size: 12px; color: var(--text-muted); }
.event-grid-empty { color: var(--text-muted); font-style: italic; padding: 8px 2px; }
@media (max-width: 720px) {
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}