/* Homepage Layout Fixes - Step 1 of spec_upcoming_events.md */

/* 
 * Fixes the issue where "Upcoming Events" entries appear at the bottom 
 * of "Recent Articles" instead of in the intended blue column on the right
 *
 * Target the existing homepage structure without requiring template changes
 */

/* 
 * FOUNDATION GRID FIX FOR HOMEPAGE ARTICLES/EVENTS ROW
 * Ensure the Foundation grid columns work properly side by side
 */

/* 
 * SPECIFIC TARGET: Homepage articles and events row
 * Only target the row that contains both medium-8 and medium-4 columns
 */

/* Use :has() selector to target only rows with both column types */
.row.vspace-small-12:has(.medium-8.columns):has(.medium-4.columns) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0; /* Foundation handles gutters */
}

/* Override Foundation's float only for this specific row */
.row.vspace-small-12:has(.medium-8.columns):has(.medium-4.columns) > .columns {
  float: none !important;
}

/* Articles column - ensure it stays 2/3 width */
.row.vspace-small-12:has(.medium-8.columns):has(.medium-4.columns) > .medium-8.columns {
  flex: 0 0 66.66667% !important;
  max-width: 66.66667% !important;
}

/* Events column - ensure it stays 1/3 width */  
.row.vspace-small-12:has(.medium-8.columns):has(.medium-4.columns) > .medium-4.columns {
  flex: 0 0 33.33333% !important;
  max-width: 33.33333% !important;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
  .row.vspace-small-12 > .medium-8.columns + .medium-4.columns {
    /* This targets medium-4 that immediately follows medium-8 */
    clear: none !important;
  }
  
  .row.vspace-small-12 > .medium-8.columns:first-child {
    float: left !important;
    width: 66.66667% !important;
  }
  
  .row.vspace-small-12 > .medium-4.columns:last-child {
    float: right !important;
    width: 33.33333% !important;
  }
}

/* Mobile responsiveness - let Foundation handle small screens naturally */
@media screen and (max-width: 40em) {
  main .row.vspace-small-12:has(.medium-8):has(.medium-4) {
    display: block;
  }
  
  main .row.vspace-small-12:has(.medium-8):has(.medium-4) > .columns {
    float: none;
    flex: none;
    max-width: 100%;
  }
}

/* Preserve existing blue styling for events */
.hr-title--event {
  border-bottom-color: #0066cc;
}

.hr-title--event .hr-title__text {
  background: #0066cc;
  color: #ffffff;
}

.tag__label--event {
  background: #0066cc;
  color: #ffffff;
}

/* Alternative approach using CSS Grid for more reliable layout */
@supports (display: grid) {
  .homepage-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  
  @media screen and (max-width: 40.5625em) {
    .homepage-grid-layout {
      grid-template-columns: 1fr;
    }
  }
}