/* scope: .msi-page--literature */
/* Literature & Catalogs (wire literature). Owner: agent literature. Every selector must start with the scope above;
   _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules live here too.

   Wire 741:1988 (1440) / 741:7667 (834) / 741:4940 (440). The page is the CMS body _work/cms-restyled/12-Catalog-Browser.html
   on the content idiom (msi-page-content.css). All 23 live catalogs ship; the wire draws 16 / 12 / 14 filler tiles.
   Covers are the store's own cover files as <img> in the body (Diego 2026-09-23): the wire's covers are the same
   2025 art at lower resolution, and it draws only four of the 23. */

/* the footer's own margin-top is 80; the wire leaves 120.5 under the CTA (112 at 834, 88 at 440) */
.msi-page--literature { padding-bottom: 40.5px; }

/* live copy the wire does not draw (Diego 2026-09-23: follow Figma, hide, never delete) */
.msi-page--literature .msi-lit__offwire { display: none; }

/* ---- intro: 48 under the breadcrumb, 976 wide, title / two paragraphs 16 apart ------------------------ */
.msi-page--literature .msi-lit__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 976px;
  margin-top: 48px;
}
.msi-page--literature .msi-lit__title { font-size: 40px; }
/* the wire draws the request-form link flat, like the copy around it; hover is ours */
.msi-page--literature .msi-lit__lede a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.msi-page--literature .msi-lit__lede a:hover,
.msi-page--literature .msi-lit__lede a:focus-visible { text-decoration: underline; }

/* ---- band: the idiom's full-bleed #f8f9fb plate, grid inset 80 ----------------------------------------- */
.msi-page--literature .msi-lit__band { margin-top: 40px; }
.msi-page--literature .msi-lit__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msi-page--literature .msi-lit__item {
  display: flex;
  margin: 0;
}

/* ---- tile: cover 345, 24, label pill ----------------------------------------------------------------- */
.msi-page--literature .msi-lit__tile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.msi-page--literature .msi-lit__tile:hover,
.msi-page--literature .msi-lit__tile:focus { color: inherit; text-decoration: none; }
/* the wire's cover: 296 wide from the frame's outer edge, top-anchored, the bottom cropped by the 345 frame.
   The cover is the body's own <img>, so a catalog the client adds in the editor gets its cover with no theme change */
.msi-page--literature .msi-lit__cover {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 345px;
  border-radius: 32px;
  overflow: hidden;
}
.msi-page--literature .msi-lit__cover > img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 9px);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
/* the frame's hairline sits over the image, as the wire draws it */
.msi-page--literature .msi-lit__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #f4f4f4;
  border-radius: inherit;
  pointer-events: none;
}
.msi-page--literature .msi-lit__label {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 999px;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--msi-ink);
  transition: background-color .15s ease;
}
.msi-page--literature .msi-lit__label::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: var(--msi-ink);
  -webkit-mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat;
  mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat;
  transform: rotate(-90deg);
}
/* hover and keyboard focus as the homepage catalog tiles (Diego 2026-09-22) */
.msi-page--literature .msi-lit__tile:hover .msi-lit__label,
.msi-page--literature .msi-lit__tile:focus-visible .msi-lit__label { background: var(--msi-orange); }
.msi-page--literature .msi-lit__tile:focus:not(:focus-visible) { outline: none; }
.msi-page--literature .msi-lit__tile:focus-visible {
  outline: 2px solid var(--msi-blue);
  outline-offset: 4px;
  border-radius: 32px;
}


/* ---- CTA band: the shared .msi-cta, here inside the content column; photo drawn as a background -------- */
.msi-page--literature .msi-cta {
  width: auto;
  margin: 64px 0 0;
}
/* the idiom's `.msi-page p { line-height: inherit }` would set the sub on 26px lines; the CTA's own is 1.6 */
.msi-page--literature .msi-cta__sub { line-height: 1.6; }
.msi-page--literature .msi-lit__cta-photo { background: url("../images/cta/cta-hand.png") center / 100% 100% no-repeat; }

/* ---- tablet: 834 wire -------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .msi-page--literature { padding-bottom: 32px; }
  .msi-page--literature .msi-lit__intro { max-width: none; }
  .msi-page--literature .msi-lit__band {
    margin-top: 56px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .msi-page--literature .msi-lit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the 296 cover stays 296, left-anchored and cropped on the right by the 238 frame */
  .msi-page--literature .msi-lit__cover > img { width: 296px; }
  .msi-page--literature .msi-lit__label {
    min-height: 72px;
    border-radius: 16px;
  }
  .msi-page--literature .msi-lit__label { line-height: 19px; }
  /* the shared 834 CTA is 25 from each viewport edge (741:7900), wider than the 40 gutter */
  .msi-page--literature .msi-cta {
    width: calc(100% + (var(--msi-gutter) * 2) - 50px);
    margin: 120px 0 0 calc(25px - var(--msi-gutter));
  }
}

/* ---- mobile: 440 wire -------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .msi-page--literature { padding-bottom: 8px; }
  .msi-page--literature .msi-lit__intro {
    gap: 24px;
    margin-top: 40px;
  }
  .msi-page--literature .msi-lit__lede { font-size: 14px; line-height: 22px; }
  /* the wire sets both paragraphs in one text node, a blank 22 line apart */
  .msi-page--literature .msi-lit__lede ~ .msi-lit__lede { margin-top: -2px; }
  /* 56 over the grid, 56.6 under it (plate 2573, grid 2460.38 at +56) */
  .msi-page--literature .msi-lit__band {
    padding: 56px var(--msi-gutter) 56.6px;
    border-radius: 56px;
  }
  .msi-page--literature .msi-lit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 32px;
  }
  .msi-page--literature .msi-lit__tile { gap: 16px; }
  /* no frame at 440: the image carries the radius */
  .msi-page--literature .msi-lit__cover {
    height: auto;
    aspect-ratio: 547 / 681;
    border-radius: 24px;
  }
  .msi-page--literature .msi-lit__cover::after { content: none; }
  .msi-page--literature .msi-lit__cover > img { width: 100%; object-position: center top; }
  .msi-page--literature .msi-lit__label {
    min-height: 74px;
    padding: 16px;
    border-radius: 24px;
    font-size: 14px;
    line-height: 20px;
  }
  .msi-page--literature .msi-cta {
    width: auto;
    margin: 88px 0 0;
  }
}

/* narrow phones: a long single word ("Neuro/Orthopedic", "Ophthalmology") outgrew its pill and pushed the page wider;
   the pill tightens first, and at 384 and under the grid goes to one column */
@media (max-width: 392px) {
  .msi-page--literature .msi-lit__label { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 384px) {
  .msi-page--literature .msi-lit__grid { grid-template-columns: minmax(0, 1fr); }
}