/* Styles for the shared, slug-driven puppy profile page. */
.puppy-profile-hero {
  padding: 30px 0 82px;
  background: radial-gradient(ellipse at 92% 12%, rgba(229,219,199,.45), transparent 33%), var(--paper);
}
.profile-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; color: #8b9187; font-size: 10px; }
.profile-breadcrumbs a { color: #59675b; transition: color .2s ease; }
.profile-breadcrumbs a:hover { color: var(--coral-dark); }
.profile-breadcrumbs > span:last-child { color: var(--coral-dark); font-weight: 700; }
.profile-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(38px, 6.5vw, 90px); }
.profile-photo-column { min-width: 0; }
.profile-photo-frame { position: relative; min-height: 530px; max-height: 650px; overflow: hidden; isolation: isolate; background: var(--paper-deep); border-radius: 45% 45% 3px 3px; touch-action: pan-y; }
.profile-photo-frame::after { position: absolute; z-index: 4; inset: 0; border: 1px solid rgba(255,255,255,.3); border-radius: inherit; content: ''; pointer-events: none; }
.gallery-image-trigger { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; }
.gallery-image-trigger > img { display: block; width: 100%; height: 100%; min-height: 530px; max-height: 650px; object-fit: cover; object-position: center; transition: transform .35s ease; user-select: none; -webkit-user-drag: none; }
.gallery-image-trigger:hover > img { transform: scale(1.025); }
.profile-photo-status { position: absolute; z-index: 5; bottom: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; color: var(--ink); background: rgba(255,253,250,.95); font-size: 10px; font-weight: 700; pointer-events: none; }
.profile-photo-status > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #7c9b6e; }
.gallery-arrow, .gallery-zoom-button { position: absolute; z-index: 5; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #26372e; background: rgba(255,253,250,.94); box-shadow: 0 8px 30px rgba(38,55,46,.13); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.gallery-arrow { top: 50%; width: 46px; height: 46px; transform: translateY(-50%); font-family: Georgia, serif; font-size: 36px; line-height: 1; }
.gallery-arrow:hover { background: #fff; }
.gallery-arrow:active { transform: translateY(-50%) scale(.94); }
.gallery-arrow-prev { left: 16px; }
.gallery-arrow-next { right: 16px; }
.gallery-zoom-button { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 24px; }
.gallery-zoom-button:hover { transform: scale(1.05); background: #fff; }
.gallery-meta-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 2px 10px; color: #80897e; font-size: 10px; }
.gallery-meta-line #gallery-counter { color: var(--coral-dark); font-weight: 700; }
.gallery-swipe-hint { text-align: right; }
.profile-gallery-thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.gallery-thumbnail { position: relative; display: block; min-width: 0; height: 92px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 9px; background: var(--paper-deep); cursor: pointer; opacity: .75; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.gallery-thumbnail:hover { opacity: 1; transform: translateY(-2px); }
.gallery-thumbnail.is-active { border-color: var(--coral-dark); opacity: 1; box-shadow: 0 0 0 2px rgba(166,111,72,.12); }
.gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbnail:focus-visible, .gallery-arrow:focus-visible, .gallery-zoom-button:focus-visible, .gallery-image-trigger:focus-visible { outline: 3px solid var(--coral-dark); outline-offset: 3px; }
.puppy-gallery-modal { width: min(96vw, 1180px); max-width: none; max-height: 94dvh; margin: auto; padding: 0; overflow: visible; border: 0; color: #fff; background: transparent; }
.puppy-gallery-modal::backdrop { background: rgba(14,18,15,.91); backdrop-filter: blur(7px); }
.gallery-modal-content { position: relative; display: flex; min-height: 320px; flex-direction: column; align-items: center; justify-content: center; }
.gallery-modal-content > img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(94dvh - 70px); object-fit: contain; border-radius: 5px; }
.gallery-modal-close { position: absolute; z-index: 3; top: -15px; right: -12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(29,34,29,.8); font-size: 32px; line-height: 1; cursor: pointer; }
.gallery-modal-arrow { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 50px; height: 50px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(29,34,29,.68); font-size: 39px; line-height: 1; cursor: pointer; }
.gallery-modal-arrow:hover, .gallery-modal-close:hover { background: rgba(80,87,77,.9); }
.gallery-modal-prev { left: 14px; }
.gallery-modal-next { right: 14px; }
.gallery-modal-caption { display: flex; width: 100%; justify-content: space-between; gap: 20px; padding: 13px 4px 0; color: rgba(255,255,255,.85); font-size: 12px; }
.gallery-modal-caption span:last-child { white-space: nowrap; color: rgba(255,255,255,.65); }
.profile-photo-caption { display: flex; align-items: center; gap: 9px; margin: 17px 0 0 4px; color: #7b857a; font-family: var(--heading); font-size: 14px; font-style: italic; }
.profile-photo-caption span { color: var(--coral); font-family: var(--body); font-size: 18px; }
.profile-summary { padding: 12px 0 0; }
.profile-summary .eyebrow { margin-bottom: 18px; }
.profile-summary h1 { margin-bottom: 8px; font-size: clamp(54px, 6vw, 78px); }
.profile-title-period { color: var(--coral); }
.profile-gender { margin-bottom: 18px; color: #858b81; font-size: 12px; font-weight: 600; }
.profile-description { max-width: 510px; margin-bottom: 26px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.profile-price-panel { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; padding: 18px 20px; border: 1px solid #e8ddcf; background: rgba(255,253,250,.75); }
.profile-price-panel > div { display: flex; flex-direction: column; align-items: flex-start; }
.profile-overline { color: #7c877d; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.profile-price-panel strong { margin: 1px 0 0; color: var(--coral-dark); font-family: var(--heading); font-size: 35px; font-weight: 600; letter-spacing: -.04em; line-height: 1.25; }
.profile-price-panel small { color: #8a9085; font-size: 9px; }
.profile-price-flower { color: var(--gold); font-size: 42px; }
.profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: 25px; border-top: 1px solid #e8dfd4; border-bottom: 1px solid #e8dfd4; }
.profile-fact { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 15px 10px 15px 0; }
.profile-fact + .profile-fact { padding-left: 12px; border-left: 1px solid #e8dfd4; }
.profile-fact-icon { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: var(--coral-dark); font-size: 14px; }
.profile-fact > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.profile-fact small { margin-bottom: 2px; color: #8b9187; font-size: 9px; }
.profile-fact strong { overflow-wrap: anywhere; color: #38483d; font-size: 10px; line-height: 1.45; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; }
.profile-actions .button { gap: 15px; }
.profile-availability-note { margin: 19px 0 0; color: #8b9187; font-size: 9px; line-height: 1.7; }
.profile-story-section { background: #fffdfa; }
.profile-story-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); gap: clamp(50px, 8vw, 115px); align-items: start; }
.profile-story-copy h2 { max-width: 590px; margin-bottom: 22px; font-size: clamp(39px, 4.4vw, 57px); }
.profile-story-copy > p:not(.eyebrow) { max-width: 640px; margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.95; }
.profile-highlights-heading { margin: 30px 0 14px; font-family: var(--heading); font-size: 22px; font-weight: 500; }
.profile-trait-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.profile-trait-list li { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #e9e0d5; background: #fffefa; color: #566459; font-size: 10px; font-weight: 600; }
.profile-trait-list li span { color: var(--gold); }
.profile-help-card { position: relative; overflow: hidden; padding: 34px 31px 31px; background: #f4ede3; }
.profile-help-flower { position: absolute; top: 7px; right: 17px; color: rgba(214,110,85,.17); font-size: 80px; line-height: 1; }
.profile-help-card .eyebrow { position: relative; margin-bottom: 15px; }
.profile-help-card h3 { position: relative; max-width: 320px; margin-bottom: 16px; font-family: var(--heading); font-size: 31px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.profile-help-card > p:not(.eyebrow) { position: relative; margin-bottom: 18px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.profile-help-card ul { display: grid; gap: 10px; margin: 0 0 23px; padding: 0; list-style: none; }
.profile-help-card li { display: flex; align-items: flex-start; gap: 9px; color: #526055; font-size: 10px; }
.profile-help-card li::before { flex: 0 0 auto; color: var(--coral); content: '✓'; font-weight: 700; }
.profile-help-card .text-link { position: relative; }
.profile-enquiry-section { background: #f6f0e7; }
.profile-enquiry-section .contact-grid { align-items: start; }
.profile-enquiry-section .contact-copy { padding-top: 12px; }
.profile-enquiry-section .contact-copy h2 { font-size: clamp(43px, 4.5vw, 58px); }
.profile-enquiry-section .contact-note { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 25px; }
.profile-enquiry-section .contact-note-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border: 1px solid #ded4c7; border-radius: 50%; color: var(--coral); }
.profile-enquiry-section .contact-note div { display: grid; gap: 4px; }
.profile-enquiry-section .contact-note strong { font-size: 11px; }
.profile-enquiry-section .contact-note div span { color: var(--muted); font-size: 10px; line-height: 1.7; }
.profile-enquiry-section .contact-detail { display: flex; align-items: flex-start; gap: 12px; }
.profile-enquiry-section .contact-detail-icon { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: var(--coral-dark); }
.profile-enquiry-section .contact-detail > div { display: grid; gap: 2px; }
.profile-enquiry-section .contact-label { color: #889084; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.profile-enquiry-section .contact-detail a { font-size: 12px; font-weight: 700; }
.profile-enquiry-section .contact-detail small { color: #969b92; font-size: 9px; }
.profile-enquiry-section .form-privacy { margin: 11px 0 0; color: #979a90; font-size: 9px; line-height: 1.6; }
.profile-not-found { min-height: 60vh; background: var(--paper); }
.not-found-inner { max-width: 650px; margin-inline: auto; text-align: center; }
.not-found-paw { display: block; margin-bottom: 15px; font-size: 43px; }
.not-found-inner .eyebrow { justify-content: center; }
.not-found-inner h1 { margin-inline: auto; font-size: clamp(44px, 7vw, 68px); }
.not-found-inner > p:not(.eyebrow) { margin: 0 auto 25px; max-width: 500px; color: var(--muted); font-size: 13px; }

.profile-breadcrumbs a:focus-visible,
.puppy-name-link:focus-visible,
.profile-actions a:focus-visible { outline: 2px solid var(--coral-dark); outline-offset: 4px; }
.puppy-name-link { transition: color .2s ease; }
.puppy-name-link:hover { color: var(--coral-dark); }

@media (max-width: 900px) {
  .profile-hero-grid { gap: 35px; }
  .profile-photo-frame { min-height: 460px; }
  .gallery-image-trigger > img { min-height: 460px; }
  .profile-summary h1 { font-size: clamp(48px, 6.5vw, 64px); }
  .profile-fact { gap: 6px; padding-right: 6px; }
  .profile-fact + .profile-fact { padding-left: 7px; }
  .profile-fact-icon { width: 26px; height: 26px; font-size: 12px; }
  .profile-fact strong { font-size: 9px; }
  .profile-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .profile-story-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .78fr); gap: 40px; }
}
@media (max-width: 760px) {
  .puppy-profile-hero { padding: 24px 0 65px; }
  .profile-breadcrumbs { margin-bottom: 24px; }
  .profile-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .profile-photo-frame { min-height: 0; height: clamp(330px, 95vw, 540px); max-height: none; }
  .gallery-image-trigger > img { min-height: 0; height: 100%; max-height: none; }
  .profile-photo-frame { width: 100%; border-radius: 42% 42% 3px 3px; }
  .profile-summary { padding-top: 0; }
  .profile-summary .eyebrow { margin-bottom: 12px; }
  .profile-summary h1 { margin-bottom: 5px; font-size: clamp(49px, 13vw, 70px); }
  .profile-description { font-size: 13px; }
  .profile-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .profile-fact { flex-direction: column; gap: 7px; padding: 13px 8px 13px 0; }
  .profile-fact + .profile-fact { padding-left: 10px; }
  .profile-fact strong { font-size: 10px; }
  .profile-actions { flex-direction: row; align-items: center; }
  .profile-story-grid { grid-template-columns: 1fr; gap: 35px; }
  .profile-story-copy h2 { font-size: clamp(39px, 10vw, 53px); }
  .profile-help-card { padding: 28px 23px 25px; }
  .profile-enquiry-section .contact-copy { padding-top: 0; }
}
@media (max-width: 760px) {
  .gallery-arrow { display: none; }
  .profile-gallery-thumbnails { display: flex; gap: 9px; overflow-x: auto; padding: 2px 1px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .gallery-thumbnail { flex: 0 0 76px; height: 82px; scroll-snap-align: start; }
  .gallery-meta-line { font-size: 9px; }
  .gallery-swipe-hint { max-width: 63%; }
  .puppy-gallery-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; }
  .gallery-modal-content > img { max-width: 100vw; max-height: calc(88dvh - 48px); border-radius: 0; }
  .gallery-modal-close { top: 12px; right: 12px; background: rgba(29,34,29,.8); }
  .gallery-modal-arrow { width: 42px; height: 42px; }
  .gallery-modal-prev { left: 10px; }
  .gallery-modal-next { right: 10px; }
  .gallery-modal-caption { padding: 12px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-image-trigger > img, .gallery-thumbnail, .gallery-arrow, .gallery-zoom-button { transition: none; }
}
@media (max-width: 420px) {
  .profile-breadcrumbs { gap: 7px; font-size: 9px; }
  .profile-price-panel { padding: 15px; }
  .profile-price-panel strong { font-size: 31px; }
  .profile-facts { gap: 0; }
  .profile-fact-icon { width: 25px; height: 25px; }
  .profile-fact strong { font-size: 9px; }
  .profile-actions { align-items: stretch; flex-direction: column; }
  .profile-actions .button { width: 100%; }
  .profile-actions .text-link { align-self: flex-start; }
  .profile-trait-list li { flex: 1 1 auto; }
  .profile-help-card h3 { font-size: 28px; }
}
.profile-photo-frame.profile-photo-unavailable::before { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; color: #7d887d; content: 'Puppy photo unavailable'; font-family: var(--heading); font-size: 20px; text-align: center; }


/* iPad portrait and compact tablets: give the puppy profile a full-width gallery. */
@media (min-width: 761px) and (max-width: 820px) {
  .profile-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .profile-photo-frame { width: 100%; min-height: 0; height: clamp(340px, 65vw, 500px); }
  .gallery-image-trigger > img { min-height: 0; height: 100%; max-height: none; }
  .profile-summary { padding-top: 0; }
  .profile-summary h1 { font-size: clamp(49px, 8vw, 68px); }
  .profile-actions { align-items: center; flex-direction: row; gap: 15px; }
  .profile-story-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}