/*
 * The club page — follow control, identity block, tab bar. Panels are a later
 * pass; nothing here reserves space for them.
 *
 * Constrained to the shell width rather than the window, same as every other
 * takeover: on a phone that is genuinely full-bleed, and on desktop it keeps
 * the mini app inside its own frame instead of taking over the browser tab.
 *
 * Two layers, and they stay apart because they animate different properties:
 *
 *   .club-details          the fade. Also the ground, so nothing of the page
 *                          behind shows through mid-transition.
 *   .club-details__sheet   the travel — a short rise on entry.
 */

.club-details {
  /* Distance the sheet rises through on entry. Small on purpose: the page is
     arriving, not being thrown. */
  --enter-y: 12px;

  position: fixed;
  inset: 0;
  /*
   * Above the fixture page's 80 and the search overlay's 90, because it is
   * opened from both — a crest on the fixture page, a team row in search — and
   * a surface opened from another has to win. Below the story viewer's 100,
   * which cannot be up at the same time: stories open from the category strip
   * in the header, and this page covers that strip entirely.
   */
  z-index: 95;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

/* A class beats the UA [hidden] rule, so display has to be turned off by hand. */
.club-details[hidden] {
  display: none;
}

.club-details[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.club-details__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Safe-area clearance only, no extra `--space-2` on top of it: this sits
     above the scrolling body, so the sticky tab row (tab-bar.css) sticks
     flush against whatever's left here — any padding beyond the notch/status
     bar itself reads as a gap above it once stuck. `.club-details__bar`'s
     own margin-top is what gives the back button its breathing room at
     rest instead. */
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

/* --- Bar ------------------------------------------------------------------ */

/*
 * The app bar (app-bar.css) with this page's spacing above it. Leave on the
 * left, act on the right, the wordmark between them — the identity block below
 * is still the page's title; the wordmark names the app, not the club.
 */
.club-details__bar {
  flex: none;
  /* Carries the top spacing `.club-details__body` used to reserve for every
     child — moved here, onto the one child that actually scrolls away, so
     the sticky tab row (tab-bar.css) isn't measured against it too and left
     sitting a `--space-4` gap below the top once stuck. */
  margin-top: var(--space-4);
}

/* --- Follow --------------------------------------------------------------- */

/*
 * The fixture page's bell, on a club instead of a match — same chip, same
 * treatment, same reasoning. Following fills the glyph and tints its chip;
 * --accent-soft is the token tokens.css reserves for exactly this, and the
 * accent is what "this one is active" means everywhere else in the app, so a
 * followed club needs no further explanation than the colour it shares with
 * every other selection.
 *
 * The two pages stack in one session — this one opens on top of that one — so
 * the control that follows a fixture and the control that follows the club
 * playing in it have to be the same control, not two that merely rhyme.
 */
.club-details__follow {
  transition:
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}

/* Inside the app bar the chip's fill and border are already stripped; this is
   the one state that earns the fill back. */
.club-details__follow[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- Body ----------------------------------------------------------------- */

.club-details__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
  /* The page behind is already scroll-locked; this stops a flick at either end
     from handing the gesture back to it anyway. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* No top value — see the comment on `.club-details__bar`'s own margin-top,
     which carries that spacing instead. */
  padding: 0 0 var(--space-6);
}

/* --- Identity ------------------------------------------------------------- */

/*
 * Crest, then the name and country stacked beside it. Left-aligned rather than
 * centred like the fixture page's team columns, and for a reason: that block
 * has two of these facing each other across a scoreline, so its symmetry is
 * about the match. This one is about a single club, and a page with one subject
 * reads from the leading edge.
 */
.club-identity {
  --badge-size: 48px;

  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
}

/*
 * The box the crest is fitted into. Fixed at the crest's own size, so the row
 * keeps its height whether the mark is a wide pennant or a tall shield.
 */
.club-identity__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
}

/*
 * Contained, not covered, and not rounded — the fixture page's reasoning, at a
 * smaller size. `.logo` fills its box and `TeamLogo` masks it into a disc,
 * which is right at 18px in a list where a crest is an identifier and wrong
 * here, where it is the picture. A crest with its own transparent background
 * needs no plate under it either, so the grey disc goes with the crop.
 */
.club-identity__badge .logo {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.club-identity__badge .logo:not(.logo--monogram) {
  background: none;
  border-radius: 0;
}

/* The fallback still needs its plate — a bare monogram has nothing to sit on. */
.club-identity__badge .logo--monogram {
  width: var(--badge-size);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
}

.club-identity__text {
  min-width: 0;
}

/*
 * Wraps rather than truncating, for the reason the fixture page's team names
 * do: "Borussia Mönchengla…" at the top of that club's own page has told you
 * less than the crest beside it did. The list is where names get cut.
 */
.club-identity__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-wrap: balance;
}

/*
 * Flag, then country. Under the name and secondary to it — descriptive text,
 * not a control; see the note in ClubDetails.js.
 *
 * The two `[hidden]` rules below are not optional and not defensive. `[hidden]`
 * is a *UA* rule, so the `display: flex` above it wins outright and an element
 * with the attribute set stays on screen — which is exactly the failure the
 * fixture page's status block documents. Both the line and the flag inside it
 * are switched off by attribute, so both need saying.
 */
.club-identity__country {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.club-identity__country[hidden] {
  display: none;
}

/*
 * The flag's slot. `display: flex` rather than `grid`/`block` for the same
 * reason it is a slot at all: it holds a disc that may not arrive, and an empty
 * box with a gap either side would leave the country name looking indented.
 */
.club-identity__flag {
  flex: none;
  display: flex;
}

.club-identity__flag[hidden] {
  display: none;
}

/* --- Page behind ----------------------------------------------------------- */

/*
 * Whatever is under this must not scroll. Its own attribute rather than the
 * fixture page's: this page opens on top of that one, and closing it must not
 * unlock a page still covered by the surface underneath.
 */
body[data-club-open] {
  overflow: hidden;
}