/*
 * Duvungarna Barrio – Bootstrap Styles additions
 * Drupal 11 / Bootstrap Barrio
 */


/* ==========================================================================
   1. BOOTSTRAP STYLES – EGNA TILLÄGG
   ========================================================================== */

/*
 * Lägger till vit som valbar bakgrundsfärg i Bootstrap Styles.
 *
 * Klassen "bs-bg-white" är registrerad som ett färgval i
 * Bootstrap Styles-konfigurationen och används både i Layout Builder
 * och för färgens förhandsvisning i administrationsgränssnittet.
 */
.bs-bg-white {
  background-color: #ffffff !important;
  color: #212529 !important;
}


/* ==========================================================================
   2. LAYOUT BUILDER – GEMENSAM INNEHÅLLSBREDD OCH SEKTIONSSPACING
   ========================================================================== */

/*
 * Begränsar boxed Layout Builder-sektioner till 1100 px.
 *
 * Bootstrap använder annars en bredare container på stora skärmar.
 * 1100 px ger proportioner som ligger nära Duvungarnas tidigare layout.
 *
 * Regeln ger samtidigt ett konsekvent vertikalt mellanrum mellan
 * Layout Builder-sektionerna.
 */
.container:has(> .layout-builder__layout) {
  width: 100%;
  max-width: 1100px !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 36px;
}


/* ==========================================================================
   3. LAYOUT BUILDER – HUVUDSEKTION 8/4
   ========================================================================== */

/*
 * Klassen "duvungarna-main-column" sätts på både Col 1 och Col 2 via:
 * Layout Builder → Columns settings → Col classes.
 *
 * Själva Bootstrap-kolumnen hålls transparent så att dess horisontella
 * padding fortsätter fungera som gutter mellan huvudkolumn och sidebar.
 *
 * Den vita panelen skapas med ett pseudo-element innanför Bootstrap-guttern.
 * Det gör att panelerna kan få rundade hörn utan att påverka gridens bredd
 * eller mellanrummet mellan kolumnerna.
 */
.duvungarna-main-column {
  position: relative;
  background: transparent;
}

/*
 * Vit bakgrundspanel med rundade hörn.
 *
 * Bootstrap använder halva --bs-gutter-x som padding på respektive sida
 * av en kolumn. Samma mått används här för att placera panelen exakt
 * innanför guttern.
 */
.duvungarna-main-column::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--bs-gutter-x) * .5);
  right: calc(var(--bs-gutter-x) * .5);
  background-color: #fff;
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   Inre luft i huvudpanelerna
   -------------------------------------------------------------------------- */

/*
 * Blocken placeras framför den vita bakgrundspanelen och får cirka
 * 20 px luft från panelernas vänstra och högra kant.
 */
.duvungarna-main-column > .block {
  position: relative;
  z-index: 1;
  margin-left: 20px;
  margin-right: 20px;
}

/*
 * Ger motsvarande luft upptill och nedtill i respektive panel.
 */
.duvungarna-main-column > .block:first-child {
  margin-top: 20px;
}

.duvungarna-main-column > .block:last-child {
  margin-bottom: 20px;
}


/* ==========================================================================
   4. HUVUDSEKTION – BLOCK MED BILD OCH TEXT
   ========================================================================== */

/*
 * Säkerställer att blocktypen "block_till_startsida" byggs vertikalt
 * i huvudsektionen:
 *
 * bild
 * text
 * eventuell länk
 */
.duvungarna-main-column
.block-content-block_till_startsida > .content {
  display: block;
}

.duvungarna-main-column
.field--name-field-bild-block-startsida,
.duvungarna-main-column
.field--name-body {
  display: block;
  float: none !important;
  clear: both;
  width: 100%;
}

/*
 * Bilder centreras i respektive panel och behåller sina proportioner.
 */
.duvungarna-main-column
.field--name-field-bild-block-startsida img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   LAYOUT BUILDER – GENERELLA INNEHÅLLSPANELER
   ========================================================================== */

/*
 * Generell panelklass för Layout Builder-kolumner.
 *
 * Klassen "duvungarna-content-panel" sätts via:
 * Layout Builder → Columns settings → Col classes.
 *
 * Klassen kan återanvändas på vanliga innehållssidor där en eller flera
 * kolumner ska visas som separata vita paneler.
 *
 * Själva Bootstrap-kolumnen förblir transparent så att sidans bakgrund
 * syns i guttern mellan kolumnerna.
 */
.duvungarna-content-panel {
  position: relative;
  background: transparent;
}


/* --------------------------------------------------------------------------
   Vit bakgrund och rundade hörn
   -------------------------------------------------------------------------- */

