/*!
 * Custom Layout & Design Framework for Malmo.com
 */

/* ========================================================
   1. VARIABLES
   ======================================================== */
:root {
  /* Color palette */
  --color-ink-black: #0E131F;
  --color-twilight-indigo: #38405F;
  --color-vintage-grape: #59546C;
  --color-cool-steel: #8B939C;
  --color-strawberry-red: #FF0035;
  --color-pure-white: #FFFFFF;
  --color-light-gray: #F1F3F5;
  --color-plain-gray: #CCC;
  --color-border-gray: #EEF2F5;

  /* Global settings */
  --set-site-bg: var(--color-pure-white);
  --set-text-main: #212529;
  --set-text-muted: var(--color-vintage-grape);

  /* Main content and headings */
  --set-maincontent-bg: var(--color-pure-white);
  --set-header1-color: var(--color-vintage-grape);

  /* Main menu */
  --set-mainmenu-bg: var(--color-light-gray);
  --set-mainmenu-text: var(--color-twilight-indigo);
  --set-mainmenu-bg-active: var(--color-cool-steel);
  --set-mainmenu-text-active: var(--color-pure-white);

  /* Sub menu */
  --set-submenu-bg: var(--color-light-gray);
  --set-submenu-text: var(--color-twilight-indigo);
  --set-submenu-text-hover: var(--color-cool-steel);
  --set-submenu-bg-active: var(--color-cool-steel);
  --set-submenu-text-active: var(--color-pure-white);

  /* Footer */
  --set-footer-bg: var(--color-cool-steel);
  --set-footer-text: var(--color-pure-white);
  --set-footer-muted: var(--color-pure-white);

  /* Hero, slider and caption */
  --set-hero-overlay: rgba(14, 19, 31, 0.25);
  --set-hero-caption-bg: rgba(0, 0, 0, 0.45);
  --set-hero-text-title: var(--color-pure-white);
  --set-hero-text-desc: rgba(200, 200, 200, 1);
  --set-hero-text-color: var(--color-pure-white);
  --set-hero-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

  /* Main button */
  --set-mainbutton-bg: var(--color-cool-steel);
  --set-mainbutton-text: var(--color-pure-white);
  --set-mainbutton-bg-active: var(--color-strawberry-red);
  --set-mainbutton-text-active: var(--color-pure-white);

  /* News */
  --set-news-title: var(--color-ink-black);
  --set-news-title-hover: var(--color-strawberry-red);
  --set-news-meta: var(--color-vintage-grape);
  --set-news-text: #333333;
  --set-news-btn-bg: var(--color-light-gray);
  --set-news-btn-text: var(--color-twilight-indigo);
  --set-news-btn-bg-hover: var(--color-ink-black);
  --set-news-btn-text-hover: var(--color-pure-white);

  /* Pagination */
  --set-page-bg: var(--color-light-gray);
  --set-page-text: var(--color-twilight-indigo);
  --set-page-bg-active: var(--color-strawberry-red);
  --set-page-text-active: var(--color-pure-white);
}

/* ========================================================
   2. BASE
   ======================================================== */
*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--set-text-main);
  background-color: var(--set-site-bg);
}

header,
nav,
main,
footer {
  display: block;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-light-gray);
    margin-top: 20px;
}

blockquote {
    margin:20px 40px;
    padding-left:20px;
    border-left:4px solid #ccc;
    font-style:italic;
    color: var(--color-cool-steel);
}
/* ========================================================
   3. LAYOUT
   ======================================================== */
.container {
  width: 100% !important;
  max-width: 1320px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.row {
  display: flex !important;
  flex-wrap: wrap !important;
  padding-bottom: 15px;
  border-bottom: 5px solid #fff;
  width: auto !important;
}


.col-lg-8 {
  flex: 1 1 0 !important;
  width: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
}

.col-lg-4 {
  flex: 0 0 33.333333% !important;
  width: 33.333333% !important;
  max-width: 33.333333% !important;
}

/* Hide banner column when it contains no element */
.col-lg-4:not(:has(*)) {
  display: none !important;
}

/* Full width when banner column is empty */
.row:has(> .col-lg-4:not(:has(*))) > .col-lg-8 {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.col-lg-8 iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

.featured-column {
  flex: 0 0 66.666667%;
  width: 66.666667%;
  max-width: 66.666667%;
  min-width: 0;
  padding: 0 15px;
}

/* ========================================================
   4. MAIN CONTENT
   ======================================================== */
.tourism-main-content {
  background: var(--set-maincontent-bg);
  border-radius: 12px;
  padding: 40px !important;
  box-shadow: 0 4px 0px rgba(14, 19, 31, 0.05);
}

.tourism-main-content h1 {
  font-weight: 700;
  color: var(--set-header1-color);
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  line-height: 1.2;
}

.tourism-main-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--set-text-muted);
  margin-bottom: 1.5rem;
}

