/* ============================================================
   Lasair Hungarian Vizsla — main stylesheet
   Phase 1 baseline. Mobile-first.
   ============================================================ */

/* ---------- Self-hosted webfonts ----------
   Drop the following WOFF2 files into /assets/fonts/ to activate:
     lora-400.woff2, lora-500.woff2, lora-600.woff2, lora-700.woff2
     inter-400.woff2, inter-500.woff2, inter-600.woff2, inter-700.woff2
   See /assets/fonts/README.md for source.
   font-display:swap means the system fallback is used until the files arrive — no FOIT.
*/
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --c-rust:        #B0532C;
  --c-rust-dark:   #8E4221;
  --c-forest:      #2F4A3A;
  --c-forest-dark: #213628;
  --c-ochre:       #C28A2C;
  --c-cream:       #F5EFE0;
  --c-cream-dark:  #ECE3CE;
  --c-charcoal:    #2A241E;
  --c-stone:       #8A7F6F;
  --c-stone-light: #BFB5A4;
  --c-white:       #FBFAF5;

  /* Type */
  --ff-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.375rem;
  --fs-4xl:  3rem;

  /* Spacing (4px scale) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(42, 36, 30, 0.06), 0 1px 3px rgba(42, 36, 30, 0.08);
  --shadow-md: 0 4px 8px rgba(42, 36, 30, 0.08), 0 2px 4px rgba(42, 36, 30, 0.06);
  --shadow-lg: 0 10px 24px rgba(42, 36, 30, 0.10), 0 4px 8px rgba(42, 36, 30, 0.06);

  /* Layout */
  --container:        72rem;
  --container-narrow: 48rem;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(194, 138, 44, 0.55);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-charcoal);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-rust-dark); }
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--sp-4);
  color: var(--c-charcoal);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }

hr {
  border: 0;
  border-top: 1px solid var(--c-stone-light);
  margin: var(--sp-8) 0;
}

::selection { background: var(--c-ochre); color: var(--c-charcoal); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--sp-4);
  background: var(--c-charcoal);
  color: var(--c-cream);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  border-radius: var(--r-sm);
  z-index: 1000;
}
.skip-link:focus { top: var(--sp-2); }

/* Visually hidden (accessible) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.section--tight { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.section--alt { background: var(--c-cream-dark); }
.section--forest { background: var(--c-forest); color: var(--c-cream); }
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--c-cream); }

/* Justified prose for narrative sections (home about/philosophy/heritage, info, terms). */
.section .container--narrow p {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* General Information page: TOC sidebar + body layout */
.info-layout {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .info-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

.info-toc {
  background: var(--c-cream-dark);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
@media (min-width: 960px) {
  .info-toc {
    position: sticky;
    /* Sits just below the sticky site header. */
    top: calc(var(--sp-20) + 64px);
    align-self: start;
    /* Match the sticky `top` so the TOC bottom lines up inside the viewport
       with a small breathing margin — otherwise the bottom edge hangs below
       the fold and the final entry gets clipped. */
    max-height: calc(100vh - var(--sp-20) - 64px - 24px);
    overflow-y: auto;
    background: transparent;
    padding: var(--sp-3) 0 var(--sp-12) var(--sp-3);
    border-left: 1px solid var(--c-cream-dark);
  }
}
.info-toc__title {
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-3);
  color: var(--c-charcoal);
}
.info-toc__list,
.info-toc__sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-toc__list > li {
  margin-bottom: var(--sp-2);
}
.info-toc__list > li > a {
  display: block;
  font-weight: 600;
  color: var(--c-charcoal);
  text-decoration: none;
  padding: var(--sp-1) 0;
}
.info-toc__list > li > a:hover { color: var(--c-rust); }
.info-toc__list > li > a.is-active,
.info-toc__list > li > a.is-parent-active {
  font-weight: 700;
  color: var(--c-rust);
}
.info-toc__sublist {
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-3);
  border-left: 1px solid var(--c-stone-light);
}
.info-toc__sublist li { margin: 2px 0; }
.info-toc__sublist a {
  display: block;
  color: var(--c-stone);
  text-decoration: none;
  font-weight: 400;
  padding: 2px 0 2px var(--sp-3);
  font-size: var(--fs-xs);
}
.info-toc__sublist a:hover { color: var(--c-rust); }
.info-toc__sublist a.is-active {
  font-weight: 700;
  color: var(--c-rust);
}

.info-body { min-width: 0; }
.info-body h2 {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-cream-dark);
  scroll-margin-top: 96px;
  font-size: var(--fs-2xl);
}
.info-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.info-body h3 {
  margin-top: var(--sp-6);
  scroll-margin-top: 96px;
  font-size: var(--fs-lg);
}
.info-body p,
.info-body ul,
.info-body ol { margin: 0 0 var(--sp-4); }
.info-body p,
.info-body li,
.info-body blockquote {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.info-body blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-3) var(--sp-5);
  border-left: 4px solid var(--c-ochre);
  background: var(--c-cream-dark);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.info-body blockquote p { margin: 0; font-style: italic; }