/*
 * Den vita panelen ritas med ett pseudo-element innanför Bootstrap-guttern.
 *
 * Bootstrap använder halva --bs-gutter-x som horisontell padding på
 * respektive sida av kolumnen. Genom att använda samma mått här behålls
 * den transparenta guttern mellan panelerna.
 */
.duvungarna-content-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--bs-gutter-x) * .5);
  right: calc(var(--bs-gutter-x) * .5);
  background-color: #fff;
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   Inre luft i panelerna
   -------------------------------------------------------------------------- */

/*
 * Blocken placeras framför den vita bakgrundspanelen och får cirka
 * 20 px extra luft från panelens vänstra och högra kant.
 */
.duvungarna-content-panel > .block {
  position: relative;
  z-index: 1;
  margin-left: 20px;
  margin-right: 20px;
}

/*
 * Ger motsvarande luft upptill och nedtill i respektive panel.
 */
.duvungarna-content-panel > .block:first-child {
  margin-top: 20px;
}

.duvungarna-content-panel > .block:last-child {
  margin-bottom: 20px;
}

/*
 * Ger separata block i samma innehållspanel ett tydligt vertikalt
 * mellanrum.
 */
.duvungarna-content-panel > .block + .block {
  margin-top: 24px;
}

/* ==========================================================================
   5. LAYOUT BUILDER – PUFFSEKTIONER
   ========================================================================== */

/*
 * Gemensamma inställningar för startsidans två puffrader.
 *
 * Klassen "duvungarna-puffar" sätts på respektive rad via:
 * Layout Builder → Row settings → Row classes.
 *
 * Raden förblir transparent så att sidans bakgrund syns i gutters
 * mellan puffkorten.
 */
.duvungarna-puffar {
  --bs-gutter-x: 48px;
}


/* ==========================================================================
   6. PUFFKORT – YTTRE KORTLAYOUT
   ========================================================================== */

/*
 * De befintliga startsidesblocken av typen "block_till_startsida"
 * används som puffkort.
 *
 * Endast dessa block får kortutseendet, så andra block som eventuellt
 * placeras i samma Layout Builder-rad påverkas inte.
 */
