/* =====================================================================
   EVENTS.CSS — Club Liberty · страница «Праздники» (events)
   Только стили этой страницы: hero, шапки секций, форматы праздников,
   шаги, «что входит», галерея, FAQ, форма-заявка и брейкпоинты.
   Подключается ПОСЛЕ base.css.
   ===================================================================== */


/* ==== BLOCK: HERO — start ====
   Первый экран страницы праздников: фон, крошки, заголовок и CTA. */
.phero{position:relative; min-height:60vh; display:flex; align-items:flex-end; overflow:hidden}
.phero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.phero .fb{position:absolute; inset:0; z-index:0; background:
  radial-gradient(110% 90% at 80% 10%, rgba(226,59,46,.30), transparent 55%),
  radial-gradient(90% 80% at 0% 100%, rgba(230,169,72,.20), transparent 55%), #110b09}
.phero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,10,9,.6) 0%, rgba(12,10,9,.25) 40%, var(--bg) 100%)}
.phero-in{position:relative; z-index:2; padding:120px 0 54px; width:100%}
.crumbs{font-size:13px; color:var(--muted-2); margin-bottom:18px; font-family:var(--disp);
  letter-spacing:.1em; text-transform:uppercase}
.crumbs a:hover{color:var(--ink)}
.crumbs a{position:relative; z-index:3; color:var(--gold); transition:.15s}  /* crumbs-clickable */
.phero h1{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(42px,7vw,90px); line-height:.9; letter-spacing:.01em; max-width:16ch}
.phero h1 em{font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--gold)}
.phero p{margin-top:18px; color:var(--muted); max-width:52ch; font-size:18px}
.phero .cta{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap}
/* ==== BLOCK: HERO — end ==== */


/* ==== BLOCK: SECTION SHELL — start ====
   Обёртка секций страницы и шапка секции с заголовком и подзаголовком. */
section{position:relative}
.sec{padding:88px 0}
.sec-head{margin-bottom:42px}
.sec-head .eyebrow{display:block; margin-bottom:14px}
.sec-head h2{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(32px,4.6vw,56px); line-height:.96}
.sec-head p{color:var(--muted); margin-top:14px; max-width:56ch; font-size:16px}
/* ==== BLOCK: SECTION SHELL — end ==== */


/* ==== BLOCK: FORMATS — start ====
   Карточки форматов праздника (ДР, банкет, девичник/мальчишник). */
.formats{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.fmt{position:relative; border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:var(--bg-2); display:flex; flex-direction:column; transition:.2s}
.fmt:hover{border-color:var(--line); transform:translateY(-3px)}
.fmt-img{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3)}
.fmt-img img{width:100%; height:100%; object-fit:cover; transition:.5s}
.fmt:hover .fmt-img img{transform:scale(1.05)}
.fmt-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(12,10,9,.85))}
.fmt-tag{position:absolute; top:14px; left:14px; z-index:2; background:rgba(12,10,9,.7);
  backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  font-family:var(--disp); text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--gold)}
.fmt-h{position:absolute; left:0; bottom:0; z-index:2; padding:20px 22px}
.fmt-h h3{font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:30px; line-height:1}
.fmt-h .cap{font-size:13px; color:var(--muted); margin-top:4px}
.fmt-b{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.fmt-b ul{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px}
.fmt-cond{font-size:12px; color:var(--muted); line-height:1.5; margin:0 0 16px}
.fmt-b li{display:flex; gap:10px; font-size:14.5px; color:var(--muted); align-items:flex-start}
.fmt-b li::before{content:"\2605"; color:var(--red); font-size:11px; margin-top:3px; flex:none}
.fmt-b .btn{margin-top:auto; align-self:flex-start}
/* ==== BLOCK: FORMATS — end ==== */


/* ==== BLOCK: STEPS — start ====
   Нумерованные шаги организации праздника. */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:s}
.step{padding:26px 24px; border:1px solid var(--line-2); border-radius:12px; background:var(--bg-2); position:relative}
.step .no{font-family:var(--disp); font-size:46px; font-weight:700; color:transparent;
  -webkit-text-stroke:1.5px rgba(230,169,72,.55); line-height:1; margin-bottom:14px}
.step h4{font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; font-size:18px; margin-bottom:8px}
.step p{color:var(--muted); font-size:14px}
/* ==== BLOCK: STEPS — end ==== */


/* ==== BLOCK: INCLUDED — start ====
   Сетка «что входит» + сопроводительное изображение. */
