/* ===================================================
   Half and Half Styling - General Layout and Elements
   =================================================== */

/* General Styles for Half and Half Component */
.half-and-half .add-padding {
  padding: 2rem 0 !important; /* Padding added to top and bottom of the component */
}

.half-and-half .container-xl {
  max-width: 1400px !important; /* Maximum container width for larger screens */
}

/* Small Heading Styling within Cards */
.half-and-half .card h3.small {
  margin: .7rem 0 0 !important; /* Margin above the small heading within cards */
}

/* ===================================================
   Card Images and Borders
   =================================================== */

/* Remove border-radius for all card images */
.half-and-half .card,
.half-and-half .card img {
  border-radius: 0 !important; /* Remove rounded corners */
}

/* Ensure no border-radius for card images */
.half-and-half .card-img,
.half-and-half .card-img-top,
.half-and-half .card-img-bottom {
  border-radius: 0 !important; /* Remove border-radius for all card images */
}

/* ===================================================
   Image Sizes and Alignments
   =================================================== */

/* Ensure images are aligned correctly in large, medium, and small card layouts */
.half-and-half .large img,
.half-and-half .medium img,
.half-and-half .small img,
.half-and-half .order-last .large img,
.half-and-half .order-last .medium img,
.half-and-half .order-last .small img {
  float: right !important; /* Float images to the right by default */
  max-width: 100% !important; /* Ensure images scale with container */
  width: 100% !important; /* Set image width to fill container */
}

/* Specific rule for images when in 'order-last' (reverse order on smaller screens) */
.half-and-half .order-last .large img,
.half-and-half .order-last .medium img,
.half-and-half .order-last .small img {
  float: left !important; /* Float images to the left when in reverse order */
}

/* Control image sizes for different classes */
.half-and-half .card-img.large {
  width: 80% !important; /* Large image takes 80% width */
  height: auto !important; /* Maintain aspect ratio */
}

.half-and-half .card-img.medium {
  width: 60% !important; /* Medium image takes 60% width */
  height: auto !important; /* Maintain aspect ratio */
}

.half-and-half .card-img.small img {
  width: 50% !important; /* Small image takes 50% width */
  height: auto !important; /* Maintain aspect ratio */
}

/* ===================================================
   Horizontal Rule (HR) Styling
   =================================================== */

/* Style for horizontal rules (HR) with top, bottom, or both borders */
.hr-top,
.hr-bottom,
.hr-top-bottom {
  opacity: 1 !important; /* Ensure full opacity */
  border-style: solid !important;
  border-width: 4px !important; /* Set border width */
  padding: .25rem 0 !important; /* Add vertical padding */
  border-color: transparent !important; /* Ensure borders are transparent */
}

/* Top border for horizontal rule */
.hr-top {
  border-top-color: var(--cua-gold) !important; /* Gold color for top border */
}

/* Bottom border for horizontal rule */
.hr-bottom {
  border-bottom-color: var(--cua-gold) !important; /* Gold color for bottom border */
}

/* Top and bottom border for horizontal rule */
.hr-top-bottom {
  border-top-color: var(--cua-gold) !important; /* Gold color for both borders */
  border-bottom-color: var(--cua-gold) !important;
}

/* ===================================================
   Link Wrapper Styles
   =================================================== */

/* Style for links inside the Half and Half component */
.hh-link-wrapper {
  text-decoration: none !important; /* Remove underline from link */
  display: block !important; /* Treat the link as a block element */
  position: relative !important; /* Position children within the link */
  overflow: hidden !important; /* Prevent content from overflowing */
  transition: transform 0.3s ease !important; /* Smooth transition for hover effect */
}

/* Hover effect for link wrapper */
.hh-link-wrapper:hover {
  transform: translateY(-1rem) !important; /* Move container up by 1rem on hover */
  text-decoration: none !important; /* Prevent underline on hover */
}

/* ===================================================
   Responsive Design for Small Screens
   =================================================== */

/* Mobile screen adjustments (max-width: 576px) */
@media only screen and (max-width: 576px) {

  /* Reset image float and ensure full width for all images */
  .half-and-half .large img,
  .half-and-half .medium img,
  .half-and-half .small img,
  .half-and-half .order-last .large img,
  .half-and-half .order-last .medium img,
  .half-and-half .order-last .small img {
    float: none !important; /* Remove float on small screens */
    max-width: 100% !important; /* Ensure images scale */
    width: 100% !important; /* Set width to 100% */
  }

  /* Adjust margins for image hover effect */
  .half-and-half .card-img.large.p-0.img-hover-effect,
  .half-and-half .card-img.medium.p-0.img-hover-effect,
  .half-and-half .card-img.small.p-0.img-hover-effect {
    margin: 1.5rem 1rem !important; /* Add margin for better spacing */
  }

  /* Adjust margins for horizontal rule with top and bottom borders */
  .half-and-half .hr-top-bottom .card-img img {
    margin: 1rem !important; /* Add margin around the images inside HR */
  }

  /* Adjust padding for 'add-padding' class */
  .half-and-half .add-padding {
    padding: 1rem 1rem !important; /* Reduce padding on mobile */
  }
}