.info-body code {
  background: var(--c-cream-dark);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: 0.95em;
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-rust);
  margin-bottom: var(--sp-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-rust);
  color: var(--c-white);
  border-color: var(--c-rust);
}
.btn--primary:hover { background: var(--c-rust-dark); border-color: var(--c-rust-dark); color: var(--c-white); }

.btn--secondary {
  background: transparent;
  color: var(--c-forest);
  border-color: var(--c-forest);
}
.btn--secondary:hover { background: var(--c-forest); color: var(--c-cream); }

.btn--ghost {
  background: transparent;
  color: var(--c-cream);
  border-color: rgba(245, 239, 224, 0.4);
}
.btn--ghost:hover { background: rgba(245, 239, 224, 0.1); border-color: var(--c-cream); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--sp-2);
  color: var(--c-charcoal);
}
.form-label .required { color: var(--c-rust); }

.form-control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--c-charcoal);
  background: var(--c-white);
  border: 1px solid var(--c-stone-light);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--c-ochre);
  box-shadow: var(--focus-ring);
}
textarea.form-control { min-height: 7.5rem; resize: vertical; }

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%232A241E' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-help {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-stone);
  margin-top: var(--sp-1);
}

/* Honeypot — visually hidden but not display:none (some bots skip display:none) */
.hp-field {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-cream-dark);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(42, 36, 30, 0.04), 0 4px 12px rgba(42, 36, 30, 0.05);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--c-charcoal);
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
}
.site-logo:hover { color: var(--c-rust); }
.site-logo img { width: 48px; height: 48px; }
.site-logo__sub {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Mobile hamburger button */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--c-stone-light);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--c-charcoal);
}
.nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-toggle__icon {
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  display: block;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after  { top:  7px; }

/* Primary nav (mobile-first: hidden, slides down) */
.primary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-cream-dark);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2) 0;
}
.primary-nav.is-open { display: block; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-item { position: relative; }

.nav-link, .nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-charcoal);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.nav-link:hover, .nav-trigger:hover { color: var(--c-rust); background: var(--c-cream-dark); }
.nav-link:focus-visible, .nav-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.nav-link[aria-current="page"],
.nav-item.is-active > .nav-link,
.nav-item.is-active > .nav-trigger { color: var(--c-rust); }

/* "Puppies" gets subtle emphasis without looking like a CTA */
.nav-link--emphasis { font-weight: 700; }
.nav-link--emphasis::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--sp-2);
  border-radius: 50%;
  background: var(--c-ochre);
}

.nav-trigger__chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.nav-trigger[aria-expanded="true"] .nav-trigger__chevron {
  transform: rotate(-135deg);
}

/* Submenu — mobile accordion */
.submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-2) var(--sp-4);
  display: none;
}
.nav-item.is-open > .submenu { display: block; }
.submenu .nav-link {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-charcoal);
}
.submenu .nav-link:hover { color: var(--c-rust); }

/* Desktop nav */
@media (min-width: 960px) {
  .nav-toggle { display: none; }

  .primary-nav {
    display: block !important;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
  }
  .nav-link, .nav-trigger {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
  }
  .nav-link[aria-current="page"],
  .nav-item.is-active > .nav-link,
  .nav-item.is-active > .nav-trigger {
    color: var(--c-rust);
    background: var(--c-cream-dark);
  }

  /* Desktop dropdowns */
  .nav-item--has-submenu { position: relative; }
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    margin-top: var(--sp-1);
    padding: var(--sp-2);
    background: var(--c-cream);
    border: 1px solid var(--c-cream-dark);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 60;
  }
  .nav-item.is-open > .submenu,
  .nav-item--has-submenu:hover > .submenu,
  .nav-item--has-submenu:focus-within > .submenu {
    display: block;
  }
  .submenu .nav-link {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
  }
}

