/**
 * Info Card: front end styles (the editor loads them too), for the card
 * and its facts (the fact block has no style file of its own).
 *
 * Look: S06 Service Card of the homepage sample (test1.html): a rounded
 * light grey card, text and facts in 5 of 12 columns, photo in 7. Heading
 * from ../shared/section-head.css, call line button from
 * ../shared/buttons.css. Own pf-info-card classes; --pf-* tokens.
 */
.pf-info-card{
  max-width:var(--pf-maxw);margin-left:auto;margin-right:auto;
  padding:var(--pf-s9) var(--pf-s5);
  box-sizing:border-box;
}
/* Narrow (default): 1440px content, as in the sample. */
.pf-info-card.is-width-narrow{max-width:calc(1440px + 2 * var(--pf-s5))}

.pf-info-card__card{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  overflow:hidden;border-radius:var(--pf-radius);
  background:var(--pf-info-card-bg,var(--pf-hover));
}
.pf-info-card.is-photo-left .pf-info-card__card{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pf-info-card.is-photo-left .pf-info-card__media{order:-1}
.pf-info-card.has-no-photo .pf-info-card__card{grid-template-columns:minmax(0,1fr)}

.pf-info-card__text{
  display:flex;flex-direction:column;justify-content:center;gap:var(--pf-s6);
  padding:var(--pf-s5);
}

/* Facts: stacked on every screen size, rows split by thin lines. */
.pf-info-card .pf-info-card__facts{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--pf-line)}
.pf-info-card .pf-info-fact{
  display:flex;flex-direction:column;gap:var(--pf-s1);
  margin:0;padding:var(--pf-s4) 0;border-top:1px solid var(--pf-line);
}
.pf-info-card .pf-info-fact__value{margin:0;font-size:var(--pf-h3);font-weight:600;line-height:1.3;letter-spacing:0;color:inherit}
.pf-info-card .pf-info-fact__label{margin:0;font-size:var(--pf-ui);line-height:1.5;color:var(--pf-text-faint)}

/* Call line: "Call us any time:" then the button (a text link by default). */
.pf-info-card__call{
  display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--pf-s2);
  font-size:var(--pf-ui);color:var(--pf-text-soft);
}
.pf-info-card__call .pf-buttons{color:var(--pf-text)}

/* Photo: fills its column, at least the sample's 560px tall on desktop. */
.pf-info-card__media{position:relative;min-height:560px}
.pf-info-card__img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover;
}

/* Label: a small grey line above the heading ("Step 1"). The text column
   spaces its parts 32px apart; the negative margin brings the heading up
   to 8px under the label. */
.pf-info-card .pf-info-card__label{
  margin:0 0 calc(var(--pf-s2) - var(--pf-s6));
  font-size:var(--pf-tiny);line-height:1.5;color:var(--pf-text-faint);
}

/* ---------- Look "Open": no card ----------
   Text straight on the page, the photo rounded on its own, 64px between
   them (The Purific Proven Process mockup, October 2026). Same 5 : 7
   columns and photo side as the card. More classes than the card rules,
   so these win wherever they print. */
.pf-info-card.is-look-open .pf-info-card__card{
  gap:var(--pf-s8);align-items:center;
  overflow:visible;border-radius:0;background:none;
}
.pf-info-card.is-look-open .pf-info-card__text{padding:0;max-width:560px;gap:var(--pf-s5)}
.pf-info-card.is-look-open .pf-info-card__label{margin-bottom:calc(var(--pf-s2) - var(--pf-s5))}
.pf-info-card.is-look-open .pf-info-card__media{overflow:hidden;border-radius:var(--pf-radius)}
/* Open cards stacked one after another (process steps): no top padding on
   the second and later ones, so the gap stays 80px, not 160px. A padding
   set in Styles > Dimensions (inline) still wins. */
.pf-info-card.is-look-open + .pf-info-card.is-look-open{padding-top:0}

/* ---------- Look "Cover": photo behind the whole section ----------
   Full bleed (align full), photo fills the section, a shade darkens the
   text side only, white text (tone light) or dark text (tone dark).
   Photo side "right" = text left, "left" = text right, like the other
   looks. Three classes on the outer rules so they beat .is-width-*. */