.tourism-main-content .leaflet-container img {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

.link-back {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 14px;
    border: 1px solid var(--color-twilight-indigo);
    border-radius: 6px;
    background: #f8fbff;
    color: var(--color-cool-steel);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.link-back:hover {
    background: var(--color-cool-steel);
    color: #ffffff;
    text-decoration: none;
}

.info {
    display: block;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--color-light-gray);
    border-left: 4px solid var(--color-twilight-indigo);
    border-radius: 4px;
    color: var(--color-vintage-grape);
    font-size: 0.95rem;
    line-height: 1.5;
}
/* ========================================================
   5. HERO
   ======================================================== */
.malmo-hero {
  background: linear-gradient(rgba(14, 19, 31, 0.5), rgba(14, 19, 31, 0.5)), url('https://unsplash.com') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 80px 0;
}

.malmo-hero h2 {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  font-weight: 700;
  text-shadow: var(--set-hero-text-shadow);
}

.malmo-hero p {
  font-size: 1.25rem;
  margin: 0;
  text-shadow: var(--set-hero-text-shadow);
}

.malmo-hero img {
  max-height: 80px;
  margin-bottom: 15px;
}

.malmo-top-logo {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  background: var(--set-site-bg);
}

.malmo-hero-sub-wrapper {
  background-color: transparent !important;
}

.malmo-hero-sub-box {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  color: var(--set-hero-text-color);
  padding: 140px 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(14, 19, 31, 0.05) !important;
}

.malmo-hero-sub-box h2 {
  font-size: 2.2rem !important;
  margin: 0 0 5px 0;
  font-weight: 700;
  text-shadow: var(--set-hero-text-shadow);
}

.malmo-hero-sub-box p {
  font-size: 1.1rem;
  margin: 0;
  text-shadow: var(--set-hero-text-shadow);
  opacity: 0.95;
}
/* ========================================================
   6. PROMO / BANNER
   ======================================================== */
.promo-card {
    width: 100%;
    max-width: 100%;
}

.promo-card a {
    display: block;
    width: 100%;
}

.promo-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-bottom:20px solid #fff;
}

/* ========================================================
   7. CAROUSEL
   ======================================================== */
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 1.2s;
}



.carousel-caption-centered {
  position: absolute;
  top: 50%;
  left: 8% !important;
  transform: translateY(-50%) !important;
  width: auto;
  max-width: 430px;
  padding: 24px 28px !important;
  text-align: left !important;
  z-index: 10;
  background-color: var(--set-hero-caption-bg) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(14, 19, 31, 0.12) !important;
  backdrop-filter: blur(8px);
}

.carousel-caption-centered h2 {
  font-size: 1.7rem !important;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--set-hero-text-title) !important;
  text-shadow: none !important;
  line-height: 1.2;
}

.carousel-caption-centered p {
  font-size: 1rem !important;
  font-weight: 500;
  margin: 0;
  color: var(--set-hero-text-desc) !important;
  text-shadow: none !important;
  line-height: 1.45;
}

@keyframes cssCarouselFade {
  0%, 30.8% {
    opacity: 1;
    z-index: 2;
  }

  34.6%, 96.2% {
    opacity: 0;
    z-index: 1;
  }

  100% {
    opacity: 1;
    z-index: 2;
  }
}

@keyframes cssCarouselFade2 {
  0%, 30.8% {
    opacity: 0;
    z-index: 1;
  }

  34.6%, 57.7% {
    opacity: 1;
    z-index: 2;
  }

  61.5%, 100% {
    opacity: 0;
    z-index: 1;
  }
}

@keyframes cssCarouselFade3 {
  0%, 57.7% {
    opacity: 0;
    z-index: 1;
  }

  61.5%, 80.8% {
    opacity: 1;
    z-index: 2;
  }

  84.6%, 100% {
    opacity: 0;
    z-index: 1;
  }
}

@keyframes cssCarouselFade4 {
  0%, 80.8% {
    opacity: 0;
    z-index: 1;
  }

  84.6%, 96.2% {
    opacity: 1;
    z-index: 2;
  }

  100% {
    opacity: 0;
    z-index: 1;
  }
}

.malmo-hero-home .carousel-inner {
  height: 75vh !important;
  min-height: 500px !important;
}