/* ---------- Hero ---------- */
/* Hero band. The aspect ratio gives a wide cinematic look on
   desktop; min-height keeps the band from collapsing too tall-narrow
   on phones. The mobile overrides at the bottom of the block:
     - reduce vertical padding so the headline + paragraph + buttons
       fit inside the 360px min-height without spilling
     - scale the h1 down via clamp() so long lines don't overflow
     - drop the justified text alignment, which renders as ugly
       word-gaps on narrow widths
     - protect against unbreakable tokens (URLs, placeholders) that
       would otherwise force horizontal scroll. */
.hero {
  position: relative;
  background: var(--c-forest);
  color: var(--c-cream);
  overflow: hidden;
  aspect-ratio: 1920 / 700;
  min-height: 360px;
  display: flex;
  align-items: center;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  opacity: 0.55;
}
.hero__inner {
  position: relative;
  z-index: 1;
  /* Mobile-first: tight padding so the band's min-height fits all
     three blocks (eyebrow / h1 / paragraph / actions). Desktop bumps
     this back up via the @media rule below. */
  padding: var(--sp-8) 0;
  max-width: var(--container-narrow);
}
.hero h1 {
  color: var(--c-cream);
  /* Scales smoothly between phone (≈26px) and desktop (≈38px) without
     a hard breakpoint, so headlines stay legible on every width. */
  font-size: clamp(1.625rem, 4.5vw + 1rem, 2.375rem);
  line-height: 1.15;
  margin-bottom: var(--sp-4);
  /* Belt-and-braces protection against unbreakable tokens (long URLs,
     [PLACEHOLDER: …] text, etc.) overflowing the column. */
  overflow-wrap: anywhere;
}
.hero p {
  font-size: var(--fs-md);
  color: var(--c-cream);
  /* Left-aligned reads better on narrow widths. Justified text leaves
     ugly inter-word gaps when each line has only 4–6 words. */
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: anywhere;
}
.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
/* Tablet — restore some vertical breathing room. */
@media (min-width: 720px) {
  .hero__inner { padding: var(--sp-16) 0; }
  .hero p { text-align: justify; }
  .hero__actions { margin-top: var(--sp-6); }
}
/* Desktop — full padding + the larger headline cap. */
@media (min-width: 960px) {
  .hero__inner { padding: var(--sp-24) 0; }
  .hero h1 { font-size: var(--fs-4xl); }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--sp-6); }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--c-white);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; background: var(--c-cream-dark); }
.card__media img, .card__media svg { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--sp-5); flex: 1; }
.card__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.card__meta { font-size: var(--fs-sm); color: var(--c-stone); margin-bottom: var(--sp-2); }
.card__excerpt { color: var(--c-charcoal); margin-bottom: 0; }

.card-link {
  text-decoration: none;
  color: inherit;
}
.card-link:hover { color: var(--c-rust); }

/* Empty-state cards (e.g. "no puppies right now") */
.empty-state {
  background: var(--c-cream-dark);
  border: 1px dashed var(--c-stone-light);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
  color: var(--c-stone);
}
.empty-state p:last-child { margin-bottom: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: var(--fs-sm);
  color: var(--c-stone);
  padding: var(--sp-4) 0;
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.breadcrumbs li + li::before {
  content: "›";
  margin-right: var(--sp-2);
  color: var(--c-stone-light);
}
.breadcrumbs a { color: var(--c-stone); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-rust); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-charcoal); }

/* ---------- Announcement ---------- */
.announcement {
  padding: var(--sp-6) 0;
  background: var(--c-cream-dark);
  border-bottom: 1px solid var(--c-stone-light);
}
.announcement--prominent {
  background: var(--c-ochre);
  color: var(--c-charcoal);
  border-bottom-color: var(--c-rust);
}
.announcement__inner {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
.announcement__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
}
.announcement__body { margin: 0; }
@media (min-width: 720px) {
  .announcement__inner {
    grid-template-columns: auto 1fr auto;
  }
  .announcement__media img,
  .announcement__media svg {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--r-md);
  }
}

