/*
Gabriel Messenger V122 - Carousel native image border / full medallion fix
Purpose:
- The carousel banner image already contains the Vatican golden bottom border and center cross medallion.
- Do not add another CSS border image.
- Do not crop the bottom medallion.
- Show the CMS/gallery banner image as one complete image, consistently on desktop and mobile.

How to apply:
1) Preferred: add this line after site.css in Views/Shared/_Layout.cshtml:
   <link rel="stylesheet" href="~/css/gm-v122-carousel-native-image-border.css" asp-append-version="true" />

2) Quick fix: copy this full CSS and paste it at the very bottom of wwwroot/css/site.css.
*/

.gm-carousel-v100,
.gm-carousel-v100-slider,
.gm-carousel-v100 .carousel-inner,
.gm-carousel-v100 .carousel-item,
.gm-carousel-v100-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.gm-carousel-v100 .carousel-inner {
  aspect-ratio: 1900 / 550 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.gm-carousel-v100 .carousel-item,
.gm-carousel-v100 .carousel-item.active,
.gm-carousel-v100 .carousel-item-next,
.gm-carousel-v100 .carousel-item-prev,
.gm-carousel-v100 .carousel-item-start,
.gm-carousel-v100 .carousel-item-end {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  background: transparent !important;
}

.gm-carousel-v100-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

/* Show the full carousel image. This keeps the original golden border and full circle/cross medallion from the image itself. */
.gm-carousel-v100-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: relative !important;
  z-index: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Disable all generated extra borders / circles / crosses from previous versions. */
.gm-carousel-v100-frame::before,
.gm-carousel-v100-frame:before,
.gm-carousel-v100-frame::after,
.gm-carousel-v100-frame:after,
.gm-carousel-v100 .carousel-item::after,
.gm-carousel-v100-frame .carousel-item::after,
.gm-carousel-v100-frame .gm-v107-glitter,
.gm-carousel-v100-frame > .gm-carousel-v107-glitter,
.gm-carousel-v100-frame .gm-carousel-v100-separator,
.gm-carousel-v100 .gm-carousel-v100-separator,
.gm-carousel-v100 .gm-carousel-v100-frame .gm-carousel-v100-separator,
.gm-carousel-v100 .gm-carousel-v118-single-border::before,
.gm-carousel-v100 .gm-carousel-v119-mobile-production::before,
.gm-carousel-v100 .gm-carousel-v121-responsive-final::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Responsive layout: keep the same banner proportion so the medallion does not stretch. */
@media (max-width: 991.98px) {
  .gm-carousel-v100 .carousel-inner {
    aspect-ratio: 1900 / 550 !important;
  }
  .gm-carousel-v100-img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 575.98px) {
  .gm-carousel-v100 .carousel-inner {
    aspect-ratio: 1900 / 550 !important;
  }
  .gm-carousel-v100 .carousel-control-prev,
  .gm-carousel-v100 .carousel-control-next {
    width: 9% !important;
    z-index: 20 !important;
  }
}


/* V135 mobile non-sticky header */
@media (max-width:767.98px){
header,.top-header,.main-header,.navbar,.navbar-wrapper,.sticky-top,.fixed-top,.gm-header,.gm-navbar{
position:static !important;
top:auto !important;
}
body{padding-top:0!important;}
html{scroll-padding-top:0!important;}
}
