/* =========================================================
   SECTR7 — index.css (layout-skelet)
   Menu (top) • 3 kolonner • Footer (bund)
   ========================================================= */

:root{
  --s7-bg: #0b1224;
  --s7-panel: rgba(16,22,38,0.7);
  --s7-border: rgba(255,255,255,0.06);
  --s7-text: #e6ecff;

  --s7-left: 300px;   /* sidebar */
  --s7-right: 380px;  /* infobar */
  --s7-gap: 16px;
  --s7-pad: 16px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{ margin:0; background:var(--s7-bg); color:var(--s7-text); }

body.s7{
  min-height:100vh;
  display:grid;
  grid-template-rows: auto 1fr auto; /* header, grid, footer */
}

/* Topmenu */
.s7__menu{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(10,16,31,.85), rgba(10,16,31,.55));
  border-bottom:1px solid var(--s7-border);
  backdrop-filter: saturate(140%) blur(6px);
}

/* 3 kolonner */
.s7__grid{
  grid-row:2;
  display:grid;
  grid-template-columns: var(--s7-left) 1fr var(--s7-right);
  gap:var(--s7-gap);
  padding:var(--s7-pad);
  align-items:start;
  width:min(1800px,100%);
  margin-inline:auto;
}

.s7__sidebar{ grid-column:1; }
.s7__content{ grid-column:2; min-height:480px; }
.s7__rightbar{ grid-column:3; }

/* Kort-look til direkte børn (skånsomt) */
.s7__sidebar > *, .s7__content > *, .s7__rightbar > *{
  background:var(--s7-panel);
  border:1px solid var(--s7-border);
  border-radius:12px;
}

.s7__sidebar > *:not([data-no-pad]),
.s7__content > *:not([data-no-pad]),
.s7__rightbar > *:not([data-no-pad]){
  padding:8px;
}

/* Placeholder mens fragments loader */
[data-include-candidates]{ display:block; min-height:24px; }

/* Footer */
.s7__footer{
  border-top:1px solid var(--s7-border);
  background: linear-gradient(0deg, rgba(10,16,31,.85), rgba(10,16,31,.55));
}

/* Responsive stacking */
@media (max-width:1200px){
  :root{ --s7-left:260px; --s7-right:340px; }
}

@media (max-width:1024px){
  .s7__grid{ grid-template-columns:1fr; }
  .s7__sidebar{ grid-column:1; order:1; }
  .s7__content{ grid-column:1; order:2; }
  .s7__rightbar{ grid-column:1; order:3; }
}

/* === Infobar: small === */
/* Placer dette i BUNDEN af index.css */
:root { --s7-right: 210px; }         /* desktop standard */

@media (min-width: 1600px){
  :root { --s7-right: 220px; }       /* kæmpe skærme – lidt mere luft */
}

@media (max-width: 1200px){
  :root { --s7-right: 200px; }       /* mellem-brede skærme */
}

/* lidt kompakt padding i højre kolonne */
.s7__rightbar > *:not([data-no-pad]){ padding:6px; }