/**
 * @file
 * The Drupal logo example: the page around the logos.
 *
 * Nothing here restyles `mantra_starter:drupal_logo` -- its styles and its
 * accessories are the component's own, and this page is only where they are
 * put side by side. What is here is the frame: the preview beside its
 * controls, the grids the galleries are laid out in, and the one rule that
 * lets the logo be bigger than the toolbar it was drawn for.
 *
 * Plain CSS with fallbacks, like the other stylesheets of the module: this
 * ships from the module and has to be readable in a theme that defines none of
 * these variables.
 */

/*
 * The preview beside its controls.
 *
 * `minmax(0, …)` on the tracks, so a long label in the controls wraps rather
 * than widening its column past the page.
 */
.drupal-logo-example__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-block: 1rem 2.5rem;
}

@media (min-width: 48rem) {
  .drupal-logo-example__stage {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: start;
  }
}

.drupal-logo-example__preview {
  max-width: 18rem;
}

/* The controls are three short radio groups; side by side where they fit. */
.drupal-logo-example__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0 1.5rem;
  align-items: start;
}

.drupal-logo-example__controls > .form-actions {
  grid-column: 1 / -1;
}

/*
 * The logo caps its svg at 2.5rem, the size of the navigation toolbar, and has
 * no prop for another size. Lifted here, on this page only, so the cell of the
 * grid sets the width and the logo fills it. The component selects its svg
 * with `> svg` and so must this, or the accessories -- nested svgs of their
 * own -- would be resized inside it.
 *
 * The aspect ratio is the viewBox of the logo. Without it a grid sizes its
 * rows before it knows how wide the svg is, takes the height of a narrower
 * one, and the caption under the logo overflows into the next row.
 */
.drupal-logo-example .drupal_logo > svg {
  display: block;
  max-width: none;
  height: auto;
  aspect-ratio: 681.167 / 778.583;
}

/*
 * The galleries.
 */
.drupal-logo-example__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1.5rem;
  margin-block: 1rem 2.5rem;
}

.drupal-logo-example__item {
  margin: 0;
}

.drupal-logo-example__caption {
  text-align: center;
  font-size: 0.875rem;
  margin-block: 0.5rem 0;
}