.mfc-listing {
    position: relative;
    background-color: hsl(var(--dark-2));
    padding-top:1.5rem
}

.header:not(.fixed-header) {
   background-image: linear-gradient(to top, rgba(0, 0, 0, .25), rgba(0, 0, 0));
}
.filter-wrap {
  display: flex;
  align-items: center;
  gap:.5rem;
  margin-top: 1rem;
}
@media (min-width:992px) {
    .mfc-listing {
      padding-top:3rem
    }
}

@media (min-width:767px) {
    .filter-wrap {
        margin-top:0;
    }
  
}



/*-------- 2.3 Strip item --------*/
.grid-container{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
}
.card {
  border:transparent;
  box-shadow: 0 6px 12px rgba(5, 5, 5, .35);
  transition: 1s;
}
.card:hover {
  transform: translateX(2px);
}
.card-title > a {
  color:hsl(var(--gold-5))
}
.card-title > a:hover {
  color:hsl(var(--gold-3))
}


.winner-card {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform, opacity;
}
.winner-card.show {
  opacity: 1;
  transform: scale(1);
}

.card-media img.img-fade {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.card-media img.img-fade[data-loaded="true"] {
  opacity: 1;
  transform: scale(1);
}


/* --------- Details */

.hero-details {
    width: 100%;
    max-height: 480px;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    /* margin-top: 70px; */
    padding-top:70px;
    color: hsl(var(--white));
    text-align: left;
    background-color: hsl(var(--dark-2));
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.hero-details .wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /* background-color: rgba(0, 0, 0, .11); */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0));
  
}
.hero-details .container {
    position: relative;
    height: 100%;
}
.hero-details .wrapper .main-info {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 999;
    padding:0 1rem 1.25rem;
}
@media (min-width:992px) {
  .hero-details .wrapper .main-info {
    padding-bottom:40px
  }
}
.main-info-title {
    color: hsl(var(--gold-5));
    margin: 0;
    text-transform: none;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
}

@media (min-width:992px) {
  .main-info-title {
    font-size: 2.5rem;
  }
}
.main-info-desc {
  display: flex;
  align-items: center;

}
.main-info-desc > span {
  color:hsl(var(--white));
  margin-top:2px;
  font-size:1rem;
  font-weight: 500;
  line-height: 1;
}

@media (min-width:992px) {
  .main-info-desc > span {
    font-size:1.25rem
  }
}

.main-info-desc span:not(:first-child):before {
  content: '';
  height: 5px;
  width: 5px;
  display: inline-block;
  position: relative;
  background-color: hsl(var(--light));
  margin: 0 12px;
  top: -2px;
  border-radius:50%
}

.box-booking {
  border: 1px solid hsl(var(--light)/.15);
  -webkit-border-radius: .5rem;
  border-radius: .5rem;
}

@media (max-width: 767px) {
  .box-booking.mobile-fixed {
      display: none!important
  }
}

.box-booking .head {

  padding: 1.25rem 1.5rem;
  border-radius:.5rem .5rem 0 0;
  -webkit-border-radius:.5rem .5rem 0 0;
  background-color: hsl(var(--dark-3));
}
.box-booking .head h3 {
  font-size: 1.25rem;
  margin: 0;
  color:hsl(var(--white))
}
.box-booking .head small {
  display: block;
}
.box-booking a.close-panel-mobile {
    position: absolute;
    right: 10px;
    top: 0;
    color: #333;
    font-size: 26px;
    font-size: 1.625rem;
    display: none;
}
.box-booking .head .offer {
  color: #e74747;
  font-weight: 500;
  font-size: 16px;
  font-size: 1rem;
}
.box-booking .main {
    padding: 1.5rem;
}

.section-details {
  position: relative;
  padding:1.25rem 0;
  color:hsl(var(--white));
}
@media (min-width:992px) {
  .section-details {
    padding:2.5rem 0
  }
}
.content-details {
  position: relative;
  color:hsl(var(--white));
}
.content-details__body > p {
  font-family: var(--body-font)!important;
  font-size: 1rem;
  margin-top:1.25rem;
  margin-bottom:1.25rem;
  line-height: 1.6;
}
.content-details__body > p * {
  color:hsl(var(--white))
}
.content-details__body > p:first-child {
  margin-top:0
}
.content-details__body > p:last-child {
  margin-bottom:0
}

