/* =========================================
   Waternymph Pedigree Page CSS
   ========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --mauve-light: #f6ecf5;
  --mauve-soft: #e8d3e3;
  --mauve-mid: #b99bb3;
  --mauve-deep: #7f607b;
  --mauve-charcoal: #4b3c48;

  --body-deep: #261b25;
  --body-deeper: #1c141b;
  --body-panel: rgba(47,34,48,.96);
  --body-panel-alt: rgba(36,25,36,.96);
  --body-border: rgba(185,155,179,.28);

  --body-text: #f8f4f7;
  --body-text-muted: #d9cfd7;
  --heading-text: #ffffff;
}

/* =========================================
   PAGE
   ========================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
  line-height: 1.5;
  color: var(--body-text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(185,155,179,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 25%, rgba(127,96,123,.22), transparent 55%),
    linear-gradient(180deg, var(--body-deep) 0%, var(--body-deeper) 100%);
  overflow-x: hidden;
  position: relative;
}

body::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='45%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%23b99bb3' stop-opacity='.20'/%3E%3Cstop offset='55%25' stop-color='%237f607b' stop-opacity='.10'/%3E%3Cstop offset='100%25' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23e8d3e3' stop-opacity='.16'/%3E%3Cstop offset='50%25' stop-color='%23b99bb3' stop-opacity='.10'/%3E%3Cstop offset='100%25' stop-color='%23e8d3e3' stop-opacity='.14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23g)'/%3E%3Cpath d='M-50 520 C 180 410, 420 640, 680 520 S 1160 410, 1500 540 S 1820 680, 1680 470' fill='none' stroke='url(%23w)' stroke-width='10' stroke-linecap='round' opacity='.70'/%3E%3Cpath d='M-70 590 C 160 500, 410 710, 690 590 S 1160 470, 1520 620 S 1860 790, 1700 540' fill='none' stroke='url(%23w)' stroke-width='6' stroke-linecap='round' opacity='.50'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: rotate(-2deg);
  mix-blend-mode: screen;
}

.site-shell,
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

.site-shell {
  max-width: 1380px;
  margin: 0 auto;
  padding: 1.8rem 2rem 3rem;
}

/* =========================================
   HEADER
   ========================================= */

.pedigree-header,
.pedigree-board,
.mobile-generation {
  background: linear-gradient(180deg, var(--body-panel) 0%, var(--body-panel-alt) 100%);
  border-radius: 2.5rem;
  border: 1px solid var(--body-border);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.pedigree-header {
  padding: 2rem 2.3rem;
  margin-bottom: 2rem;
  text-align: center;
}

.dog-name {
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.2;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--heading-text);
  margin-bottom: 0.35rem;
}

.call-name {
   font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.2;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--heading-text);
  margin-bottom: 0.35rem;
}

.back-link {
  display: inline-block;
  text-decoration: none;
  background: rgba(185,155,179,.24);
  border: 1px solid rgba(185,155,179,.55);
  color: var(--heading-text);
  font-weight: 650;
  padding: 0.72rem 1.5rem;
  border-radius: 4rem;
  font-size: 1rem;
  box-shadow: 0 10px 18px -12px rgba(0,0,0,.7);
  transition: 0.15s ease;
}

.back-link:hover {
  background: rgba(127,96,123,.75);
  border-color: rgba(232,211,227,.45);
  color: #ffffff;
}

/* =========================================
   DESKTOP PEDIGREE GRID
   ========================================= */

.pedigree-board {
  padding: 1rem;
  overflow-x: auto;
}

.pedigree-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  min-width: 950px;
  align-items: stretch;
}

.pedigree-column {
  display: grid;
  gap: 0.75rem;
}

.col-1 {
  grid-template-rows: repeat(2, 1fr);
}

.col-2 {
  grid-template-rows: repeat(4, 1fr);
}

.col-3 {
  grid-template-rows: repeat(8, 1fr);
}

/* =========================================
   PEDIGREE CELL
   ========================================= */

.pedigree-cell {
  background: linear-gradient(180deg, rgba(54,39,56,.95) 0%, rgba(34,23,34,.95) 100%);
  border-radius: 1.4rem;
  border: 1px solid rgba(185,155,179,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  padding: 0.6rem;
  min-height: 120px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0.4rem;
}

/* =========================================
   IMAGE
   ========================================= */

.pedigree-photo {
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(185,155,179,.35);
  background: rgba(255,255,255,.04);
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

.pedigree-photo img {
  display: block;
  
}

.pedigree-photo.portrait img {
  height: 150px;
  width: auto;
}

.pedigree-photo.landscape img {
  
  height: 150px;
  width: auto;
}

/* =========================================
   TEXT
   ========================================= */

.pedigree-text {
  width: 100%;
  text-align: left;
}

.pedigree-registered {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--heading-text);
  word-break: break-word;
}

.pedigree-note {
  font-size: 0.75rem;
  color: var(--body-text-muted);
  line-height: 1.2;
  margin-top: 0.15rem;
}

/* =========================================
   MOBILE PEDIGREE
   ========================================= */

.mobile-pedigree {
  display: none;
  gap: 1rem;
}

.mobile-generation {
  padding: 1rem;
}

.mobile-generation-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-text);
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed rgba(185,155,179,.4);
  padding-bottom: 0.45rem;
}

.mobile-generation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {
  .site-shell {
    padding: 1.2rem 1rem 2rem;
  }

  .dog-name {
    font-size: 2rem;
  }
}

@media (max-width: 760px) {
  .desktop-pedigree {
    display: none;
  }

  .mobile-pedigree {
    display: grid;
  }
}

@media (max-width: 560px) {
  .mobile-generation-grid {
    grid-template-columns: 1fr;
  }

  .pedigree-header {
    padding: 1.4rem;
  }

  .dog-name {
    font-size: 1.7rem;
  }

  .call-name {
    font-size: 1rem;
  }
}