/* ==========================================================================
   SECTION 02 — SPECIALIZED CARE (approved)
   Phones (< 600px):   five stacked cards, mobile (portrait) photos.
   Tablets (600–1023): five stacked landscape cards, desktop photos.
   Desktop (>= 1024):  two large cards, then three smaller cards.

   Each card: warm ivory background, photo anchored to the right that fades
   in from the left, and a soft ivory overlay so the text stays readable.
   Per-card photo framing is set with custom properties (see bottom).
   ========================================================================== */

.services {
  padding-block: 3.5rem 4rem;
  background-color: var(--color-ivory);
}

.services__grid {
  display: grid;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

/* ---------- Card ---------- */
.service-card {
  /* framing defaults, overridden per card */
  --media-w: 78%;
  --pos: 50% 40%;
  --text-col: 50%;                   /* width of the washed text column */

  position: relative;
  display: flex;
  align-items: center;
  min-height: 19.5rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: var(--color-card);
  isolation: isolate;
}

/* Photo: anchored right, fades in from the left edge */
.service-card__img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: var(--media-w);
  height: 100%;
  object-fit: cover;
  object-position: var(--pos);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

/* Readability overlay: an even ivory wash across the text column
   (--text-col), then a soft fade so the photo stays clear on the right.
   Guarantees readable text even where the photo is dark (gloves, clothing). */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(239, 232, 222, 0.95) 0%,
    rgba(239, 232, 222, 0.9) var(--text-col),
    rgba(239, 232, 222, 0.55) calc(var(--text-col) + 8%),
    rgba(239, 232, 222, 0) calc(var(--text-col) + 22%));
}

.service-card__body {
  position: relative;
  width: 100%;
  padding: 1.75rem 1.5rem;
}

.service-card__title {
  max-width: 11ch;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}

/* Short bronze rule under the title */
.service-card__title::after {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-top: 1.1rem;
  background-color: var(--color-bronze);
}

.service-card__text {
  max-width: 11.5rem;
  margin-top: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* "Explore" pill.
   Rendered without href until each service page exists (no fake destinations).
   Once a page exists, add href="/services/<slug>/" in index.html. */
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 2.5rem;
  margin-top: 1.4rem;
  padding: 0.45rem 1.15rem;
  border: 1px solid var(--color-bronze);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.2;
  color: var(--color-charcoal);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.service-card__arrow {
  flex: none;
  width: 1.1rem;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}

/* Interactive states only when a real link exists */
a.service-card__link[href]:hover {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: var(--color-bronze-button);
}

a.service-card__link[href]:hover .service-card__arrow { transform: translateX(3px); }

a.service-card__link:not([href]) { cursor: default; }

/* ==========================================================================
   TABLET (600–1023px): single column of landscape cards
   ========================================================================== */
@media (min-width: 37.5em) {
  .services { padding-block: 4.5rem 5rem; }

  .services__grid { margin-top: 2.75rem; }

  .service-card {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }

  .service-card { --text-col: 38%; }

  .service-card__body { padding: 2rem 2.25rem; }

  .service-card__title { font-size: 2rem; }

  .service-card__text {
    max-width: 15rem;
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   DESKTOP (>= 1024px): 2 large cards + 3 small cards
   ========================================================================== */
@media (min-width: 64em) {
  .services { padding-block: 4.25rem 6rem; }

  .services__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 2.5rem;
  }

  /* Height follows the mockup proportions (~1.95:1 and ~1.52:1 at 1440px)
     but can grow if the text needs more room. */
  .service-card { aspect-ratio: auto; }

  .service-card--lg { --text-col: 40%; }
  .service-card--sm { --text-col: 47%; }

  .service-card--lg {
    grid-column: span 3;
    min-height: clamp(18.5rem, 22.6vw, 21rem);
  }

  .service-card--sm {
    grid-column: span 2;
    min-height: clamp(17rem, 19.1vw, 18rem);
  }

  .service-card--lg .service-card__body { padding: 2rem 2.25rem; }
  .service-card--sm .service-card__body { padding: 1.75rem 1.5rem; }

  .service-card--lg .service-card__title { font-size: 2.125rem; }
  .service-card--sm .service-card__title { font-size: 1.75rem; }

  .service-card--lg .service-card__text { max-width: 14.5rem; }
  .service-card--sm .service-card__text { max-width: 11rem; }
}

/* Mid-size desktops (1024–1199px): cards are narrower, so the text column
   takes a larger share of each card */
@media (min-width: 64em) and (max-width: 74.99em) {
  .service-card--lg { --text-col: 52%; }
  .service-card--sm { --text-col: 58%; }
  .service-card--sm .service-card__text { max-width: 9.75rem; }
}

/* ==========================================================================
   PER-CARD PHOTO FRAMING
   --media-w: how much of the card width the photo occupies (from the right)
   --pos:     object-position (which part of the photo stays in view)
   ========================================================================== */

/* Phones (mobile portrait photos) */
.service-card--regenerative-medicine { --media-w: 80%; --pos: 55% 45%; }
.service-card--plastic-surgery       { --media-w: 78%; --pos: 50% 25%; }
.service-card--bariatric-surgery     { --media-w: 78%; --pos: 45% 25%; }
.service-card--aesthetic-medicine    { --media-w: 76%; --pos: 70% 22%; }
.service-card--dental-care           { --media-w: 76%; --pos: 70% 45%; }

/* Phones only: "Regenerative Medicine" is the longest title, so its
   readable text column is wider */
@media (max-width: 37.49em) {
  .service-card--regenerative-medicine { --text-col: 62%; }
}

/* Tablet + desktop (landscape photos) */
@media (min-width: 37.5em) {
  .service-card--regenerative-medicine { --media-w: 78%; --pos: 60% 40%; }
  .service-card--plastic-surgery       { --media-w: 70%; --pos: 50% 25%; }
  .service-card--bariatric-surgery     { --media-w: 74%; --pos: 50% 30%; }
  .service-card--aesthetic-medicine    { --media-w: 74%; --pos: 72% 40%; }
  .service-card--dental-care           { --media-w: 72%; --pos: 35% 40%; }
}