/* Shared breed-page styles.
   Two jobs:
   1. The compact hero card. Breed pages used to open with the full breed
      write-up inside .li-hero, which pushed the loading marquee and the puppy
      grid roughly two screens down. The hero is now a short card (title,
      one line, location links) so the homepage sequence — header, hero card,
      loading marquee, puppy cards — all lands in the first screen.
      The .li-hero-wrap descendant selector is deliberate: every breed page
      still carries an in-body <style> that sets .li-hero padding, and a
      two-class selector beats it regardless of source order.
   2. The .breed-info* write-up rules, so the relocated prose renders the same
      way on all 200 breed pages. 35 of them already carried an identical copy
      of these rules in an in-body <style>, and the Yorkshire Terrier page
      carried the .breed-info-page rule the same way; those stayed where they
      were rather than being unpicked, and resolve to the same values. */

.li-hero-wrap .li-hero {
  padding: 26px 24px 22px;
}

@media (max-width: 600px) {
  .li-hero-wrap .li-hero {
    padding: 20px 18px 16px;
  }
}

.li-hero-wrap .li-hero-title {
  line-height: 1.1;
  margin-bottom: 8px;
}

.li-hero-card-sub {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.48;
  color: #FFFDF7;
  max-width: 660px;
  margin: 0 auto;
}

.li-hero-card-sub .li-hero-phone {
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

.breed-info {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(58,32,16,0.13);
  flex-shrink: 0;
  text-align: left;
}
.breed-info-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #3A2010;
  line-height: 1.2;
  margin-bottom: 10px;
}
.breed-info-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  font-weight: 700;
  color: #7B4A22;
  line-height: 1.25;
  margin: 20px 0 6px;
}
.breed-info-body {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(0.92rem, 1.4vw, 1rem);
  line-height: 1.6;
  color: #5a3a22;
  overflow-wrap: break-word;
}
.breed-info-body + .breed-info-body {
  margin-top: 12px;
}
.breed-info-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px 40px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .breed-info-page { padding: 0 18px 28px; }
}

/* ── Real customer videos ─────────────────────────────────────────
   Sits between the puppy grid and the breed write-up. The .breed-video
   boxes are empty until /breed-videos.js swaps an iframe in on scroll,
   so they need to hold their own height to avoid a layout jump. */
.breed-videos {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 24px 4px;
  box-sizing: border-box;
}
.breed-videos-title {
  margin: 0 0 16px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--brown, #3A2010);
  text-align: center;
}
.breed-videos-grid {
  display: grid;
  /* Four videos per breed page: four across on desktop, 2 x 2 on phones. */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  justify-items: center;
}
/* These are mostly Shorts, so the frame is portrait and the video fills it
   rather than letterboxing into a strip. Height is driven by the 9:16 ratio,
   and capping the *width* at 60vh x 9/16 is what keeps a frame from growing
   past roughly 60% of the screen height — aspect-ratio plus max-height is
   unreliable, aspect-ratio plus max-width is not. On a phone the column is
   narrower than that cap, so width is what binds there. */
.breed-video {
  position: relative;
  width: 100%;
  max-width: calc(60vh * 9 / 16);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: #0d0d0d;
  box-shadow: 0 2px 10px rgba(58, 32, 16, 0.14);
}
.breed-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.breed-videos-more {
  margin: 14px 0 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(0.9rem, 2.4vw, 1rem);
}
.breed-videos-more a {
  color: var(--brown, #3A2010);
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 700px) {
  .breed-videos { padding: 20px 18px 2px; }
  .breed-videos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}