/*
 Theme Name:   Film & Musikgymnasiet 2026
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Gullström & CO
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html {
  scroll-behavior: smooth;
}

/*********** VARIABLER ***********/
:root {
  --radius-full: 999px;
  --radius-l: 60px;
  --radius-m: 20px;
  --radius-s: 10px;
  --shadow: 0px 4px 10px #00000029;
}

/*********** TYPOGRAFI ***********/
@font-face {
  font-family: 'Crimson Pro';
  src: url('/wp-content/themes/bricks-child/fonts/crimson-pro-700.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('/wp-content/themes/bricks-child/fonts/opensans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-dark);
}

p {
  margin-bottom: 1em;
}

li p {
  margin-bottom: 0;
}

p a {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Crimson Pro', serif;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.5em;
}

.brxe-accordion .accordion-title {
  display: flex !important;
  align-items: center !important;

  & .title {
    margin-bottom: 0;
  }
}

.brxe-button {
  border-radius: var(--radius-full) !important;
  padding: 10px 20px !important;
  transition: opacity 0.2s ease, transform 0.1s ease;

  & svg {
    fill: currentColor;
  }

  &:hover {
    opacity: 0.85;
  }

  &:active {
    transform: scale(0.97);
  }

  &.bricks-background-secondary {
    background: transparent !important;
    padding:0 !important;
    color: inherit !important;
    font-weight: bold;
  }
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

/********** FÄRGER ***************/
/* SKOG */
.skog {
  background-color: var(--color-skog) !important;
  color: #ffffff !important;
}

.skog-50 {
  background-color: var(--color-skog-light) !important;
  color: #000000 !important;
}

/* PLOMMON */
.plommon {
  background-color: var(--color-plommon) !important;
  color: #ffffff !important;
}

.plommon-50 {
  background-color: var(--color-plommon-light) !important;
  color: #000000 !important;
}

/* STORM */
.storm {
  background-color: var(--color-storm) !important;
  color: #ffffff !important;
}

.storm-50 {
  background-color: var(--color-storm-light) !important;
  color: #000000 !important;
}

/* LIGHTER */
.plommon-25 {
  background-color: var(--color-plommon-lighter) !important;
  color: #000000 !important;
}

.skog-25 {
  background-color: var(--color-skog-lighter) !important;
  color: #000000 !important;
}

.storm-25 {
  background-color: var(--color-storm-lighter) !important;
  color: #000000 !important;
}

.apelsin {
  background-color: var(--color-apelsin);
  color: #000000;
}

.white {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.bg-dark {
  background-color: var(--color-dark) !important;
  color: #ffffff !important;
}

.black {
  background-color: var(--color-black) !important;
  color: #ffffff !important;
}

.black-50 {
  background-color: var(--color-black-light) !important;
  color: #ffffff !important;
}

.black-25 {
  background-color: var(--color-black-lighter) !important;
  color: #000000 !important;
}

/********** BORDER RADIUS **********/
.radius-full {
  border-radius: var(--radius-full) !important;
}

.radius-l {
  border-radius: var(--radius-l) !important;
}

.radius-m {
  border-radius: var(--radius-m) !important;
}
/********** VIDEO **********/
.brxe-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-s);

  & iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/********** BILDER **********/
img.brxe-image,
.brxe-carousel .image,
.brxe-carousel .swiper-slide {
    border-radius: var(--radius-s);
}

.brxe-carousel .swiper-slide {
    overflow: hidden;
}

/********** HEADER *************/
#brx-header {
    top: 10px;
    border: solid 1px #fff;
    border-radius: var(--radius-full);
    max-width: 1300px;
    margin: auto;
    padding: var(--space-s);
    color: #fff;
    font-family: 'Crimson Pro';
    &.brx-sticky.scrolling {
        background: #fff;
        color: #000;
        box-shadow: var(--shadow);
    }

    & .bricks-nav-menu {
        align-items: stretch;
    }

    & .bricks-nav-menu > li {
        margin-left: var(--space-xs);
        font-size: 20px;
    }

    & .bricks-nav-menu > .bricks-menu-item {
        display: flex;
        align-items: stretch;
    }

    & .bricks-nav-menu > .bricks-menu-item > a,
    & .bricks-nav-menu > .bricks-menu-item > .brx-submenu-toggle {
        display: flex;
        align-items: center;
        min-height: 44px; /* WCAG touch target */
        padding-inline: 12px;
    }

    & .bricks-nav-menu .sub-menu {
        background: #fff;
        color: #000;
        border-radius: var(--radius-s);
        box-shadow: var(--shadow);
        padding: var(--space-xs) 0;

        & a {
            color: #000;
            padding: 8px 20px;
            min-height: 44px;
            display: flex;
            align-items: center;

            &:hover {
                background: rgba(0, 0, 0, 0.05);
            }
        }
    }

    @media (max-width: 991px) {
        top: 0;
        border-radius: 0;
        max-width: 100%;
        width: 100%;
        border: none;
        padding: var(--space-xs) var(--space-s);
        box-sizing: border-box;

        & .brxe-section,
        & .brxe-container {
            width: 100%;
        }

        & .brxe-container {
            justify-content: space-between;
        }

        & .bricks-mobile-menu-toggle {
            color: #fff !important;

            & svg {
                fill: #fff !important;
            }
        }

        &.brx-sticky.scrolling .bricks-mobile-menu-toggle {
            color: #000 !important;

            & svg {
                fill: #000 !important;
            }
        }
    }
}

