/*
 * Dogwood Animal Rescue — adoptable pets grid
 * Paste alongside dogwood-pets.js in a WordPress "Custom HTML" block.
 *
 * Theming: everything is driven by the CSS custom properties below.
 * Open your theme's existing pages, grab the real hex codes / font-family
 * used elsewhere on the site, and swap the values in :root so this matches.
 */
:root {
  /* Reconciled 2026-08-30 to the real theme values the homepage hero
     (dogwood-hero.css) already established live on the site -- these were
     a green placeholder before anyone had grabbed the actual brand colors.
     See wordpress-embed/README.md's "Brand" section for the canonical
     token list; keep these two files in sync going forward. */
  --dw-primary: #0085a8;      /* was #2f6b3a placeholder -- now hero's --dw-teal-medium */
  --dw-primary-dark: #0a5b79; /* was #234f2b placeholder -- now hero's --dw-teal-dark */
  --dw-accent: #e8a33d;       /* unchanged -- already matched the hero's gold CTA color */
  --dw-accent-text: #2a2a2a; /* text/icon color ON TOP of --dw-accent -- pick whichever of light/dark passes 4.5:1 contrast against it, don't assume white */
  --dw-text: #2a2a2a;
  --dw-muted: #6b6b6b;
  --dw-card-bg: #ffffff;
  --dw-page-bg: transparent;  /* usually leave transparent to inherit theme bg */
  --dw-radius: 14px;
  --dw-font: inherit;         /* set to your theme's body font-family if it isn't inherited */
  --dw-overlay-bg: rgba(15, 20, 15, 0.7); /* solid (opaque) panel behind the card's name/meta text */
}

.dw-pets-wrap {
  background: var(--dw-page-bg);
  font-family: var(--dw-font);
  color: var(--dw-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4px;
  box-sizing: border-box;
}

.dw-pets-wrap * {
  box-sizing: border-box;
}

.dw-pets-status {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--dw-muted);
  font-size: 1.05rem;
}

.dw-last-updated {
  text-align: center;
  font-size: 0.8rem;
  color: var(--dw-muted);
  padding-top: 0.5rem;
}

.dw-last-updated.dw-stale {
  color: #9a5b00; /* deliberately not a theme variable -- a warning state should stay visually distinct regardless of brand color */
  font-weight: 600;
}

.dw-pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  padding: 1rem 0 2rem;
}

.dw-pet-card {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--dw-card-bg);
  border-radius: var(--dw-radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  display: block;
  cursor: pointer;
  border: none;
  text-align: left;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  color: inherit;
}

.dw-pet-card:hover,
.dw-pet-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  outline: 2px solid var(--dw-accent);
  outline-offset: 2px;
}

.dw-pet-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #eee;
}

.dw-pet-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--dw-overlay-bg);
  padding: 0.6rem 0.85rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}

/* Scoped under .dw-pets-wrap (and .dw-pet-card where cheap) rather than
   just the bare class: WordPress themes routinely style h2/h3/p globally
   within ".entry-content" at (0,1,1) specificity, which beats a plain
   single-class rule like ".dw-pet-name" (0,1,0) -- exactly what happened
   here (the theme's h3 margin/font-size were winning over ours, making
   the live card overlay much taller than the local preview). Chaining
   two of our own classes gets us to (0,2,0) or higher, which beats that
   pattern without needing !important. Same reasoning applies to every
   heading/paragraph rule below. */
.dw-pets-wrap .dw-pet-card .dw-pet-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.1rem;
  line-height: normal;
}

.dw-pets-wrap .dw-pet-meta {
  font-size: 0.85rem;
  color: var(--dw-muted);
  line-height: 1.4;
}

/* card overlay sits on a photo, not the page background -- needs light text */
.dw-pets-wrap .dw-pet-info .dw-pet-meta {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- routed detail view (replaces the grid in place, no overlay) ---- */
.dw-view-detail {
  padding: 0.5rem 0 2rem;
  max-width: 720px;
  margin: 0 auto;
}

.dw-pets-wrap .dw-back-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dw-primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.4rem 0;
  margin-bottom: 1rem;
  font-family: inherit;
}

.dw-pets-wrap .dw-back-link:hover {
  text-decoration: underline;
}

/* ---- carousel (inline, inside the detail view) ---- */
.dw-carousel {
  margin: 0 0 1.25rem;
}

.dw-carousel-main {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* most of the photo set is portrait (see earlier aspect-ratio survey); a landscape 4:3 box was cropping the majority of images oddly */
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}

/* .dw-view-detail already caps width at 720px, so the box's WIDTH never
   grows past that regardless of window size -- but at 3:4 that's still
   a 960px-tall box, which can dominate a desktop browser window
   vertically. Cap the height once there's room for it to matter; below
   this breakpoint (phones/small tablets) the uncapped 3:4 box is
   appropriately sized relative to a typically-tall mobile viewport, so
   leave it alone there. object-fit: cover on the image absorbs the
   extra crop this introduces at the capped height. */
@media (min-width: 700px) {
  .dw-carousel-main {
    max-height: min(65vh, 640px);
  }
}

/* ---- short landscape: photo | text two-column detail view ----
   Added 2026-10-12 after a bug report that cats' ears were cropped off on
   iPad Air landscape (1180x820) and small laptops. The 65vh cap above
   leaves the box full-width but shallow there (~720x530 or less), so
   object-fit:cover crops a 3:4 portrait photo down to roughly half its
   height. Here the photo column is instead sized FROM the available
   height (3:4 preserved, so no crop), with the text beside it rather
   than below. Only the Back link spans both columns.
   Every rule is scoped to :has(> .dw-detail-text) so a visitor whose
   browser still has the OLD cached JS (no wrapper div) gets the old
   single-column layout instead of a scrambled grid -- the JS and CSS are
   cached independently for a year.
   Trigger is deliberately height-based: tall landscape windows (big
   desktop monitors) keep the single-column layout above. */
