/* example.html only. The shared system is in /styles.css.
   Two sections: the whole sample page with six numbered notes (in the light top), then the closing panel. */

/* ================================================================
   1. Top: centered head, then the picture of the whole sample page.
   Computers: the notes sit left and right of the picture, each joined by a thin line to a red
   number on the frame's edge, level with the part it describes (--y is that part's height on the
   picture, in percent). Phones and tablets: red numbers on the picture, the notes listed under it.
   ================================================================ */

.ex-hero { padding-bottom: clamp(72px, 8vw, 120px); }
.ex-hero h1 { max-width: 15ch; }

.anno {
  --shot: min(100%, 560px);
  --bar: 36px;
  position: relative;
  margin: clamp(44px, 5vw, 72px) auto 0;
  text-align: left;
}
@media (max-width: 419px) { .anno { --bar: 30px; } }

.anno-shot { width: var(--shot); margin-inline: auto; }
.anno-shot:hover { box-shadow: 0 2px 4px rgba(var(--shade), 0.04), 0 24px 48px -12px rgba(var(--shade), 0.22), 0 48px 96px -40px rgba(var(--blue-dark-rgb), 0.34); }
.anno-img { position: relative; display: block; }
.anno-img img { display: block; width: 100%; height: auto; }

/* the numbers on the picture (phones and tablets) */
.anno-pin { position: absolute; top: calc(var(--y) * 1% - 14px); left: 10px; }
.anno-pin:nth-of-type(even) { left: auto; right: 10px; }

/* the notes, listed under the picture */
.anno-notes {
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin: 28px auto 0;
  padding: 0;
}
@media (min-width: 720px) and (max-width: 999px) {
  .anno-notes { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.anno-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.anno-note .callout { margin-top: 1px; }
.anno-line { display: none; }
.anno-text { min-width: 0; }
.anno-text h3 { margin: 1px 0 4px; font-size: 1.375rem; line-height: 1.2; }
.anno-text p { margin: 0; color: var(--muted); line-height: 1.5; }

/* ---- Computers: the notes around the picture ---- */
@media (min-width: 1000px) {
  /* the picture as big as the notes beside it allow, so its parts can be made out */
  .anno { --shot: clamp(480px, 46vw, 600px); }
  .anno-pin { display: none; }

  .anno-notes { display: block; max-width: none; margin: 0; }
  .anno-note {
    position: absolute;
    top: calc(var(--bar) + (100% - var(--bar)) * var(--y) / 100 - 14px);
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* left of the picture: words, line, number (the number centered on the frame's left edge) */
  .anno-note:nth-child(odd) {
    left: 0;
    right: calc(50% + var(--shot) / 2 - 14px);
    flex-direction: row-reverse;
    text-align: right;
  }
  /* right of the picture: number, line, words */
  .anno-note:nth-child(even) {
    left: calc(50% + var(--shot) / 2 - 14px);
    right: 0;
  }
  .anno-note .callout { position: relative; z-index: 1; margin: 0; }
  .anno-line {
    display: block;
    flex: 0 0 clamp(28px, 3.2vw, 52px);
    height: 0;
    margin-top: 13px;
    border-top: 2px dotted rgba(var(--red-rgb), 0.55);
  }
  .anno-text { flex: 0 1 240px; padding-top: 1px; }
  .anno-note:nth-child(odd) .anno-text { padding-right: 14px; }
  .anno-note:nth-child(even) .anno-text { padding-left: 14px; }
  .anno-text h3 { margin: 0 0 4px; line-height: 26px; }
}

/* ================================================================
   2. Closing panel: a little less space under it, the footer follows
   ================================================================ */

.band--cta { padding-bottom: clamp(56px, 6vw, 96px); }