/* ==========================================================
   Pallet Town Watch Order — Movies, specials & shorts (movies.html) only
   Loaded after css/base.css, so rules here can build on it.
   ========================================================== */

/* ---------- Movies: summary cards ---------- */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.summary-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  color: var(--ink);
  text-decoration: none;
}

a.summary-card:hover { border-color: var(--blue); color: var(--ink); }

.summary-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.summary-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.05;
}

.summary-card__of { font-size: 20px; color: var(--muted); font-weight: 600; }

.details__link { margin: 0; font-size: 15px; font-weight: 700; }

/* Movies page: "Watch together · 2 of 3: 1 Title → 2 this special → 3 Title" on paired rows */
.together { display: inline; line-height: 1.7; }

.together__label { font-weight: 700; color: var(--muted); }

.together__step { white-space: nowrap; }

.together__step a { color: var(--link); }

.together__step.is-this b { color: var(--ink); }

.together__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  vertical-align: 1px;
}

.together__step.is-this .together__num { background: var(--accent); color: var(--on-accent); font-weight: 700; }

.together__arrow { margin: 0 6px; color: var(--faint); }

/* Movies page: When to watch strip — previous episode → this item → next episode */
.when {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}

.when__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

a.when__step:hover { border-color: var(--blue); color: var(--ink); }

.when__step--this {
  border-color: var(--yellow-dark);
  background: var(--row-watched);
}

.when__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.when__code { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

.when__title { font-weight: 700; font-size: 15px; line-height: 1.3; }

.when__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--faint);
}

/* Phones: stack the three steps, arrows pointing down, a bit tighter */
@media (max-width: 640px) {
  .when { flex-direction: column; gap: 2px; }
  .when__step { padding: 10px 12px; }
  .when__arrow { justify-content: center; transform: rotate(90deg); }
  .when__arrow svg { width: 18px; height: 18px; }
}

/* Phones: the three type cards sit side by side as small tiles */
@media (max-width: 640px) {
  .summary-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .summary-card { padding: 12px 12px 14px; gap: 6px; }
  .summary-card__label { font-size: 14px; gap: 6px; }
  .summary-card__num { font-size: 24px; }
  .summary-card__of { font-size: 15px; }
}

/* Phones: "Watch together" becomes a short numbered list, one title per
   line; long titles wrap under themselves instead of running off the edge. */
@media (max-width: 640px) {
  .together { display: block; line-height: 1.45; }
  .together__label { display: block; margin-bottom: 2px; }
  .together__step { display: flex; align-items: baseline; gap: 2px; white-space: normal; margin: 2px 0; }
  .together__num { flex: 0 0 18px; }
  .together__arrow { display: none; }   /* the numbers already show the order */
}