/* growingapp pool sections for the designed layout (see web/shared/pool-designed.css). */
/* Try one now: real app screens, one tall and two wide. */
main[data-pool-layout="designed"] .pool-try-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto;
  gap: calc(var(--pool-step) * 1.1);
  margin-top: 1.2rem;
}
main[data-pool-layout="designed"] .pool-try-item {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--pool-line);
  border-radius: 14px;
  position: relative;
  background: rgba(10, 12, 20, .8);
  transition: border-color .25s ease;
}
main[data-pool-layout="designed"] .pool-try-item > div { padding: 1rem 1.2rem 1.2rem; }
main[data-pool-layout="designed"] .pool-try-item h3 a::after { content: ""; position: absolute; inset: 0; }
main[data-pool-layout="designed"] .pool-try-item--tall { grid-row: 1 / span 2; }
main[data-pool-layout="designed"] .pool-try-item:focus-within,
main[data-pool-layout="designed"] .pool-try-item:hover { border-color: color-mix(in srgb, var(--pool-accent) 50%, transparent); }
main[data-pool-layout="designed"] .pool-try-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: top center;
}
main[data-pool-layout="designed"] .pool-try-item--tall { grid-template-rows: 1fr auto; }
main[data-pool-layout="designed"] .pool-try-item--tall img { max-height: none; min-height: 320px; }
main[data-pool-layout="designed"] .pool-try-item h3 { margin: 0; font: 500 1.6rem/1.15 var(--forest-display); }
main[data-pool-layout="designed"] .pool-try-item h3 a { color: var(--pool-ink); text-decoration: none; }
main[data-pool-layout="designed"] .pool-try-item h3 a:focus-visible { outline: none; }
main[data-pool-layout="designed"] .pool-try-item:has(a:focus-visible) { outline: 2px solid var(--pool-accent); outline-offset: 3px; }
main[data-pool-layout="designed"] .pool-try-item p { margin: .5rem 0 0; color: var(--pool-soft); }

/* The letter: one line of it, then the way in. */
main[data-pool-layout="designed"] .pool-letter blockquote {
  margin: .4rem 0 1rem;
  padding: 0;
  color: var(--pool-accent);
  font: 500 clamp(2.2rem, 4.4vw, 3.4rem)/1.1 var(--forest-display);
}
main[data-pool-layout="designed"] .pool-letter blockquote p { margin: 0; padding-bottom: .1em; }
main[data-pool-layout="designed"] .pool-letter-langs { color: var(--pool-muted) !important; font-size: .98rem; }
main[data-pool-layout="designed"] .pool-letter-langs a { display: inline-block; padding: .15rem 0; }

@media (max-width: 820px) {
  main[data-pool-layout="designed"] .pool-try-grid { grid-template-columns: minmax(0, 1fr); }
  main[data-pool-layout="designed"] .pool-try-item--tall { grid-row: auto; }
  main[data-pool-layout="designed"] .pool-try-item--tall img { max-height: 320px; }
}

/* The thesis leads: what the pool is for, before anything it contains. */
main[data-pool-layout="designed"] .pool-thesis {
  padding: calc(var(--pool-step) * 1.6) 0 calc(var(--pool-step) * 1.2);
  border-block: 1px solid var(--pool-line);
}
main[data-pool-layout="designed"] .pool-thesis-lead {
  max-width: 24ch !important;
  margin: .2rem 0 0 !important;
  color: var(--pool-ink) !important;
  font: 500 clamp(1.9rem, 3.6vw, 2.8rem)/1.12 var(--forest-display);
  letter-spacing: -.01em;
}
main[data-pool-layout="designed"] .pool-thesis p + p { margin-top: 1rem; max-width: 40rem; font-size: 1.08rem; }
main[data-pool-layout="designed"] .pool-thesis-next { color: var(--pool-muted) !important; font: 1rem/1.5 var(--forest-sans) !important; }
main[data-pool-layout="designed"] .pool-try > p { margin: 0 0 .2rem; }