/* Institutional family landings only. SKU photography and GTCORE are unchanged. */
@layer catalog-families {
  .public-site .catalog-family-hero--institutional {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.12fr);
    grid-template-areas: "back back" "copy visual" "actions visual" "note visual";
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: 0;
    align-items: start;
    color: var(--public-ink, #142b39);
  }
  .catalog-family-hero--institutional > * { min-width: 0; }
  .family-collection-back {
    grid-area: back;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-block: 10px;
    margin-bottom: 24px;
    color: #3c5567;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
  }
  .family-collection-back > span { font-size: 1rem; }
  .family-collection-copy { grid-area: copy; padding-top: 24px; }
  .family-collection-copy .product-eyebrow {
    color: #4d6b80;
    font-size: .6875rem;
    line-height: 1.6;
    font-weight: 650;
    letter-spacing: .095em;
  }
  .public-site .catalog-family-hero--institutional h1 {
    max-width: 16ch;
    margin: 18px 0 22px;
    color: #142b39;
    font-size: clamp(2.5rem, 4.1vw, 3.75rem);
    font-weight: 600;
    line-height: 1.055;
    letter-spacing: -.048em;
    text-wrap: balance;
    overflow-wrap: normal;
  }
  .catalog-family-hero--institutional .family-collection-copy > p {
    max-width: 43ch;
    margin: 0;
    color: #435b69;
    font-size: .9375rem;
    line-height: 1.85;
    text-wrap: pretty;
  }
  .family-institutional-showcase {
    grid-area: visual;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 576px;
    margin: 0;
  }
  .family-institutional-stage {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    background: transparent;
  }
  .family-institutional-picture { display: block; width: 100%; height: 100%; }
  .family-institutional-picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    padding: 0;
    background: transparent;
    filter: drop-shadow(0 10px 8px rgba(18, 52, 76, .065));
  }
  .family-institutional-showcase figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    margin-top: 18px;
    padding-block: 16px 0;
    border-top: 1px solid #d8e2e7;
    color: #536a78;
    font-size: .6875rem;
    line-height: 1.6;
  }
  .family-institutional-showcase figcaption b {
    display: block;
    color: #31536b;
    font-size: .75rem;
    font-weight: 600;
  }
  .family-institutional-label { display: block; margin-top: 2px; }
  .family-institutional-showcase figcaption > span:last-child { text-align: right; max-width: none; text-wrap: balance; }
  .family-collection-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin-top: 26px;
  }
  .family-collection-actions .family-collection-explore {
    min-height: 48px;
    margin: 0;
    gap: 24px;
    padding: 13px 20px;
    border: 1px solid #075995;
    border-radius: 0;
    background: #075995;
    color: #fff;
    font-size: .8125rem;
    line-height: 1.5;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
  }
  .family-collection-actions .family-collection-assistant {
    gap: 10px;
    min-height: 44px;
    padding-block: 10px;
    color: #31536b;
    font-size: .8125rem;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: #b0c4d1;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  .catalog-family-hero--institutional .family-collection-note {
    grid-area: note;
    max-width: 42ch;
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    color: #536a78;
    font-size: .75rem;
    line-height: 1.75;
  }
  .catalog-family-hero--institutional a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(20, 120, 200, .12); }
  .catalog-family-hero--institutional a:focus-visible {
    outline: 2px solid #075995;
    outline-offset: 5px;
  }
  @media (hover: hover) and (pointer: fine) {
    .family-collection-back:hover, .family-collection-assistant:hover { color: #075995; }
    .family-collection-actions .family-collection-explore:hover { background: #034572; border-color: #034572; }
    .family-collection-actions .family-collection-assistant:hover { text-decoration-color: currentColor; }
  }
  @media (min-width: 1600px) {
    .family-collection-copy { padding-top: 32px; }
  }
  @media (max-width: 1100px) and (min-width: 641px) {
    .public-site .catalog-family-hero--institutional { column-gap: 28px; }
    .family-collection-copy { padding-top: 10px; }
    .public-site .catalog-family-hero--institutional h1 { font-size: clamp(2.3rem, 4.6vw, 3rem); }
    .family-collection-actions { gap: 4px 18px; margin-top: 20px; }
    .family-institutional-showcase figcaption { align-items: start; flex-direction: column; gap: 6px; }
    .family-institutional-showcase figcaption > span:last-child { text-align: left; max-width: none; }
  }
  @media (max-width: 640px) {
    .public-site .catalog-family-hero--institutional {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "back" "copy" "visual" "actions" "note";
      grid-template-rows: none;
      gap: 0;
    }
    .family-collection-back { margin-bottom: 18px; font-size: .75rem; }
    .family-collection-copy { padding-top: 0; }
    .family-collection-copy .product-eyebrow { font-size: .625rem; letter-spacing: .09em; }
    .public-site .catalog-family-hero--institutional h1 {
      max-width: none;
      margin: 14px 0 16px;
      font-size: clamp(2.125rem, 9.4vw, 2.875rem);
      line-height: 1.06;
      letter-spacing: -.045em;
      text-wrap: initial;
    }
    .catalog-family-hero--institutional .family-collection-copy > p { max-width: 48ch; font-size: .875rem; line-height: 1.75; }
    .family-institutional-showcase { max-width: 460px; margin-top: 22px; }
    .family-institutional-showcase figcaption { gap: 8px 18px; margin-top: 14px; padding-top: 12px; font-size: .625rem; }
    .family-institutional-showcase figcaption b { font-size: .6875rem; }
    .family-collection-actions { justify-content: center; gap: 4px 20px; margin-top: 24px; }
    .family-collection-actions .family-collection-explore { flex: 1 1 100%; justify-content: space-between; padding-inline: 16px; }
    .family-collection-actions .family-collection-assistant { justify-content: center; }
    .catalog-family-hero--institutional .family-collection-note { max-width: 40ch; margin: 10px auto 0; text-align: center; font-size: .6875rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .catalog-family-hero--institutional .family-collection-actions a,
    .catalog-family-hero--institutional .family-collection-back { transition: none; }
    .catalog-family-hero--institutional a:active { transform: none; }
  }
  @media (prefers-contrast: more) {
    .catalog-family-hero--institutional :is(p, .product-eyebrow, figcaption, .family-collection-assistant) { color: #233e50; }
    .family-institutional-showcase figcaption { border-color: #8095a3; }
  }
  @media (forced-colors: active) {
    .family-institutional-picture img { filter: none; }
    .family-institutional-showcase figcaption { border-color: CanvasText; }
    .family-collection-actions .family-collection-explore { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
    .family-collection-back, .family-collection-actions .family-collection-assistant { color: LinkText; }
    .catalog-family-hero--institutional a:focus-visible { outline-color: Highlight; }
  }
}