.incl-wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:46px; align-items:center}
.incl{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.incl div{padding:18px 18px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px}
.incl .t{font-family:var(--disp); text-transform:uppercase; letter-spacing:.05em; font-size:15px; margin-bottom:5px}
.incl .d{font-size:13px; color:var(--muted)}
.incl-img{border-radius:14px; overflow:hidden; border:1px solid var(--line-2); aspect-ratio:4/5; background:var(--bg-3)}
.incl-img img{width:100%; height:100%; object-fit:cover}
/* ==== BLOCK: INCLUDED — end ==== */


/* ==== BLOCK: GALLERY — start ====
   Квадратная плиточная галерея фото. */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gal a{border-radius:10px; overflow:hidden; aspect-ratio:1/1; background:var(--bg-3)}
.gal img{width:100%; height:100%; object-fit:cover; transition:.5s}
.gal a:hover img{transform:scale(1.07)}
/* ==== BLOCK: GALLERY — end ==== */


/* ==== BLOCK: FAQ — start ====
   Аккордеон вопросов и ответов на нативных <details>. */
.faq{max-width:820px; margin:0 auto}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; font-family:var(--disp); text-transform:uppercase; letter-spacing:.02em; font-size:19px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pl{color:var(--red); font-size:24px; transition:.2s; flex:none}
.qa[open] summary .pl{transform:rotate(45deg)}
.qa p{padding:0 4px 22px; color:var(--muted); font-size:15px; max-width:68ch}
/* ==== BLOCK: FAQ — end ==== */


/* ==== BLOCK: INQUIRY FORM — start ====
   Блок заявки: текст слева, карточка-форма справа, поля, чипы, успех. */
.inq{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line-2);
  background:linear-gradient(120deg,#1a0d0a,#0c0a09 60%)}
.inq::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 100% 0%, rgba(226,59,46,.30), transparent 55%),
    radial-gradient(60% 100% at 0% 100%, rgba(230,169,72,.18), transparent 55%)}
.inq-in{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:52px 50px; align-items:center}
.inq-in h2{font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:clamp(30px,4vw,50px); line-height:.95}
.inq-in p{color:var(--muted); margin-top:14px; font-size:16px; max-width:42ch}
.inq-in .ph{margin-top:22px; font-family:var(--disp); font-size:24px}
.inq-in .ph span{display:block; font-size:12px; letter-spacing:.16em; color:var(--muted-2); text-transform:uppercase}

.fcard{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:26px 24px}
.field{margin-bottom:16px}
.field > label{display:block; font-family:var(--disp); text-transform:uppercase; letter-spacing:.14em;
  font-size:11.5px; color:var(--muted-2); margin-bottom:8px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:9px 13px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink);
  cursor:pointer; font-family:var(--body); font-size:13px; transition:.15s}
.chip:hover{border-color:rgba(255,255,255,.34)}
.chip.active{background:var(--red); border-color:var(--red); color:#fff}
.inp,.sel,.ta{width:100%; padding:13px 14px; background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:8px; color:var(--ink); font-family:var(--body); font-size:15px; transition:.15s}
.inp:focus,.sel:focus,.ta:focus{outline:none; border-color:var(--red)}
.ta{resize:vertical; min-height:64px}
.sel{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b3a499' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fcard .btn{width:100%; justify-content:center; padding:16px; margin-top:4px}
.reassure{margin-top:12px; font-size:12px; color:var(--muted-2); text-align:center}
.ok{text-align:center; padding:10px 0}
.ok .check{width:66px; height:66px; border-radius:50%; background:rgba(94,200,120,.14);
  border:1px solid rgba(94,200,120,.4); color:#74d68a; display:flex; align-items:center; justify-content:center;
  font-size:30px; margin:4px auto 16px}
.ok h3{font-family:var(--disp); text-transform:uppercase; font-size:26px; margin-bottom:8px}
.ok p{color:var(--muted); font-size:14.5px}
.summary{background:var(--bg-3); border:1px solid var(--line-2); border-radius:10px; padding:14px 16px;
  text-align:left; margin:18px 0; font-size:13.5px}
.summary div{display:flex; justify-content:space-between; padding:4px 0}
.summary .k{color:var(--muted-2)}
/* ==== BLOCK: INQUIRY FORM — end ==== */


/* ==== BLOCK: RESPONSIVE (events) — start ==== */
@media (max-width:980px){
  .incl-wrap{grid-template-columns:1fr; gap:30px}
  .incl-img{order:-1; aspect-ratio:16/10}
  .steps{grid-template-columns:repeat(2,1fr)}
  .inq-in{grid-template-columns:1fr; gap:28px; padding:40px 30px}
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .nav{height:64px}
  .sec{padding:60px 0}
  .formats{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
}
/* ==== BLOCK: RESPONSIVE (events) — end ==== */