/* Copyright (c) Katzenfreunde Bietigheim Bissingen (Noel B.) */

@layer layout {
  body[data-banner-mode="none"] .page-banner[data-auto-banner] {
    display: none;
  }

  .page-shell {
    width: 100%;
    max-width: var(--container-xl);
    margin: 1.3rem auto 2.1rem;
    padding: 0 var(--gutter-inline);
  }

  .page-shell--compact {
    margin-top: 1rem;
  }

  .page-shell--with-banner::before {
    content: none;
  }

  .page-banner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem;
    height: clamp(170px, 24vw, 280px);
    width: 100vw;
    max-width: none;
    margin: clamp(1rem, 2.4vw, 1.4rem) 0;
    margin-inline: calc(50% - 50vw);
    padding: 0.4rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    box-shadow: var(--shadow-soft);
  }

  .page-banner--inline:first-child {
    margin-top: 0;
  }

  .page-banner__tile {
    position: relative;
    flex: var(--tile-grow, 1) 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .page-banner__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.9) contrast(0.95);
  }

  .page-banner__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 10, 0.2);
    pointer-events: none;
  }

  .page-content {
    width: 100%;
    max-width: var(--container-content);
    margin: 0 auto;
    padding: 0.2rem 0;
  }

  .page-content > * + * {
    margin-top: 2.1rem;
  }

  .icon-link,
  .icon-btn,
  .modal__close {
    position: relative;
  }

  .icon-link .icon-glyph,
  .icon-btn .icon-glyph,
  .modal__close .icon-glyph {
    pointer-events: none;
  }

  @media (max-width: 1100px) {
    .page-banner {
      width: calc(100% + (var(--gutter-inline) * 2));
      max-width: none;
      margin-inline: calc(-1 * var(--gutter-inline));
    }
  }

  @media (max-width: 700px) {
    .page-banner {
      height: clamp(140px, 42vw, 220px);
      gap: 0.3rem;
      padding: 0.3rem;
      width: calc(100% + (var(--gutter-inline) * 2));
      margin-inline: calc(-1 * var(--gutter-inline));
    }
  }
}