/* ==========================================================================
   OPTIMUM AUTÓSISKOLA — kapcsolat.css  (v3 · design-system.md 3. kiadás)
   A KAPCSOLAT oldal (kapcsolat.html) egyedi stílusai. A közös komponensek
   (gomb, kártya, pilla, űrlap-elemek, média-hely, morzsamenü) a base.css-ben
   élnek; itt csak az oldal elrendezése és néhány oldal-specifikus elem van.

   Szekciók:
     1. Oldal-fejléc (szövegblokk + 4:3 loop-videó helye)
     2. Kapcsolati rács (űrlap-kártya + Elérhetőségeink + Nyitvatartás)
     3. Űrlap-kiegészítések (honeypot, matrica-jelölőnégyzet)
     4. Nyitvatartás élő jelzéssel (main.js · 6.)
     5. Térkép matrica-keretben + a bejárat 4:5 fotóhelye
     6. Média-poszterek ehhez az oldalhoz (desk, door)
   ========================================================================== */


/* 1. OLDAL-FEJLÉC (első képernyő) --------------------------------------------
   A főoldal hősének mintájára (bar.md 1.): teljes képernyős fehér sáv, a
   tartalom függőlegesen középen. CSAK egy szövegblokk (cím, bevezető, két
   gomb) és egy 4:3-as média-hely — a következő szekció a hajtás alatt indul.
   Asztalon: középre zárt pár, balra a szöveg-oszlop (max. 31rem), jobbra a
   ~640px széles keret, köztük 64px; a hős 100svh − 96px magas, a pár
   alulra zárva, így a következő kártya a hajtásnál indul, 96px levegővel.
   900px alatt a keret kerül felülre, alatta
   a középre zárt szöveg (mint a főoldal mobil hőse). */
.contact-hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--nav-h);
  background: var(--paper);
}
.contact-hero__inner {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-7);
}
.contact-hero__media { order: -1; width: 100%; }
.contact-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  text-align: center;
}
/* Display-szerep: mobilon 34px, asztalon 52px; kétsoros, kétszínű cím */
.contact-hero__text h1 { font-size: 2.125rem; line-height: 1.1; }
.contact-hero__text h1 > span { display: block; }
.contact-hero__lead {
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Két, egymás alatti, azonos szélességű gomb (bar.md 1., a referencia-minta):
   üzenet + útvonal. A hívás a fejléc „Hívjon minket” linkjén van, ezért a hős
   nem ismétli meg. */
.contact-hero__actions {
  display: grid;
  width: 100%;
  max-width: 340px;
  margin-top: var(--space-6);
}
.contact-hero__actions .btn { width: 100%; }
@media (min-width: 600px) and (max-width: 899px) {
  .contact-hero__inner { gap: var(--space-6); padding-block: var(--space-6) var(--space-8); }
  .contact-hero__media { max-width: 600px; }
}
@media (min-width: 900px) {
  /* Asztalon a hős a hajtás előtt egy szekció-térrel ér véget: így a következő
     kártya pontosan a hajtásnál indul, az első képernyőn csak a hős van. */
  .contact-hero {
    min-height: calc(100vh - var(--space-10));
    min-height: calc(100svh - var(--space-10));
  }
  /* A hős utáni szekció felső tere 96px (bar.md 1.: 80–120px) */
  .contact-section { padding-top: var(--space-10); }
  .contact-hero__inner {
    grid-template-columns: minmax(0, 31rem) minmax(0, 640px);
    justify-content: center;
    align-items: center;
    justify-items: stretch;
    column-gap: var(--space-8);
    /* A többlet-levegő FELÜL van (saját felső belső tér), alul 0: a hős alja
       és a következő kártya között csak a szekció 96px-es felső tere marad
       (bar.md 1.: 80–120px). */
    align-content: end;
    padding-block: var(--space-7) 0;
  }
  .contact-hero__media {
    order: 0;
    /* Alacsony ablakban se lógjon ki az első képernyőből
       (fejléc + szekció-tér + 48px felső tér + ~40px képaláírás) */
    max-width: min(640px, calc((100svh - var(--nav-h) - var(--space-10) - 48px - 44px) * 4 / 3));
    justify-self: start;
  }
  .contact-hero__text { align-items: flex-start; max-width: none; text-align: left; }
  .contact-hero__text h1 { font-size: 3.25rem; }   /* 52px */
  .contact-hero__actions { margin-top: var(--space-7); }
}
@media (min-width: 900px) and (max-width: 1119px) {
  .contact-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7); }
  .contact-hero__text h1 { font-size: 3rem; }      /* 48px */
}


