/* ============================================================
   Nap Hostel: a Csoportok oldal saját stílusa (2026-10-20)
   A fooldal.css, a szallasok.css (sz-hero, sz-steps) és a
   floorplan.css (alaprajz) elemeire épít.
   ============================================================ */

/* ---------- Nyitókép: a CSOPORTOKNAK hosszabb szó, mint a SZÁLLÁSOK ---------- */
.page-csoportok .sz-hero-text { max-width: 1200px; }
.page-csoportok .sz-hero h1 { font-size: clamp(30px, min(9vw, 13vh), 120px); }
.page-csoportok .sz-hero-lead { max-width: 640px; }

/* ---------- Kapacitás ---------- */
.cs-cap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cs-cap div { background: var(--paper-bright); border: 3px solid var(--ink); padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.cs-cap b { font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 1; }
.cs-cap span { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; }
.cs-cap small { font-size: 14px; color: var(--ink-soft); line-height: 1.4; }
.cs-cap .cs-cap-total { background: var(--ink); color: var(--paper-bright); }
.cs-cap .cs-cap-total small { color: var(--paper-deep); }
.cs-cap .cs-cap-total b { color: var(--stamp-bright, #ff5a3c); }

/* Az alaprajz a fo-section szélességéhez igazodik */
.cs-plan .floorplan-section { padding: 0; max-width: none; }

/* ---------- Ajánlatkérés lépései: 4 oszlop ---------- */
.cs-steps { grid-template-columns: repeat(4, 1fr); }

/* ---------- Lemondás ---------- */
.cs-cancel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-cancel div { background: var(--paper-bright); border: 3px solid var(--ink); border-top-width: 10px; padding: 18px 20px; }
.cs-cancel div:nth-child(2) { border-top-color: #c8862c; }
.cs-cancel div:nth-child(3) { border-top-color: var(--stamp); }
.cs-cancel dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.cs-cancel dd { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.1; text-transform: uppercase; }

/* ---------- Űrlap ---------- */
.cs-form-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.cs-form-intro p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.cs-form { background: var(--paper-bright); border: 3px solid var(--ink); box-shadow: 6px 6px 0 0 var(--ink); padding: 26px; display: grid; gap: 16px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cs-field input, .cs-field select, .cs-field textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; min-width: 0; width: 100%; box-sizing: border-box; }
.cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { outline: 3px solid var(--stamp); outline-offset: 1px; }
.cs-consent { font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.cs-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--stamp); }
.cs-form .btn { justify-self: start; cursor: pointer; }
.cs-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-msg { padding: 14px 16px; border: 3px solid var(--ink); font-size: 16px; line-height: 1.5; }
.cs-msg[hidden] { display: none; }
.cs-msg--ok { background: #e7f3e3; border-color: #2f6b2a; }
.cs-msg--hiba { background: #fff3e0; border-color: var(--stamp); }

/* ---------- Tördelés ---------- */
@media (max-width: 1100px) {
  .cs-cap { grid-template-columns: 1fr 1fr; }
  .cs-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .cs-form-wrap { grid-template-columns: 1fr; gap: 20px; }
  .cs-cancel { grid-template-columns: 1fr; }
  .cs-form { padding: 18px; }
}
@media (max-width: 600px) {
  .cs-cap, .cs-steps, .cs-row { grid-template-columns: 1fr; }
  .cs-cap b { font-size: 44px; }
}