/***** VARIABLES *****/
:root{
  --libre-bodoni:"Libre Bodoni",serif;
  --anuphan:"Anuphan",sans-serif;
  --dark-cerulean:#004b82;
  --paolo-veronese-green:#01927e;
  --black:#000;
  --white:#fff;
  --roman-silver:#868193;
  --quartz:#4B4657;
  --platinum:#E1DEE8;
  --azureish-white:#d9efec;
  --azureish-white-soft: #f4fbfa;
  --line:#e9eef3;
}

/* ============================================================
   OUTER WRAPPER
   ============================================================ */
.smdm-evt-info{
  display:grid;
  grid-template-rows:auto auto;  /* 1) two-column row  2) summary row */
  row-gap:20px;
  border-radius:5px;
  box-sizing:border-box;
  padding:50px 60px;
  margin:0;
  background-color: var(--azureish-white-soft);
}
.wp-block-group .smdm-evt-info{
  margin:40px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
}

/* Child blocks span full width */
.smdm-evt-info > .smdm-evt-cols,
.smdm-evt-info > .smdm-summary-wide,
.smdm-evt-info > .smdm-summary-card{
  width:100%;
  max-width:none;
  justify-self:stretch;
  margin:0;
}

/* CTA row at very bottom (mobile-only visible) */
.smdm-evt-cta-bottom{
  margin-top:20px;
  display:none; /* shown only on mobile */
}

/* ============================================================
   TWO-COLUMN GRID
   ============================================================ */
.smdm-evt-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  align-items:stretch; /* equal heights */
}
.smdm-col{
  display:grid;
  grid-template-rows:1fr auto;   /* content + footer/ical/subnav */
  min-height:280px;
  min-width:0;
}
.left-top,
.right-top{
  grid-row:1;
  min-height:0;
}
.left-bottom,
.right-bottom{
  grid-row:2;
}

/* ============================================================
   LEFT COLUMN
   ============================================================ */
.left-top{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.evt-actions{
  margin:10px 0;
}

/* Titlebar as grid: badge | title | syllabus chip */
.evt-titlebar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:16px;
  align-items:flex-start;   /* keep chip pinned to top */
  margin:0 0 8px;
}
.evt-titlebar__main{
  min-width:0;
}
.evt-titlebar__actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:8px;
}

.smdm-evt-info h2{
  color:var(--wp--preset--color--dark-cerulean,var(--dark-cerulean));
  margin:0 0 .75em!important;
  font-weight:600 !important;
}

/* ============================================================
   INLINE HERO (stacked version – under title on mobile)
   ============================================================ */
.smdm-hero-wrap{
  margin:0;
}
.smdm-hero-wrap--stack{
  display:none; /* only on mobile */
}
.smdm-hero-wrap--side{
  display:block;
}

/* ============================================================
   META ROWS (de-emphasize location/links)
   ============================================================ */
.smdm-evt-info .meta-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:.25rem 0;
}
.smdm-evt-info .meta-row .icon{
  display:grid;
  place-items:center;
  color:var(--paolo-veronese-green);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wp-block-button.smdm-primary .wp-block-button__link{
  padding:10px 28px;
  border-radius:5px;
}
.wp-block-button.smdm-primary.smdm-btn-register{
  margin-right:10px;
}

/* (Syllabus) */
.smdm-chip{
  display:inline-flex;
  padding:10px 10px!important;
  border-radius:5px!important;
}
.smdm-chip svg,
.smdm-chip__text {
  vertical-align: middle!important;
}
/* Locked / members-only syllabus chip */
.smdm-chip.smdm-chip--locked {
  background-color: #28a745;      /* same green as big Members Only button */
  border: 1px solid #28a745;
  color: #fff;
  padding: 6px 10px !important;   /* a bit tighter than default */
  font-size: 0.8rem;
}

/* Make sure icon + text look good on the green background */
.smdm-chip.smdm-chip--locked svg {
  width: 20px;
  height: 20px;
}

.smdm-chip.smdm-chip--locked .smdm-chip__text {
  font-size: 1rem;
  line-height: 1.2;
}

/* ============================================================
   iCAL ROW (unified type)
   ============================================================ */
.smdm-ical{
  margin:20px 0 16px;
}
.smdm-ical a{
  font-size:.8rem;
}
.left-bottom > .wp-block-group{
  margin:0;
}

/* ============================================================
   DATE BADGE
   ============================================================ */
.smdm-evt-info .date-badge{
  min-width:70px;
  height:64px;
  border-radius:5px;
  background:var(--dark-cerulean);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 2px 8px rgba(10,92,131,.12);
  text-align:center;
}
.date-badge__day{
  font-size:1.45rem;
  font-weight:800;
  line-height:1;
}
.date-badge__mon{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
}

/* ============================================================
   RIGHT COLUMN (IMAGE)
   ============================================================ */
.right-top{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:0;
}

/* CHANGED: figure should not be the clipping / card box */
.right-top figure{
  margin:0;
  height:auto;
  display:block;
  overflow:visible;
  border-radius:0;
  box-shadow:none;
}

/* CHANGED: remove max-height clamp; wrapper controls the box */
.smdm-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  flex:1 1 auto;
  max-width:none;
  cursor:auto;
  /* max-height:300px;  <-- removed */
}

