/* The peptide map (Task 2206): six goal tiles, blends frame, two close-ups.
   All words are HTML; the art carries none. */

.peptide-map { padding: 36px 0 8px; }
.peptide-map .sec-head { margin-bottom: 14px; }
.peptide-map > .dek { max-width: 62ch; margin: 0 0 24px; }

/* One column on phones. DOM order is A B C blends D E F, which is the phone order. */
.map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.map-tile { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.map-tile-art { display: block; line-height: 0; }
.map-tile-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.map-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; }
.map-tile-body h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; }
.map-tile-body h3 a { color: var(--ink); text-decoration: none; }
.map-tile-body h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.map-tile-line { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.map-peps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.map-peps li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--hairline); }
.map-pep-name { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.map-pep-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.map-cue { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.map-cue img { display: block; width: 18px; height: 18px; flex: none; }

/* Blends frame */
.map-blends { margin: 0; padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; }
.map-blends img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.map-blends figcaption { padding: 18px 22px 22px; }
.map-blends h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 21px; }
.map-blends ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--sans); font-size: 15px; }
.map-blends a { font-weight: 600; color: var(--ink); }
.map-mix { color: var(--muted); font-size: 14px; }
.map-blends p { margin: 0; font-size: 14px; color: var(--muted); }

.map-notes { margin: 22px 0 0; font-size: 14.5px; color: var(--muted); }
.map-notes summary { cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--ink); }
.map-notes ul { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; max-width: 70ch; }
.map-footer { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 70ch; }

/* Start Here: small tiles */
.peptide-map--small .map-tile-body { padding: 12px 16px 16px; gap: 4px; }
.peptide-map--small .map-tile-body h3 { font-size: 17px; }
.peptide-map--small .map-tile-line { font-size: 13.5px; }
.peptide-map--small .map-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

@media (min-width: 700px) {
  .map-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  /* Desktop: C and D are not neighbours, so the blends frame drops below the grid. */
  .map-blends { order: 1; grid-column: 1 / -1; grid-template-columns: minmax(0, 340px) 1fr; align-items: center; }
  .peptide-map--small .map-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Close-ups on existing pages */
.map-closeup-wrap { margin: 22px 0 26px; }
.map-closeup-lead { margin: 0 0 14px; }
.map-closeup { margin: 0; }
.map-closeup img { display: block; width: 100%; max-width: 720px; height: auto; border-radius: 18px; margin: 0 auto; }
.map-closeup-labels { margin: 16px auto 0; max-width: 720px; display: grid; gap: 10px; }
.map-closeup-labels div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 4px 14px; font-size: 14.5px; line-height: 1.5; }
.map-closeup-labels dt { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.map-closeup-labels dd { margin: 0; color: var(--muted); }
.map-closeup figcaption { margin: 14px auto 0; max-width: 720px; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
@media (max-width: 520px) {
  .map-closeup-labels div { grid-template-columns: 1fr; }
}