/* Products index and the seven generated family pages. Tokens and type come from site.css. */

/* ------------------------------------------------ the product on its plinth -- */
/* A pale panel with a floor; the cut-out stands on it with a contact shadow. Shared by the gallery, the family hero and each series.
   --ar is the file's width / height and --cap the widest it may be drawn (set inline from the image manifest, so a small file is never upscaled). */
.pimg {
  --A: 240px; --plinth: 36px; --Hmax: calc(var(--A) - var(--plinth) - 24px);
  position: relative; height: var(--A); isolation: isolate; container-type: inline-size;
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 90% at 50% 28%, #F2F5F8 0%, #E6EBF1 58%, #DCE2EB 100%);
}
.pimg::before {
  content: ""; position: absolute; z-index: 0; inset: auto 0 0 0; height: var(--plinth);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: linear-gradient(#E4E9F0, #F1F4F8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
}
.pimg picture {
  position: absolute; z-index: 1; left: 50%; bottom: calc(var(--plinth) - 12px); transform: translateX(-50%);
  display: block; isolation: isolate;
}
.pimg picture::before {
  content: ""; position: absolute; z-index: -1; left: -6%; right: -6%; bottom: -9px; height: 20px;
  background: radial-gradient(closest-side, rgb(var(--shade) / 0.34), rgb(var(--shade) / 0.12) 55%, transparent 100%);
}
.pimg img {
  display: block; height: auto; max-width: none;
  width: min(84cqw, var(--cap, 9999px), calc(var(--Hmax) * var(--ar, 1)));
  filter: drop-shadow(0 6px 8px rgb(var(--shade) / 0.14));
}

/* ------------------------------------------------------------- index -- */
.products-head { padding-bottom: var(--space-4); }
.products-head .lede { margin-top: var(--space-2); }
.gallery { padding-top: var(--space-3); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
/* Seven objects: the first and last are wide so the three-column grid has no orphan. */
.gallery__grid > .obj:first-child, .gallery__grid > .obj:last-child { grid-column: span 2; }
.obj {
  --obj-A: clamp(210px, 18vw, 260px);
  display: flex; flex-direction: column; padding: 14px 14px 26px;
  border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none;
  border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), var(--lift-1);
}
.obj .pimg { --A: var(--obj-A); }
.obj:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.obj .pimg { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .obj:hover .pimg { transform: translateY(-4px); } }
.obj__name { margin: 22px 10px 0; font: 400 clamp(28px, 2.4vw, 34px)/1.1 var(--sc-font-display); letter-spacing: -0.012em; text-wrap: balance; }
.obj .small { margin: 8px 10px 0; }

@media (max-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__grid > .obj:last-child { grid-column: auto; }
}
/* Phones: one large object, then two columns. */
@media (max-width: 600px) {
  .gallery__grid { gap: 12px; }
  .obj { --obj-A: 190px; padding: 10px 10px 20px; }
  .obj .pimg { --plinth: 28px; }
  .gallery__grid > .obj:first-child { --obj-A: 232px; }
  .obj__name { margin: 16px 6px 0; font-size: 26px; }
  .obj .small { margin: 6px 6px 0; }
}

/* ----------------------------------------------------------- family hero -- */
.fam-hero { padding-bottom: var(--space-5); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: var(--space-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); text-underline-offset: 0.22em; }
.crumbs [aria-hidden] { color: var(--ink-soft); }
.fam-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-4) clamp(32px, 6vw, 96px); align-items: center; }
.fam-hero__text > * + * { margin-top: var(--space-2); }
.fam-hero__text .lede { margin-top: var(--space-3); }
.fam-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4) !important; }
.fam-hero__img {
  --A: clamp(320px, 33vw, 460px); --plinth: 48px;
  border-radius: var(--radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), var(--lift-1);
}
.fam-hero__img::before { border-radius: 0 0 var(--radius) var(--radius); }

/* ------------------------------------------------------------- series -- */
.fam-series { padding-top: 0; }
.series {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3) clamp(32px, 6vw, 96px);
  align-items: start; padding-block: var(--space-5); border-top: 1px solid var(--hairline);
}
.series:last-child { padding-bottom: 0; }
/* The lead column stays in view while the long column beside it scrolls; it can never leave its own row. */
.series__lead { position: sticky; top: calc(var(--bar-h) + 32px); }
.series__lead .pimg { --A: 260px; margin-bottom: var(--space-3); border-radius: var(--radius); }
.series__lead .pimg::before { border-radius: 0 0 var(--radius) var(--radius); }
.series__meta { margin-top: 10px; font-size: 16px; line-height: 1.45; }
.series__features { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 62ch; }
.series__features li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.series__features li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.series__h { margin-top: var(--space-5); font: 600 17px/1.3 var(--sc-font-text); letter-spacing: -0.005em; color: var(--ink); }
.series__specs { margin: var(--space-2) 0 0; border-top: 1px solid var(--hairline); }
.series__specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.series__specs dt { font-size: 15px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.series__specs dd { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.series__body > .small { margin-top: var(--space-3); }

/* Text-led series (no dedicated cut-out): the same two columns, the name in the lead column. */
.series--text .series__lead { padding-top: 2px; }

/* ----------------------------------------------------------------- cta -- */
.fam-cta { border-top: 1px solid var(--hairline); }
.fam-cta .lede { margin-top: var(--space-2); }
.fam-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }

/* ---------------------------------------------------------- tablets/phones -- */
@media (max-width: 860px) {
  .fam-hero { padding-bottom: var(--space-4); }
  .fam-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  /* the object comes first on phones, above the heading */
  .fam-hero__img { order: -1; --A: clamp(220px, 62vw, 340px); --plinth: 40px; }
  .series { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-4); }
  .series__lead { position: static; }
  .series__lead .pimg { --A: clamp(210px, 58vw, 300px); }
  .series__h { margin-top: var(--space-4); }
  .fam-hero__actions, .fam-cta__actions { flex-direction: column; align-items: stretch; }
  .fam-hero__actions .btn, .fam-cta__actions .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
}
@media (max-width: 480px) {
  .series__specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .obj .pimg { transition: none; } }