.pf-info-card.pf-info-card.is-look-cover{
  position:relative;overflow:hidden;
  max-width:none;padding:0;
  background:var(--pf-text);color:var(--pf-bg);
}
.pf-info-card.pf-info-card.is-look-cover.is-tone-dark{background:var(--pf-hover);color:var(--pf-text)}
.pf-info-card.is-look-cover .pf-info-card__card{
  display:flex;align-items:center;
  max-width:var(--pf-maxw);margin:0 auto;padding:var(--pf-s9) var(--pf-s5);
  min-height:var(--pf-info-card-h,760px);
  overflow:visible;border-radius:0;background:none;
}
.pf-info-card.is-look-cover.is-width-narrow .pf-info-card__card{max-width:calc(1440px + 2 * var(--pf-s5))}
.pf-info-card.is-look-cover.is-photo-left .pf-info-card__card{justify-content:flex-end}
/* Screen: one screen tall, following the real header (shared/screen.php). */
.pf-info-card.is-look-cover.is-height-screen .pf-info-card__card{
  min-height:clamp(600px, calc(100vh - var(--pf-screen-offset, var(--pf-header-h))), 1064px);
  min-height:clamp(600px, calc(100svh - var(--pf-screen-offset, var(--pf-header-h))), 1064px);
}
.pf-info-card.is-look-cover .pf-info-card__media{
  position:absolute;inset:0;z-index:0;min-height:0;
  border-radius:0;
}
.pf-info-card .pf-info-card__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--pf-info-card-overlay, var(--pf-text));
  opacity:var(--pf-info-card-overlay-opacity, .75);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 25%,transparent 65%);
  mask-image:linear-gradient(90deg,#000 0%,#000 25%,transparent 65%);
}
.pf-info-card.is-photo-left .pf-info-card__shade{
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 25%,transparent 65%);
  mask-image:linear-gradient(270deg,#000 0%,#000 25%,transparent 65%);
}
.pf-info-card.is-look-cover .pf-info-card__text{position:relative;z-index:2;padding:0;max-width:480px;gap:var(--pf-s5)}
.pf-info-card.is-look-cover .pf-info-card__label{margin-bottom:calc(var(--pf-s2) - var(--pf-s5))}
.pf-info-card.is-look-cover .pf-section-head .pf-section-head__title{font-size:var(--pf-display);line-height:1.1;letter-spacing:-.015em}
/* Light text over the photo. */
.pf-info-card.is-look-cover.is-tone-light .pf-info-card__label{color:color-mix(in srgb,var(--pf-bg) 70%,transparent)}
.pf-info-card.is-look-cover.is-tone-light .pf-section-head .pf-section-head__intro{color:color-mix(in srgb,var(--pf-bg) 85%,transparent)}
.pf-info-card.is-look-cover.is-tone-light .pf-info-fact__label{color:color-mix(in srgb,var(--pf-bg) 70%,transparent)}
.pf-info-card.is-look-cover.is-tone-light .pf-info-card__facts,
.pf-info-card.is-look-cover.is-tone-light .pf-info-fact{border-color:rgba(255,255,255,.25)}
.pf-info-card.is-look-cover.is-tone-light .pf-info-card__call{color:color-mix(in srgb,var(--pf-bg) 85%,transparent)}
.pf-info-card.is-look-cover.is-tone-light .pf-info-card__call .pf-buttons{color:var(--pf-bg)}
/* Cover cards one after another touch: no gap between the photos. */
.pf-info-card.is-look-cover + .pf-info-card.is-look-cover{margin-top:0}

/* ---------- Tablet: photo on top, 16:9 ---------- */
@media (max-width:900px){
  .pf-info-card{padding:var(--pf-s7) var(--pf-s4)}
  /* Cover: text at the bottom, shade coming up from below. */
  .pf-info-card.is-look-cover .pf-info-card__card,
  .pf-info-card.is-look-cover.is-height-screen .pf-info-card__card{min-height:720px;align-items:flex-end;padding:var(--pf-s7) var(--pf-s4)}
  .pf-info-card.is-look-cover.is-photo-left .pf-info-card__card{justify-content:flex-start}
  .pf-info-card.is-look-cover .pf-info-card__media{aspect-ratio:auto}
  .pf-info-card.is-look-cover .pf-info-card__text{max-width:none}
  .pf-info-card .pf-info-card__shade,
  .pf-info-card.is-photo-left .pf-info-card__shade{
    -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 75%);
    mask-image:linear-gradient(180deg,transparent 30%,#000 75%);
  }
  .pf-info-card.is-look-open .pf-info-card__card{gap:var(--pf-s6)}
  .pf-info-card.is-look-open .pf-info-card__text{max-width:none}
  .pf-info-card .pf-info-card__card{grid-template-columns:minmax(0,1fr)}
  .pf-info-card .pf-info-card__media{order:-1;min-height:0;aspect-ratio:16/9}
}
/* ---------- Phone: photo 4:3 ---------- */
@media (max-width:520px){
  .pf-info-card__text{padding:var(--pf-s4)}
  .pf-info-card .pf-info-card__media{aspect-ratio:4/3}
  .pf-info-card.is-look-cover .pf-info-card__card,
  .pf-info-card.is-look-cover.is-height-screen .pf-info-card__card{min-height:600px}
  .pf-info-card.is-look-cover .pf-info-card__media{aspect-ratio:auto}
}