/*
 * Egne tilføjelser til temaet.
 *
 * Indlæses SIDST, så den altid vinder — og så temaets egen style.css
 * ikke skal røres. Skal noget rettes, rettes det her.
 */

/* ---------------------------------------------------------------
   Knapperne under "Om Løvbakke MTB"
   Temaets .btn-common har ingen margin, fordi den er tænkt som én
   enkelt knap inde i sliderens indhold. Står der flere ved siden af
   hinanden, klistrer de sammen.
   --------------------------------------------------------------- */
.lb-button-row {
    margin-top: 15px;
}

.lb-button-row .btn-common {
    display: inline-block;
    margin: 8px 5px;
}

/* ---------------------------------------------------------------
   Besøgstallet
   Stod før i et <h3> og råbte højere end sektionens egen titel.
   Nu er det brødtekst, men selve tallet må gerne træde frem.
   --------------------------------------------------------------- */
.visitor-count {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 0;
}

.visitor-count strong {
    color: #3598db;
}

/* ---------------------------------------------------------------
   Lange afsnit
   Temaet regner med en kort intro her, men historien om sporet
   fylder mere. 13px centreret over hele bredden er svært at læse,
   så vi giver den lidt mere luft og en læsevenlig bredde.
   --------------------------------------------------------------- */
.section-title-area p {
    font-size: 17px;
    line-height: 30px;
}

.about-section .section-title-area > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------------
   Frivillig-galleriet

   Her stod en kopi af alle temaets galleriregler, fordi de var bundet
   til ID'et #gallary_grid og derfor ikke ramte det nye gitter.

   Nu er de i style.css flyttet over paa klassen .lb-gallery-grid, som
   begge gitre har. Kopien er derfor fjernet — et galleri mere skal blot
   have den klasse, saa virker det.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Billederne skal fylde deres spalte ud

   img-responsive er max-width: 100% — den begrænser et stort billede
   ned, men strækker ikke et lille op. Originalerne på 2600 px fyldte
   spalten af sig selv; miniaturerne gør ikke, og især dem på højkant
   (346 px brede) efterlod et hul ved siden af.

   Gælder begge gallerier.
   --------------------------------------------------------------- */
.lb-gallery-grid .grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------------------------------------
   Baggrund i "Om Løvbakke MTB"

   Temaet havde et foto af en rytter her. Det var både uroligt bag
   tekst og ikke noget der sagde Løvbakke.

   Nu er det selve sporet: de fire ruter tegnet ud fra de samme
   koordinater som app og hjemmeside bruger, i deres rigtige farver,
   tonet kraftigt ned så teksten kan læses ovenpå.

   Hele sporet skal være synligt på computer, tablet og telefon.
   Derfor contain og ikke cover: cover fylder kassen ud og skærer
   resten væk, og sektionen er smal og høj på en telefon — der ville
   man kun se en lodret strimmel midt i kortet.

   contain lægger normalt en synlig kant af tom plads, fordi kortet
   og sektionen sjældent har samme form. Den kant forsvinder her,
   fordi baggrundsfarven er præcis den samme som lærredet i billedet
   (#f8f9fb). Ændres kortet, skriver tools/tegn_sporkort.py farven ud
   til sidst — ret den her, ellers kan man se billedets kant.

   Billedet er desuden klippet til sporets eget højde/bredde-forhold,
   så der ikke er tom plads indeni der skaleres med ned.

   Bemærk: både css/style.css og assets/css/responsive.css sætter
   background-size: cover på .about-section inde i en media query.
   Reglen her vinder fordi lbmtb.css indlæses sidst i header.php —
   flyttes den, er cover tilbage på netop telefon og tablet.

   Skal kortet laves om — fx når der kommer en ny rute — ligger
   opskriften i tools/tegn_sporkort.py.
   --------------------------------------------------------------- */
.about-section {
    background: #f8f9fb url(../images/bg/spor-kort.jpg) center center no-repeat;
    background-size: contain;
}

/* På en telefon er sektionen smal og meget høj, fordi de tre kasser
   stabler. Kortet kan ikke blive højere end bredden tillader — sporet
   ligger på tværs — så i stedet for at lade det svæve midt i teksten
   lægges det op bag overskriften og indledningen, hvor det læses som
   en bevidst baggrund. */
@media screen and (max-width: 767px) {
    .about-section {
        background-position: center 20%;
    }
}

/* Et ekstra lag luft mellem kortet og teksten, så kontrasten holder
   uanset hvor linjerne tilfældigvis lander bag et afsnit. */
.about-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.about-section > .container,
.about-section .container {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------
   Gallerierne: murstenslayout uden JavaScript

   Temaet beder Masonry om at stable billederne, men den kørte aldrig:
   en uncaught fejl fra Owl Carousel afbryder custom.js' ready-funktion
   før den når dertil, og konfigurationen siger oven i købet
   columnWidth: 0. Det man så, var derfor bare 25%-brede blokke der
   flød ved siden af hinanden — og de efterlader huller så snart
   billederne har forskellig højde.

   CSS kan selv. column-count stabler billederne i spalter og fylder
   hullerne ud, uden bibliotek, uden race med lazy-loading, og uden at
   skulle regnes om ved resize.
   --------------------------------------------------------------- */
.lb-gallery-grid {
    column-count: 4;
    column-gap: 0;
}

.lb-gallery-grid .grid-item {
    /* overskriver temaets width: 25% — spalten styrer nu bredden */
    width: 100% !important;
    display: block;
    float: none;
    position: static;
    margin: 0 0 0 0;
    /* et billede maa ikke knaekkes over to spalter */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.lb-gallery-grid .gallary-item-inner {
    display: block;
}

@media screen and (max-width: 1199px) {
    .lb-gallery-grid { column-count: 3; }
}

@media screen and (max-width: 767px) {
    .lb-gallery-grid { column-count: 2; }
}

@media screen and (max-width: 586px) {
    .lb-gallery-grid { column-count: 1; }
}