/*
 * The logo plate.
 *
 * A school uploads whatever it has — a 2000x2000 square photo, a wide banner,
 * a tall crest — and every one of them has to sit in the same places without
 * pushing the furniture around. Before this, each spot carried its own inline
 * `max-height`/`max-width` pair (112/360 in the sidebar, 44/150 in the header,
 * 110/320 on the login card), which meant the *file* decided how tall the brand
 * bar was: Star's square logo rendered 112px tall inside a 70px-high bar in a
 * 270px-wide sidebar.
 *
 * Here the box is fixed and the image is scaled into it. `object-fit: contain`
 * plus `max-width/max-height: 100%` means a logo is letterboxed, never cropped
 * and never stretched, whatever its aspect ratio. Nothing can exceed the plate,
 * so nothing can exceed the sidebar.
 *
 * Rendered by resources/views/components/school-logo.blade.php — use
 * <x-school-logo variant="..."> rather than adding another inline max-height.
 */

.school-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* The plate reserves its height even while the image is still loading, so
     the sidebar does not jump as the page settles. */
  flex-shrink: 0;
}

.school-logo > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Text stand-in for a school that has not uploaded anything. Clamped to two
   lines so a long name cannot grow the plate it is meant to fit inside. */
.school-logo__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  color: var(--bs-heading-color, var(--bs-body-color));
}

/*
 * The theme mirrors the brand link (`transform: rotateY(180deg)` with
 * `justify-content: end`) so that its own logo, clipped to 40px in mini-sidebar
 * mode, shows its icon half. Applied to a school's photo it renders the whole
 * logo back-to-front — any lettering in it reads backwards. The plate handles
 * the mini-sidebar case by shrinking instead of cropping (below), so the trick
 * is not needed and the flip goes.
 */
.brand-logo .logo-img {
  transform: none;
  justify-content: center;
}

/* ── Plates ─────────────────────────────────────────────────────────────
 * Sidebar: 270px wide with 24px padding either side = 222px of room, less
 * the close button that appears below xl. 190x48 clears both, and 48px sits
 * comfortably inside the 70px brand bar.
 */
.school-logo--sidebar { width: 190px; height: 48px; }

/* Top bar of the mobile/off-canvas chrome — shorter than the sidebar plate
   because the bar itself is shorter. */
.school-logo--header { width: 150px; height: 40px; }

/* The login card: the only place the logo is the main event, so it gets the
   most room. Still fixed, so a tall crest and a wide banner push the form
   down by exactly the same amount. */
.school-logo--auth { width: 220px; height: 72px; }

/* Public school pages (registration, fee schedule) — between the two. */
.school-logo--public { width: 240px; height: 64px; }

/* The upload preview in School Settings — deliberately the same plate, so an
   admin sees the real treatment of their file before they save it. Wider than
   the sidebar plate only because it sits alone on a settings card. */
.school-logo--preview { width: 240px; height: 96px; }

@media (max-width: 575.98px) {
  .school-logo--auth { width: 180px; height: 60px; }
  .school-logo--public { width: 190px; height: 52px; }
}

/*
 * Mini-sidebar. The theme clips the brand link to a 40px window; left alone
 * that shows a 40px-wide slice of the school's logo — usually a corner of it.
 * Shrinking the plate to the same 40px makes the logo scale down whole
 * instead, and it returns to full size on the hover-expand the theme already
 * animates.
 */
[data-sidebartype="mini-sidebar"] .school-logo--sidebar { width: 40px; }
[data-sidebartype="mini-sidebar"] .left-sidebar:hover .school-logo--sidebar { width: 190px; }