/* Constrained hero with cacao gradient */
.meetings-hero{
  position:relative;
  color:#fff;
  padding: clamp(2rem, 4vw, 3rem) 1rem;
  background:
	radial-gradient(900px 500px at 115% 120%, rgba(247,181,58,.10), transparent 55%),
	radial-gradient(1100px 600px at -10% -10%, rgba(255,255,255,.06), transparent 60%),
	linear-gradient(165deg, var(--ehca-plum) 0%, var(--ehca-plum-dk) 100%);
  overflow:hidden;
  max-width: 1100px;  /* constrain section itself */
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.meetings-hero .inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.05fr 1fr;  /* text left, image right */
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;               /* make both columns equal height */
}

/* Left card — stretch to full column height */
.meeting-card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.8vw, 2rem);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  height: 100%;            /* fill the grid row height */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.meeting-card .eyebrow{
  display:inline-block;
  background: rgba(253,231,184,.18);
  color: var(--ehca-gold);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.28rem .62rem;
  border-radius:999px;
  font-size:.92rem;
  margin-bottom:.7rem;
}
.meeting-card h1{
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.3rem);
  line-height:1.1;
  margin:.1rem 0 .8rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.35);
}

/* DATE + TIME + ICS as a responsive grid */
.meta-grid{
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
	"date . ics"
	"time time ics";
  align-items:center;
  column-gap:.75rem;
  row-gap:.25rem;
}
.next-date{ grid-area: date; }
.time-row{ grid-area: time; }
.ics-button{ grid-area: ics; justify-self:end; }

.next-date{
  display:inline-block;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff7e8;
  font-size: clamp(1.15rem, 1rem + .65vw, 1.35rem);
  margin: .15rem 0 0;
  font-variant-caps: small-caps;
}
/* No underline on date */
.next-date::after{ content:none; }

/* Time row styling */
.time-row{
  margin-top:.25rem;
  color:#fde7c3;
  font-size: clamp(1.05rem, .95rem + .55vw, 1.25rem);
  letter-spacing:.02em;
}
.time-row time{
  font-weight:800;
  color:#fff7e8;
}
.time-dash{ margin: 0 .25rem; }

/* Gold underline as an <hr> after the time row */
.time-rule{
  height: 3px;
  border: 0;
  width: 240px;
  background: linear-gradient(90deg, var(--ehca-gold), rgba(247,181,58,0));
  border-radius: 2px;
  margin: .4rem 0 0;
}
.time-rule + .venue{ margin-top: .85rem; }

.venue{
  margin: .75rem 0 0;
  color:#fff3dc;
  line-height:1.6;
  font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
}
.venue strong{
  font-size: clamp(1.05rem, 1rem + .25vw, 1.18rem);
  letter-spacing:.2px;
}

/* Right column stack */
.right-stack{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Reversed frame: purple band hugging the image with a fine white border around it */
.frame-outer{
  border-radius: 16px;
  box-shadow: 0 28px 60px rgba(0,0,0,.45);
}
.frame-inner{
  background: #2b1420;          /* deep purple band */
  border: 2px solid #ffffff;    /* fine white border outside the purple */
  border-radius: 14px;
  padding: 10px;                /* thickness of purple band */
}
.frame-inner img{
  display:block;
  width:100%; height:auto; object-fit:cover;
  border-radius: 8px;
  filter: saturate(1.02) contrast(1.03);
}

/* Map row under the photo */
.map-row{
  display:flex;
  align-items:center;
  gap: .9rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}
.map-row img{
  width: 260px;
  height:auto;
  border:none;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display:block;
}
.meeting-btn{
  display:inline-block;
  text-decoration:none;
  color:#26150f;
  background: linear-gradient(135deg,#FFD56B 0%,#7A3E2E 100%);
  padding:.7rem 1.1rem;
  border-radius:999px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(122,62,46,.35);
  white-space: nowrap;
}
.meeting-btn:hover{ filter:brightness(1.03); }

/* Blurb styles */
.meeting-blurb{
  margin-top: 1.6rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.15);
  color: #fff3dc;
  line-height: 1.6;
  font-size: clamp(1rem, .95rem + .2vw, 1.08rem);
}
.meeting-blurb .blurb-chip{
  display: inline-block;
  background: rgba(253,231,184,.18);
  color: var(--ehca-gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .16rem .5rem;
  border-radius: 999px;
  font-size: .82rem;
  margin-right: .45rem;
}
.meeting-blurb strong{ color: var(--ehca-gold); font-weight: 800; }

/* .ics button */
.ics-button{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff3dc;
  text-decoration: none;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  background: rgba(255,255,255,.04);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ics-button::before{
  content: "";
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F7B53A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.ics-button:hover,
.ics-button:focus{
  background: rgba(253,231,184,.12);
  border-color: var(--ehca-gold);
  color: var(--ehca-ivory);
  outline: none;
}

/* Mobile tweaks */
@media (max-width: 980px){
  .meetings-hero .inner{ grid-template-columns: 1fr; }

  /* Stack date, time, then ICS button below */
  .meta-grid{
	grid-template-columns: 1fr;
	grid-template-areas:
	  "date"
	  "time"
	  "ics";
	justify-items: start;
	row-gap: .35rem;
  }
  .ics-button{ justify-self: start; }

  /* Center the map image & button */
  .map-row{
	justify-content: center;
	text-align: center;
  }
  .map-row img{ margin: 0 auto; }
}
