/* ==========================================================================
   PreFooter Module - Three promotional cards with hover effects
   ========================================================================== */

/* Main container */
.prefooter { 
  padding: 0; 
  margin: 0; 
  background: linear-gradient(to bottom, white 0%, white 18%, var(--prefooter-bg-color, #82142C) 10%, var(--prefooter-bg-color, #82142C) 100%);
}

/* Inner flex container for cards */
.prefooter__inner { 
  display: flex; 
  gap: 6rem; 
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Ensure link-wrapped cards maintain equal width */
.prefooter__inner > a {
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

/* Individual card styling */
.prefooter-card { 
  position: relative; 
  width: 100%;
  height: 500px; 
  overflow: visible; 
  cursor: pointer; 
  transition: transform 0.3s ease, top 0.3s ease;
  top: 0;
  background-color: #82142C;
}

/* Card background image container */
.prefooter-card__media { 
  position: absolute; 
  inset: 0; 
}

.prefooter-card__media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

/* Dark overlay on card */
.prefooter-card__overlay { 
  position: absolute; 
  inset: 0; 
  background: #500617B2; 
  transition: opacity 0.3s ease;
}

/* Card content container */
.prefooter-card__content { 
  position: relative; 
  z-index: 1; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  justify-content: end; 
  padding-left: 0px; 
  color: #fff; 
}

/* Card title styling */
.prefooter-card__title { 
  margin: 0; 
  font-weight: 500; 
  line-height: 1.05; 
  font-size: 70px; 
  font-family: 'Gelasio', serif;
  position: relative;
  left: -25px; 
  margin-bottom: -45px; 
  width: 75%;
}

.prefooter-card__title span { 
  display: block; 
}

/* Arrow button container */
.prefooter-card__cta { 
  align-self: flex-end; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 56px; 
  height: 56px; 
  text-decoration: none;
}

/* Remove default link styling */
.prefooter-card__cta:hover,
.prefooter-card__cta:focus,
.prefooter-card__cta:visited {
  text-decoration: none;
}

/* Arrow SVG styling */
.prefooter-card__cta svg {
  width: 56px;
  height: 56px;
  padding-bottom: 2rem;
  padding-right: 2rem;
}

/* ==========================================================================
   Hover Effects
   ========================================================================== */

/* Card hover state - lift and color changes */
.prefooter-card:hover {
  color: #FDB71A;
  transform: translateY(-10px);
}

/* Title underline on hover */
.prefooter-card:hover .prefooter-card__title {
  text-decoration: underline;
  text-decoration-color: #FDB71A;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Arrow color change on hover */
.prefooter-card:hover svg path,
.prefooter-card:hover svg circle {
  stroke: #FDB71A;
}

/* Remove overlay on hover to show background image */
.prefooter-card:hover .prefooter-card__overlay {
  opacity: 0;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Ensure equal widths on all screen sizes */
@media (min-width: 900px) {
  .prefooter__inner > a {
    flex: 1 1 0;
    min-width: 0;
  }
  
  .prefooter-card {
    width: 100%;
  }
}

@media (max-width: 1423.98px) {
  .prefooter__inner {
    padding: 3rem 2rem;
  }
}

/* Medium screens - adjust gap and padding */
@media (max-width: 1200px) {
  .prefooter__inner {
    gap: 3.5rem;
    padding: 3rem 2rem;
  }
  
  .prefooter-card__title {
    font-size: 50px;
    left: -18px;
  }
}

/* Tablet and below - stack cards vertically */
@media (max-width: 992px) {
  .prefooter__inner { 
    flex-direction: column; 
    flex-wrap: wrap;
    gap: 2rem;
  }
  
  .prefooter__inner > a {
    flex: 1 1 auto;
    width: 100%;
  }
  
  .prefooter-card { 
    width: 100%;
    height: 350px; 
  }
  
  .prefooter-card__title { 
    font-size: 3rem; 
  }
}

/* Small mobile - smaller title */
@media (max-width: 576px) { 
  .prefooter-card__title {
    font-size: 2.5rem;
  }
}