/*
 * Music Event Calendar – Frontend Stylesheet
 * Design: Modern Flat, dark red & grey palette, fully responsive
 * ------------------------------------------------------------------
 * Color system
 *   Primary (dark red)   #9B1C1C / #7B1111 / #C02727
 *   Secondary (grey)     #3D3D3D / #5A5A5A / #8A8A8A
 *   Accent               #B91C1C
 *   Success              #2D7A4F / #3DAF71
 *   Warning              #A36200 / #D4870A
 *   Error                #9B1C1C / #C02727
 *   Neutral              #F5F5F5 / #E0E0E0 / #C0C0C0 / #767676 / #3D3D3D / #1A1A1A
 */

/* ── Custom Properties ─────────────────────────────────────────── */
:root {
  --mec-red-100:   #fce8e8;
  --mec-red-300:   #e87a7a;
  --mec-red-500:   #c02727;
  --mec-red-700:   #9b1c1c;
  --mec-red-900:   #5c0f0f;

  --mec-grey-50:   #f8f8f8;
  --mec-grey-100:  #f0f0f0;
  --mec-grey-200:  #e0e0e0;
  --mec-grey-400:  #a0a0a0;
  --mec-grey-600:  #5a5a5a;
  --mec-grey-800:  #2a2a2a;
  --mec-grey-900:  #1a1a1a;

  --mec-success:   #2d7a4f;
  --mec-error:     #c02727;

  --mec-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mec-radius:    4px;
  --mec-radius-lg: 8px;
  --mec-transition: 200ms ease;

  --mec-card-w: 320px;
  --mec-gap:    24px;
}

/* ── Reset / Scope ─────────────────────────────────────────────── */
.mec-calendar,
.mec-calendar *,
.mec-modal,
.mec-modal * {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

.mec-calendar {
  font-family: var(--mec-font);
  color:       var(--mec-grey-800);
  line-height: 1.5;
  font-size:   15px;
}

/* ── No events ─────────────────────────────────────────────────── */
.mec-no-events {
  padding:    48px 24px;
  text-align: center;
  color:      var(--mec-grey-600);
  font-size:  1rem;
  border:     1px solid var(--mec-grey-200);
  border-radius: var(--mec-radius-lg);
  background: var(--mec-grey-50);
}

/* ── Grid ──────────────────────────────────────────────────────── */
.mec-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--mec-card-w), 1fr));
  gap:                   var(--mec-gap);
}

/* ── Card ──────────────────────────────────────────────────────── */
.mec-card {
  display:        flex;
  flex-direction: column;
  background:     #fff;
  border:         1px solid var(--mec-grey-200);
  border-radius:  var(--mec-radius-lg);
  overflow:       hidden;
  transition:     border-color var(--mec-transition), transform var(--mec-transition);
}

.mec-card:hover {
  border-color: var(--mec-red-500);
  transform:    translateY(-2px);
}

/* Image wrap */
.mec-card__image-wrap {
  position:       relative;
  width:          100%;
  aspect-ratio:   16 / 9;
  overflow:       hidden;
  background:     var(--mec-grey-200);
}

.mec-card__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 300ms ease;
}

.mec-card:hover .mec-card__image {
  transform: scale(1.04);
}

/* Date badge */
.mec-card__date-badge {
  position:      absolute;
  top:           12px;
  left:          12px;
  background:    var(--mec-red-700);
  color:         #fff;
  border-radius: var(--mec-radius);
  padding:       6px 10px;
  text-align:    center;
  line-height:   1.15;
  min-width:     48px;
}

.mec-card__date-day {
  display:     block;
  font-size:   1.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.mec-card__date-month {
  display:     block;
  font-size:   0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity:     0.9;
}

/* Body */
.mec-card__body {
  flex:    1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap:     8px;
}

.mec-card__weekday-time {
  font-size:  0.8rem;
  color:      var(--mec-grey-600);
  font-weight: 500;
  display:    flex;
  align-items: center;
  gap:        4px;
  flex-wrap:  wrap;
}

.mec-card__time {
  color:      var(--mec-red-700);
  font-weight: 600;
  display:    inline-flex;
  align-items: center;
  gap:        3px;
}

.mec-card__title {
  font-size:   1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color:       var(--mec-grey-900);
}

.mec-card__title a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--mec-transition);
}

.mec-card__title a:hover {
  color: var(--mec-red-500);
}

.mec-card__venue,
.mec-card__phone {
  font-size:  0.8rem;
  color:      var(--mec-grey-600);
  display:    flex;
  align-items: flex-start;
  gap:        5px;
}

.mec-card__venue .mec-icon,
.mec-card__phone .mec-icon {
  flex-shrink: 0;
  margin-top:  2px;
  color:       var(--mec-red-500);
}

.mec-card__phone a {
  color:           var(--mec-grey-600);
  text-decoration: none;
  transition:      color var(--mec-transition);
}

.mec-card__phone a:hover {
  color: var(--mec-red-500);
}

/* Footer */
.mec-card__footer {
  padding:     12px 18px;
  border-top:  1px solid var(--mec-grey-200);
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  align-items: center;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.mec-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         9px 18px;
  font-family:     var(--mec-font);
  font-size:       0.875rem;
  font-weight:     600;
  line-height:     1;
  border-radius:   var(--mec-radius);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--mec-transition), color var(--mec-transition), border-color var(--mec-transition);
  white-space:     nowrap;
}

.mec-btn--primary {
  background:   var(--mec-red-700);
  color:        #fff;
  border-color: var(--mec-red-700);
}

.mec-btn--primary:hover,
.mec-btn--primary:focus-visible {
  background:   var(--mec-red-900);
  border-color: var(--mec-red-900);
  color:        #fff;
}