@media (min-width: 700px) and (orientation: landscape) and (max-height: 900px) {
  .dw-view-detail:has(> .dw-detail-text) {
    max-width: 1000px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }

  .dw-view-detail:has(> .dw-detail-text) .dw-back-link {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .dw-view-detail:has(> .dw-detail-text) .dw-carousel {
    grid-column: 1;
    margin: 0;
    position: sticky;
    top: 1rem;
    /* height budget = viewport minus the Back link and some breathing
       room; width follows from the 3:4 ratio. The vw term keeps very
       wide-and-short phone landscapes from starving the text column. */
    width: min(46vw, calc((100vh - 6.5rem) * 0.75));
    width: min(46vw, calc((100dvh - 6.5rem) * 0.75));
  }

  .dw-view-detail:has(> .dw-detail-text) .dw-carousel-main {
    max-height: none;
  }

  .dw-view-detail:has(> .dw-detail-text) .dw-detail-text {
    grid-column: 2;
    min-width: 0;
  }

  /* extra .dw-detail-text so this beats the later centered rules at
     the same base specificity regardless of source order */
  .dw-pets-wrap .dw-view-detail:has(> .dw-detail-text) .dw-detail-text .dw-detail-name,
  .dw-pets-wrap .dw-view-detail:has(> .dw-detail-text) .dw-detail-text .dw-pet-meta {
    text-align: left;
  }
}

.dw-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.9s ease;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Ken Burns: slow pan + zoom while a slide is showing. Variants alternate
   the pan direction so consecutive photos don't all drift the same way.
   Restarted per-slide in JS by toggling these classes off and back on. */
.dw-kenburns {
  animation-duration: 6.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes dw-kb-1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.15) translate(-3%, -2%); } }
@keyframes dw-kb-2 { from { transform: scale(1.15) translate(3%, -2%); } to { transform: scale(1) translate(0, 0); } }
@keyframes dw-kb-3 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.15) translate(3%, 2%); } }
@keyframes dw-kb-4 { from { transform: scale(1.15) translate(-3%, 2%); } to { transform: scale(1) translate(0, 0); } }

.dw-kb-1 { animation-name: dw-kb-1; }
.dw-kb-2 { animation-name: dw-kb-2; }
.dw-kb-3 { animation-name: dw-kb-3; }
.dw-kb-4 { animation-name: dw-kb-4; }

@media (prefers-reduced-motion: reduce) {
  .dw-kenburns {
    animation: none !important;
  }
}

.dw-carousel-toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dw-carousel-toggle:hover {
  background: rgba(0, 0, 0, 0.65);
}

.dw-carousel-zoom-hint {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  pointer-events: none;
}

.dw-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dw-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

.dw-carousel-prev { left: 0.6rem; }
.dw-carousel-next { right: 0.6rem; }

.dw-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding-top: 0.6rem;
}

.dw-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: #d5d0c4;
  cursor: pointer;
  padding: 0;
}

.dw-carousel-dot.dw-active {
  background: var(--dw-primary);
}

/* ---- lightbox (full-screen photo view) ---- */
.dw-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dw-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
}

.dw-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.dw-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dw-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.dw-lightbox-prev { left: 1rem; }
.dw-lightbox-next { right: 1rem; }

.dw-lightbox-counter {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

.dw-pets-wrap .dw-detail-name {
  font-size: 1.8rem;
  margin: 0 0 0.25rem;
  color: var(--dw-primary-dark);
  line-height: normal;
  text-align: center;
}

.dw-pets-wrap .dw-view-detail .dw-pet-meta {
  margin-bottom: 0.9rem;
  text-align: center;
}

/* the bio text nodes are plain <p> tags with no class of their own, so
   without this they'd tie ".entry-content p" at equal specificity and
   the winner would come down to fragile stylesheet load order */
.dw-pets-wrap .dw-view-detail p {
  margin: 0 0 0.8rem;
  line-height: 1.55;
}

/* Native cross-fade between grid <-> detail. Browsers without support for
   View Transitions just swap instantly -- still correct, just not animated. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}

.dw-adopt-btn {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--dw-accent);
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  transition: filter 0.15s ease;
}

/* WordPress themes routinely style ".entry-content a:visited" (and
   similar) at (0,2,1) specificity to color post-content links -- since
   this button lives inside .entry-content, that rule beats a plain
   ".dw-adopt-btn" (0,1,0) the moment a visitor has clicked it once.
   Scoping under the wrapper + naming :link/:visited/:hover/:focus
   explicitly gets us to (0,3,0), which wins without needing !important. */
.dw-pets-wrap .dw-adopt-btn,
.dw-pets-wrap .dw-adopt-btn:link,
.dw-pets-wrap .dw-adopt-btn:visited {
  color: var(--dw-accent-text);
}

.dw-pets-wrap .dw-adopt-btn:hover,
.dw-pets-wrap .dw-adopt-btn:focus-visible {
  filter: brightness(0.92);
  color: var(--dw-accent-text);
}

/* ---- mobile ---- */
@media (max-width: 480px) {
  .dw-pets-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.85rem;
  }
  .dw-pets-wrap .dw-pet-card .dw-pet-name {
    font-size: 1.05rem;
  }
  .dw-pets-wrap .dw-detail-name {
    font-size: 1.4rem;
  }
  .dw-lightbox-nav {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.6rem;
  }
  .dw-lightbox-close {
    font-size: 1.8rem;
  }
}