/* ============================================================
   SUB-NAV BUTTONS (Events Submenu)
   ============================================================ */
.smdm-subnav{
  margin-top:16px;
}

.smdm-subnav__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}

.smdm-subnav__button .wp-block-button__link{
  font-size:.9rem;
  padding:8px 16px;
}

/* ============================================================
   SUMMARY CARD
   ============================================================ */
.smdm-summary-card{
  /* background:#fff;
  border:1px solid #e5eef5;
  border-radius:5px;
  padding:28px 32px;
  box-shadow:0 2px 6px rgba(10,92,131,.06); */
}
.smdm-summary-card p{
  margin:.4rem 0;
}

/* ============================================================
   NO-HERO LAYOUT
   ============================================================ */
.smdm-evt-cols.no-hero{
  grid-template-rows:auto auto auto;
}
.smdm-evt-cols.no-hero .right-top{
  grid-column:1 / -1;
}
.smdm-evt-cols.no-hero .right-bottom{
  display:none;
}
.smdm-evt-cols.no-hero .left-bottom{
  grid-row:3;
}

/* Conference archive extra spacing */
.smdm-archive.using-single-template > * + *{
  margin-top:80px!important;
}

/* ============================================================
   RESPONSIVE – TITLE / CHIP
   ============================================================ */
@media (max-width:720px){
  .evt-titlebar{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-rows:auto auto;
    row-gap:8px;
  }
  /* chip moves below title but stays aligned */
  .evt-titlebar__actions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
  .smdm-col {
    min-height: unset;
  }
}

/* ============================================================
   RESPONSIVE – MAIN LAYOUT + HERO / CTA BEHAVIOR
   ============================================================ */
@media (max-width:900px){
  .smdm-evt-info{
    grid-template-rows:auto auto auto;
    padding:30px 20px;
  }

  .smdm-evt-cols{
    grid-template-columns:1fr;
    row-gap:0px;
  }

  .right-top,
  .right-top figure,
  .smdm-hero-img{
    height:auto;
  }

  /* HERO:
     - side image hidden
     - stacked image (under title) shown
  */
  .smdm-hero-wrap--side{
    display:none;
  }
  .smdm-hero-wrap--stack{
    display:block;
    margin:8px 0 4px;
  }

  /* CTA:
     - top buttons hidden
     - bottom CTA row shown
  */
  .evt-actions{
    display:none;
  }
  .smdm-evt-cta-bottom{
    display:block;
  }
}

/* ============================================================
   Body row: About + Description + Subnav
   ============================================================ */
.smdm-evt-body{
  display:grid;
  grid-template-columns:minmax(0, 3fr) minmax(0, 1.3fr);
  column-gap:24px;
  align-items:flex-start;
  margin-top:20px;
}

.smdm-evt-body-main > .smdm-summary-card + .smdm-summary-card{
  margin-top:20px;
}

.smdm-evt-body-side{
  align-self:flex-start;
}

/* Sub-nav buttons */
.smdm-subnav{
  margin-top:0;
}

.smdm-subnav__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}
.smdm-subnav__button {
  width: 100%;
}
.smdm-subnav__button .wp-block-button__link{
  font-size:.9rem;
  padding:8px 16px;
}
.smdm-summary-block h3 {
  margin-top:0px;
}
/* Responsive: stack body columns on narrow screens */
@media (max-width:900px){
  .smdm-evt-body{
    grid-template-columns:1fr;
    row-gap:0px;
  }
}

/* display the feature image based on aspect ratio class */

/* CHANGED: wrapper is the card */
.smdm-hero-wrap {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(10,92,131,.08);
 /* aspect-ratio: 16 / 9;      /* baseline */
} 

/* Image always fills the wrapper */
.smdm-hero-wrap .smdm-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* keep cover */
  object-position: center;
  max-height: none;          /* IMPORTANT: no clamp */
}

/* Portrait images: make the card portrait by matching the image AR */
.smdm-hero-wrap.is-portrait {
  aspect-ratio: var(--hero-ar, 3 / 4);  /* < 1 becomes taller */
  max-height: none;
}

/* Optional: “square-ish” images also look better not forced into 16:9 */
.smdm-hero-wrap.is-squareish {
  aspect-ratio: var(--hero-ar, 1 / 1);
}

/* Make sure the hero container is allowed to be taller */
.smdm-evt-cols .right-top,
.smdm-evt-cols .smdm-hero-wrap--side {
  height: auto;
  align-self: stretch;
}