/* =========================================================================
   ENISHI — EVENT page (event.html)
   Links after style.css. Tokens & primitives come from style.css.
   ========================================================================= */

.icon-24{ width:24px; height:24px; }

/* =======================================================================
   1. HERO
   ======================================================================= */
.event-hero{ background:var(--bg); padding-block:72px 80px; overflow:hidden; }
.event-hero__inner{
  display:flex; align-items:center; gap:56px;
}
.event-hero__image{
  flex:0 0 600px; width:600px; height:520px;
  border-radius:var(--radius); overflow:hidden;
  background:var(--navy-soft);
}
.event-hero__image img{ width:100%; height:100%; object-fit:cover; }

.event-hero__text{ flex:1 1 auto; display:flex; flex-direction:column; gap:24px; }
.event-hero__heading{ display:flex; flex-direction:column; gap:6px; }
.event-hero__title{ font-size:42px; line-height:1.2; }
.event-hero__title-en{
  font-family:var(--font-en); font-weight:500; font-size:15px;
  letter-spacing:1px; color:var(--muted);
}
.event-hero__lead{
  font-family:var(--font-heading); font-weight:500; font-size:20px;
  line-height:1.6; color:var(--navy);
}
.event-hero__body{ font-size:15px; line-height:1.9; color:var(--muted); }
.event-hero__cta{ margin-top:4px; }
.event-hero__btn{ padding:13px 26px; font-size:14px; }

/* Decorative cluster (top-right) */
.hero-deco-ellipse-a{
  left:1300px; top:24px; width:64px; height:64px;
  background:var(--accent-soft); opacity:.7;
}
.hero-deco-ellipse-b{
  left:1240px; top:144px; width:26px; height:26px;
  background:var(--navy-soft);
}
.hero-deco-tri{
  left:1180px; top:64px; width:34px; height:34px;
  background:var(--accent); opacity:.8; transform:rotate(-24deg);
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
}

/* =======================================================================
   2. SERVICES
   ======================================================================= */
.event-services{ padding-block:80px; }
.event-services .wrap{ display:flex; flex-direction:column; gap:40px; }
.event-services__head{ display:flex; flex-direction:column; gap:10px; }
.event-services__title{ font-size:30px; }
.event-services__sub{ max-width:760px; font-size:15px; line-height:1.8; }

.event-services__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}

.service-card{
  display:flex; flex-direction:column; gap:18px;
  padding:28px; border-color:var(--line);
}
.service-card__icon{ width:52px; height:52px; border-radius:999px; }
.service-card__text{ display:flex; flex-direction:column; gap:6px; }
.service-card__title{
  font-family:var(--font-heading); font-weight:700; font-size:18px; color:var(--ink);
}
.service-card__desc{ font-size:14px; line-height:1.8; color:var(--muted); }

/* Navy CTA card (whole card links) */
.service-cta{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:var(--navy); border-radius:var(--radius); padding:28px;
  transition:transform .15s ease, box-shadow .2s ease;
}
.service-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(22,49,74,.22); }
.service-cta__text{ display:flex; flex-direction:column; gap:6px; }
.service-cta__title{
  font-family:var(--font-heading); font-weight:700; font-size:18px; color:#fff;
}
.service-cta__desc{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.8); }
.service-cta__arrow{
  flex:0 0 auto; width:44px; height:44px; border-radius:999px;
  background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.service-cta:hover .service-cta__arrow{ background:#ff8c1f; }

/* =======================================================================
   3. CLOSING CTA
   ======================================================================= */
.event-cta{ background:var(--bg); padding-block:56px; }
.event-cta__inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.event-cta__text{ display:flex; flex-direction:column; gap:8px; }
.event-cta__title{ font-size:24px; }
.event-cta__sub{ font-size:15px; line-height:1.8; }
.event-cta__btn{ flex:0 0 auto; padding:14px 28px; font-size:15px; }

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width:980px){
  .event-hero__inner{ flex-direction:column; align-items:stretch; gap:36px; }
  .event-hero__image{ flex:0 0 auto; width:100%; height:auto; aspect-ratio:600 / 520; }
  .event-hero__title{ font-size:34px; }
  .deco-stage{ display:none; }
  .event-cta__inner{ flex-direction:column; align-items:flex-start; gap:24px; }
}

@media (max-width:860px){
  .event-services__grid{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .event-hero{ padding-block:48px 56px; }
  .event-hero__title{ font-size:30px; }
  .event-services{ padding-block:56px; }
  .event-cta__btn{ width:100%; justify-content:center; }
}