section { margin-block-end: 1rem; }
details { margin-block-end: 0.5rem; }

.nesting-warning {
  display: none;
  margin-block-end: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #b45309;
  background: #fffbeb;
  color: #7c2d12;
  font-size: 0.95rem;
}

.ram {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  & card {
    border: 1px solid;
    padding-block: 0.5rem;
    padding-inline: 1rem;
  }
}

.dashboard {
  display: grid;
  height: 50cqi;
  grid-template-columns: 250px 1fr; /* Sidebar fixed, content flex */
  grid-template-rows: auto 1fr auto; /* Header/Footer auto, content flex */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";

  & > * {
    border: 1px dashed;
    padding: 0.5rem 1rem;
  }

  /* Immediate descendants only: no global leakage */
  & > header { grid-area: header; }
  & > aside { grid-area: sidebar; }
  & > main { grid-area: main; }
  & > footer { grid-area: footer; }

  &.bonus {
    grid-template-columns: 1fr 250px; /* Sidebar fixed, content flex */
    grid-template-areas:
      "header header"
      "main sidebar"
      "footer footer";
  }
}

.full-bleed-layout {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
  border: 1px dotted;

  & > * {
    grid-column: 2;
  }

  & > img.full-width {
    grid-column: 1 / -1;
  }
}

@supports not (selector(&)) {
  .nesting-warning {
    display: block;
  }

  .ram card {
    border: 1px solid #000;
    padding-block: 0.5rem;
    padding-inline: 1rem;
  }

  .dashboard > * {
    border: 1px dashed;
    padding: 0.5rem 1rem;
  }

  .dashboard > header { grid-area: header; }
  .dashboard > aside { grid-area: sidebar; }
  .dashboard > main { grid-area: main; }
  .dashboard > footer { grid-area: footer; }

  .dashboard.bonus {
    grid-template-columns: 1fr 250px;
    grid-template-areas:
      "header header"
      "main sidebar"
      "footer footer";
  }

  .full-bleed-layout > * {
    grid-column: 2;
  }

  .full-bleed-layout > img.full-width {
    grid-column: 1 / -1;
  }
}