/* ---------- Newsletter signup ---------- */
.newsletter {
  background: var(--c-forest);
  color: var(--c-cream);
  padding: var(--sp-12) 0;
}
.newsletter h2 { color: var(--c-cream); }
.newsletter__form {
  display: grid;
  gap: var(--sp-3);
  max-width: 32rem;
}
@media (min-width: 640px) {
  .newsletter__form { grid-template-columns: 1fr auto; align-items: end; }
}
.newsletter .form-control {
  background: var(--c-cream);
  border-color: transparent;
}
.newsletter .form-help { color: var(--c-stone-light); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-charcoal);
  color: var(--c-cream);
  padding: var(--sp-12) 0 var(--sp-6);
  margin-top: var(--sp-16);
}
.site-footer a { color: var(--c-cream); text-decoration: none; }
.site-footer a:hover { color: var(--c-ochre); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-10);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-col h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ochre);
  margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--sp-2); }

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-stone-light);
}
.footer-meta__brand {
  font-family: var(--ff-heading);
  color: var(--c-cream);
  font-size: var(--fs-md);
  font-weight: 600;
}
.footer-meta__dogstas {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(245, 239, 224, 0.05);
  border: 1px solid rgba(245, 239, 224, 0.1);
  border-radius: var(--r-md);
  width: fit-content;
}
.footer-meta__dogstas a {
  display: inline-flex;
  transition: opacity 0.15s;
}
.footer-meta__dogstas a:hover { opacity: 0.8; }
.footer-meta__dogstas a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}
.footer-meta__dogstas img,
.footer-meta__dogstas svg {
  display: block;
  height: 48px;
  width: auto;
  max-width: 160px;
}

.footer-newsletter input.form-control {
  background: rgba(245, 239, 224, 0.1);
  color: var(--c-cream);
  border-color: rgba(245, 239, 224, 0.2);
}
.footer-newsletter input.form-control::placeholder { color: var(--c-stone-light); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1px solid rgba(245, 239, 224, 0.1);
  padding-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-stone-light);
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; align-items: center; }
}

.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-3);
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(245, 239, 224, 0.08);
  color: var(--c-cream);
  transition: background 0.15s, color 0.15s;
}
.social-link:hover { background: var(--c-ochre); color: var(--c-charcoal); }
.social-link svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Dog / puppy cards specific ---------- */
.dog-card .card__body { padding: var(--sp-5); }
/* ---------- 404 page ---------- */
.not-found-links {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
.not-found-links li { margin: 0; }
.not-found-links a {
  display: inline-block;
  padding: 4px 0;
  color: var(--c-rust);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.not-found-links a:hover { border-bottom-color: var(--c-rust); }

/* ---------- Per-dog detail page (/dog.php) ---------- */
.dog-detail__header {
  margin-bottom: var(--sp-6);
}
.dog-detail__header h1 {
  margin: 0;
  font-size: var(--fs-2xl);
}
.dog-detail__registered {
  margin: 4px 0 0;
  font-family: var(--ff-heading);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--c-rust);
}
.dog-detail__meta {
  margin: var(--sp-2) 0 0;
  color: var(--c-stone);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
/* Unified Photos section. The primary photo is featured at 2x size
   on the grid, gallery photos sit alongside as smaller tiles. Every
   tile shares the same data-lightbox group, so clicking any of them
   opens the lightbox and the visitor can flip through the rest with
   the arrows.

   On narrow screens the grid collapses so the featured photo fills
   the full width, with the others below in two columns. */
.dog-detail__photos-section { margin-bottom: var(--sp-8); }
.dog-detail__photos-hint {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-stone);
}
.dog-detail__photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.dog-detail__photo {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-cream-dark);
  aspect-ratio: 4 / 3;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.18s ease, transform 0.05s ease;
}
.dog-detail__photo:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.dog-detail__photo:active { transform: translateY(1px); }
.dog-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.dog-detail__photo:hover img { transform: scale(1.03); }
/* Featured tile = the primary photo. Spans 2 columns + 2 rows so it
   reads as the headline image on the page. */
