/* Delhi Golden Doodle campaign image system
   Shared only by the homepage and Goldendoodle service pages. */

.dgd-campaign-hero,
.dgd-section-visual,
.dgd-final-visual {
  box-sizing: border-box;
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #eadfc9;
  border: 1px solid rgba(200, 135, 30, .3);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(42, 33, 27, .18);
}

.dgd-campaign-hero picture,
.dgd-section-visual picture,
.dgd-final-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Both shapes are supported: an <img> wrapped in <picture> (the original
   art-directed images) AND a bare <img> child. Scoping these rules to
   `picture > img` alone left every unwrapped image completely unsized, so it
   rendered at its intrinsic width inside an overflow:hidden box and only the
   top-left corner of the photograph was visible. */
.dgd-campaign-hero > img,
.dgd-section-visual > img,
.dgd-final-visual > img,
.dgd-campaign-hero picture > img,
.dgd-section-visual picture > img,
.dgd-final-visual picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The supplied logo lockup is used exactly as provided on hero photographs. */
.dgd-photo-logo {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: block;
  width: clamp(92px, 12vw, 132px);
  padding: 7px 9px;
  overflow: hidden;
  background: rgba(255, 252, 244, .94);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(42, 33, 27, .2);
  line-height: 0;
}

.dgd-photo-logo .dgd-photo-logo__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Homepage hero uses the existing two-column container at large widths. */
.dgd-campaign-hero--home {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.dgd-home-hero-grid .hero-badge {
  display: none !important;
}

@media (min-width: 1100px) {
  .hero > .dgd-container.dgd-home-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    gap: 38px;
    max-width: 1240px;
  }
}

@media (max-width: 1099px) {
  .dgd-campaign-hero--home {
    max-width: 820px;
    margin: 36px auto 0;
  }
}

/* A unique hero lives inside every service-page hero, below its existing copy. */
.dgd-campaign-hero--service {
  z-index: 2;
  width: min(1100px, calc(100% - 48px));
  aspect-ratio: 16 / 9;
  max-height: 480px;
  margin: 32px auto 0;
}

.dgd-campaign-hero--service picture > img {
  object-position: center;
}

/* Supporting images are intentionally limited to high-value homepage sections. */
.dgd-section-visual {
  width: 100%;
  aspect-ratio: 3 / 2;
}

.dgd-section-visual--wide {
  max-height: 560px;
  margin: 36px 0 8px;
}

.dgd-section-visual--compact {
  margin: 28px 0 30px;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(42, 33, 27, .14);
}

.dgd-visual-grid {
  display: grid;
  gap: 20px;
  margin: 36px 0 12px;
}

.dgd-visual-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dgd-visual-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dgd-visual-grid .dgd-section-visual {
  min-width: 0;
}

/* The final CTA keeps copy readable while the close-up remains fully photographic. */
.final-cta.dgd-final-cta-image {
  isolation: isolate;
  min-height: 660px;
  padding-right: max(52%, 620px);
  text-align: left;
}

.final-cta.dgd-final-cta-image::before {
  z-index: 0;
  background: linear-gradient(90deg, rgba(31, 47, 43, .98) 0%, rgba(62, 48, 38, .96) 46%, rgba(62, 48, 38, .45) 69%, rgba(62, 48, 38, .06) 100%);
}

