/* /poolapps/ — the Pool Apps landing page. Buttons are the shared
   .app-card__cta grammar from components.css; this file only lays out the
   quick picks, the app sections and the screenshot strips. */

.pool-apps {
  --pool-gutter: var(--space-5);
}

.pool-apps__intro {
  margin-bottom: var(--space-6);
}

.pool-apps__tagline {
  color: var(--color-accent-strong);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.4;
  margin-top: var(--space-2);
}

.pool-apps__intro .page-intro__summary {
  margin-top: var(--space-3);
}

/* The iOS icon corner is close enough to 22.37% of the side. Overrides the
   card radius base.css gives every img. */
.pool-app-icon {
  border-radius: 22.37%;
  box-shadow: 0 6px 16px rgba(5, 5, 5, 0.18);
  flex: none;
  height: auto;
}

/* ─── Quick picks ─────────────────────────────────────────── */

/* auto-fit, not a fixed count: two apps split the row and a third wraps to a
   second one. On a phone each card is too narrow to put the icon beside the
   text, so it sits on top; from 48rem it moves to the left. */
.pool-picks {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  margin-bottom: var(--space-7);
  max-width: 48rem;
}

.pool-pick {
  background: var(--color-surface-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.pool-pick__icon {
  width: 4.5rem;
}

.pool-pick__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pool-pick__app {
  color: inherit;
  display: grid;
  gap: 0.2rem;
  justify-items: start;
}

.pool-pick__name {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pool-pick__app:hover .pool-pick__name {
  color: var(--color-accent-strong);
}

.pool-pick__category {
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Categories wrap to different lengths; the auto margin keeps both buttons on
   one line across the row. */
.pool-pick__cta {
  margin-top: auto;
  width: 100%;
}

/* ─── App sections ────────────────────────────────────────── */

/* minmax(0, 1fr) keeps the screenshot strip from widening the column to fit
   every shot. scroll-margin clears the sticky site header when a pick jumps
   here. */
.pool-app {
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-7);
  scroll-margin-top: 4.5rem;
}

.pool-app__body {
  align-items: start;
  display: grid;
  gap: var(--space-5) var(--space-7);
}

.pool-app__intro {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.pool-app__head {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.pool-app__icon {
  width: 4.5rem;
}

/* Same label as .build-card__channel on /build/. */
.pool-app__category {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pool-app__name {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  margin-top: 0.3rem;
}

.pool-app__tagline {
  color: var(--color-accent-strong);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
}

.pool-app__desc {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 34rem;
}

.pool-app__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.pool-app__features {
  background: var(--color-surface-panel);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.pool-app__features li {
  font-size: 0.98rem;
  line-height: 1.55;
  padding-left: 1.5rem;
  position: relative;
}

.pool-app__features li::before {
  background: var(--color-accent);
  border-radius: 50%;
  content: "";
  height: 0.55rem;
  left: 0.15rem;
  position: absolute;
  top: 0.5em;
  width: 0.55rem;
}

/* ─── Screenshot strips ───────────────────────────────────── */

/* Sideways scroll with snap, bled out to the container edge so the cut-off
   shot reads as "there's more". The end padding sits on the list, not the
   scroller, because browsers disagree on whether a scroller keeps its own
   trailing padding. */
.pool-app__shots {
  margin-inline: calc(-1 * var(--pool-gutter));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: var(--space-2) var(--space-5);
  scroll-padding-inline: var(--pool-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.pool-app__shot-list {
  display: flex;
  gap: var(--space-4);
  padding-inline: var(--pool-gutter);
  width: max-content;
}

.pool-app__shot-list li {
  flex: none;
  scroll-snap-align: start;
}

/* The preview video sits in the strip as one more shot, so it takes the same
   frame and sizing; the black fill covers the moment before the poster loads. */
.pool-app__shot-list :is(img, video) {
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(5, 5, 5, 0.22);
}

.pool-app__shot-list video {
  background: #000;
}

/* Portrait strips are sized by height and landscape strips by width. One shared
   height would make a landscape shot twice the width of a phone; the width and
   height attributes keep each shot's own proportions either way. */
.pool-app__shots--portrait :is(img, video) {
  height: clamp(20rem, 70vw, 28rem);
  width: auto;
}

.pool-app__shots--landscape :is(img, video) {
  height: auto;
  width: min(80vw, 48rem);
}

.pool-apps__more {
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  padding-top: var(--space-6);
  text-align: center;
}

/* ─── Breakpoints ─────────────────────────────────────────── */

/* Tighter top on phones so the title and both picks fit the first screen of
   Facebook's in-app browser. The gutter matches .container's. */
@media (max-width: 47.99rem) {
  .pool-apps {
    --pool-gutter: var(--space-4);
    padding-top: var(--space-5);
  }

  .pool-apps__intro {
    margin-bottom: var(--space-5);
  }

  .pool-picks {
    margin-bottom: var(--space-6);
  }

  .pool-app {
    padding-block: var(--space-6);
  }
}

@media (max-width: 39.99rem) {
  .pool-app__actions {
    flex-direction: column;
    justify-self: stretch;
  }
}

@media (min-width: 48rem) {
  /* 18rem holds the row to two cards, so a third app wraps instead of
     squeezing three icon-left cards into 48rem. */
  .pool-picks {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }

  .pool-pick {
    align-items: center;
    flex-direction: row;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .pool-pick__icon {
    width: 5.5rem;
  }

  .pool-pick__body {
    gap: var(--space-3);
  }

  .pool-pick__cta {
    align-self: flex-start;
    width: auto;
  }
}

@media (min-width: 60rem) {
  .pool-app__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}