/*
  custom.css - Monstermix.dk

  Egne tilføjelser til temaets style.css, holdt i en separat fil så de
  er lette at finde/vedligeholde uden at rode i selve temaet.
*/

/*
  "Lyt med nu"-boksen findes to steder i HTML'en (se
  objects/NowPlay.php -> mm_render_nowplaying_widget()):
   - .mm-nowplay-top   : lige efter <div id="main">, øverst på siden
   - .mm-nowplay-sidebar: inde i den almindelige sidebar

  Kun én af dem skal være synlig ad gangen, afhængig af skærmbredde.
  767px matcher det punkt hvor temaets egen grid.css allerede lægger
  sidebaren (grid_4) og hovedindholdet (grid_8) ved siden af hinanden
  i stedet for at stable dem.
*/

/*
  Bemærk margin-bottom: -20px herunder - det er bevidst, ikke en fejl.
  #primary (grid_8) har selv en indbygget 20px top-margen fra
  gitter-systemet, som lægger sig oveni denne boks' egen bundmargen.
  De -20px modvirker præcis den ekstra margen, så afstanden ned til
  næste sektion matcher den normale afstand mellem to bokse et andet
  sted på siden (målt og bekræftet til 40px begge steder).
*/
.mm-nowplay-wrap {
    margin-top: 0;
    margin-bottom: -20px;
}

.mm-nowplay-top {
    display: none;
}

@media only screen and (max-width: 767px) {
    .mm-nowplay-top {
        display: block;
    }

    .mm-nowplay-sidebar {
        display: none;
    }

    /*
      Når hovedindholdet (#primary, grid_8) og sidebaren (#secondary,
      grid_4) stables oven på hinanden på mobil, lægger begges egen
      indbyggede gitter-margen (20px hver) sig oveni den almindelige
      afstand mellem bokse - så overgangen bliver dobbelt så stor (80px)
      som normalt (40px). Denne linje modvirker præcis det, så
      afstanden matcher resten af siden. Gælder kun i dette
      mobil-breakpoint - på desktop står kolonnerne jo side om side, og
      denne regel er derfor irrelevant der.
    */
    #secondary.grid_4 {
        margin-top: -20px;
    }
}

/*
  Lille visuel opstramning: bløde hjørner på widget-bokse (nyheder,
  playlister, "Lyt med nu" osv.), som ellers er helt firkantede i
  temaet. Rører ikke ved farver, indhold eller struktur - kun selve
  hjørnerne på header + indhold i hver boks.
*/
.entry-header {
    border-radius: 8px 8px 0 0;
    padding: 15px 22px;
}

.entry-content,
.entry-content-list {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

aside.widget, section.widget, .WPlooktext, .WPlookevents, .WPlookVideoVidget, .residentdj {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

/*
  Den egentlige årsag til det firkantede hjørne: .widget ul har en
  indbygget 40px bundmargen i temaet (style.css). Margin har ingen
  baggrundsfarve, så det tomrum viste boksens gennemsigtige bagkant i
  stedet for hvid baggrund - hvilket gjorde det runde hjørne usynligt,
  selvom det teknisk set var der. Fjerner marginen, kun for disse
  specifikke widgets (residentdj), så det hvide indhold når helt ud til
  den afrundede kant.
*/
.residentdj ul {
    margin-bottom: 0;
}

.residentdj ul li {
    padding-bottom: 16px;
}

/*
  "Kommende udsendelser" (#upcomming-events) viser op til 4 kasser med
  DJ-skema. Originalens jQuery-plugin (equalHeights, se
  js/jquery.equalHeights.js) gjorde dem lige høje ved at klippe indhold
  af med en scrollbar, hvis en kasse var højere end 400px. I stedet
  bruges nu et rigtigt CSS Grid, KUN for denne ene widget (så andre
  sider der bruger de samme generiske klasser - fx nyhedslisten - ikke
  påvirkes): kasserne bliver automatisk lige høje som den højeste,
  uden at noget indhold bliver skåret af eller kræver scroll.
*/
#upcomming-events .entry-content-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0;
}

#upcomming-events .list-block-item {
    width: auto !important;
    float: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
}

#upcomming-events .list-block-item .margins {
    height: 100%;
    box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
    #upcomming-events .entry-content-list {
        grid-template-columns: 1fr;
    }
}

/*
  Samme rettelse som ovenfor, men til Nyheder-siden (#latest-posts),
  som bruger nøjagtig samme mønster (list-block-item, samme
  equalHeights-plugin i js/base.js).
*/
#latest-posts .entry-content-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0;
}

#latest-posts .list-block-item {
    width: auto !important;
    float: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
}

#latest-posts .list-block-item .margins {
    height: 100%;
    box-sizing: border-box;
}

/*
  nyheder.php's skabelon har (i modsætning til Kommende udsendelser)
  et par "clear"-divs og selve paginerings-linket som direkte børn af
  gitter-beholderen (.entry-content-list) - de bliver derfor selv til
  gitter-celler og forskyder de rigtige nyheder én plads. Skjuler
  clear-divsne (unødvendige nu vi bruger grid i stedet for floats), og
  lader paginerings-linket spænde over alle kolonner i stedet for at
  optage én enkelt celle.
*/
#latest-posts .entry-content-list > .clear {
    display: none;
}

#latest-posts .entry-content-list > #nav-posts {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 600px) {
    #latest-posts .entry-content-list {
        grid-template-columns: 1fr;
    }
}