/* Utilities used by database content that the pre-built Tailwind does not carry.
 *
 * `static/css/tailwind.css` is generated, and Tailwind generates only the
 * classes it can *see* — it scans source files. The review, news and live
 * bodies live in the database, so every class that appears only there was
 * dropped from the build. Fourteen of them are still in the markup and eleven
 * had no rule at all.
 *
 * Most of the missing ones set a background or a colour, which is why the
 * symptom was text that could not be read: a panel written as
 * `bg-gray-800/40` rendered fully transparent, leaving light-on-light or
 * dark-on-dark. It affected every locale including English, so it is not a
 * translation defect — it has been live for as long as the imported bodies
 * have.
 *
 * Written by hand rather than by re-running the Tailwind build, because this
 * project deliberately has no build step (see CLAUDE.md). Values and syntax
 * copy what `tailwind.css` already emits — v2 style, `rgba()` with a
 * `--tw-*-opacity` variable — so nothing here looks foreign next to it.
 *
 * Loaded *after* tailwind.css. It only adds; it overrides nothing.
 */

/* -- solid colours ------------------------------------------------------- */

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
}

.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgba(110, 231, 183, var(--tw-text-opacity));
}

/* -- translucent backgrounds --------------------------------------------- */
/* The unreadable-text cases. Each of these wraps a panel of body copy. */

.bg-black\/30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-gray-800\/40 {
  background-color: rgba(31, 41, 55, 0.4);
}

.hover\:bg-gray-800\/80:hover {
  background-color: rgba(31, 41, 55, 0.8);
}

/* -- translucent borders -------------------------------------------------- */

.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1);
}

.border-indigo-500\/30 {
  border-color: rgba(99, 102, 241, 0.3);
}

.border-emerald-500\/30 {
  border-color: rgba(16, 185, 129, 0.3);
}

/* -- gradient stop -------------------------------------------------------- */
/* Matches the shape tailwind.css uses for `.from-gray-800`, including the
 * fallback in `--tw-gradient-to`, so it composes with the `to-*` classes
 * already in the build. */

.from-black\/60 {
  --tw-gradient-from: rgba(0, 0, 0, 0.6);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
}

/* -- arbitrary value ------------------------------------------------------ */
/* An attribute selector rather than an escaped class: the class name contains
 * commas, parentheses and a full stop, and `.shadow-\[0_-4px_10px_rgba\(0\,0\,0\,0\.3\)\]`
 * is a selector nobody can safely edit later. `~=` matches one whitespace-
 * separated word of the attribute, which is exactly what a class is. */

[class~="shadow-[0_-4px_10px_rgba(0,0,0,0.3)]"] {
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
}

/* -- a class that never had a rule ---------------------------------------- */
/* `gold-animated-border` appears once, on a promo banner, and is defined
 * nowhere in the project — not in any stylesheet and not in any template's
 * inline <style>. The element already carries `border`, so it was rendering a
 * default grey line where a gold one was meant. Reconstructed conservatively:
 * the colour the rest of the site uses for gold, no animation invented. */

.gold-animated-border {
  border-color: #d4af37;
}

/* ---------------------------------------------------------------------------
   Homepage explore cards.

   Owned entirely by this file rather than by Tailwind utilities, for one
   reason: `static/css/tailwind.css` is committed, not generated, so a
   responsive variant that was never in the original source does not exist.
   `sm:text-sm` and `lg:w-8` did nothing at all, and a hand-written
   `min-width: 640px` rule added here silently beat Tailwind's own
   `md:grid-cols-5` — this file loads later, and at equal specificity later
   wins. That is why the row showed three across on a desktop.

   So the card sizing is expressed once, here, with `clamp()`. The icon, the
   title, the gaps and the padding all read from the same viewport, which means
   they shrink *together* as the card narrows instead of jumping at three fixed
   breakpoints and leaving a 19px title inside a 135px card.
   --------------------------------------------------------------------------- */
.shrink-0 { flex-shrink: 0; }
.break-words { overflow-wrap: break-word; }

.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.15vw, 1.5rem);
  padding: clamp(0.75rem, 1.15vw, 1.5rem);
}

@media (min-width: 640px) {
  .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Five across from `md` up — the layout this row has always had on a desktop. */
@media (min-width: 768px) {
  .explore-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Five cards in a two-column grid leave one alone on the bottom-left, which
   reads as a mistake. Centre it. Scoped to the two-column band only: in the
   three-column band the remainder is two cards and centring would misalign
   them. */
@media (max-width: 639.98px) {
  .explore-grid > .explore-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - (clamp(0.5rem, 1.15vw, 1.5rem) / 2));
    margin-inline: auto;
  }
}

.explore-card-head {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-bottom: clamp(0.5rem, 0.8vw, 1rem);
}

.explore-icon {
  width: clamp(1rem, 0.55rem + 1.45vw, 2rem);
  height: auto;
  flex: none;
  margin-inline-end: clamp(0.25rem, 0.45vw, 0.5rem);
}

/* The card's own padding scales too, or a narrow card spends most of its width
   on whitespace. */
.explore-card > .cardbg22,
.explore-card > .cardbg33 { padding: clamp(0.5rem, 0.85vw, 1rem); }