.dog-detail__photo--primary {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 720px) {
  .dog-detail__photos { grid-template-columns: repeat(2, 1fr); }
  .dog-detail__photo--primary {
    grid-column: 1 / -1;
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
}
.dog-detail__section {
  margin: 0 0 var(--sp-8);
}
.dog-detail__section h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
}
.dog-detail__parents {
  display: grid;
  grid-template-columns: 90px 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-md);
}
.dog-detail__parents dt {
  color: var(--c-stone);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: baseline;
  padding-top: 4px;
}
.dog-detail__parents dd {
  margin: 0;
}
.dog-detail__reg {
  display: block;
  margin-top: 2px;
  color: var(--c-stone);
  font-size: var(--fs-sm);
}

.dog-card__title { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
/* The title is a link to the per-dog profile. Visually undecorated
   until hover so the card stays calm-looking; the explicit "View
   profile →" link below the body makes the click target obvious. */
.dog-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to right, var(--c-rust), var(--c-rust));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.18s ease, color 0.12s ease;
}
.dog-card__title a:hover,
.dog-card__title a:focus-visible {
  color: var(--c-rust);
  background-size: 100% 2px;
}
.dog-card__meta { color: var(--c-stone); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.dog-card__more {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.dog-card__more a {
  color: var(--c-rust);
  text-decoration: none;
}
.dog-card__more a:hover { text-decoration: underline; }
.dog-card__awards { font-size: var(--fs-sm); }
.dog-card__awards-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  color: var(--c-rust);
  margin-bottom: var(--sp-1);
}

.puppy-card__status {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-cream-dark);
  color: var(--c-charcoal);
  margin-bottom: var(--sp-2);
}

/* ---------- Placeholder marker styling ---------- */
.placeholder-note {
  font-style: italic;
  color: var(--c-stone);
  background: rgba(194, 138, 44, 0.08);
  border-left: 3px solid var(--c-ochre);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* ---------- Like button (heart overlay) ---------- */
.lasair-like {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(42, 36, 30, 0.55);
  color: var(--c-cream);
  border: 1px solid rgba(245, 239, 224, 0.2);
  border-radius: var(--r-pill);
  padding: 4px 8px 4px 6px;
  cursor: pointer;
  z-index: 4;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.lasair-like svg { width: 18px; height: 18px; display: block; }
/* The count is always rendered (even at 0) so visitors can compare
   popularity at a glance. min-width keeps the pill from jittering when
   the count flips between 0 and 1+ digits. */
.lasair-like__count {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  min-width: 0.7em;
  text-align: center;
}
.lasair-like:hover {
  background: rgba(176, 83, 44, 0.85);
  border-color: rgba(176, 83, 44, 0.95);
  color: var(--c-cream);
}
.lasair-like:active { transform: scale(0.94); }
.lasair-like:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 138, 44, 0.6);
}
.lasair-like--liked {
  background: rgba(176, 83, 44, 0.95);
  border-color: var(--c-rust-dark);
  color: var(--c-cream);
}
.lasair-like--liked:hover { background: var(--c-rust-dark); }

/* Inside the lightbox, anchor relative to the figure so prev/next/close buttons don't overlap. */
.lasair-lightbox__figure { position: relative; }
.lasair-lightbox__figure > .lasair-like {
  bottom: var(--sp-3);
  right: var(--sp-3);
}

/* ---------- Lightbox ---------- */
.lasair-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, 0.94);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  animation: lasair-fade-in 0.15s ease-out;
}
.lasair-lightbox[hidden] { display: none; }
@keyframes lasair-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lasair-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
}

.lasair-lightbox__img,
.lasair-lightbox__video {
  max-width: min(92vw, 1600px);
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--r-sm);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  background: var(--c-charcoal);
}
.lasair-lightbox__video[hidden],
.lasair-lightbox__img[hidden] { display: none; }
.lasair-lightbox__video { outline: none; }

