/* 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;
    }
  }
}

/*
 * Living Room Session — homepage feature
 * Client request: "Alsarah on home page" email thread (Rachael Rice
 * 2026-08-18, Lynn Jones 2026-08-19). Auto-rotates to the newest session;
 * see templates/_components/living-room-session-feature.html.
 */
.living-room-session-feature {
  display: block;
}

/* One continuous white panel behind photo, gutter and copy (Jae, 2026-09-28).
 * Foundation's .row clearfix pseudo-elements would become flex items and add
 * stray gap space, so they are hidden here. */
.living-room-session-feature__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: #fff;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.living-room-session-feature__body::before,
.living-room-session-feature__body::after {
  display: none;
}

.living-room-session-feature__media,
.living-room-session-feature__copy {
  float: none !important;
}

.living-room-session-feature__media {
  flex: 1 1 320px;
  min-width: 0;
}

.living-room-session-feature__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  /* Wider crop so the photo fills its column instead of leaving a white gap (Jae, 2026-10-13) */
  aspect-ratio: 16 / 10 !important; /* beats the inline 700/700 on the img tag */
  object-fit: cover;
  object-position: center top; /* keep faces in frame */
}

.living-room-session-feature__copy {
  flex: 1 1 280px;
  min-width: 0;
  align-self: center; /* centre the text against the taller photo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  padding: 1.25rem;
}

.living-room-session-feature__title {
  font-family: "Raleway", "helvetica neue", helvetica, arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  margin: 0 0 0.625rem 0;
}

.living-room-session-feature__title a {
  color: inherit;
}

.living-room-session-feature__blurb {
  font-family: "Raleway", "helvetica neue", helvetica, arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 1rem 0;
}

.living-room-session-feature__cta {
  margin: 0;
}

.living-room-session-feature__cta a {
  display: inline-block;
  font-family: "Raleway", "helvetica neue", helvetica, arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: #bb6b0f;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
}

.living-room-session-feature__cta a:hover,
.living-room-session-feature__cta a:focus {
  background: #96560c;
  color: #fff;
}

@media screen and (max-width: 40.5em) {
  .living-room-session-feature__media {
    flex-basis: 100%;
  }

  .living-room-session-feature__copy {
    flex-basis: 100%;
  }
}

/* C21 "Previous Session" tile: the session before the newest, smaller, under the feature (client, 2026-10-21).
 * Same white panel and type as the feature; the row's clearfix pseudo-elements are hidden for the flex layout. */
.living-room-session-previous {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #fff;
  padding: 0.625rem;
}

.living-room-session-previous::before,
.living-room-session-previous::after {
  display: none;
}

.living-room-session-previous__media {
  flex: 0 0 6.5rem;
  display: block;
}

.living-room-session-previous__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
}

.living-room-session-previous__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.living-room-session-previous__title {
  font-family: "Raleway", "helvetica neue", helvetica, arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0.5rem 0 0 0;
  overflow-wrap: anywhere;
}

.living-room-session-previous__title a {
  color: inherit;
}

@media print, screen and (min-width: 40.5625em) {
  .living-room-session-previous__media {
    flex-basis: 9rem;
  }

  .living-room-session-previous__title {
    font-size: 1.125rem;
  }
}