/* Szekciók alsó tere: mobilon is legalább 88px (bar.md 1.: 80–120px; a
   base.css --section-y mobilon csak 56px). Ez a kártyarács és a térkép-
   szekció, illetve a térkép-szekció és a vörös CTA-sáv közti levegő. */
.contact-section,
.map-section { padding-bottom: max(var(--section-y), 5.5rem); }


/* 2. KAPCSOLATI RÁCS -------------------------------------------------------
   Információsűrű szekció: matricakártya-rács (bar.md 5.). Balra az űrlap,
   jobbra két kártya. 1024px alatt egymás alatt. */
.contact {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-7); }
}

/* Kártyák belső tere: 20–32px (design-system.md · Kártya) */
.contact__form-card,
.info-card { padding: clamp(1.25rem, 0.75rem + 2vw, 2rem); }

/* A kártya-cím alcím-szerep (22–28px / 700, --ink), mint a testvér-kártyák
   h3-ai (design-system.md · Alcím: 700, 19–32px) — nem display */
.contact__card-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contact__form-intro { margin-top: var(--space-2); margin-bottom: var(--space-6); }
/* A lábléc „Jelentkezem” gombja a #kapcsolat-form-ra ugrik: a kártya címe is látsszon */
#kapcsolat-form { scroll-margin-top: 7.5rem; }

.contact__info { display: grid; gap: var(--space-5); }
.info-card h3 { margin-bottom: var(--space-5); }

/* Elérhetőségek: ikoncsempe + NAGYBETŰS címke + érték */
.info-list { display: grid; gap: var(--space-5); }
.info-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.info-list__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--brand-wash);
  border: 2px solid var(--line);
  box-shadow: var(--lip);
  color: var(--brand-lip);          /* dekor-ikon */
}
.info-list__icon svg { width: 22px; height: 22px; }
.info-list__body { display: flex; flex-direction: column; min-width: 0; }
.info-list__label {
  font-size: var(--fs-label);       /* Felirat: 13px / 800 UPPERCASE, --ink */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.info-list__value {
  margin-top: var(--space-1);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.info-list__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  font-size: var(--fs-body);
}
.info-list__line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* érintési cél */
  font-weight: 700;
  min-width: 0;
}
.info-list__who { color: var(--ink-soft); }


/* 3. ŰRLAP-KIEGÉSZÍTÉSEK --------------------------------------------------- */
/* Honeypot (spam-csapda) — látogató számára láthatatlan, képernyőn kívül.
   display:none-t szándékosan nem használunk: azt a botok is kiszűrik. */
.hp { position: absolute; left: -9999px; top: auto; }
.form .hp input { width: 240px; }

/* A kötelező-jelölő „*” 19px alatti szöveg → --ink (≥ 4,5:1), nem piros */
.form .req,
.form .form__group label .req { color: var(--ink); }

/* Segédszöveg és megjegyzés: 15–16px (űrlap-segédszöveg, design-system.md) */
.form__hint { font-size: var(--fs-foot); }
.form__note { font-size: var(--fs-note); text-align: center; max-width: none; }

/* Matrica-jelölőnégyzet: a natív checkbox (name="consent", required) átlátszóan
   kitölti a 44×44 px-es érintési felületet; a látható 30px-es négyzet a
   .check__box — 2px keret + perem, bejelölve vörös kitöltés fehér pipával. */
.form__check { align-items: flex-start; gap: var(--space-2); }
.check {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin: -9px 0 -9px -8px;         /* a négyzet az inputok bal élén, az első sor közepén */
}
.form .check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.check__box {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);  /* input-sugár: 12px */
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: var(--lip);
  color: transparent;
  transition: background-color var(--transition), border-color var(--transition);
}
.check__box svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .check:hover input:not(:checked) + .check__box { background: var(--paper-2); }
}
.check input:checked + .check__box {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: var(--lip-brand);
  color: #fff;
}
.check input:focus-visible + .check__box { outline: 3px solid var(--accent); outline-offset: 3px; }
.check input:user-invalid + .check__box { border-color: var(--danger); }
.form__check label { cursor: pointer; color: var(--ink-soft); }

/* Szövegközi link a beleegyezésben: nagyobb (láthatatlan) érintési felület,
   a sorköz nem változik */
.form__check .link { padding-block: 11px; }


/* 4. NYITVATARTÁS — élő „nyitva / zárva” jelzés ----------------------------
   A main.js a #open-status data-open értékét és szövegét, valamint a mai nap
   .is-today osztályát állítja. */
.hours__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.info-card.hours h3 { margin-bottom: 0; }