.lasair-lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(245, 239, 224, 0.9);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 90vw;
  font-family: var(--ff-body);
}
.lasair-lightbox__counter {
  color: rgba(245, 239, 224, 0.6);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lasair-lightbox__close,
.lasair-lightbox__prev,
.lasair-lightbox__next {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--c-cream);
  border: 1px solid rgba(245, 239, 224, 0.15);
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.lasair-lightbox__close svg,
.lasair-lightbox__prev svg,
.lasair-lightbox__next svg { width: 24px; height: 24px; }
.lasair-lightbox__close:hover,
.lasair-lightbox__prev:hover,
.lasair-lightbox__next:hover {
  background: var(--c-rust);
  border-color: var(--c-rust);
}
.lasair-lightbox__close:active,
.lasair-lightbox__prev:active,
.lasair-lightbox__next:active { transform: scale(0.95); }
.lasair-lightbox__close:focus-visible,
.lasair-lightbox__prev:focus-visible,
.lasair-lightbox__next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 138, 44, 0.6);
}

.lasair-lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lasair-lightbox__prev  { left:  var(--sp-4); top: 50%; transform: translateY(-50%); }
.lasair-lightbox__next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

.lasair-lightbox__prev:hover  { transform: translateY(-50%); }
.lasair-lightbox__next:hover  { transform: translateY(-50%); }
.lasair-lightbox__prev:active { transform: translateY(-50%) scale(0.95); }
.lasair-lightbox__next:active { transform: translateY(-50%) scale(0.95); }

@media (max-width: 640px) {
  .lasair-lightbox { padding: var(--sp-16) var(--sp-2) var(--sp-4); }
  .lasair-lightbox__close { top: var(--sp-2); right: var(--sp-2); }
  .lasair-lightbox__prev  { left:  var(--sp-2); }
  .lasair-lightbox__next  { right: var(--sp-2); }
  .lasair-lightbox__img,
  .lasair-lightbox__video { max-height: 70vh; }
}

/* ---------- Public gallery (photos.php / videos.php) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.gallery-grid--video {
  /* Slightly larger tiles for video so the play icon reads at a glance. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gallery-tile { margin: 0; }
.gallery-tile__media {
  /* .card__media gives us the 4:3 aspect ratio + rust hover frame
     already used elsewhere on the site. We just position the heart
     and play overlay against it. */
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-cream-dark);
  aspect-ratio: 4 / 3;
}
.gallery-tile__media a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.gallery-tile__media img,
.gallery-tile__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--c-charcoal);
}
.gallery-tile__media:hover img,
.gallery-tile__media:hover .gallery-tile__video {
  transform: scale(1.02);
}
.gallery-tile__media img,
.gallery-tile__video {
  transition: transform 0.3s ease;
}
/* Play icon sits dead-centre over a video tile and brightens on hover. */
.gallery-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--c-cream);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.gallery-tile__play svg { width: 64px; height: 64px; opacity: 0.85; }
.gallery-tile__media:hover .gallery-tile__play svg { opacity: 1; }
.gallery-tile__media:hover .gallery-tile__play { transform: scale(1.04); }

.gallery-tile__desc {
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-stone);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  .gallery-grid--video { grid-template-columns: 1fr; }
  .gallery-tile__play svg { width: 48px; height: 48px; }
}

/* ---------- Admin gallery management ---------- */
.admin-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.admin-gallery-item {
  display: flex;
  flex-direction: column;
  background: var(--c-cream);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-md);
  overflow: hidden;
}
.admin-gallery-item__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-charcoal);
  overflow: hidden;
}
.admin-gallery-item__thumb img,
.admin-gallery-item__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-gallery-item__badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  background: rgba(20, 18, 14, 0.7);
  color: var(--c-cream);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.admin-gallery-item__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
}
.admin-gallery-item__form textarea { font-size: var(--fs-sm); }
.admin-gallery-item__form input[type="text"] { font-size: var(--fs-sm); }

/* Side-by-side photos / videos inputs on the gallery upload form. */
.admin-gallery-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 640px) {
  .admin-gallery-upload-grid { grid-template-columns: 1fr; }
}

/* Breed / Sex / Name row used on both the upload form and the search form. */
.admin-gallery-meta-grid,
.admin-gallery-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .admin-gallery-meta-grid,
  .admin-gallery-search-grid { grid-template-columns: 1fr; }
}

/* Breed + Sex selects sit side-by-side on each per-item edit card. */
.admin-gallery-item__meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

/* ---------- Puppy application form ---------- */
.application-form-error {
  background: #fceae5;
  border-left: 4px solid var(--c-rust-dark);
  color: var(--c-charcoal);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--sp-6);
  font-weight: 500;
}

