/**
 * @file
 * Page layout.
 *
 * FiveNineteen's two column layout was a float pair inside four stacked media
 * queries at 600/980/1140/1200/1245px. Same shape, one grid: the sidebar sits
 * under the content until there is room for both, and the proportions match the
 * old 750/360 split.
 */

.page-wrapper {
  --content-width: 1245px;
  --sidebar-width: 22rem;
  --gutter: var(--space-m);

  max-inline-size: var(--content-width);
  margin-inline: auto;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.page-header {
  background: var(--header-bg);
  color: var(--header-text);
}

.page-header a {
  color: currentColor;
}

.page-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--gutter);
}

.branding {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-inline-size: 0;
}

.branding__logo img {
  display: block;
  block-size: auto;
  max-block-size: 3.5rem;
}

.branding__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
}

.branding__name a {
  text-decoration: none;
}

.branding__slogan {
  margin: 0;
  color: color-mix(in srgb, var(--header-text) 75%, transparent);
  font-size: var(--step--1);
}

/* The two column band. */
.page-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  padding: var(--gutter);
  align-items: start;
}

@media (min-width: 62rem) {
  .page-main {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  }

  /* A page with no sidebar blocks uses the full width rather than leaving a
     hole where the sidebar would have been. */
  .page-main:not(:has(.page-sidebar)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 78rem) {
  .page-wrapper {
    --sidebar-width: 23.5rem;
    --gutter: var(--space-l);
  }
}

.page-content {
  min-inline-size: 0;
}

.page-sidebar {
  min-inline-size: 0;
  container-type: inline-size;
}

.page-secondary {
  padding: var(--gutter);
  border-block-start: 1px solid var(--border);
  background: var(--surface-sunken);
}

/* The front page runs its promoted views across the full width in a responsive
   grid, which is what views_responsive_grid did on Drupal 7. */
.page-secondary__inner {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.page-footer {
  padding: var(--space-l) var(--gutter);
  background: var(--footer-bg);
  color: var(--footer-text);
}

.page-footer a {
  color: currentColor;
}

.page-footer__inner {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

/**
/**
 * In-node image placement, driven by the migrated field_image_style values
 * (medium: 786 nodes, large: 530, banner: 12).
 */
.node--image-medium .field--name-field-image {
  float: inline-end;
  inline-size: min(300px, 45%);
  margin: 0 0 var(--space-s) var(--space-s);
}

.node--image-banner .field--name-field-image img {
  inline-size: 100%;
}

@media (max-width: 34rem) {
  .node--image-medium .field--name-field-image {
    float: none;
    inline-size: 100%;
    margin-inline: 0;
  }
}