/*********** STARTSIDAN ***********/
.frontpage-hero {
  padding: var(--space-2xl) 0px;
  position: relative;
}

.frontpage-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(89deg, rgb(0 0 0 / 94%) 20%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.frontpage-hero .brxe-container {
    position: relative;
    z-index: 1;
}

/*********** PROGRAMSIDOR ***********/
.brxe-section:has(.program-hero) {
  overflow: hidden;
}

@media (max-width: 991px) {
  .brxe-container.program-hero {
    flex-direction: column !important;
  }

  .program-hero .brxe-block.hero-image {
    border-radius: var(--radius-s) !important;
    min-height: 300px !important;
    height: 300px !important;
    width: 100% !important;
  }

  .program-hero .brxe-block:last-child::before {
    left: auto !important;
    right: -100px !important;
  }
}

.program-hero {
  & .hero-image {
    border-radius: var(--radius-s) 0px 0px var(--radius-s) !important;
  }

  & .brxe-block:last-child {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: -400px;
      top: 50%;
      transform: translateY(-50%);
      width: 800px;
      height: 800px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.04;
      filter: brightness(0) invert(1);
      pointer-events: none;
      z-index: 0;
    }

    & > * {
      position: relative;
      z-index: 1;
    }
  }

  /* Film (kamera) */
  &.program-film .brxe-block:last-child::before {
    background-image: url("/wp-content/uploads/2026/03/Ikon-kamera-svart.svg");
  }

  /* Musik (g-klav) */
  &.program-musik .brxe-block:last-child::before {
    background-image: url("/wp-content/uploads/2026/03/Ikon-g-klav-svart.svg");
  }

  /* Skrivande (penna) */
  &.program-skrivande .brxe-block:last-child::before {
    background-image: url("/wp-content/uploads/2026/03/Ikon-penna-svart.svg");
  }

  /* Introprogram (stjärna) */
  &.program-intro .brxe-block:last-child::before {
    background-image: url("/wp-content/uploads/2026/03/Ikon-stjarna-svart.svg");
    opacity: 0.1;
  }
}

.specification-grid-box {
  color: #000000;
  padding: var(--space-m);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
}

.plommon .specification-grid-box { background: var(--color-plommon-light); }
.skog .specification-grid-box    { background: var(--color-skog-light); }
.storm .specification-grid-box   { background: var(--color-storm-light); }

/*********** UNDERSIDOR ***********/
.subpage-hero{
  height: 400px;
  padding-bottom: unset !important;
  & .brxe-container {
    max-width: 800px;
    width: 100%;
    padding-inline: var(--space-s);
    box-sizing: border-box;
  }
}

/*********** NYHETSARTIKLAR ***********/
.brxe-post-content .wp-block-image img {
  border-radius: var(--radius-s);
}

.brxe-post-content h1 {
  display: none;
}

.single-post-hero {
  position: relative !important;
}

.single-post-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--color-plommon);
  opacity: 0.8;
  z-index: 1 !important;
  pointer-events: none !important;
}

.single-post-hero > .brxe-container {
  position: relative !important;
  z-index: 2 !important;
}

/********* INNEHÅLLSBOXAR *******/
.brxe-container:has(> .info-card) {
  align-items: stretch !important;
}