/* Per-field error highlight + message. Three things make the error
   actually obvious:
   1. .form-group.is-invalid wraps the field in a tinted background
      with a left rule, so the eye finds it even on a long page.
   2. inputs / textareas / selects with [aria-invalid="true"] get a
      thick rust-dark border.
   3. .application-error-msg is a high-contrast strip with an arrow
      pointing up at the field — much harder to miss than small
      muted help text. */
.application-form .form-group.is-invalid {
  background: #fceae5;
  border-left: 4px solid var(--c-rust-dark);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-3) var(--sp-4);
  margin-left: calc(var(--sp-2) * -1);
}
.application-form [aria-invalid="true"].form-control,
.application-form .form-group.is-invalid .form-control {
  border: 2px solid var(--c-rust-dark);
  background: #fff;
}
.application-form [aria-invalid="true"].form-control:focus,
.application-form .form-group.is-invalid .form-control:focus {
  outline: 2px solid var(--c-rust);
  outline-offset: 1px;
}
.application-error-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  padding: 6px 10px;
  background: var(--c-rust-dark);
  color: var(--c-cream);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}
.application-error-msg__arrow {
  font-size: 0.75em;
  margin-top: 2px;
  flex-shrink: 0;
  opacity: 0.85;
}
.application-thanks {
  background: var(--c-cream-dark);
  border-left: 4px solid var(--c-forest);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--sp-4) 0 var(--sp-8);
}
.application-thanks h2 { margin-top: 0; }

/* Each section is a fieldset with a thin top rule. The legend is the
   "title" above the fieldset; .application-section__title styles it
   to look like an H2 even though it's a <legend>. */
.application-section {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-8);
}
.application-section + .application-section {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-cream-dark);
}
.application-section__title {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  padding: 0;
  color: var(--c-charcoal);
}
.application-section__intro {
  margin: 0 0 var(--sp-5);
  color: var(--c-stone);
  max-width: 48rem;
}
.application-note {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-stone);
}

/* Radio and checkbox groups use plain stacked labels with a touch of
   padding so each option is easy to tap. */
.application-radio-list,
.application-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-1);
}
.application-radio,
.application-checkbox,
.application-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  padding: 4px 0;
  line-height: 1.4;
}
.application-radio input,
.application-checkbox input,
.application-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Pet table: tabular layout on wide screens, stacked card per row on
   narrow screens (each input gets its own line). */
.application-pet-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-2);
}
.application-pet-table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2) var(--sp-2);
}
.application-pet-table td { padding: 4px var(--sp-2) 4px 0; }
.application-pet-table td:last-child { padding-right: 0; }
.application-pet-table .form-control { padding: 6px 8px; font-size: var(--fs-sm); }

@media (max-width: 720px) {
  .application-pet-table thead { display: none; }
  .application-pet-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-cream-dark);
  }
  .application-pet-table tr:last-child { border-bottom: 0; }
  .application-pet-table td {
    padding: 0;
    grid-column: span 1;
  }
  .application-pet-table td:nth-child(1),
  .application-pet-table td:nth-child(2) { grid-column: 1 / -1; }
}

/* ---------- Admin: applications detail screen ---------- */
.admin-application-admin-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}
@media (max-width: 720px) {
  .admin-application-admin-grid { grid-template-columns: 1fr; }
}

/* Pedigree block on the dog edit form — this dog's own parents.
   Solid border (not dashed) since these are normal record fields,
   not admin-only details. */
.admin-dog-pedigree {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-md);
}
.admin-dog-pedigree legend {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2);
}

/* Admin-only block on the dog edit form. Visually distinct from the
   public-fields block so the kennel can see at a glance where the
   public/private boundary is. */
.admin-dog-private {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-stone-light);
  border-radius: var(--r-md);
  background: rgba(255, 250, 240, 0.5);
}
.admin-dog-private legend {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2);
}

/* External sire fieldset on the litter edit form — revealed only when
   the sire dropdown is set to "Other". */
.admin-litter-external-sire {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-stone-light);
  border-radius: var(--r-md);
  background: rgba(255, 250, 240, 0.5);
}
.admin-litter-external-sire legend {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2);
}
.admin-litter-external-sire[hidden] { display: none; }

/* Per-puppy table on the litter edit form. Wide on desktop with a
   horizontal scroll fallback so we never truncate; on narrow screens
   it stacks rows for readability (each row becomes its own card). */
