/* ==========================================================================
   Dakamela Rehabilitation and Counselling Centre
   style-media.css — imagery layer

   Loaded AFTER style1.css. Additive only: it introduces new classes and
   touches existing ones (.team-photo, .team-card) in a single, clearly
   marked block so it is easy to review or remove.
   ========================================================================== */

:root {
  --dk-green:  #1E4A3B;
  --dk-sage:   #8FAE94;
  --dk-gold:   #E0A24E;
  --dk-cream:  #FFE2AE;
  --dk-radius: 18px;
  --dk-radius-lg: 26px;
  --dk-shadow: 0 10px 30px rgba(30, 74, 59, .12);
}

/* --------------------------------------------------------------------------
   1. Editorial feature block: image beside copy
   -------------------------------------------------------------------------- */

.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.feature-split.media-right .feature-media { order: 2; }

.feature-media {
  position: relative;
  border-radius: var(--dk-radius-lg);
  overflow: hidden;
  box-shadow: var(--dk-shadow);
  background: var(--dk-green);
}

.feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Keeps difficult subject matter sober rather than lurid, and ties the
     photography to the brand greens. */
  filter: saturate(.72) contrast(1.02);
  opacity: .92;
  transition: transform .5s ease, opacity .5s ease;
}

.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg,
              rgba(30, 74, 59, .10) 0%,
              rgba(30, 74, 59, .38) 60%,
              rgba(30, 74, 59, .62) 100%);
  pointer-events: none;
}

.feature-media:hover img { transform: scale(1.03); opacity: 1; }

.feature-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.1em 1.3em;
  margin: 0;
  color: #fff;
  font-size: .82rem;
  line-height: 1.45;
}

.feature-caption strong {
  display: block;
  color: var(--dk-cream);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .35em;
}

/* --------------------------------------------------------------------------
   2. Full-width banner strip
   -------------------------------------------------------------------------- */

.media-band {
  position: relative;
  border-radius: var(--dk-radius-lg);
  overflow: hidden;
  box-shadow: var(--dk-shadow);
  background: var(--dk-green);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}

.media-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.65) contrast(1.02);
}

.media-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(30, 74, 59, .88) 0%,
              rgba(30, 74, 59, .70) 45%,
              rgba(30, 74, 59, .30) 100%);
}

.media-band-copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 46ch;
  color: #fff;
}

.media-band-copy h2 { color: #fff; margin: .15em 0 .5em; }
.media-band-copy p  { color: rgba(255, 255, 255, .9); margin: 0; }

.media-band-copy .eyebrow,
.media-band-copy .section-label { color: var(--dk-cream); }

/* --------------------------------------------------------------------------
   3. Card imagery — rounded thumbnail band inside a card
   -------------------------------------------------------------------------- */

.service-card.has-media { padding-top: 0; overflow: hidden; }

.card-media {
  position: relative;
  margin: 0 0 1.1em;
  /* Bleed to the card edge regardless of the card's own padding. */
  margin-inline: calc(-1 * var(--card-pad, 1.5rem));
  overflow: hidden;
  background: var(--dk-green);
}

.card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.7);
  opacity: .9;
}

/* --------------------------------------------------------------------------
   4. Team photography — circular portraits
   -------------------------------------------------------------------------- */

.team-card .team-photo {
  width: clamp(130px, 34vw, 168px);
  height: clamp(130px, 34vw, 168px);
  margin: 0 auto 1em;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF3EE;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px rgba(143, 174, 148, .55), var(--dk-shadow);
}

.team-card .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit above centre in most portraits. */
  object-position: 50% 32%;
}

.team-card { text-align: center; }

/* Portrait feature — a single, larger circular photo with copy alongside */
.portrait-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: center;
}

.portrait-ring {
  width: clamp(180px, 40vw, 260px);
  height: clamp(180px, 40vw, 260px);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 5px solid #fff;
  box-shadow: 0 0 0 3px var(--dk-sage), var(--dk-shadow);
}

.portrait-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}

/* --------------------------------------------------------------------------
   5. Small shared helpers
   -------------------------------------------------------------------------- */

.rounded-soft { border-radius: var(--dk-radius); overflow: hidden; }

.photo-note {
  font-size: .82rem;
  color: #5C6B62;
  margin-top: 1em;
}

.mark-steps {
  display: block;
  width: clamp(150px, 30vw, 230px);
  height: auto;
  margin: 0 auto 1.2em;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .feature-split,
  .portrait-feature { grid-template-columns: 1fr; }

  .feature-split.media-right .feature-media { order: 0; }

  .portrait-feature { justify-items: center; text-align: center; }

  .media-band { min-height: 300px; }

  .media-band::after {
    background: linear-gradient(180deg,
                rgba(30, 74, 59, .45) 0%,
                rgba(30, 74, 59, .88) 100%);
  }

  .media-band-copy { max-width: none; }
}

/* --------------------------------------------------------------------------
   7. Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .feature-media img { transition: none; }
  .feature-media:hover img { transform: none; }
}

.feature-media:focus-visible,
.media-band:focus-visible {
  outline: 3px solid var(--dk-gold);
  outline-offset: 3px;
}