/* Phase 3 — bounded F.A.M.E. source-informed layout corrections.
 * Load after styles.css. Evidence and measured before/after geometry:
 * docs/build/phase3-fame-layout/review.md
 * No licensed font, third-party image, claim or certification is introduced.
 * This file is not a claim of a measured or accepted 95% visual match.
 */

/* HOME: FAME's dosage-format heading uses the smaller 46px tier.
 * Keep the existing hero width: max-width declarations alone do not establish
 * its final flex-item width, and the captured 1200px reference supports 940px.
 */
.is-home main > .section.wrap:has(> .format-grid) .split-heading h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
}

/* PRODUCT: restore the final runtime chip/subtitle styles after the generic
 * .pdp-info > p rule. Keep the entire identity string, including the source ID.
 */
.pdp-info > .pill {
  max-width: 100%;
  margin: 0 0 12px;
  color: var(--contrast);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pdp-info > .pdp-subtitle {
  line-height: 1.45;
}

/* The reference screenshot shows a distinct soft formula-note panel directly
 * below its CTA row. Apply that visual role to the existing truthful note.
 */
.pdp-info .pdp-about {
  border-top: 0;
  border-radius: 14px;
  padding: 16px;
  background: #f0f3f4;
}
.pdp-info .pdp-about p:last-child {
  margin-bottom: 0;
}
.pdp-info .pdp-about strong {
  color: var(--contrast);
}

/* The reference product template's quotation section is dark teal; the form
 * is a separate, readable 860px content column rather than a full-width grid.
 * Scope to the existing product quotation section, not every white section.
 */
.pdp + .section.wrap:has(> .inquiry-form) {
  background: #052226;
  color: #fff;
}
.pdp + .section.wrap:has(> .inquiry-form) .eyebrow {
  color: #7fdbe4;
}
.pdp + .section.wrap:has(> .inquiry-form) .split-heading h2 {
  color: #fff;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
}
.pdp + .section.wrap:has(> .inquiry-form) .section-intro {
  color: #c4d3d4;
}
.pdp + .section.wrap > .inquiry-form {
  max-width: 860px;
  margin-inline: auto;
  border-radius: 18px;
}
.pdp + .section.wrap > .inquiry-form .field {
  color: #d3e0e1;
}
.pdp + .section.wrap > .inquiry-form .field > span {
  color: #c4d3d4;
}
.pdp + .section.wrap > .inquiry-form :is(input, textarea, select) {
  border-color: #ffffff38;
  border-radius: 14px;
  background: #ffffff12;
  color: #fff;
}
.pdp + .section.wrap > .inquiry-form :is(input, textarea)::placeholder {
  color: #b4c4c6;
}
.pdp + .section.wrap > .inquiry-form select option {
  background: #052226;
  color: #fff;
}
.pdp + .section.wrap > .inquiry-form .form-privacy {
  color: #c4d3d4;
}
.pdp + .section.wrap > .inquiry-form .form-privacy a {
  color: #7fdbe4;
}
.pdp + .section.wrap > .inquiry-form .form-error {
  color: #ffb9af;
}
.pdp + .section.wrap > .inquiry-form .form-status {
  color: #143f44;
}
.pdp + .section.wrap > .inquiry-form .form-status.error,
.pdp + .section.wrap > .inquiry-form .form-status[data-state="error"] {
  color: #8c352d;
}

/* CUSTOM: the /formats template uses three larger format cards, rather than
 * the homepage's six compact cards. Keep the approved 3D format illustrations.
 * Source: custom v2.2 card grid3/gap20/radius24/image16:10/h3 22px.
 */
.custom-hero + .section.wrap > .format-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.custom-hero + .section.wrap > .format-grid .format-card {
  border-color: transparent;
  border-radius: 24px;
  padding: 26px;
  background: #f4f7f7;
  text-align: left;
}
.custom-hero + .section.wrap > .format-grid .format-art {
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: 22px;
}
.custom-hero + .section.wrap > .format-grid .format-art .format-icon {
  width: 76%;
  height: 76%;
  object-fit: contain;
}
.custom-hero + .section.wrap > .format-grid .format-card h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

/* PRIVATE LABEL: retain its lime centered hero, independently of custom.
 * FAME constrains the text, not the surrounding collage, to ~769px. Separate
 * those roles here so the existing single packaging still life can breathe.
 * The single image remains an explicit adaptation; no fake person collage.
 */
.private-hero > .wrap {
  max-width: none;
}
.private-hero > .wrap > :is(.eyebrow, h1, p, .hero-actions) {
  max-width: 769px;
  margin-inline: auto;
}
.private-hero .private-hero-media {
  width: 100%;
  max-width: 1100px;
}

@media (min-width: 1920px) {
  .private-hero {
    padding-block: 128px;
  }
}

@media (max-width: 991px) {
  .custom-hero + .section.wrap > .format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .is-home main > .section.wrap:has(> .format-grid) .split-heading h2 {
    font-size: 30px;
  }
  .custom-hero + .section.wrap > .format-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .custom-hero + .section.wrap > .format-grid .format-card {
    border-radius: 20px;
    padding: 26px;
  }
  .pdp + .section.wrap:has(> .inquiry-form) .split-heading h2 {
    font-size: 28px;
  }
}

@media (forced-colors: active) {
  .pdp-info .pdp-about {
    border: 1px solid CanvasText;
  }
}