.info-card {
  padding: var(--space-m);
  border-radius: var(--radius-m);

  & img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    margin-bottom: var(--space-s);
  }
}

/******** 50/50 SEKTION ********/

.splitted-section .img-col {
  background-size: auto 150% !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 991px) {
  .splitted-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


}

/********** CITATBOXAR **********/
.quote-box {
  border-radius: var(--radius-m);
  overflow: hidden;
  height: 600px !important;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  @media (max-width: 991px) {
    height: auto !important;
  }

  & .quote-box-content {
      flex: 1;
      display: flex !important;
      flex-direction: column;
      padding: var(--space-m);
      justify-content: space-between;

      & .brxe-button {
        margin-top: auto;
      }
  }

  & .quote-box-image {
    flex: none;
    height: 250px;
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    & .quote-box-icon {
      position: absolute;
      bottom: -20px;
      left: 20px;
      width: 60px !important;
      height: 60px !important;
      border-radius: 50%;
      background: var(--color-dark) !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      font-size:40px;
    }
  }
}

/********* FLIKBOX **********/

/* Färgschema-tokens */
.tabs-box {
  --tabs-bg:        var(--color-plommon);
  --tabs-bg-light:  var(--color-plommon-light);

  &.skog  { --tabs-bg: var(--color-skog);  --tabs-bg-light: var(--color-skog-light);  }
  &.storm { --tabs-bg: var(--color-storm); --tabs-bg-light: var(--color-storm-light); }
  &.black { --tabs-bg: var(--color-black); --tabs-bg-light: var(--color-black-light); }

  /* Layout & ikoner */
  & .brxe-icon { height: 60px; fill: #00000088; }

  & .tab-menu {
    display: flex;
    gap: 4px;
    padding: var(--space-xs);
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.2);

    @media (max-width: 991px) {
      flex-wrap: wrap;
      border-radius: var(--radius-m);
    }
  }

  & .tab-title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 9px 22px;

    & .brxe-icon {
      width: 50px;
      min-width: 50px;
      display: flex;
      justify-content: center;
    }
    border-radius: 100px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: color 0.2s, background 0.2s;
    user-select: none;
    color: #00000088;

    &:not(.brx-open):hover {
      color: rgba(255, 255, 255, 0.75);
      background: rgba(255, 255, 255, 0.06);
    }

    &.brx-open {
      background: #fff;
      color: #000000;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

      & svg.brxe-icon {
        fill: var(--color-apelsin) !important;
      }
    }
  }

  /* Horisontell: ljus content */
  & .tab-content {
    padding: var(--space-l);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
  }

  & .tabs-text-col { width: 50%; }
  & .tabs-image-col { width: 25%; }

  @media (max-width: 991px) {
    & .tabs-text-col,
    & .tabs-image-col { width: 100%; }
  }

  &.tabs-accordion-active {
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;

    & .tab-menu,
    & .tab-content {
      display: none !important;
    }
  }

  /* Vertikal modifier */
  &.tabs-box--vertikal {
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: var(--radius-m) !important;
    box-shadow: var(--shadow);

    @media (max-width: 991px) {
      flex-direction: column !important;
    }

    & .tab-menu {
      flex-direction: column !important;
      border-radius: 16px 0 0 16px;
      width: fit-content !important;
      flex-shrink: 0;
      background: var(--tabs-bg-light) !important;
      padding-top: var(--space-m);
            padding-bottom: var(--space-m);

      @media (max-width: 991px) {
        border-radius: var(--radius-m) var(--radius-m) 0 0;
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap;
      }
    }

    & .tab-title {
      color: #000000;

      &.brx-open {
        background: var(--tabs-bg) !important;
        color: #ffffff !important;
        box-shadow: none;
      }
    }

    & .tab-content {
      flex: 1;
      min-width: 0;
      background: var(--tabs-bg) !important;
      color: #ffffff !important;
      box-shadow: none;
    }

  }
}

/******** MOBIL TABS-ACCORDION ******/
.tabs-mobile-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  & .tabs-mobile-panel > .brxe-container {
    flex-direction: column !important;

    & .tabs-text-col {
      display: contents;

      & .brxe-text:first-child {
        order: -1;
      }

      & .brxe-text:not(:first-child),
      & .brxe-button {
        order: 2;
      }
    }

    & .tabs-image-col {
      order: 1;
    }

    & .brxe-image {
      height: 200px;
      object-fit: cover;
    }
  }
}

