/* Add-on detail pages and guides */

/* Screen: the add-on's real screen under the hero, in the homepage tour's card and light */
.addon-screen { position: relative; margin-top: 80px; }
.addon-screen::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 20% -8% -12%;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 46%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)),
    radial-gradient(50% 50% at 52% 50%, rgba(91, 79, 214, .12), rgba(91, 79, 214, 0));
}
.screen-card {
  --pad: 14px;
  display: block;
  padding: var(--pad);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #f9f8f6, var(--card));
  box-shadow: var(--shadow-frame);
}
/* Each tier's crop ratio, so the box keeps its shape before the file arrives even where <source> width and height are ignored */
.screen-card img {
  width: 100%;
  aspect-ratio: auto 1600 / 981;
  border-radius: calc(var(--r-xl) - var(--pad));
  background: #f0f0f1;
  box-shadow: 0 0 0 1px rgba(28, 27, 25, .09);
}

@media (prefers-reduced-motion: no-preference) {
  .addon-screen { animation: rise 1.1s .2s var(--ease) both; }
}

/* Detail: sections under the hero, each headed like the add-ons page's plan groups */
.detail-body { padding-top: 104px; }
.detail-body > * + * { margin-top: 104px; }
.detail-section .feature-grid { margin-top: 32px; }

.detail-intro { max-width: 44em; margin-inline: auto; font-size: var(--fs-3); line-height: 1.6; color: var(--ink-2); }
.detail-intro p:first-child { color: var(--ink); }
.detail-intro p + p { margin-top: 1em; }

/* Four cards go two by two and five go three then two, so no tray row is left part empty */
@media (min-width: 1024px) {
  .detail-features-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-features-4 .feat p { max-width: 30em; }
  .detail-features-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .detail-features-5 > .feat { grid-column: span 2; }
  .detail-features-5 > .feat:nth-child(n + 4) { grid-column: span 3; }
}

/* Story: a wide white card, the heading across it, the copy left and its three points right */
.detail-stories { display: grid; gap: 24px; }
.detail-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}
.detail-story h2 {
  grid-column: 1 / -1;
  max-width: 20em;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.detail-story-text p { max-width: 34em; margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.detail-story-text p + p { margin-top: 1em; }
.detail-story .caps { margin-top: 16px; }
.detail-story .caps li:last-child { border-bottom: 1px solid var(--line-2); }
.detail-shot { grid-column: 1 / -1; margin: 40px 0 0; }
.detail-shot img { width: 100%; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-2); }

/* How it works: the step number in the ink tile */
.detail-step {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Reading: one wide card, the link at its end */
.detail-reading { grid-template-columns: minmax(0, 1fr); }
.detail-reading .feat { grid-template-columns: var(--tile) minmax(0, 1fr) auto; }
.detail-reading .feat p { grid-column: 1 / 3; max-width: 36em; }
.detail-reading .link { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-left: 32px; }

/* Guide: the standfirst as the lede, then one reading column */
.guide-body { padding-top: 56px; }
.prose .caps { padding-left: 0; list-style: none; }
.prose .caps li + li { margin-top: 0; }
.prose .caps li:last-child { border-bottom: 1px solid var(--line-2); }

.guide-next {
  --tile: 32px;
  --hang: calc((var(--tile) - 1.25 * var(--fs-4)) / 2);
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  max-width: 44em;
  margin: 72px auto 0;
  font-size: 16px;
}
.guide-next h2 {
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.guide-next p { grid-column: 1 / -1; max-width: 34em; margin-top: 12px; line-height: 1.65; color: var(--ink-2); }
.guide-next .link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

@media (max-width: 1100px) {
  .detail-story { column-gap: 48px; }
}

@media (max-width: 880px) {
  .addon-screen { margin-top: 64px; }
  .detail-body { padding-top: 88px; }
  .detail-body > * + * { margin-top: 96px; }
  .detail-story { grid-template-columns: minmax(0, 1fr); }
  .detail-story .caps { margin-top: 28px; }
  .guide-body { padding-top: 48px; }
  .guide-next { margin-top: 64px; }
}

@media (max-width: 767px) {
  .screen-card img { aspect-ratio: auto 5 / 4; }
  .detail-reading .feat { grid-template-columns: var(--tile) minmax(0, 1fr); }
  .detail-reading .feat p { grid-column: 1 / -1; }
  .detail-reading .link { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin: 4px 0 0; }
}

@media (max-width: 560px) {
  .addon-screen { margin-top: 56px; }
  .screen-card { --pad: 8px; border-radius: 20px; }
  .screen-card img { aspect-ratio: auto 4 / 5; border-radius: 12px; }
  .detail-body { padding-top: 72px; }
  .detail-body > * + * { margin-top: 72px; }
  .detail-section .feature-grid { margin-top: 24px; }
  .detail-intro { font-size: 17px; }
  .detail-stories { gap: 16px; }
  .detail-story-text p { font-size: var(--fs-2); }
  .guide-body { padding-top: 40px; }
  .guide-next { margin-top: 56px; }
}