.malmo-hero-home .carousel-item {
  width: 100% !important;
  height: 75vh !important;
  min-height: 500px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.malmo-hero-home .carousel-item:nth-child(1),
.malmo-hero-home .carousel-item:nth-child(2),
.malmo-hero-home .carousel-item:nth-child(3),
.malmo-hero-home .carousel-item:nth-child(4) {
  display: block !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.malmo-hero-home .carousel-item:nth-child(1) {
  animation: cssCarouselFade 26s infinite ease-in-out;
}

.malmo-hero-home .carousel-item:nth-child(2) {
  animation: cssCarouselFade2 26s infinite ease-in-out;
}

.malmo-hero-home .carousel-item:nth-child(3) {
  animation: cssCarouselFade3 26s infinite ease-in-out;
}

.malmo-hero-home .carousel-item:nth-child(4) {
  animation: cssCarouselFade4 26s infinite ease-in-out;
}
/* ========================================================
   8. CARDS, BUTTONS AND BADGES
   ======================================================== */
.col-lg-4 .card {
  padding: 24px !important;
}

.card.bg-light {
  background-color: var(--color-light-gray) !important;
  /*border: 1px solid var(--color-border-gray) !important;*/
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.card.bg-light:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(14, 19, 31, 0.1) !important;
}

.card-title {
  color: var(--color-ink-black) !important;
}

.btn-primary {
  background-color: var(--color-strawberry-red) !important;
  border-color: var(--color-strawberry-red) !important;
  color: var(--color-pure-white) !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  transition: all 0.2s ease-in-out !important;
}

.btn-primary:hover {
  background-color: var(--color-ink-black) !important;
  border-color: var(--color-ink-black) !important;
  box-shadow: 0 4px 12px rgba(14, 19, 31, 0.15) !important;
}

.btn-outline-dark {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  background-color: var(--set-mainmenu-bg) !important;
  color: var(--set-mainmenu-text) !important;
  border: none !important;
}

.btn-outline-dark:hover {
  background-color: var(--set-mainmenu-bg-active) !important;
  color: var(--set-mainmenu-text-active) !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(14, 19, 31, 0.15) !important;
}

.badge.bg-dark {
  background-color: var(--color-twilight-indigo) !important;
  color: var(--color-pure-white) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.15s ease !important;
}

.badge.bg-dark:hover {
  background-color: var(--color-strawberry-red) !important;
}

.object-fit-cover {
  object-fit: cover !important;
}

.card .col-md-4 img {
  height: 100% !important;
  width: 220px !important;
  margin-right: 20px;
  object-fit: cover !important;
  object-position: center !important;
}

.logo-icon-left {
  margin: 0 15px 15px 0;
}

/* ========================================================
   9. FOOTER
   ======================================================== */
footer,
body > footer,
.container ~ footer {
  display: block !important;
  background: var(--set-footer-bg) !important;
  background-color: var(--set-footer-bg) !important;
  color: var(--set-footer-text) !important;
  clear: both !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  z-index: 100 !important;
  width: 100% !important;
  padding: 50px 0 !important;
  margin-top: 60px !important;
}

footer p {
  color: var(--set-footer-muted) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* ========================================================
   10. RESPONSIVE
   ======================================================== */
@media (min-width: 768px) {
  .text-md-end {
    text-align: right !important;
  }
}

@media (min-width: 992px) {
  .tourism-nav-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

 .featured-column .row {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 768px) {
  .malmo-hero-home .carousel-inner,
  .malmo-hero-home .carousel-item {
    height: 62vh !important;
    min-height: 400px !important;
  }

  .carousel-caption-centered {
    top: auto;
    left: 12px !important;
    right: 12px;
    bottom: 12px;
    transform: none !important;
    width: auto;
    max-width: none;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(6px);
  }

  .carousel-caption-centered h2 {
    font-size: 1.05rem !important;
    margin-bottom: 4px;
    line-height: 1.2;
  }

  .carousel-caption-centered p {
    font-size: 0.82rem !important;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 38px !important;
    height: 38px !important;
    margin: auto 10px !important;
  }



  
      .card .row {
        display: block !important;
    }

    .card .col-md-4 {
        width: 100% !important;
        height: 190px;
        overflow: hidden;
    }

    .card .col-md-4 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
        margin: 0 !important;
    }

    .card .col-md-8 {
        width: 100% !important;
    }
    
}

@media (max-width: 991px) {
  .row {
    flex-wrap: wrap !important;
  }

  .col-lg-8,
  .col-lg-4,
  .col-lg-4:has(*) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }
  
  .featured-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px !important;
  }
  
  .tourism-main-content {
      background: var(--set-maincontent-bg);
      border-radius: 12px;
      padding: 0px !important;
      padding-top: 30px !important;
      box-shadow: 0 4px 0px rgba(14, 19, 31, 0.05);
    }
}