.content-detail__title {
  margin:0 0 1.25rem;
  color:hsl(var(--white));
  font-size:1.325rem;
  text-align: center;
  font-weight: 600;
}
.content-detail__subtitle {
  margin:0 0 .5rem;
  color:hsl(var(--white));
  font-size:1.125rem;
  font-weight: 600;
}
.content-detail__block {
  position: relative;
    color:hsl(var(--white))
}
.content-detail__block p {
  font-size:.925rem;
  line-height: 1.5;
  color:hsl(var(--white) / .95)
}
.content-details hr {
    margin: 2rem 0!important;
    opacity: 1;
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(122, 125, 147, 0) 0, #363845 38%, #363845 64%, rgba(122, 125, 147, 0) 99%);
}

.content-details__foot {
  position: relative;
}

@media (max-width:991px) {
  .content-details__foot {
    margin-bottom:1.5rem
  }
}
.content-details hr+.content-details__foot {
  margin-top:0
}

.content-detail_maps {
  position: relative;
  height: 360px;
  background-color: hsl(var(--dark-3));
  border-radius: .25rem;
  overflow: hidden;
}
.content-detail_maps iframe  {
  width: 100%;
  height: 360px;
  border:0!important
}

/* ----------- Contact List --------------- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
}

.contact-item .icon {
  width: 1.5rem; 
  margin-right: .5rem;
  flex-shrink: 0; 
  font-size: 1.2rem;
}

.contact-item .text {
  line-height: 1.4;
  word-break: break-word;
  font-size:.925rem;
  align-self: center;
}
.contact-item:not(:first-child) {
  margin-top:.5rem
}

.contact-list li a:hover {
  color:hsl(var(--gold-4))
}

.content-detail__block.socials ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.content-detail__block.socials ul li {
    font-size: 1.5rem;
}

.content-detail__block.socials ul li a {
    color: hsl(var(--light) / .95);
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.content-detail__block.socials ul li a:hover,
.content-detail__block.socials ul li a:focus {
    color:hsl(var(--gold-4));
    outline: none;
    text-decoration: none;
}

.row.row-split  {
    margin-bottom:1.5rem
}

@media (min-width:992px) {
  .row.row-split  {
    margin-bottom:0
}
  .row-split > div:not(:first-child) .content-detail__block {
    padding-left:.5rem
  }
}
/* ----------- Gallery--------------- */
.pictures {
  position: relative;
  margin-bottom:1.5rem;
}
.pictures__gallery {
  display: grid;
 grid-template-columns: repeat(auto-fill, minmax(calc(20% - .5rem), 1fr));
  gap: .5rem;
  justify-content: center; 
}


.pictures__gallery-item {
  margin:0;
  padding:0;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: .25rem;
  background: hsl(var(--dark-3));
  cursor: pointer;
  position: relative;
}
.pictures__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.pictures__gallery-item:hover img {
  transform: scale(1.125);
}
.pictures__gallery-item span {
  font-size:1.5rem;
  color:hsl(var(--light))
}
.pictures__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    color: hsl(var(--light));
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/* ----------- Popup Image --------------- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.active {
  opacity: 1;
  visibility: visible;
  display: flex;
}
.lightbox img {
  max-width: 90%;
  max-height: 80%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius:.25rem
}
.lightbox button {
  margin: 0 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  color: hsl(var(--white));
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  width: 48px;
  height: 48px;
  position: absolute;
  display: block;
  z-index: 100;
  overflow: hidden;
  background: hsl(var(--white)/.15);
  border-radius: 50%;
  outline: none !important;
}
.lightbox .prev {
  left: 20px;
}
.lightbox .next {
  right: 20px;
}


/* ----------- Skeleton placeholder --------------- */
.skeleton-card {
  overflow: hidden;
}
.skeleton-animate {
  animation: pulse 1.5s infinite;
}
.skeleton-img {
  aspect-ratio: 16/9;
  background-color: hsl(var(--light) / .075);
}
.skeleton-line {
  height: 14px;
  margin: 8px 0;
  border-radius: 4px;
  background-color: hsl(var(--light) / .075);
}
.skeleton-line.-xs {
  width: 25%;
}
.skeleton-line.-md {
  width: 50%;
}
.skeleton-line.-lg {
  width: 75%;
}
.skeleton-list {
  gap: 8px;
}
.skeleton-icon {
  width: 16px;
  height: 16px;
  background-color: hsl(var(--light) / .075);
  border-radius: 3px;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


.luxury-placeholder {
    text-align: center;
    animation: fadeInLuxury 0.6s ease-in-out;
    grid-column: 1 / -1;
}

.luxury-icon {
    color: hsl(var(--gold-5));
    margin-bottom: 5px;
    font-size:7rem
}

.luxury-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--light));
    margin-bottom: 5px;
}

.luxury-desc {
    font-size: 0.925rem;
    color: hsl(var(--light));
    max-width: 420px;
    margin: 0 auto;
}

@keyframes fadeInLuxury {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}