/* Devine — brand logo + image placeholder upgrades.
   Loaded AFTER styles.css so these rules win. */

/* =========================================
   1. Logo mark: use real brand PNG, enlarged
   ========================================= */
.nav__logo {
  gap: 0.7rem;
}
.nav__logo-mark {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  background-image: url('logo-mark.png') !important;
  background-size: 86% 86% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04) !important;
  flex-shrink: 0;
}
.nav__logo-text {
  line-height: 1.05;
}
.nav__logo-text small {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Footer brand mark — same treatment, smaller */
.footer__brand .nav__logo-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  background-image: url('logo-mark.png') !important;
  background-size: 86% 86% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}

/* =========================================
   2. Image placeholder system
   Each photo box gets:
     - a warm layered gradient (stock-photo feel)
     - a subtle "photo" label tag
     - soft inner vignette for depth
   Category modifiers tint toward their mood.
   ========================================= */

/* Base treatment applied to every placeholder block */
.about-story__visual,
.team__photo,
.service-detail__visual,
.values__image,
.hero__visual-main,
.featured-article__visual,
.blog-article__visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* When a real photo URL is present, render it behind the gradient.
   Class added by JS: .dv-has-photo with --photo-url var set. */
.dv-has-photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--photo-url);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.dv-has-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.32) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Lift the caption tag and any existing child content above photo */
.dv-has-photo > * { position: relative; z-index: 2; }

/* Soft photographic vignette + grain feel on all placeholders */
.about-story__visual::before,
.team__photo::before,
.service-detail__visual::before,
.values__image::before,
.featured-article__visual::before,
.blog-article__visual::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,0.22) 0%, transparent 55%),
    radial-gradient(100% 70% at 70% 90%, rgba(0,0,0,0.18) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* Photo-label tag — injected as <span class="dv-photo-tag"> via JS at boot.
   A real DOM element avoids the ::after conflict with styles.css's existing vignette pseudos. */
.dv-photo-tag {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 3;
  padding: 6px 10px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  background: rgba(20, 18, 15, 0.42);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 500;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Minimum heights so placeholder blocks feel photographic */
.blog-article__visual { min-height: 220px; }
.featured-article__visual { min-height: 360px; }
.about-story__visual { min-height: 480px; }
.service-detail__visual { min-height: 400px; }
.team__photo { min-height: 280px; }

/* Category tints — layered on top of the theme gradient so theme still drives hue.
   Each uses a translucent wash + a suggestive pattern. */

/* Team / founders — warm sunlit skin tones */
.team__photo-a { background-image:
  linear-gradient(165deg, rgba(255,220,190,0.25) 0%, rgba(100,70,55,0.35) 100%),
  radial-gradient(circle at 50% 38%, rgba(255,240,220,0.35) 0%, transparent 45%) !important;
  background-blend-mode: overlay, normal;
}
.team__photo-b { background-image:
  linear-gradient(155deg, rgba(255,210,180,0.28) 0%, rgba(80,55,40,0.35) 100%),
  radial-gradient(circle at 50% 38%, rgba(255,235,215,0.4) 0%, transparent 45%) !important;
  background-blend-mode: overlay, normal;
}
.team__photo-c { background-image:
  linear-gradient(175deg, rgba(255,215,185,0.25) 0%, rgba(90,60,45,0.38) 100%),
  radial-gradient(circle at 50% 38%, rgba(255,240,220,0.38) 0%, transparent 45%) !important;
  background-blend-mode: overlay, normal;
}

/* Services — each evokes its mood */
.service-detail__visual-a { /* skilled nursing — clinical, calm */
  background-image:
    linear-gradient(160deg, rgba(230,240,235,0.25), rgba(50,75,80,0.35)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 40%) !important;
}
.service-detail__visual-b { /* companionship — warm, human connection */
  background-image:
    linear-gradient(160deg, rgba(250,210,180,0.3), rgba(130,80,60,0.35)),
    radial-gradient(circle at 70% 35%, rgba(255,235,210,0.3) 0%, transparent 45%) !important;
}
.service-detail__visual-c { /* home health aide — domestic warmth */
  background-image:
    linear-gradient(165deg, rgba(245,225,200,0.3), rgba(120,85,65,0.4)),
    radial-gradient(circle at 40% 40%, rgba(255,245,225,0.3) 0%, transparent 45%) !important;
}
.service-detail__visual-d { /* respite — restorative, airy */
  background-image:
    linear-gradient(170deg, rgba(240,230,215,0.3), rgba(100,85,70,0.35)),
    radial-gradient(circle at 60% 30%, rgba(255,250,235,0.32) 0%, transparent 50%) !important;
}
.service-detail__visual-e { /* live-in — evening, protective */
  background-image:
    linear-gradient(160deg, rgba(220,200,180,0.3), rgba(70,50,40,0.5)),
    radial-gradient(circle at 40% 70%, rgba(255,225,200,0.25) 0%, transparent 45%) !important;
}

/* Blog article thumbs — more variety, each its own mood */
.blog-article__visual-a { background-image:
  linear-gradient(160deg, rgba(240,220,200,0.3), rgba(100,70,55,0.4)),
  radial-gradient(circle at 30% 30%, rgba(255,240,220,0.3) 0%, transparent 45%) !important; }
.blog-article__visual-b { background-image:
  linear-gradient(155deg, rgba(215,230,225,0.3), rgba(60,85,80,0.4)),
  radial-gradient(circle at 70% 30%, rgba(250,255,250,0.25) 0%, transparent 45%) !important; }
.blog-article__visual-c { background-image:
  linear-gradient(170deg, rgba(245,225,205,0.3), rgba(115,75,55,0.4)),
  radial-gradient(circle at 40% 45%, rgba(255,235,215,0.3) 0%, transparent 45%) !important; }
.blog-article__visual-d { background-image:
  linear-gradient(160deg, rgba(235,220,205,0.28), rgba(90,75,65,0.4)),
  radial-gradient(circle at 60% 35%, rgba(255,245,230,0.3) 0%, transparent 45%) !important; }
.blog-article__visual-e { background-image:
  linear-gradient(165deg, rgba(245,230,210,0.3), rgba(110,80,60,0.4)),
  radial-gradient(circle at 50% 40%, rgba(255,240,220,0.3) 0%, transparent 45%) !important; }
.blog-article__visual-f { background-image:
  linear-gradient(160deg, rgba(220,225,220,0.3), rgba(75,70,65,0.4)),
  radial-gradient(circle at 45% 35%, rgba(250,250,245,0.28) 0%, transparent 45%) !important; }

/* Hero visual caption uses the same .dv-photo-tag element — no ::after needed */

/* =========================================
   When a REAL photo is present, a <img class="dv-photo-img"> is injected
   as the first child by JS. Render it filling the placeholder, beneath the
   legibility scrim (.dv-has-photo::after, z1), caption tag (z3) and content (z2).
   This wins over the decorative ::before vignette and category gradient tints.
   ========================================= */
.dv-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.dv-has-photo::before { display: none; }