.tabs-mobile-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background:#fff;
  box-shadow: var(--shadow);
  cursor: pointer;

  & svg.brxe-icon {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    fill: var(--color-plommon);
  }

  &.is-active {
    background: #fff;
    color: #000;

    & svg.brxe-icon {
      fill: var(--color-apelsin);
    }
  }
}

.tabs-mobile-panel {
  display: none;

  &.is-active {
    display: block;
    padding: var(--space-l);
    background: var(--tabs-bg) !important;
    color: #fff !important;
    border-radius: var(--radius-m);
  }
}

/******** SLIDER MOBIL-FIX ******/
@media (max-width: 991px) {
  .brxe-slider-nested.splide {
    height: auto !important;
  }

  .brxe-slider-nested .splide__track {
    height: auto !important;
  }

  .brxe-slider-nested .splide__slide {
    height: auto !important;
  }
}

/******** NYHETSSLIDER ******/
.brxe-slider-nested .splide__track {
  padding: var(--space-s);
}

.news-slider-item {
  border-radius: var(--radius-m);
  overflow: hidden;
  height: auto !important;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);

  & .news-slider-image {
    display: block;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden;

    & img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
    }
  }

  & .news-item-content {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    padding: var(--space-m);
    justify-content: space-between;

    & .brxe-post-title {
      font-size: var(--text-h5);
    }

    & .brxe-button {
      margin-top: var(--space-m);
    }
  }
}

/******** RELATERADE INLÄGG ******/
.bricks-related-posts .related-posts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);

  @media (max-width: 991px) {
    grid-template-columns: 1fr;
  }

  & .repeater-item {
    border-radius: var(--radius-m);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);

    & figure {
      margin: 0;
      overflow: hidden;

      & img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
      }
    }

    & .post-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: var(--space-m);

      & h3 {
        font-size: var(--text-h5);
      }
    }
  }
}

/******** NYHETSARKIVET *******/
.brxe-filter-radio[data-mode=default] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.brxe-filter-radio .brx-input-indicator {
  display: none !important;
}

.brxe-filter-radio .brx-option-active .brx-option-text {
  font-weight: 700;
  border-bottom: 2px solid var(--color-apelsin);
  padding-bottom: 2px;
}

.brxe-filter-radio[data-mode=default] > li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.brxe-filter-radio[data-mode=default] > li:not(:last-child)::after {
  content: "|";
  opacity: 0.3;
}


/********* INFOBOXAR *******/
.info-box-row {
    .box-column {
        padding: var(--space-m);
    }
}


/********* PROGRAMPLAN *******/

.programplan-wrapper {
  padding: var(--space-m);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
	& .no-content {
		padding: 15px 0px;
		& h3 {
			margin:0;
		}
	}

  & .accordion-title h3,
  & .accordion-title .title {
    font-size: var(--text-h5);
  }

  & .accordion-content-wrapper p { margin-bottom: 0; }
  & .accordion-content-wrapper strong { display: block; margin-top: var(--space-xs); }
}

/********** CF7 STYLES **********/
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;

  @media (max-width: 991px) {
    grid-template-columns: 1fr;
  }
}

