/* ==========================================================================
     PREMIUM EVENTS MODULE (Namespace: .pem-)
     ========================================================================== */
  
  .pem-container {
    --pem-primary: #e50012;
    --pem-bg: #ffffff;
    --pem-card-bg: #ffffff;
    --pem-text-dark: #1a1a1a;
    --pem-text-light: #999999;
    --pem-radius: 12px;
    --pem-transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 48px;
    box-sizing: border-box;
    background: var(--pem-bg);
  }

  .pem-container *, 
  .pem-container *::before, 
  .pem-container *::after { box-sizing: inherit; }

  /* ─── Header ─── */
  .pem-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 40px; padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea; position: relative;
  }
  .pem-header::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 80px; height: 3px; background: var(--pem-primary); border-radius: 3px;
  }
  .pem-title {
    font-weight: 700; font-size: clamp(16px, 3.5vw, 42px);
    color: var(--pem-text-dark); line-height: 1.2; margin: 0; letter-spacing: -0.02em;
  }
  .pem-title span { color: var(--pem-primary); }

  /* ─── Navigation ─── */
  .pem-nav { display: flex; gap: 12px; }
  .pem-nav-btn {
    width: 48px; height: 48px; border: 1px solid #e0e0e0; background: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: var(--pem-transition);
  }
  .pem-nav-btn:hover:not(.swiper-button-disabled) {
    background: var(--pem-primary); border-color: var(--pem-primary);
    box-shadow: 0 8px 16px rgba(229, 0, 18, 0.2);
  }
  .pem-nav-btn:hover:not(.swiper-button-disabled) svg { stroke: #fff; }
  .pem-nav-btn.swiper-button-disabled { opacity: 0.4; cursor: not-allowed; }
  .pem-nav-btn svg {
    width: 20px; height: 20px; stroke: var(--pem-text-dark);
    stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: var(--pem-transition);
  }

  /* ─── Swiper ─── */
  .pem-swiper-wrap { position: relative; overflow: hidden; padding: 10px 0 20px; }
  .pem-swiper-wrap .swiper { overflow: visible; }

  /* ─── Card ─── */
  .pem-card {
    background: var(--pem-card-bg); border-radius: var(--pem-radius); overflow: hidden;
    height: 100%; display: flex; flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid #f0f0f0;
    transition: var(--pem-transition); cursor: pointer; text-decoration: none;
  }
  .pem-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
  
  .pem-img-wrap { position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; background: #f4f4f4; }
  .pem-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; }
  .pem-card:hover .pem-img-wrap img { transform: scale(1.06); }

  .pem-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--pem-primary); z-index: 10; transform: scaleX(0);
    transform-origin: left; transition: transform 0.4s ease;
  }
  .pem-card:hover::before { transform: scaleX(1); }

  .pem-slogan {
    position: absolute; bottom: 16px; left: 16px; background: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff;
    padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; z-index: 5;
  }

  .pem-status {
    position: absolute; bottom: 16px; right: 16px; width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 5;
  }
  .pem-status.is-ongoing { color: var(--pem-primary); }
  .pem-status.is-ongoing .ring { transform-origin: center; }
  .pem-status.is-ongoing .ring-1 { animation: pem-ripple 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
  .pem-status.is-ongoing .ring-2 { animation: pem-ripple 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; animation-delay: 1s; }
  @keyframes pem-ripple { 0% { transform: scale(0.3); opacity: 1; stroke-width: 2px; } 100% { transform: scale(1); opacity: 0; stroke-width: 0.5px; } }
  .pem-status.is-ended { color: #a0a0a0; }

  .pem-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
  .pem-card-title {
    font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); color: var(--pem-text-dark);
    line-height: 1.4; margin-bottom: 20px; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pem-card-action {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px; color: var(--pem-primary); text-transform: uppercase;
    letter-spacing: 0.05em; transition: gap 0.3s ease;
  }
  .pem-card:hover .pem-card-action { gap: 14px; }
  .pem-card-action svg { width: 16px; height: 16px; stroke: var(--pem-primary); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

  /* ─── Progress Bar ─── */
  .pem-progress-wrap { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
  .pem-progress-bar { flex: 1; height: 3px; background: #f0f0f0; border-radius: 2px; position: relative; overflow: hidden; }
  .pem-progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--pem-primary); border-radius: 2px; transition: width 0.4s ease; width: 0%; }
  .pem-progress-text { font-weight: 600; font-size: 14px; color: var(--pem-text-light); min-width: 40px; text-align: right; }
  .pem-progress-text strong { color: var(--pem-text-dark); }

  @media (max-width: 900px) { .pem-container { padding: 40px 24px; } }
    @media (max-width: 768px) { 
        .pem-slogan { line-height: 1.2;
    max-width: calc(100% - 54px);
    overflow: hidden; }
    }
  @media (max-width: 600px) { .pem-container { padding: 40px 16px; } .pem-card-body { padding: 20px; } .pem-nav { display: none; } }