/* ----------------------------
   ROW / Columns (Bootstrap-like)
   ---------------------------- */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* Bootstrap-like gutters */
}

[class*="col-"] {
    box-sizing: border-box;
}

/* --- XS / Mobile widths --- */
.event-panel .col-1  { width: 8.333%; }
.event-panel .col-2  { width: 16.666%; }
.event-panel .col-3  { width: 25%; }
/*.col-4  { width: 33.333%; }*/
.event-panel .col-4  { width: 32%; }
.event-panel .col-5  { width: 41.666%; }
.event-panel .col-6  { width: 50%; }
.event-panel .col-7  { width: 58.333%; }
.event-panel .col-8  { width: 66.666%; }
.event-panel .col-9  { width: 75%; }
.event-panel .col-10 { width: 83.333%; }
.event-panel .col-11 { width: 91.666%; }
.event-panel .col-12 { width: 100%; }

/* --- SM (≥576px) --- */
@media (min-width: 576px) {
    .event-panel .col-sm-1  { width: 8.333%; }
    .event-panel .col-sm-2  { width: 16.666%; }
    .event-panel .col-sm-3  { width: 25%; }
    .event-panel .col-sm-4  { width: 33.333%; }
    .event-panel .col-sm-5  { width: 41.666%; }
    .event-panel .col-sm-6  { width: 50%; }
    .event-panel .col-sm-7  { width: 58.333%; }
    .event-panel .col-sm-8  { width: 66.666%; }
    .event-panel .col-sm-9  { width: 75%; }
    .event-panel .col-sm-10 { width: 83.333%; }
    .event-panel .col-sm-11 { width: 91.666%; }
    .event-panel .col-sm-12 { width: 100%; }
}

/* --- MD (≥768px) --- */
@media (min-width: 768px) {
    .event-panel .col-md-1  { width: 8.333%; }
    .event-panel .col-md-2  { width: 16.666%; }
    .event-panel .col-md-3  { width: 25%; }
    /*.col-md-4  { width: 33.333%; }*/
    .event-panel .col-md-4  { width: 32%; }
    .event-panel .col-md-5  { width: 41.666%; }
    .event-panel .col-md-6  { width: 50%; }
    .event-panel .col-md-7  { width: 58.333%; }
    .event-panel .col-md-8  { width: 66.666%; }
    .event-panel .col-md-9  { width: 75%; }
    .event-panel .col-md-10 { width: 83.333%; }
    .event-panel .col-md-11 { width: 91.666%; }
    .event-panel .col-md-12 { width: 100%; }
}

/* --- LG (≥992px) --- */
@media (min-width: 992px) {
    .event-panel .col-lg-1  { width: 8.333%; }
    .event-panel .col-lg-2  { width: 16.666%; }
    .event-panel .col-lg-3  { width: 25%; }
    .event-panel .col-lg-4  { width: 33.333%; }
    .event-panel .col-lg-5  { width: 41.666%; }
    .event-panel .col-lg-6  { width: 50%; }
    .event-panel .col-lg-7  { width: 58.333%; }
    .event-panel .col-lg-8  { width: 66.666%; }
    .event-panel .col-lg-9  { width: 75%; }
    .event-panel .col-lg-10 { width: 83.333%; }
    .event-panel .col-lg-11 { width: 91.666%; }
    .event-panel .col-lg-12 { width: 100%; }
}

/* --- XL (≥1200px) --- */
@media (min-width: 1200px) {
    .event-panel .col-xl-1  { width: 8.333%; }
    .event-panel .col-xl-2  { width: 16.666%; }
    .event-panel .col-xl-3  { width: 25%; }
    .event-panel .col-xl-4  { width: 33.333%; }
    .event-panel .col-xl-5  { width: 41.666%; }
    .event-panel .col-xl-6  { width: 50%; }
    .event-panel .col-xl-7  { width: 58.333%; }
    .event-panel .col-xl-8  { width: 66.666%; }
    .event-panel .col-xl-9  { width: 75%; }
    .event-panel .col-xl-10 { width: 83.333%; }
    .event-panel .col-xl-11 { width: 91.666%; }
    .event-panel .col-xl-12 { width: 100%; }
}


/* --- Text alignment utilities --- */
.text-start { text-align: left; }
.text-end   { text-align: right; }
@media (min-width: 768px) {
    .text-md-end { text-align: right; }
}

/* ----------------------------
   Event Panel / Equal Height Fix
   ---------------------------- */
.row.event-panel {
    padding: 0;
}

.row.event-panel .wrp {
    padding: 3px;
    display: flex; /* ensures all columns have equal height */
}

.event-panel .item {
    display: flex;
    flex-direction: column; /* stack content vertically */
    flex: 1; /* grow to fill parent column height */
    padding: 15px;
    color: #fff;
    background-color: #782471;
    border-radius: 5px;
    position: relative;
}

.event-panel .item .wrap {
    display: flex;
    flex-direction: column;
    flex: 1; /* fill the item height */
    /*padding-bottom: 58px;*/
}

.event-panel .featured .item .wrap {
    padding-bottom: 0;
}

/* ----------------------------
   Date / Meta / Title
   ---------------------------- */
.event-panel p.month {
    text-transform: uppercase;
    margin: 0;
}

.event-panel p.date {
    font-size: 30px;
    font-weight: 600;
    line-height: 0;
    margin: 16px 0;
}

.event-panel p.meta {
    padding: 6px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 5px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

.event-panel p.meta.time {}
.event-panel p.meta.place {
    margin-bottom: 15px;
}

span.sep {
    font-size: 44px;
    padding: 0 3px;
    padding-top: 5px;
    position: absolute;
    left: 42px;
}

.event-panel h3.title {
    color: #fff;
    font-size: 18px;
    line-height: 25px;
    padding: 0;
    font-weight: 500;
    margin: 4px 0 7px 0;
}

.event-panel .title,
.event-panel .location,
.event-panel .time {
    margin-top: 10px;
}

/* ----------------------------
   Buttons
   ---------------------------- */
.event-panel a.reg {
    display: block;
    margin-top: auto; /* pushes button to bottom */
    background-color: #fff;
    color: #782471;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    padding: 7px 8px;
    border-radius: 5px;
}

.event-panel a.reg:Hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.9);
}

.event-panel .featured a.reg {
    width: 250px;
    padding: 9px 30px;
}

/* ----------------------------
   Date Range
   ---------------------------- */
.event-panel .date-range {
    display: flex;
}

.event-panel .start,
.event-panel .end {
    text-align: left;
}

.event-panel .end {
    padding-left: 20px;
}