/*
 * Hospital product landing pages (D-039): Hospital PI (Medical Establishment), Property, Public Liability, Money,
 * Comprehensive Package. Loaded after pi-landing.css: the hero, sections and tablet/phone behaviour are the PI
 * page's (same Figma design family); this file holds what these designs do differently, at the design's 1440px sizes.
 */

/* ---------- Hero ---------- */
/* D-068: the hero uses the PI page's two-column grid (pi-landing.css, owner 22 Oct).
   OLD (written for the PI hero's earlier absolute layout; with the grid it pushed the card off-screen):
   @media (min-width: 1200px) {
     .hp-hero .pl-hero__inner { display: flex; align-items: center; }
     .hp-quote { margin: 48px 0 48px 674px; }
   } */
.hp-photo { position: absolute; max-width: none; object-fit: cover; }

.hp-page .pl-stat__icon { color: var(--cy-neutral-0); }
.hp-stat__badge-icon { position: absolute; left: 20.14px; top: 19.64px; color: var(--cy-brand-600); }

/* "360° Legal/Medical Protection" (Figma 208 x 82) and "Lawyers in 2 Hours" / "Claims Support" (174 x 82):
   icon on the left, two text lines beside it. */
.pl-stat.hp-stat--protection,
.pl-stat.hp-stat--support {
  width: auto; height: auto; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px;
}
.hp-stat--protection { padding: 16px; }
.hp-stat--support { padding: 15px 16px 15px 12px; }
.hp-stat--protection .pl-stat__icon,
.hp-stat--support .pl-stat__icon,
.hp-stat--protection .pl-stat__num,
.hp-stat--protection .pl-stat__label,
.hp-stat--support .pl-stat__num,
.hp-stat--support .pl-stat__label { position: static; }
.hp-stat--protection .pl-stat__icon { grid-row: 1 / span 2; width: 44px; height: 44px; }
.hp-stat--support .pl-stat__icon { grid-row: 1 / span 2; width: 48px; height: 48px; }
.hp-stat--protection .pl-stat__label { margin-top: -4px; }
.hp-stat--support .pl-stat__label { margin-left: 1px; }
.hp-stat--support .pl-stat__num { margin-top: 3px; }

/* ---------- Quote form: labelled fields ---------- */
.hp-quote .pl-quote__head { margin-bottom: 4px; }
.hp-form { display: flex; flex-direction: column; gap: 22px; }
.hp-form__fields { display: flex; flex-direction: column; gap: 16px; }
.hp-field__label { display: block; margin: 0 0 8px; font: 400 var(--cy-fs-xs)/16px var(--cy-font); color: var(--cy-neutral-1000); }
.hp-form .error { display: block; margin-top: 4px; font-size: var(--cy-fs-xs); line-height: 16px; }
.hp-form .error:empty { display: none; }
.hp-input-icon { position: absolute; left: 16px; top: 12px; color: var(--cy-neutral-1000); pointer-events: none; }
.hp-input-icon--end { left: auto; right: 16px; }

/* ---------- Sections ---------- */
/* Why photo: the PI page size, 432x306 (owner, 23 Oct, D-063). OLD (the Figma frame): .hp-why__photo { height: 332px; } */
/* Medical Establishment sets each step title on two lines. */
.hp-how--two-line .pl-step__title { min-height: 56px; margin-bottom: 20px; }
/* Feature cards grow with longer text (Figma: 195px, 214px or 218px tall); a row keeps one height. */
.hp-feature { height: auto; min-height: 195px; }
.hp-feature p { position: static; width: auto; margin: 131px 10px 16px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  /* OLD (D-063): .hp-why__photo { height: auto; aspect-ratio: 432 / 332; } */
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .hp-feature p { margin-inline: 8px; }
}