.duvungarna-puffar .block-content-block_till_startsida {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Puffkortets innehåll
   -------------------------------------------------------------------------- */

/*
 * Puffens innehåll byggs vertikalt:
 *
 * bild
 * text
 * länk
 *
 * Flex gör att länken kan ligga längst ned även när puffarna innehåller
 * olika mycket brödtext.
 */
.duvungarna-puffar .block-content-block_till_startsida > .content {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* --------------------------------------------------------------------------
   Puffbild
   -------------------------------------------------------------------------- */

.duvungarna-puffar .field--name-field-bild-block-startsida {
  width: 100%;
}

.duvungarna-puffar .field--name-field-bild-block-startsida img {
  display: block;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   Pufftext
   -------------------------------------------------------------------------- */

/*
 * Brödtexten centreras och får luft mot kortets sidor.
 */
.duvungarna-puffar .field--name-body {
  padding: 0 20px;
  text-align: center;
}

.duvungarna-puffar .field--name-body p {
  margin: 18px 0;
}


/* --------------------------------------------------------------------------
   Pufflänk
   -------------------------------------------------------------------------- */

/*
 * Länkfältet placeras längst ned i puffkortet.
 */
.duvungarna-puffar .field--name-field-lank {
  margin-top: auto;
  padding: 0 20px 24px;
  text-align: center;
}


/* ==========================================================================
   7. LAYOUT BUILDER – LÄNKKAPPAR
   ========================================================================== */

/*
 * Länkar i fältet "field_lank" visas som knappar.
 *
 * Utseendet är hämtat från Duvungarnas tidigare tema.
 * Knappstylingen styrs centralt av temat och behöver därför inte
 * anges manuellt på varje enskild länk.
 */
.layout-builder__layout .field--name-field-lank a {
  background: #555;
  border: none;
  border-radius: 24px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin: 10px 0;
  min-width: 160px;
  padding: 15px 23px;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}


/* --------------------------------------------------------------------------
   Centrering av knappar i huvudpanelerna
   -------------------------------------------------------------------------- */

/*
 * Centrerar endast länkfältets knappar i huvudsektionen.
 * Rubriker, brödtext och övrigt innehåll behåller sin normala justering.
 */
.duvungarna-main-column .field--name-field-lank {
  text-align: center;
}


/* ==========================================================================
   8. BILDPUFF MED OVERLAY
   ========================================================================== */

/*
 * Blocktypen "Bildpuff med overlay" visar rubrik och text ovanpå
 * bildens nederkant.
 *
 * Fältordning:
 * Bild → Rubrik → Body
 *
 * Grid används för att låta overlayns höjd anpassas automatiskt
 * efter mängden text utan fasta positioneringsmått.
 */
.block-content-bildpuff_med_overlay > .content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto 20px;
  overflow: hidden;
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   Bild
   -------------------------------------------------------------------------- */

/*
 * Bilden ligger bakom hela gridytan.
 */
.block-content-bildpuff_med_overlay .field--name-field-images {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
}

.block-content-bildpuff_med_overlay .field--name-field-images > div,
.block-content-bildpuff_med_overlay .field--name-field-media-image,
.block-content-bildpuff_med_overlay .field--name-field-media-image .field__item,
.block-content-bildpuff_med_overlay .field--name-field-media-image a {
  display: block;
  width: 100%;
}

.block-content-bildpuff_med_overlay .field--name-field-images img {
  display: block;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   Overlay – rubrik
   -------------------------------------------------------------------------- */

/*
 * Rubriken utgör översta delen av den halvtransparenta textrutan.
 */
.block-content-bildpuff_med_overlay .field--name-field-rubrik {
  grid-column: 1;
  grid-row: 2;
  z-index: 2;

  margin: 0 30px;
  padding: 10px 14px 4px;

  background: rgba(70, 70, 70, .72);
  border-radius: 6px 6px 0 0;

  color: #fff;
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   Overlay – text
   -------------------------------------------------------------------------- */

/*
 * Brödtexten ligger direkt under rubriken och bildar tillsammans
 * med rubriken en sammanhängande overlayruta.
 */
.block-content-bildpuff_med_overlay .field--name-body {
  grid-column: 1;
  grid-row: 3;
  z-index: 2;

  margin: 0 30px 28px;
  padding: 4px 14px 10px;

  background: rgba(70, 70, 70, .72);
  border-radius: 0 0 6px 6px;

  color: #fff;
}

.block-content-bildpuff_med_overlay .field--name-body p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   Länkar i overlay
   -------------------------------------------------------------------------- */

.block-content-bildpuff_med_overlay .field--name-body a {
  color: #fff;
}

.block-content-bildpuff_med_overlay .field--name-body a:hover,
.block-content-bildpuff_med_overlay .field--name-body a:focus {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   LAYOUT BUILDER – MINSTA HÖJD PÅ BLOCK I REDIGERINGSLÄGE
   ========================================================================== */

/*
 * Ger Layout Builder-block en minsta höjd i redigeringsläget.
 *
 * Detta gör små block och Views-displayer lättare att markera,
 * konfigurera och flytta utan att påverka den publika sidan.
 */
.layout-builder .layout-builder-block {
  min-height: 120px;
}

/* Musik – Tjuvlyssna */
.view-musik-samlingssida audio {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Musik – Tjuvlyssna */
.view-musik-samlingssida article.media--type-audio {
  margin-bottom: 12px;
}

/* Musik – luft mellan Tjuvlyssna och facet */
.view-musik-samlingssida.view-display-id-block_1 {
  margin-bottom: 24px;
}

/* Layout Builder – säkerställ att "Lägg till block" är synligt */
.layout-builder .layout-builder__add-block {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10;
  min-height: 40px;
}

/* =========================================================
   BILDER – GALLERI
   ========================================================= */

.view-bilder-musikaler img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   SIDOSPALT – AVSTÅND MELLAN BLOCK
   ========================================================= */

.col-lg-4.duvungarna-main-column > .block + .block {
  margin-top: 24px;
}

/* =========================================================
   PUFFAR – MOBILT AVSTÅND
   ========================================================= */

@media (max-width: 767.98px) {
  .duvungarna-puffar > [class*="col-"] + [class*="col-"] {
    margin-top: 16px;
  }
}

/* =========================================================
   MUSIK – ANKARE FÖR FACETSRESULTAT
   ========================================================= */

#musik-resultat,
#bilder-resultat {
  scroll-margin-top: 110px;
}

/* =========================================================
   403 / 404 – FELSIDOR
   ========================================================= */

.duvungarna-error-page {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 3rem 2rem;
}

.duvungarna-error-code {
  font-family: "Shadows Into Light Two", cursive;
  font-size: clamp(6rem, 15vw, 10rem);
  line-height: 0.9;
  margin-bottom: 1rem;
}

.duvungarna-error-page h1 {
  margin-bottom: 1rem;
}

.duvungarna-error-page p {
  max-width: 600px;
  font-size: 1.1rem;
}

.duvungarna-error-page .btn {
  margin-top: 1rem;
}