.mec-btn--outline {
  background:   transparent;
  color:        var(--mec-grey-800);
  border-color: var(--mec-grey-300, #c0c0c0);
}

.mec-btn--outline:hover,
.mec-btn--outline:focus-visible {
  background:   var(--mec-grey-100);
  border-color: var(--mec-grey-400);
}

.mec-btn--sm {
  padding:   6px 12px;
  font-size: 0.78rem;
}

.mec-btn:focus-visible {
  outline:        3px solid var(--mec-red-300);
  outline-offset: 2px;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.mec-modal {
  position:    fixed;
  inset:       0;
  z-index:     99999;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     16px;
}

.mec-modal[hidden] {
  display: none;
}

.mec-modal__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(26, 26, 26, 0.65);
  animation:  mec-fade-in 200ms ease forwards;
}

.mec-modal__box {
  position:      relative;
  background:    #fff;
  border-radius: var(--mec-radius-lg);
  border:        1px solid var(--mec-grey-200);
  width:         100%;
  max-width:     540px;
  max-height:    90vh;
  overflow-y:    auto;
  padding:       32px 28px;
  animation:     mec-slide-up 220ms ease forwards;
}

.mec-modal__close {
  position:    absolute;
  top:         14px;
  right:       16px;
  background:  none;
  border:      none;
  font-size:   1.5rem;
  line-height: 1;
  color:       var(--mec-grey-600);
  cursor:      pointer;
  padding:     4px 8px;
  border-radius: var(--mec-radius);
  transition:  color var(--mec-transition), background var(--mec-transition);
}

.mec-modal__close:hover {
  color:      var(--mec-grey-900);
  background: var(--mec-grey-100);
}

.mec-modal__title {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--mec-grey-900);
  margin-bottom: 4px;
}

.mec-modal__subtitle {
  font-size:   0.9rem;
  color:       var(--mec-red-700);
  font-weight: 600;
  margin-bottom: 20px;
}

/* ── Form ───────────────────────────────────────────────────────── */
.mec-form {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.mec-form__row {
  display: grid;
  gap:     14px;
}

.mec-form__row--half {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
  .mec-form__row--half {
    grid-template-columns: 1fr;
  }
}

.mec-form__group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.mec-form__group label {
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--mec-grey-800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mec-form__group input,
.mec-form__group textarea {
  font-family:   var(--mec-font);
  font-size:     0.9rem;
  color:         var(--mec-grey-900);
  border:        1px solid var(--mec-grey-200);
  border-radius: var(--mec-radius);
  padding:       9px 12px;
  background:    #fff;
  transition:    border-color var(--mec-transition);
  width:         100%;
}

.mec-form__group input:focus,
.mec-form__group textarea:focus {
  outline:      none;
  border-color: var(--mec-red-500);
}

.mec-form__group input::placeholder,
.mec-form__group textarea::placeholder {
  color: var(--mec-grey-400);
}

.mec-form__group textarea {
  resize:      vertical;
  min-height:  80px;
}

.mec-required {
  color: var(--mec-red-500);
}

.mec-form__footer {
  display:         flex;
  justify-content: flex-end;
  margin-top:      4px;
}

.mec-form__message {
  padding:       10px 14px;
  border-radius: var(--mec-radius);
  font-size:     0.875rem;
  font-weight:   600;
  text-align:    center;
}

.mec-form__message--success {
  background: #e8f5ee;
  color:      var(--mec-success);
  border:     1px solid #b3dfc5;
}

.mec-form__message--error {
  background: var(--mec-red-100);
  color:      var(--mec-red-700);
  border:     1px solid var(--mec-red-300);
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes mec-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mec-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Icons ──────────────────────────────────────────────────────── */
.mec-icon {
  display:        inline-block;
  vertical-align: middle;
  flex-shrink:    0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --mec-card-w: 280px;
    --mec-gap:    16px;
  }

  .mec-modal__box {
    padding: 24px 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --mec-card-w: 100%;
    --mec-gap:    14px;
  }

  .mec-grid {
    grid-template-columns: 1fr;
  }

  .mec-card__footer {
    flex-direction: column;
    align-items:    stretch;
  }

  .mec-card__footer .mec-btn {
    justify-content: center;
  }
}

/* ── Wrap ────────────────────────────────────────────────────────── */
.mec-wrap {
  font-family: var(--mec-font);
}

/* ── Pagination ──────────────────────────────────────────────────── */
.mec-pagination {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         14px 20px;
  background:      var(--mec-grey-50);
  border:          1px solid var(--mec-grey-200);
  border-radius:   var(--mec-radius-lg);
  font-family:     var(--mec-font);
}

.mec-pagination--top {
  margin-bottom: 20px;
}

.mec-pagination--bottom {
  margin-top: 20px;
}

.mec-pagination__btn {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  padding:        9px 18px;
  background:     var(--mec-red-700);
  color:          #fff;
  border:         none;
  border-radius:  var(--mec-radius);
  font-family:    var(--mec-font);
  font-size:      0.85rem;
  font-weight:    600;
  cursor:         pointer;
  transition:     background var(--mec-transition), opacity var(--mec-transition), transform 120ms ease;
  white-space:    nowrap;
}

.mec-pagination__btn:hover:not(:disabled) {
  background: var(--mec-red-900);
  transform:  translateY(-1px);
}

.mec-pagination__btn:active:not(:disabled) {
  transform: translateY(0);
}

.mec-pagination__btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

.mec-pagination__info {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--mec-grey-600);
  text-align:  center;
  min-width:   80px;
}

@media (max-width: 480px) {
  .mec-pagination {
    padding: 10px 12px;
  }

  .mec-pagination__btn span {
    display: none;
  }

  .mec-pagination__btn {
    padding: 9px 12px;
  }
}