.admin-litter-puppies {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-md);
}
.admin-litter-puppies legend {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2);
}
.admin-litter-puppies__scroll { overflow-x: auto; }
.admin-litter-puppies__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 720px;
}
.admin-litter-puppies__table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--c-cream-dark);
}
.admin-litter-puppies__table td {
  padding: 4px var(--sp-2) 4px 0;
}
.admin-litter-puppies__table .form-control {
  padding: 6px 8px;
  font-size: var(--fs-sm);
}

/* Whelping / current-litter dropdown groups on the litter edit form. */
.admin-litter-pups {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-md);
  background: var(--c-cream-dark);
}
.admin-litter-pups + .admin-litter-pups { margin-top: var(--sp-3); }
.admin-litter-pups legend {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2);
}
.admin-litter-pups__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.admin-litter-pups__grid .form-group { margin-bottom: 0; }
@media (max-width: 720px) {
  .admin-litter-pups__grid { grid-template-columns: 1fr; }
}

.admin-application-placement {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-md);
  background: var(--c-cream-dark);
}
.admin-application-placement legend {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
  padding: 0 var(--sp-2);
}
.admin-application-placement__help {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-stone);
}
.admin-application-placement__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 720px) {
  .admin-application-placement__grid { grid-template-columns: 1fr; }
}

.admin-application-section dl.admin-application-fields {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: var(--sp-5);
  row-gap: var(--sp-3);
  margin: 0;
}
.admin-application-fields dt {
  color: var(--c-stone);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.admin-application-fields dd {
  margin: 0;
  color: var(--c-charcoal);
  font-size: var(--fs-sm);
  line-height: 1.5;
  word-break: break-word;
}
.admin-application-fields__empty { color: var(--c-stone); font-style: italic; }

@media (max-width: 720px) {
  .admin-application-section dl.admin-application-fields {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .admin-application-fields dt {
    margin-top: var(--sp-2);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
  }
}

/* ---------- Tags ---------- */
/* Filter row at the top of /photos.php and /videos.php — wraps gracefully
   on narrow screens. The admin uses the same chips inside an .admin-card,
   so the chip styling is independent of the filter container. */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-2);
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--c-cream-dark);
  color: var(--c-charcoal);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tag-chip:hover {
  background: var(--c-ochre-light, var(--c-cream-dark));
  border-color: var(--c-ochre, var(--c-stone-light));
  color: var(--c-charcoal);
}
.tag-chip--active {
  background: var(--c-rust);
  color: var(--c-cream);
  border-color: var(--c-rust-dark);
}
.tag-chip--active:hover {
  background: var(--c-rust-dark);
  color: var(--c-cream);
}
.tag-chip__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(42, 36, 30, 0.12);
  color: inherit;
}
.tag-chip--active .tag-chip__count {
  background: rgba(245, 239, 224, 0.25);
}

/* Compact chips that sit under a gallery tile next to the description. */
.tag-chip--mini {
  padding: 2px 9px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.gallery-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-1);
}

/* Per-tile structured metadata (name + breed + sex). Sits between the
   media and the description. The name is rendered with body weight so
   it reads as a quiet caption header, not a competing headline. */
.gallery-tile__meta {
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-1);
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.gallery-tile__meta-name {
  color: var(--c-charcoal);
  font-weight: 600;
}
.gallery-tile__meta-extra {
  color: var(--c-stone);
  font-size: var(--fs-xs);
}

/* Public gallery search bar. Single row of inline-block fields on
   wider screens; stacks under 640px. */
.gallery-search {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: var(--sp-3);
  align-items: end;
  padding: var(--sp-4);
  margin: var(--sp-6) 0 0;
  background: var(--c-cream-dark);
  border-radius: var(--r-md);
}
.gallery-search__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gallery-search__field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-stone);
}
.gallery-search__field select,
.gallery-search__field input[type="text"] {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-stone-light);
  background: var(--c-cream);
  color: var(--c-charcoal);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  width: 100%;
}
.gallery-search__field select:focus-visible,
.gallery-search__field input[type="text"]:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 1px;
}
.gallery-search__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

@media (max-width: 720px) {
  .gallery-search {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-search__field--grow,
  .gallery-search__actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .gallery-search { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}