.form-wrapper {
  padding: 40px;
  box-sizing: border-box;

  @media (max-width: 991px) {
    padding: var(--space-m);
  }
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    color: inherit;

  & .wpcf7-form > .wpcf7-form-control-wrap,
  & .form-full {
    display: block;
    margin-bottom: 16px;
  }

  & .wpcf7-form > label {
    display: block;
    margin-bottom: 0;
  }

  & label {
    color: inherit !important;
  }

  & .wpcf7-form-control:not([type="submit"]):not([type="radio"]):not(.wpcf7-radio):not(.wpcf7-textarea) {
    width: 100%;
    border: none;
    border-bottom: 2px solid #000000;
    background: transparent;
    padding: 10px 0;
    outline: none;
    transition: border-color 0.2s ease;
    border-radius: 0;
    color: inherit;

    &::placeholder {
      color: #555;
    }

    &:focus {
      border-bottom-color: #787878;
    }
  }

  & textarea.wpcf7-form-control {
    border: none !important;
    border-bottom: none !important;
    background: #ffffff;
    border-radius: var(--radius-s);
    padding: var(--space-s);
    resize: vertical;
    color: #000000;
    margin-top: var(--space-xs);

    &::placeholder {
      color: #000000;
    }
  }

  &.plommon textarea.wpcf7-form-control { background: var(--color-plommon-light); }
  &.skog textarea.wpcf7-form-control    { background: var(--color-skog-light); }
  &.storm textarea.wpcf7-form-control   { background: var(--color-storm-light); }
  &.black textarea.wpcf7-form-control   { background: #ffffff; color: #000000; &::placeholder { color: #555; } }

  &.plommon,
  &.skog,
  &.storm,
  &.black {
    & .wpcf7-form-control:not([type="submit"]):not([type="radio"]):not(.wpcf7-radio):not(.wpcf7-textarea) {
      border-bottom-color: #ffffff;
      color: #ffffff;

      &::placeholder { color: rgba(255, 255, 255, 0.6); }
      &:focus { border-bottom-color: rgba(255, 255, 255, 0.6); }
    }
  }

  & .wpcf7-radio {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 16px;
  }

  & .wpcf7-list-item {
    margin: 0;
  }

  & .wpcf7-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  & .wpcf7-list-item-label {
    display: inline-block;
    padding: 6px 16px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.5;
  }

  & .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
    border-bottom-color: currentColor;
    opacity: 1;
  }

  & .wpcf7-list-item-label:hover {
    opacity: 0.8;
  }

  & .wpcf7-submit {
    background: var(--color-apelsin) !important;
    color: #000000 !important;
    border: none;
    border-radius: var(--radius-full) !important;
    padding: 10px 20px !important;
    font-size: inherit;
    font-family: inherit;
    margin-top: var(--space-s);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;

    &:hover {
      opacity: 0.85;
    }

    &:active {
      transform: scale(0.97);
    }
  }
}


/******** OM OSS SIDAN *******/
.people-section {
  & .people-col {
    box-shadow: var(--shadow);
    border-radius: var(--radius-m);
    overflow: hidden;
    & img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 0;
    }
    .people-col-textbox {
      padding: var(--space-m) var(--space-s);    }
    & h3 {
      font-size: var(--text-h5);
    }
  }
}

/******** Våra lokaler *********/
.premises-section {
  & .video-column {
    width: 33%;

    @media (max-width: 991px) {
      width: 100%;
    }
  }
}

/******** Ansök till oss ******/
.apply-faq {
  & .info-card {
    & h3 {
      font-size: var(--text-h5);
    }
    & img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }
  & .faq-wrapper {
    & h3 {
      font-size: var(--text-h5);
    }
  }
}

.timeline-box {
  display: flex !important;
  align-items: flex-start;
    column-gap: var(--space-s);

  & .dropcap-number {
    font-family: 'Crimson Pro', serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-apelsin);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & h3 {
    font-size: var(--text-h5);
  }
}

/***** INTERVJU-INLÄGG *****/
.interview-wrapper {
  & .interview-portrait {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 50%;
  }
  .interview-title {
    width: 50%;
  }

  @media (max-width: 991px) {
    & .interview-portrait,
    & .interview-title {
      width: 100%;
    }
  }
}  
.interview-content {
  margin-top: var(--space-m);
  & h2 ~ h2,
  & h2 ~ h3,
  & h2 ~ h4,
  & h3 ~ h2,
  & h3 ~ h3,
  & h3 ~ h4 {
    margin-top: var(--space-l);
  }
}

/***** BILDGALLERIET *****/
.img-gallery-list {

  & > .brxe-container {
    gap: 4px;
  }

  & > .brxe-container .brxe-container {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  & .brxe-block {
    position: relative;
    display: block;
    border-radius: var(--radius-s);
    overflow: hidden;
    text-decoration: none;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
      transition: opacity 0.3s;
    }

    &:hover {
      & img {
        transform: scale(1.05);
      }

      &::after {
        opacity: 0.8;
      }
    }
  }

  & img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  & .brxe-heading {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-m);
    margin: 0;
    color: #fff;
    font-size: var(--text-h5);
    z-index: 1;

    & br { display: none; }
  }
}

/********** RESPONSIVE HELPERS **********/
.hide-on-mobile {
  @media (max-width: 991px) {
    display: none !important;
  }
}

.hide-on-desktop {
  @media (min-width: 992px) {
    display: none !important;
  }
}

#brxe-vllpcv .swiper-wrapper {
  transition-timing-function: linear !important;
}

.yt-facade {
  width: 100%;
  aspect-ratio: 16 / 9;
}