/* ══════════════════════════════════════════
   Don & Lawana Nielsen — Page Styles
   ══════════════════════════════════════════ */

/* ── Page hero ── */
.dl-page-hero {
  padding: var(--space-xl) var(--space-2xl);
}

.dl-hero-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ── Hero photo zone ── */
.dl-hero-photo {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent-primary);
  background: var(--color-brown-600);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dl-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-hero-photo.no-photo img,
.dl-hero-photo .photo-fallback-icon { display: block; }
.dl-hero-photo:not(.no-photo) .photo-fallback-icon { display: none; }

.dl-hero-photo .photo-fallback-icon {
  font-size: 52px;
  line-height: 1;
}

/* ── Hero text ── */
.dl-hero-text h1 {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--text-on-dark);
  margin-bottom: 6px;
  font-weight: 600;
}

/* ── Two-column layout ── */
.dl-two-col {
  display: flex;
  gap: 28px;
  padding: 0 var(--space-lg);
  align-items: flex-start;
}

.dl-text-col {
  flex: 1;
  min-width: 0;
}

.dl-gallery-col {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Section layout (text cards) ── */
.dl-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}

.dl-section__head {
  background: var(--surface-mid);
  padding: 12px 18px;
  border-bottom: 3px solid var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dl-section__head .section-heading {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-on-dark);
  font-weight: 600;
  margin: 0;
  padding: 0;
  border: none;
}

.dl-section__body {
  padding: 14px 18px 16px;
}

.dl-section__text {
  min-height: 40px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-secondary);
}

.dl-section__text:empty::after,
.dl-section__text .access-body-content:empty::before {
  content: 'No content yet.';
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
}

/* ── Gallery sections ── */
.dl-gallery-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.dl-gallery-heading {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-on-dark);
  font-weight: 600;
  margin: 0;
  padding: 12px 18px;
  background: var(--surface-mid);
  border-bottom: 3px solid var(--accent-primary);
}

.dl-gallery-upload {
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--surface-border);
}

.dl-gallery-scroll {
  padding: 12px;
  max-height: 50vh;
  overflow-y: auto;
}

.dl-gallery-scroll .gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.dl-gallery-scroll .gallery-empty {
  padding: 20px;
  text-align: center;
}

.dl-gallery-scroll .gallery-empty p {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* ── Admin photo controls ── */
.btn-photo-upload,
.btn-photo-remove {
  display: none;
  position: absolute;
  font-size: 11px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 4px 9px;
  font-family: var(--font-body);
  z-index: 5;
}

.btn-photo-upload {
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 19, 10, 0.82);
  color: #fff;
  white-space: nowrap;
}

.btn-photo-remove {
  top: 6px;
  right: 6px;
  background: rgba(180, 30, 30, 0.82);
  color: #fff;
}

body.is-admin .dl-section__photo .btn-photo-upload,
body.is-admin .dl-hero-photo .btn-photo-upload { display: block; }

body.is-admin .dl-section__photo:not(.no-photo) .btn-photo-remove,
body.is-admin .dl-hero-photo:not(.no-photo) .btn-photo-remove { display: block; }

/* ── Links section ── */
.dl-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dl-links-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--surface-border);
  font-size: 14px;
  color: var(--text-secondary);
}

.dl-links-list li:last-child { border-bottom: none; }

.dl-links-list li:empty { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dl-two-col {
    flex-direction: column;
    padding: 0 16px;
  }

  .dl-text-col { flex: none; width: 100%; }
  .dl-gallery-col { flex: none; width: 100%; }

  .dl-gallery-scroll .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 720px) {
  .dl-page-hero { padding: 20px; }
  .dl-hero-inner { gap: 16px; }
  .dl-hero-photo { width: 90px; height: 90px; }
  .dl-hero-text h1 { font-size: 24px; }

  .dl-gallery-scroll .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Hero subtitle (Don & Lawana + O-8 family pages) ── */
.dl-page-hero .hero-sub,
.family-hero-inner .hero-sub {
  font-size: 20px;
}

/* Fixed-height, internally scrolling section (e.g., "In their own words").
   Height ≈ two empty sections; content scrolls within. */
.dl-section--scroll .dl-section__body {
  height: 200px;
  overflow-y: auto;
  box-sizing: border-box;
}