/* =========================================
   1. CORE LAYOUT & SPACING
   ========================================= */
.multicolumn .title { margin: 0; }
.multicolumn.no-heading .title { display: none; }

@media screen and (max-width: 749px) {
  .multicolumn.no-heading.background-secondary { padding-top: 5rem; }
}

@media screen and (min-width: 750px) {
  .multicolumn.no-heading:not(.background-secondary) { margin-top: 6rem; }
}

.multicolumn.background-secondary .title-wrapper-with-link { margin-top: 0; }

@media screen and (max-width: 749px) {
  .multicolumn .title-wrapper-with-link { margin-bottom: 3rem; }
}

.multicolumn-list { margin-bottom: 0; padding: 0; }
.multicolumn-list__item:only-child { max-width: 72rem; }
.multicolumn-card-spacing { padding-top: 2.5rem; margin-left: 2.5rem; margin-right: 2.5rem; }
.multicolumn .button { margin-top: 2rem; }

/* =========================================
   2. CARD STYLING
   ========================================= */
.multicolumn:not(.background-none) .multicolumn-card {
  background: rgba(var(--color-foreground), 0.04);
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.multicolumn.background-secondary .multicolumn-card { background: rgb(var(--color-background)); }
.multicolumn.background-secondary { padding: 4rem 0 5rem; }
.multicolumn:not(.background-secondary) { margin: 5rem 0; }

.multicolumn-card__info { padding: 2.5rem 2.5rem; }
.multicolumn-card__info > :nth-child(2) { margin-top: 1rem; }
.multicolumn-list h3, .multicolumn-list p { margin: 0; }

/* =========================================
   3. IMAGE & HOVER EFFECTS (Darken + Zoom)
   ========================================= */
.multicolumn-card__image-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0 !important;
}

.multicolumn-card__image-wrapper a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.multicolumn-card__image-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  
  /* Smooth transition for both Zoom and Brightness */
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: brightness(1); /* Default Normal Brightness */
}

/* HOVER STATE: Zoom In + Darken Image */
.multicolumn-card:hover .multicolumn-card__image-wrapper img {
  transform: scale(1.08);
  filter: brightness(0.6); /* 60% Brightness (Darker) */
}

.multicolumn-card__image-wrapper--third-width { width: 33%; }
.multicolumn-card__image-wrapper--half-width { width: 50%; }

.multicolumn-list__item.center .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width),
.multicolumn-list__item:only-child {
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   4. NEW FEATURES (Badges & Ghost Button)
   ========================================= */

/* Badge */
.multicolumn-card__badge {
  position: absolute;
  top: 15px; right: 15px;
  z-index: 1;
  border-radius: 50px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-size: 12px;
}

/* GHOST BUTTON (Transparent with White Text) */
.hover-reveal-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  
  /* Visuals */
  background-color: transparent !important;
  color: #ffffff !important; /* White Text */
  border: 2px solid #ffffff; /* White Border */
  
  /* Sizing & Centering */
  padding: 12px 32px;
  min-width: 140px;
  border-radius: 50px;
  
  /* Flexbox Center */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Text Styles */
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
  
  /* Animation State */
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 1;
  pointer-events: none; /* Passes click to link */
}

/* Reveal on Card Hover */
.multicolumn-card:hover .hover-reveal-btn {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1);
}

/* =========================================
   5. RESPONSIVE UTILITIES
   ========================================= */
.title-center { place-content: center; text-align: center; }

@media screen and (max-width: 749px) {
  .multicolumn .page-width { padding: 0; }
  .multicolumn-list { margin: 0; width: 100%; }
  .multicolumn-list__item { margin: 0 0 1rem; padding: 0; }
  .multicolumn-list:not(.slider) { padding-left: 1.5rem; padding-right: 1.5rem; }
  .multicolumn-list.slider .multicolumn-list__item { width: calc(100% - 3rem); }
  .multicolumn-list.slider .multicolumn-list__item + .multicolumn-list__item { padding-left: 0.5rem; }
  .multicolumn.background-secondary .slider-buttons { margin-bottom: -2rem; }
}

@media screen and (min-width: 750px) {
  .multicolumn-list.slider, .multicolumn-list.grid--4-col-desktop { padding: 0; }
  .multicolumn-list__item, .grid--4-col-desktop .multicolumn-list__item { padding-bottom: 0; }
  .grid--2-col-tablet .multicolumn-list__item { margin-top: 1rem; max-width: 50%; }
  .background-none .grid--2-col-tablet .multicolumn-list__item { margin-top: 4rem; }
  .grid--2-col-tablet .multicolumn-list__item:nth-of-type(-n + 2) { margin-top: 0; }
}

@media screen and (min-width: 990px) {
  .grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item { max-width: 25%; }
  .grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item:nth-of-type(-n + 4) { margin-top: 0; }
  
  .slider-desktop .multicolumn-list {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 20px; scroll-snap-type: x mandatory;
  }
  .slider-desktop .grid--2-col-tablet .multicolumn-list__item { margin-top: 0 !important; }
}

/* Background None Utilities */
.background-none .multicolumn-card-spacing { padding: 0; margin: 0; }
.background-none .multicolumn-card__info { padding: 0; }
.background-none .multicolumn-card__image-wrapper + .multicolumn-card__info { padding-top: 2.5rem; }
.background-none .slider .multicolumn-card__info { padding-left: 0.5rem; }
.background-none .slider .multicolumn-card__image-wrapper + .multicolumn-card__info { padding-left: 1.5rem; }
.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info { padding-left: 2.5rem; padding-right: 2.5rem; }

@media screen and (min-width: 750px) {
  .background-none .multicolumn-card__image-wrapper { margin-left: 1.5rem; margin-right: 1.5rem; }
  .background-none .multicolumn-list .multicolumn-card__info,
  .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info { padding-left: 1.5rem; padding-right: 1.5rem; }
}