/* HomePage 2 round 4: Apple-style service photo tiles in #care. Homepage only, loaded after
   home2.css. Owner layout (2026-09-18): Dental implants full width, Cosmetic + Invisalign,
   Crowns + Pediatric, General dentistry full width; one tile per row on phones.
   Each tile carries its title, one line and two pills in the top of its image. The image is
   anchored to the tile's bottom edge and the bottom padding reserves the part of it that holds
   the object (--zone of the image height, measured per image), so longer copy or enlarged text
   grows the tile upwards instead of covering the object. Keep readable "prop: value;" form:
   scripts/home2-services.test.mjs reads literals from this file. */

.home2-care { padding-block: var(--h2-section-y) 0; }
.home2 .home2-rail-controls { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-bottom: 16px; color: var(--h2-graphite); font: 600 var(--h2-fs-small)/1.3 var(--h2-font-text); letter-spacing: var(--h2-ls-label); }
/* The tiles never scroll now; the approved label stays, the arrows have nothing to move. */
.home2 .home2-rail-controls > div { display: none; }

.home2 #services-rail.home2-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--h2-gap);
  width: var(--h2-content);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) { grid-column: 1 / -1; }

.home2 .home2-bento .service-card {
  /* Image box height / tile width, and the measured share of the image (from its bottom
     edge) that holds the object: bright pixels start at 33% (implants), 44% (cosmetic),
     38% (Invisalign, crowns) and 35% (pediatric) of the image height. */
  --ratio: 1;
  --zone: .64;
  --clear: 40px;
  /* Dark renders: the top-row colours of the image, so a grown tile continues it seamlessly. */
  --tile-top: #0f0c09;
  --tile-edge: #050403;
  --tile-text: #ffffff;
  --tile-text-2: #d9d4cc;
  --tile-index: #b9b3aa;
  container: service-tile / inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* An aspect-ratio item aligns as start by default and would size its width from its height. */
  justify-self: stretch;
  align-self: stretch;
  width: auto;
  min-width: 0;
  max-width: none;
  /* At least the image's own ratio; taller copy grows it (the automatic minimum of an
     aspect-ratio box needs overflow visible, so the corners are cut with clip-path). */
  min-height: auto;
  aspect-ratio: 1 / var(--ratio);
  margin: 0;
  /* The top clears the corner numeral, also with enlarged text. */
  padding: max(48px, calc(36px + .875rem)) 32px calc(100% * var(--ratio) * var(--zone) + var(--clear));
  overflow: visible;
  clip-path: inset(0 round var(--h2-radius-tile));
  border: 0;
  border-radius: var(--h2-radius-tile);
  background: linear-gradient(90deg, var(--tile-edge), var(--tile-top) 50%, var(--tile-edge));
  color: var(--tile-text);
  text-align: center;
  box-shadow: none;
}
.home2 .home2-bento .service-card:hover { background: linear-gradient(90deg, var(--tile-edge), var(--tile-top) 50%, var(--tile-edge)); }
.home2 .home2-bento .service-card:focus-within { outline: none; }
.home2 .home2-bento .service-card:nth-child(1) { --ratio: .5; --zone: .67; --tile-top: #0f0c09; --tile-edge: #030302; }
.home2 .home2-bento .service-card:nth-child(2) { --zone: .56; --tile-top: #2f1f12; --tile-edge: #120b05; }
.home2 .home2-bento .service-card:nth-child(3) { --zone: .63; --tile-top: #16100b; --tile-edge: #090705; }
.home2 .home2-bento .service-card:nth-child(4) { --zone: .63; --tile-top: #0d0804; --tile-edge: #050301; }
.home2 .home2-bento .service-card:nth-child(5) { --zone: .66; --tile-top: #261609; --tile-edge: #110b07; }
/* General dentistry: the one real (bright) frame, ink type over a light veil. Its copy may sit
   on the top half of the photo, where the veil is. */
.home2 .home2-bento .service-card:nth-child(6) {
  --ratio: .5;
  --zone: .5;
  --tile-top: #b0b3b5;
  --tile-edge: #a4a6a8;
  --tile-text: var(--h2-ink);
  --tile-text-2: var(--h2-ink);
  --tile-index: var(--h2-ink);
}

/* The numeral: a small tracked index in the corner, outside the centred stack. */
.home2 .home2-bento .service-card__top {
  position: absolute;
  top: 24px;
  left: 28px;
  display: block;
  margin: 0;
  color: var(--tile-index);
  font: 600 .875rem/1 var(--h2-font-text);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.home2 .home2-bento .service-card h3 {
  margin: 0;
  color: var(--tile-text);
  font-size: var(--h2-fs-tile);
  line-height: var(--h2-lh-title);
  letter-spacing: var(--h2-ls-tile);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.home2 .home2-bento .service-card p {
  max-width: 30em;
  margin: 12px auto 0;
  color: var(--tile-text-2);
  font-size: var(--h2-fs-lede);
  line-height: var(--h2-lh-text);
  letter-spacing: var(--h2-ls-lede);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) p { max-width: 36em; }

.home2 .home2-bento .service-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.home2 .home2-bento .service-card__actions .button { min-height: 44px; padding: 10px 22px; }
/* Dark tiles follow the night band: porcelain primary with an ink label, white-edged secondary. */
.home2 .home2-bento .service-card .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-bento .service-card .button:not(.button--outline):is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-bento .service-card .button--outline { background: transparent; color: var(--h2-night-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%); }
.home2 .home2-bento .service-card .button--outline:is(:hover, :active) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-bento .service-card :focus-visible { outline: 2px solid var(--h2-focus-dark); outline-offset: 3px; }
/* The bright tile uses the light-surface actions; its secondary gets a white fill over the photo. */
.home2 .home2-bento .service-card:nth-child(6) .button:not(.button--outline) { background: var(--h2-action); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) .button:not(.button--outline):hover { background: var(--h2-action-hover); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) .button:not(.button--outline):active { background: var(--h2-action-press); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) .button--outline { background: rgb(255 255 255 / 72%); color: var(--h2-ink); box-shadow: inset 0 0 0 1px var(--h2-ink); }
.home2 .home2-bento .service-card:nth-child(6) .button--outline:is(:hover, :active) { background: var(--h2-ink); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) :focus-visible { outline-color: var(--h2-focus); }

/* The image: anchored to the bottom edge at the tile's own ratio; its top fades into the tile
   colour, which only shows when the copy grows the tile. */
.home2 .home2-bento .service-card__media {
  position: absolute;
  z-index: -2;
  inset: auto 0 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / var(--ratio);
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
}
/* The veil lies on the photo's box and continues, at its top strength, over any band the copy
   adds above the photo (the upward shadow), so the ink type always sits on it. */
.home2 .home2-bento .service-card:nth-child(6)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  aspect-ratio: 1 / var(--ratio);
  background: linear-gradient(to bottom, rgb(255 255 255 / 64%) 0%, rgb(255 255 255 / 52%) 34%, rgb(255 255 255 / 0%) 58%);
  box-shadow: 0 -2000px 0 2000px rgb(255 255 255 / 64%);
  pointer-events: none;
}

/* Narrow tiles (half tiles below ~1358px, phones) stack the two pills at one width; the longest
   pair ("Children's dental care" + "Request an appointment") needs about 500px side by side. */
@container service-tile (max-width: 519px) {
  .home2 .home2-bento .service-card__actions { flex-direction: column; align-items: stretch; gap: 10px; width: min(100%, 280px); margin-top: 20px; }
  .home2 .home2-bento .service-card__actions .button { padding-inline: 16px; }
}
@media (max-width: 1068px) {
  .home2 .home2-bento .service-card { --clear: 32px; padding-inline: 24px; }
}
/* Phones: one tile per row. Square crops of the square renders; the two wide images show their
   centre in a 4:5 crop. */
@media (max-width: 734px) {
  .home2 #services-rail.home2-bento { grid-template-columns: minmax(0, 1fr); }
  .home2 .home2-bento .service-card,
  .home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) { --ratio: 1; --clear: 24px; padding: max(44px, calc(32px + .875rem)) 24px calc(100% * var(--ratio) * var(--zone) + var(--clear)); }
  .home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) { --ratio: 1.25; }
  .home2 .home2-bento .service-card__top { top: 20px; left: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .home2 .home2-bento .service-card__media { transition: scale var(--h2-dur-rise) ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home2 .home2-bento .service-card:hover .service-card__media { scale: 1.03; }
}
/* Forced colours: plain tiles with an outline; the images and the veil would sit under system text. */
@media (forced-colors: active) {
  .home2 .home2-bento .service-card { border: 1px solid CanvasText; background: Canvas; }
  .home2 .home2-bento .service-card__media,
  .home2 .home2-bento .service-card::after { display: none; }
}