.dgd-final-visual {
  position: absolute;
  inset: 0 0 0 44%;
  z-index: -1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dgd-final-visual picture > img {
  object-position: 72% center;
}

.final-cta.dgd-final-cta-image > :not(.dgd-final-visual) {
  max-width: 640px;
  margin-left: 0;
  margin-right: 0;
}

.final-cta.dgd-final-cta-image .final-cta-buttons,
.final-cta.dgd-final-cta-image .cta-services-links {
  justify-content: flex-start;
}

.final-cta.dgd-final-cta-image .cta-services-links {
  margin-left: 0;
}

@media (max-width: 900px) {
  .dgd-visual-grid--three {
    grid-template-columns: 1fr;
  }

  .dgd-visual-grid--three .dgd-section-visual {
    max-width: 720px;
    margin: 0 auto;
  }

  .final-cta.dgd-final-cta-image {
    min-height: 0;
    padding: 56px 20px 64px;
    text-align: center;
  }

  .final-cta.dgd-final-cta-image::before {
    background: linear-gradient(180deg, rgba(31, 47, 43, .16) 0%, rgba(31, 47, 43, .92) 43%, rgba(62, 48, 38, .99) 100%);
  }

  .dgd-final-visual {
    position: relative;
    inset: auto;
    z-index: 0;
    width: min(720px, 100%);
    aspect-ratio: 16 / 9;
    margin: 0 auto 36px;
    border: 1px solid rgba(244, 200, 106, .45);
    border-radius: 18px;
  }

  .final-cta.dgd-final-cta-image > :not(.dgd-final-visual) {
    margin-left: auto;
    margin-right: auto;
  }

  .final-cta.dgd-final-cta-image .final-cta-buttons,
  .final-cta.dgd-final-cta-image .cta-services-links {
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .dgd-campaign-hero,
  .dgd-section-visual {
    border-radius: 14px;
  }

  .dgd-campaign-hero--service {
    width: calc(100% - 28px);
    margin-top: 24px;
  }

  .dgd-visual-grid,
  .dgd-visual-grid--two {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 28px;
  }

  .dgd-photo-logo {
    right: 9px;
    bottom: 9px;
    width: 92px;
    padding: 5px 7px;
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dgd-campaign-hero,
  .dgd-section-visual,
  .dgd-final-visual {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   LAYOUT CONSOLIDATION
   --------------------------------------------------------------------------
   This file loads after design-system.css, so a few rules above were silently
   outranking the hero system defined there. Everything below settles the
   ownership: image-system.css is the authority for these two components.
   ========================================================================== */

/* ---- Homepage hero grid -------------------------------------------------
   Replaces the 1.08fr/.92fr split further up this file, which beat
   design-system.css on specificity. 55% copy / 45% visual, container widened
   to 1280px. */
@media (min-width: 1100px) {
  .hero > .dgd-container.dgd-home-hero-grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 64px);
    max-width: 1280px;
    align-items: center;
  }
}

/* The support card is a deliberate part of the hero composition, so the
   blanket hide further up this file no longer applies to it. */
.dgd-home-hero-grid .hero-badge.dgd-hero__float {
  display: block !important;
}

/* ---- Final CTA: a real two-column grid -----------------------------------
   Previously this relied on `padding-right: max(52%, 620px)` with the figure
   absolutely positioned at `inset: 0 0 0 44%` and `z-index: -1`. That coupling
   is fragile — any stacking or containing-block change collapses the text into
   a narrow strip while the image floats free, which is exactly what happened.
   It is now an explicit grid: text in column one, image spanning column two. */
@media (min-width: 901px) {
  .final-cta.dgd-final-cta-image {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    column-gap: clamp(36px, 4vw, 64px);
    align-items: center;
    align-content: center;
    max-width: 1280px;
    margin-inline: auto;
    padding: clamp(64px, 6vw, 96px) 24px;
    min-height: 0;
    text-align: left;
  }
  /* every text child stacks in column one */
  .final-cta.dgd-final-cta-image > :not(.dgd-final-visual) {
    grid-column: 1;
    max-width: 640px;
    margin-left: 0;
    margin-right: 0;
  }
  /* the photograph occupies column two and spans the full text height */
  .final-cta.dgd-final-cta-image > .dgd-final-visual {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    inset: auto;
    z-index: 0;
    align-self: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(244, 200, 106, .34);
    border-radius: 22px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .32);
  }
  .final-cta.dgd-final-cta-image > .dgd-final-visual picture > img {
    object-fit: cover;
    object-position: center;
  }
  /* The old scrim faded left-to-right to blend the bleeding photo. With the
     image in its own column it would darken the copy for no reason, so it
     becomes an even, subtle wash. */
  .final-cta.dgd-final-cta-image::before {
    background: linear-gradient(180deg, rgba(31, 47, 43, .28) 0%, rgba(62, 48, 38, .34) 100%);
  }
}

/* ---- Final CTA: tablet and mobile --------------------------------------- */
@media (max-width: 900px) {
  .final-cta.dgd-final-cta-image {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* text first, image below it */
  .final-cta.dgd-final-cta-image > .dgd-final-visual {
    order: 2;
    margin: 32px auto 0;
  }
  .final-cta.dgd-final-cta-image .final-cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   HOMEPAGE IMAGE PASS
   --------------------------------------------------------------------------
   Every photograph on the homepage, reviewed against its source file:

     hero            1600x900  (16:9)  -> 4:3 frame, 12.5% trimmed a side
     section visuals 1200x800  (3:2)   -> 3:2 frame, ZERO crop
     final CTA       1200x675  (16:9)  -> 16:9 frame, ZERO crop
     logo lockup      350x137          -> object-fit: contain, never cropped

   Aspect ratios are matched to the source wherever possible so subjects are
   not trimmed at all; the hero is the only frame that crops, and only enough
   to give the column presence.
   ========================================================================== */

/* ---- Uniform premium framing ------------------------------------------- */
.dgd-campaign-hero,
.dgd-section-visual,
.dgd-final-visual {
  border-radius: var(--dgd-r-lg);
  border-color: rgba(200, 135, 30, .22);
  box-shadow: var(--dgd-shadow-md);
  background: var(--dgd-beige);
  transition: box-shadow var(--dgd-t) var(--dgd-ease),
              border-color var(--dgd-t) var(--dgd-ease),
              transform var(--dgd-t) var(--dgd-ease);
}
.dgd-section-visual picture > img,
.dgd-final-visual picture > img {
  object-position: center;
  transition: transform .7s var(--dgd-ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .dgd-section-visual:hover picture > img { transform: scale(1.045); }
}
.dgd-section-visual:hover {
  box-shadow: var(--dgd-shadow-lg);
  border-color: var(--dgd-gold-mid);
}

/* ---- Wide feature images ------------------------------------------------
   `max-height: 560px` fought the 3:2 ratio: the box stayed full width and was
   clipped vertically to ~1.95:1, trimming roughly 23% off the top and bottom —
   enough to cut heads. Constraining WIDTH instead keeps the full 3:2 frame,
   so nothing is cropped. */
.dgd-section-visual--wide {
  max-height: none;
  max-width: 880px;
  margin: clamp(28px, 3vw, 44px) auto clamp(10px, 1.4vw, 18px);
}
.dgd-section-visual--compact {
  margin: clamp(22px, 2.6vw, 30px) 0 clamp(24px, 2.8vw, 32px);
  border-radius: var(--dgd-r-md);
}

/* ---- Grids: equal size, consistent gutters ------------------------------ */
.dgd-visual-grid {
  gap: clamp(16px, 1.8vw, 26px);
  margin: clamp(28px, 3vw, 40px) 0 clamp(10px, 1.4vw, 16px);
  align-items: stretch;
}
/* Every cell shares one ratio, so card images match in height and width */
.dgd-visual-grid .dgd-section-visual {
  height: 100%;
  aspect-ratio: 3 / 2;
}

/* Two-up stayed two-up to 360px, where each cell fell to roughly 150px wide.
   It now folds to a single column before the images become thumbnails. */
@media (max-width: 640px) {
  .dgd-visual-grid--two { grid-template-columns: 1fr; }
  .dgd-visual-grid--two .dgd-section-visual {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ---- Final CTA photograph ----------------------------------------------
   A close-up portrait: cropping the sides would clip the dog's ears, so the
   frame matches the source exactly and trims nothing. */
@media (min-width: 901px) {
  .final-cta.dgd-final-cta-image > .dgd-final-visual { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .dgd-final-visual { aspect-ratio: 16 / 9; }
}

/* ---- Logo lockup on photographs ----------------------------------------
   contain, never cover, so the wordmark is never cropped or distorted. */
.dgd-photo-logo {
  border-radius: var(--dgd-r-sm);
  box-shadow: 0 6px 18px rgba(42, 33, 27, .24);
}
.dgd-photo-logo .dgd-photo-logo__image { object-fit: contain; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 480px) {
  .dgd-campaign-hero,
  .dgd-section-visual,
  .dgd-final-visual { border-radius: var(--dgd-r-md); }
  .dgd-section-visual--wide { margin-inline: 0; }
  .dgd-photo-logo { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dgd-section-visual:hover picture > img { transform: none; }
}

/* ==========================================================================
   SERVICE-PAGE HERO — two-column split
   --------------------------------------------------------------------------
   All nine service pages share one hero shape:

     <section|div class="hero dgd-hero dgd-hero--stage hero--split">
       <div class="dgd-hero__decor">…</div>
       <div class="hero-inner"> OR <div class="wrap">   ← copy column
       <figure class="dgd-campaign-hero--service">      ← image column

   Selectors carry `html body .dgd-hero--stage.hero--split` so they outrank both
   design-system.css (`html body .dgd-hero--stage`, which sets 0 horizontal
   padding) and each page's own `.hero-inner` / `.wrap` padding, which loads
   later in the document.
   ========================================================================== */

html body .dgd-hero--stage.hero--split {
  /* 16-20px phone, 24-32px tablet, 40-64px desktop */
  --hero-pad-x: clamp(16px, 3.6vw, 64px);
  padding-left: var(--hero-pad-x);
  padding-right: var(--hero-pad-x);
}

/* Inner wrappers stop adding their own horizontal padding — the hero owns it
   now, so nothing double-indents or hugs the edge. */
html body .dgd-hero--stage.hero--split > .hero-inner,
html body .dgd-hero--stage.hero--split > .wrap {
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

/* ---- Desktop: copy left, image right ---- */
@media (min-width: 1024px) {
  html body .dgd-hero--stage.hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(40px, 3.6vw, 64px);
    max-width: 1320px;
    margin-inline: auto;
    padding-top: clamp(52px, 4.6vw, 80px);
    padding-bottom: clamp(52px, 4.6vw, 80px);
  }
  html body .dgd-hero--stage.hero--split > .hero-inner,
  html body .dgd-hero--stage.hero--split > .wrap {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
  }
  /* the image sits beside the copy and fills its column */
  html body .dgd-hero--stage.hero--split .dgd-campaign-hero--service {
    width: 100%;
    margin: 0;
    max-height: none;
    aspect-ratio: 3 / 2;
  }
  html body .dgd-hero--stage.hero--split .dgd-campaign-hero--service picture > img {
    object-fit: cover;
    object-position: center;
  }
  /* CTA rows and feature grids align left rather than centre */
  html body .dgd-hero--stage.hero--split .hero-cta,
  html body .dgd-hero--stage.hero--split .cta-row,
  html body .dgd-hero--stage.hero--split .btn-row {
    justify-content: flex-start;
  }
  html body .dgd-hero--stage.hero--split .stats,
  html body .dgd-hero--stage.hero--split .hero-stats,
  html body .dgd-hero--stage.hero--split .hero-badges {
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ---- Tablet and below: stacked, copy first ---- */
@media (max-width: 1023px) {
  html body .dgd-hero--stage.hero--split .dgd-campaign-hero--service {
    width: 100%;
    margin: 28px 0 0;
  }
}

/* ---- CTAs and feature boxes: shared polish at every width ---- */
html body .dgd-hero--stage.hero--split .hero-cta,
html body .dgd-hero--stage.hero--split .cta-row,
html body .dgd-hero--stage.hero--split .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
html body .dgd-hero--stage.hero--split .hero-cta > *,
html body .dgd-hero--stage.hero--split .cta-row > *,
html body .dgd-hero--stage.hero--split .btn-row > * { max-width: 100%; }

/* Equal, comfortably padded boxes with text clear of the borders */
html body .dgd-hero--stage.hero--split .stat,
html body .dgd-hero--stage.hero--split .hbadge {
  min-width: 0;
  padding: 15px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html body .dgd-hero--stage.hero--split .stat > *,
html body .dgd-hero--stage.hero--split .hbadge > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  html body .dgd-hero--stage.hero--split .stats,
  html body .dgd-hero--stage.hero--split .hero-stats,
  html body .dgd-hero--stage.hero--split .hero-badges {
    grid-template-columns: 1fr;
    display: grid;
    gap: 10px;
  }
  html body .dgd-hero--stage.hero--split .hero-cta > .btn,
  html body .dgd-hero--stage.hero--split .cta-row > .btn,
  html body .dgd-hero--stage.hero--split .btn-row > .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Location / guide page imagery ------------------------------------- */
.loc-body-media {
  margin: clamp(22px, 2.6vw, 34px) 0 clamp(20px, 2.4vw, 30px);
  max-width: 880px;
}
.loc-hero-media { align-self: center; }
@media (max-width: 1023px) {
  .loc-hero-media { margin-top: 28px; }
}

/* ==========================================================================
   MEDIA RATIO SYSTEM
   --------------------------------------------------------------------------
   Every photograph now has a LANDSCAPE source (native 1.33-1.5), so the
   container ratios below crop lightly instead of discarding half the frame.
   Ratios are declared on the wrapper; the image fills it with object-fit:
   cover. Never object-fit: fill, and never a fixed pixel height.
   ========================================================================== */

.media-landscape,               /* 3:2  - standard content image           */
.media-wide,                    /* 16:9 - wide editorial band              */
.media-compact,                 /* 4:3  - compact / hero                   */
.media-portrait {               /* 4:5  - intentional portrait only        */
  width: 100%;
  overflow: hidden;
  border-radius: var(--dgd-r-lg);
  background: var(--dgd-beige);
}
.media-landscape { aspect-ratio: 3 / 2; }
.media-wide      { aspect-ratio: 16 / 9; }
.media-compact   { aspect-ratio: 4 / 3; }
.media-portrait  { aspect-ratio: 4 / 5; max-width: 460px; }

.media-landscape > img, .media-wide > img,
.media-compact  > img, .media-portrait > img,
.media-landscape > picture > img, .media-wide > picture > img,
.media-compact  > picture > img, .media-portrait > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Subject-aware crop control — used instead of ad-hoc inline styles */
.media-focus-top    > img, .media-focus-top    > picture > img { object-position: center 30%; }
.media-focus-bottom > img, .media-focus-bottom > picture > img { object-position: center 70%; }
.media-focus-left   > img, .media-focus-left   > picture > img { object-position: 35% center; }
.media-focus-right  > img, .media-focus-right  > picture > img { object-position: 65% center; }

/* ---- Applied ratios -----------------------------------------------------
   Hero sits at 4:3 (the brief's recommended desktop hero ratio); body
   images at 3:2, which matches the native ratio of every source in use, so
   the body crop is effectively zero. */
html body .dgd-hero--stage.hero--split .loc-hero-media { aspect-ratio: 4 / 3; }
html body .loc-body-media { aspect-ratio: 3 / 2; }
/* Dogs sit slightly below centre in most of these frames, so bias the hero
   crop upward a touch to keep faces in shot rather than cutting them off. */
html body .loc-hero-media > img { object-position: center; }

@media (max-width: 1023px) {
  /* A hero must never become a tall panel on a phone */
  html body .dgd-hero--stage.hero--split .loc-hero-media { aspect-ratio: 3 / 2; }
  html body .loc-body-media { aspect-ratio: 3 / 2; max-width: none; }
}
@media (max-width: 560px) {
  html body .dgd-hero--stage.hero--split .loc-hero-media,
  html body .loc-body-media { border-radius: var(--dgd-r-md); }
}