/* ==========================================================================
   Say Local — phrase pages (/travel-phrases/ and /<language>-travel-phrases/)

   Loaded after styles.css, which supplies the design tokens, the nav and the
   footer. Everything here is scoped to classes that appear only on the
   generated pages, so it can never collide with the lander.

   The type roles follow the app itself: Bricolage for the phrase, DM Mono for
   the pronunciation guide — the same pairing used on the phrase detail screen.
   ========================================================================== */

.phrasepage {
  padding-top: 44px;
  padding-bottom: 96px;
}

.phrasepage__intro { margin-bottom: 8px; }

/* ------------------------------------------------------- category groups */

.catgroup {
  margin-top: 52px;
  /* --cat is set inline per category, from the app's own palette. */
}

.catgroup__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cat, var(--amber));
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.catgroup__emoji { font-size: 0.9em; }

/* --------------------------------------------------------------- phrases */

.phrases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.phrase {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 20px 22px;
}

.phrase__en {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.phrase__main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.phrase__text {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--ink);
}

.phrase__roman {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--ink-3);
}

.phrase__romanlabel {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-inset);
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--violet);
}

.phrase__pron {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--amber-dark);
}

.phrase__when,
.phrase__note {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-4);
}

.phrase__note {
  padding-left: 14px;
  border-left: 2px solid var(--bg-inset);
  color: var(--muted-3);
}

/* -------------------------------------------------------------- variants */

.variants {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--border-card);
  display: grid;
  gap: 10px;
}

.variant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.variant__label {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted-3);
}

.variant__text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.variant__roman { font-size: 15px; color: var(--ink-3); }

.variant__say {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--amber-dark);
}

/* ----------------------------------------------------------- play button */

.say {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.say:hover { background: var(--ink); color: #fff; }
.say.is-playing { background: var(--amber); border-color: var(--amber); color: #fff; }

.variant .say { width: 32px; height: 32px; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .say { transition: none; }
}

/* ---------------------------------------------------------- locked tiers */

.locked {
  margin-top: 64px;
  padding: 28px 30px;
  background: var(--bg-inset);
  border-radius: 22px;
}

.locked__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.locked__lede { margin: 6px 0 18px; font-size: 15.5px; color: var(--ink-4); }

.locked__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.locked__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--bg-white);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
}

.locked__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* --------------------------------------------------------------- get app */

.getapp {
  margin-top: 32px;
  padding: 32px 34px;
  background: var(--bg-contact);
  border-radius: 22px;
}

.getapp__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: var(--ink);
}

.getapp__body {
  margin: 0;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-4);
}

.getapp__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ------------------------------------------------------------- showcase */

/* The drifting screen rail is reused from the home page, but there it is a
   full-bleed band directly under <body>. Here it lives inside the padded
   <main>, so it reads as a contained panel instead — rounded to match the
   .locked and .getapp blocks it sits between. Everything else (the drift,
   the stagger, the edge mask, the reduced-motion fallback) comes from
   styles.css unchanged. */
.phrasepage .showcase {
  margin-top: 32px;
  border-radius: 22px;
}

/* -------------------------------------------------------- other languages */

.others { margin-top: 64px; }

.others__title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.others__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.others__list a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg-white);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
}
.others__list a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ------------------------------------------------- language index (cards) */

.langcards {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.langcard__link {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 22px 24px 20px;
  border-radius: 20px;
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-top: 5px solid var(--cat, var(--amber));
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.langcard__link:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(32, 36, 46, 0.09);
}

.langcard__hello {
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--cat, var(--ink));
}

.langcard__name {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

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

@media (prefers-reduced-motion: reduce) {
  .langcard__link { transition: none; }
  .langcard__link:hover { transform: none; }
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 620px) {
  .phrasepage { padding-top: 30px; }
  .phrase { padding: 17px 18px; }
  .locked, .getapp { padding: 24px 20px; }
}