/* Photo Credits Search page (photo-credits.html).
   Three type tiers:
     label   — Raleway 600, uppercase, tracked, one size
     reading — Raleway 400/500
     detail  — Raleway 400, one small size
   The search-field placeholders are the only serif text.
   Dedication, search bars, result columns and site search share one width. */

.pc-page {
  --pc-width:       1040px;
  --pc-cream:       #f4ecd8;
  --pc-light:       #e8dfc8;
  --pc-muted:       #c8b898;
  --pc-rule:        rgba(200, 184, 152, 0.32);
  --pc-rule-strong: rgba(211, 169, 15, 0.55);
  --pc-link:        #e6b85c;
  --pc-accent:      #d37e0f;
  --pc-bark:        #1b1606;
  --pc-olive:       #252f10;

  background: var(--pc-bark);
}

/* ── Hero: title only ── */
.pc-page .lh-hero-inner {
  text-align: center;
}

.pc-page .lh-hero h1 {
  margin-bottom: 0;
}

/* ── Main: gentle bark-to-olive gradient ── */
.pc-main {
  max-width: none;
  margin: 0;
  padding: clamp(40px, 6vw, 72px) 24px clamp(64px, 8vw, 104px);
  background: linear-gradient(180deg, var(--pc-bark) 0%, var(--pc-olive) 100%);
}

.pc-dedication,
.pc-search-panel,
.pc-divider,
.pc-groups,
.pc-site-search {
  max-width: var(--pc-width);
  margin-right: auto;
  margin-left: auto;
}

/* ── Dedication ── */
.pc-dedication {
  margin-bottom: clamp(36px, 5vw, 56px);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3.5vw, 40px);
  background: #f3d6aa;
  border-radius: 3px;
}

.pc-dedication p {
  margin: 0;
  color: #2b1d05;
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  font-weight: 500;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ── Label tier ── */
.pc-label,
.pc-group h2 {
  display: block;
  margin: 0;
  color: var(--pc-light);
  font-family: "Raleway", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pc-label {
  margin-bottom: 12px;
}

/* ── Detail tier ── */
.pc-status,
.pc-count,
.pc-meta,
.pc-result-link {
  font-family: "Raleway", sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ── Search ── */
.pc-search-panel {
  margin-bottom: 0;
}

.pc-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.pc-search-row input {
  min-width: 0;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--pc-cream);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: var(--pc-cream);
  color: #261f12;
  font: 400 1.05rem/1.3 "Source Serif Pro", Georgia, serif;
}

.pc-search-row input::placeholder {
  color: #7a6f5b;
  opacity: 1;
}

.pc-search-row button {
  height: 56px;
  padding: 0 30px;
  border: 1px solid var(--pc-accent);
  border-radius: 0 3px 3px 0;
  background: var(--pc-accent);
  color: var(--pc-bark);
  font-family: "Raleway", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

.pc-search-row button:hover {
  background: #e28f22;
  border-color: #e28f22;
}

.pc-search-row input:focus-visible,
.pc-search-row button:focus-visible,
.pc-result a:focus-visible {
  outline: 2px solid var(--pc-link);
  outline-offset: 3px;
}

.pc-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: var(--pc-muted);
}

/* Status line and result columns stay hidden until something is typed. */
.pc-page:has(#photo-credit-query:placeholder-shown) .pc-status,
.pc-page:has(#photo-credit-query:placeholder-shown) .pc-groups {
  display: none;
}

/* ── Branch divider ── */
.pc-divider.branchLeaf-divider {
  width: min(100%, 520px);
  margin-top: clamp(44px, 6vw, 72px);
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* ── Result columns: always equal height ── */
.pc-groups {
  margin-top: clamp(22px, 3vw, 30px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}

.pc-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  background: rgba(244, 236, 216, 0.035);
  border: 1px solid var(--pc-rule);
  border-radius: 3px;
}

.pc-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pc-rule-strong);
}

.pc-count {
  color: var(--pc-muted);
  white-space: nowrap;
}

.pc-results {
  flex: 1;
  min-width: 0;
}

/* ── Reading tier ── */
.pc-empty,
.pc-excerpt,
.pc-caption,
.pc-site-intro,
.pc-page .proto-search-excerpt {
  font-family: "Raleway", sans-serif;
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.pc-empty {
  margin: 22px 0 0;
  color: var(--pc-muted);
}

.pc-result-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-result {
  min-width: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--pc-rule);
}

.pc-result:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pc-result h3 {
  margin: 0 0 8px;
  color: var(--pc-cream);
  font-family: "Raleway", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pc-result h3 a {
  color: inherit;
  text-decoration-color: var(--pc-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.pc-result h3 a:hover {
  text-decoration-color: currentColor;
}

.pc-excerpt,
.pc-caption {
  margin: 0 0 12px;
  color: var(--pc-light);
}

.pc-excerpt mark {
  padding: 0 0.08em;
  background: rgba(211, 169, 15, 0.3);
  color: #fff6df;
}

.pc-meta {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--pc-muted);
}

.pc-meta-row {
  margin: 0;
  overflow-wrap: anywhere;
}

.pc-meta-label {
  color: var(--pc-light);
  font-weight: 600;
}

.pc-result-link,
.pc-source-link {
  color: var(--pc-link);
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

.pc-result-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
}

.pc-result-link:hover,
.pc-source-link:hover {
  color: #f2cd80;
}

/* ── Site-wide search (powered by site-search.js) ── */
.pc-site-intro {
  margin: 0 0 22px;
  color: var(--pc-light);
  font-size: 1.02rem;
  text-align: center;
  text-wrap: balance;
}

.pc-page .pc-site-form .proto-search-note {
  min-height: 0;
  margin: 12px 0 0;
  color: var(--pc-muted);
  font-family: "Raleway", sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pc-page .pc-site-form .proto-search-results {
  max-height: none;
  margin-top: 18px;
  padding: 0 clamp(22px, 3vw, 32px);
  overflow: visible;
  background: rgba(244, 236, 216, 0.035);
  border: 1px solid var(--pc-rule);
  border-radius: 3px;
}

.pc-page .pc-site-form .proto-search-results:empty {
  display: none;
}

.pc-page .proto-search-result {
  padding: 20px 0;
  border-top: 1px solid var(--pc-rule);
}

.pc-page .proto-search-result:first-child {
  border-top: 0;
}

.pc-page .proto-search-result a {
  color: var(--pc-cream);
  font-family: "Raleway", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration-color: var(--pc-rule-strong);
  text-underline-offset: 4px;
}

.pc-page .proto-search-result a:hover {
  color: var(--pc-cream);
  text-decoration-color: currentColor;
}

.pc-page .pc-site-form .proto-search-excerpt {
  margin: 8px 0 0 !important;
  color: var(--pc-light);
  font-size: 0.96rem !important;
}

.pc-page .pc-site-form .proto-search-excerpt mark {
  background: rgba(211, 169, 15, 0.3);
  color: #fff6df;
}

.pc-site-form .pc-search-row input:focus-visible,
.pc-site-form .pc-search-row button:focus-visible,
.pc-page .proto-search-result a:focus-visible {
  outline: 2px solid var(--pc-link);
  outline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 780px) {
  .pc-groups {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 520px) {
  .pc-main {
    padding-right: 16px;
    padding-left: 16px;
  }

  .pc-page .lh-hero-band {
    padding-right: 16px;
    padding-left: 16px;
  }

  .pc-search-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pc-search-row input {
    border-right: 1px solid var(--pc-cream);
    border-radius: 3px;
  }

  .pc-search-row button {
    width: 100%;
    border-radius: 3px;
  }

  .pc-group-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}