/* Állapot-pilla: 13px / 800 UPPERCASE --ink felirat + színes „lámpa” */
.hours__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0.3125rem 0.75rem;
  font-size: var(--fs-label);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lip);
  margin-bottom: 4px;
  white-space: nowrap;
}
.hours__status[hidden] { display: none; }   /* ha a mai nyitvatartás nem értelmezhető */
.hours__status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);   /* jelzőlámpa-ikon */
  background: var(--danger);
  flex-shrink: 0;
}
.hours__status[data-open="true"] { background: var(--success-wash); }
.hours__status[data-open="true"]::before { background: var(--success); }

.hours__list { display: grid; }
.hours__list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-3);
  border-bottom: 2px solid var(--line);
  font-size: var(--fs-body);
}
.hours__list li:last-child { border-bottom: none; }
.hours__list li > span:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.hours__list li > span:last-child {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Zárt nap: csendesebb (--ink-soft, fehér alapon 4,48:1 — márka-kivétel) */
.hours__list li.is-closed > span:last-child { color: var(--ink-soft); font-weight: 500; }

/* A mai nap (main.js): --paper-2 sáv, bal oldalt 4px vörös jelölő, „MA” címke.
   A --paper-2 alapon minden szöveg --ink (a #777 itt nem érné el a 4,5:1-et). */
.hours__list li.is-today {
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  border-bottom-color: transparent;
}
.hours__list li.is-today::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: var(--radius-full);
  background: var(--brand);
}
.hours__list li.is-today > span { color: var(--ink); }
.hours__list li.is-today.is-closed > span:last-child { color: var(--ink); }
.hours__list li.is-today > span:first-child::after {
  content: "Ma";
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.0625rem 0.4375rem;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--ink);
  background: var(--brand-wash);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);  /* pilla: 12px */
}

.hours__note {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid var(--line);
  font-size: var(--fs-foot);        /* 16px */
  line-height: 1.5;
}

/* 5. TÉRKÉP + BEJÁRAT ------------------------------------------------------
   Asztalon: térkép (2fr) + bejárat 4:5 fotóhely (1fr). A térkép-keret 8:5-ös,
   így ugyanolyan magas, mint a 4:5-ös keret (2w : 1,25w = 8 : 5). */
.map-section { padding-top: 0; }
.map-section__head { margin-bottom: var(--space-6); }
.map-section__head h2 { margin-bottom: var(--space-3); }

.map-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .map-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* A térkép matrica-keretben: 2px --line keret + 4px perem + 20px sugár */
.map {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lip);
  overflow: hidden;
  margin-bottom: 4px;
}
.map__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border-bottom: 2px solid var(--line);
}
.map__address {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.map__address svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand-lip); }
.map__link svg { width: 18px; height: 18px; }
.map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;   /* korábban inline style volt — a szigorú CSP miatt került ide */
}
@media (min-width: 900px) {
  .map { aspect-ratio: 8 / 5; }
  .map iframe { flex: 1 1 0; height: auto; min-height: 0; }
}
@media (max-width: 599px) {
  .map__bar { padding: var(--space-3) var(--space-4); }
  .map__link.btn { width: 100%; padding-inline: var(--space-3); gap: 6px; font-size: var(--fs-nav); white-space: nowrap; }
  .map__link svg { width: 16px; height: 16px; }
}
@media (max-width: 899px) {
  .map-layout__media { max-width: 460px; }
}


/* 6. MÉDIA-POSZTEREK ehhez az oldalhoz (assets/media-art/) ------------------
   desk (4:3, kitöltő): irodai pult — csörgő asztali telefon, jelentkezési lap
   csiptetős táblán, cserepes növény, falióra.
   door (4:5, kitöltő): az iroda bejárata — vörös ajtó, cégtábla a kormány-jellel,
   kék „8”-as házszámtábla, bokor. */
.media-slot__poster[data-art="desk"] { background-image: url("../assets/media-art/desk.svg?v=202610210915"); }
.media-slot__poster[data-art="door"] { background-image: url("../assets/media-art/door.svg?v=202610210915"); }

/* Szabadság (2026-10-21): üzenet a nyitvatartás fölött, amíg az iroda szabadság miatt zárva lesz / van */
.hours__szabadsag {
  margin: 0 0 var(--space-4);
  padding: 0.625rem 0.875rem;
  background: var(--amber-wash);
  border: 2px solid var(--amber);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.hours__szabadsag[hidden] { display: none; }
.hours__szabadsag-szoveg { margin: 0; line-height: 1.4; color: var(--ink); }   /* a borostyán alapon a --ink-soft csak 4,0:1 */
.hours__szabadsag-szoveg strong { display: block; font-weight: 900; }
.hours__szabadsag-megj { display: block; margin-top: 4px; font-size: var(--fs-note); }