/**
 * Elimination Facts Fix CSS
 * Specific styles to fix Elimination Facts boxes
 */

/* ========================================
   ELIMINATION FACTS LAYOUT
   ======================================== */

/* Force last 2-column layout to maintain columns */
.layout--twocol-section:last-of-type,
.layout--twocol-section.layout--twocol-section--50-50 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
}

/* Desktop: 2 columns side by side */
@media (min-width: 768px) {
  .layout--twocol-section:last-of-type > .layout__region,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region {
    flex: 0 0 calc(50% - 0.75rem) !important;
    max-width: calc(50% - 0.75rem) !important;
    min-width: 0 !important;
  }
}

/* ========================================
   ROTATED BOXES - SPECIFIC
   ======================================== */

/* Ensure rotated boxes have correct spacing */
.layout--twocol-section .layout__region .block-content-basic {
  margin-bottom: 1rem;
}

/* Rotated box with gray background */
.layout__region div[style*="background-color:#e7e7e7"] {
  background-color: #e7e7e7 !important;
  border-radius: 9px !important;
  margin-bottom: 1.5rem;
}

/* Rotation only on desktop */
@media (min-width: 768px) {
  .layout__region div[style*="transform:rotate(-4deg)"] {
    transform: rotate(-4deg) !important;
  }

  .layout__region div[style*="transform:rotate(-4deg)"]:hover {
    transform: rotate(-1deg) !important;
  }
}

/* No rotation on mobile */
@media (max-width: 767px) {
  .layout__region div[style*="transform:rotate(-4deg)"] {
    transform: rotate(0deg) !important;
  }
}

/* ========================================
   VERTICAL ALIGNMENT OF BOXES
   ======================================== */

/* Ensure boxes align to the start */
.layout--twocol-section {
  align-items: flex-start;
}

/* Each region should have the same base height */
.layout--twocol-section > .layout__region {
  display: flex;
  flex-direction: column;
}

/* ========================================
   SPACING BETWEEN BLOCKS IN REGIONS
   ======================================== */

/* Multiple blocks in the same region */
.layout__region > .block-content-basic + .block-content-basic {
  margin-top: 1.5rem;
}

/* ========================================
   TITLES AND ICONS IN BOXES
   ======================================== */

/* FontAwesome icons in boxes */
.layout__region div[style*="border-radius:9px"] i.fas {
  margin-right: 0.5rem;
  font-size: 1.1em;
}

/* Titles in boxes */
.layout__region div[style*="border-radius:9px"] h2 {
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.layout__region div[style*="border-radius:9px"] h3 {
  margin-bottom: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

/* On mobile, stack in single column */
@media (max-width: 767px) {
  .layout--twocol-section {
    flex-direction: column !important;
  }

  .layout--twocol-section > .layout__region {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Reduce padding on mobile */
  .layout__region div[style*="border-radius:9px"] > div {
    padding: 1rem 1.5rem !important;
  }

  /* Reduce spacing between boxes on mobile */
  .layout__region div[style*="background-color:#e7e7e7"] {
    margin-bottom: 1rem !important;
  }
}