/* ══════════════════════════════════════════
   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;
}
/* Persistent control bar (search + Select) pinned above the scrolling thumbnails, so
   these stay reachable while browsing a long gallery instead of scrolling out of view. */
.fg-controlbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.fg-controlbar > .nh-gsearch { flex: 1 1 240px; margin: 0; }
.fg-controlbar > .gt-toolbar { padding: 0; margin-left: auto; }
/* the copy/move/split action bar and the split-progress banner each take their own
   full-width row within the bar, and no longer need to stick (they're above the scroll). */
.fg-controlbar > .gt-bar,
.fg-controlbar > .gt-splitbanner { flex: 1 1 100%; position: static; top: auto; margin: 2px 0 0; }

.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;
}

/* ══════════════════════════════════════════
   Hero banner — shared by the Don & Lawana page
   and every O-8 family page. The dark banner is
   split into two halves:
     LEFT  (.hero-lead)  cameo + name/role
     RIGHT (.hero-right) album cover centred in
            the right half + Family Directory
            button pinned to the far right edge.
   The "Back to…" link and the feedback bubble
   live in a beige strip (.content-topbar) just
   below the banner instead of inside it.
   ══════════════════════════════════════════ */
.dl-hero-inner,
.family-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}

/* Lead = cameo + title, left-aligned in the left half. */
.hero-lead {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.dl-hero-text {
  min-width: 0;
}

/* ── Hero cameo: circular, matches the O-8 card portraits. ── */
.dl-hero-inner .dl-hero-photo,
.family-hero-inner .dl-hero-photo {
  width: 168px;
  height: 168px;
}

/* Right half: album centred within it; directory button pinned right. */
.hero-right {
  grid-column: 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
}

/* ── Album cover card (centred in the right half) ── */
.album-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.album-hero__thumb {
  width: 118px;
  height: 149px;
  border-radius: 6px;
  overflow: hidden;
  border: 3px solid var(--accent-primary);
  background: var(--color-brown-600);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.album-hero__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.album-hero__caption {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  color: var(--text-accent-light);
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
  max-width: 170px;
}

.album-hero:hover .album-hero__thumb {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.album-hero:hover .album-hero__caption {
  text-decoration: underline;
  color: var(--text-on-dark);
}

/* ── Family Directory button (far right of banner, vertically centred) ── */
.hero-dir-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: var(--text-on-dark);        /* formerly the link's font colour */
  color: var(--color-brown-700);          /* dark brown text */
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.12s ease;
}

.hero-dir-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.04);
}

/* ── Beige strip below the banner: Back link (left) + feedback bubble (right) ── */
.content-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  margin: 0 0 var(--space-lg);
}

.content-topbar .back-link {
  color: var(--accent-forest);
  font-style: normal;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.content-topbar .back-link:hover {
  color: var(--color-forest-900);
  text-decoration: underline;
}

/* Feedback bubble, relocated into the beige strip on these pages. */
.content-topbar .fb-bubble {
  position: static;
  margin-left: auto;
}

/* ── Responsive: stack the banner contents and centre ── */
@media (max-width: 760px) {
  .dl-hero-inner,
  .family-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-lead {
    flex-direction: column;
    text-align: center;
  }
  .hero-right {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }
  .hero-dir-btn {
    position: static;
    transform: none;
    margin-top: 2px;
  }
  .hero-dir-btn:hover { transform: scale(1.04); }
}

/* ── Special Documents and Records — larger thumbnails (Mike, 2026-07-19) ──
   Different use case from the photo galleries above it: viewers need to see
   what a document/record actually IS, not browse it as a photo scrapbook, so
   fixed thumbnails at roughly double the normal size — no size slider (that's
   the reunion-page-only feature; this section doesn't need one). Column count
   is halved at each breakpoint vs. the shared .gallery-grid rule above, since
   thumbnail width is 100% of its grid cell (see .gallery-thumb img in
   reunion-page.css) — fewer, wider columns = bigger tiles. Higher specificity
   (3 classes) than the plain ".dl-gallery-scroll .gallery-grid" rule above so
   it wins regardless of source order. */
.dl-docs-gallery .dl-gallery-scroll .gallery-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .dl-docs-gallery .dl-gallery-scroll .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .dl-docs-gallery .dl-gallery-scroll .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}