/* ==========================================================================
   CONTACT PAGE — additional styles
   Loaded after style.css
   ========================================================================== */

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative;
  padding:96px 0 84px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
  overflow:hidden;
}
.page-hero::after{
  content:'';
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,57,70,.22),transparent 68%);
  pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; max-width:800px; }
.page-hero h1{ color:#fff; margin-bottom:16px; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; line-height:1.15; }
.page-hero p{ color:rgba(255,255,255,.80); font-size:1.06rem; margin:0; max-width:62ch; }

.breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.62); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.78); transition:color var(--t-fast); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span[aria-hidden]{ color:var(--accent); font-size:1.05rem; }

/* =========================================================
   QUICK CONTACT CARDS
   ========================================================= */
.contact-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.contact-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 26px;
  text-align:center;
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.contact-card::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  width:0; height:3px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width var(--t-slow);
}
.contact-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh);
  border-color:transparent;
}
.contact-card:hover::before{ width:100%; }

.contact-card__icon{
  display:grid;
  place-items:center;
  width:58px; height:58px;
  margin:0 auto 20px;
  border-radius:16px;
  background:linear-gradient(150deg,var(--navy),var(--navy-2));
  box-shadow:0 12px 26px rgba(11,31,51,.20);
  transition:transform var(--t), background var(--t), box-shadow var(--t);
}
.contact-card:hover .contact-card__icon{
  transform:translateY(-4px) rotate(-5deg);
  background:linear-gradient(150deg,var(--accent),#A81F2B);
  box-shadow:0 14px 30px rgba(230,57,70,.32);
}
.contact-card__icon svg{
  width:26px; height:26px;
  fill:none; stroke:#fff; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.contact-card h3{
  font-size:1.02rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 12px;
}
.contact-card p{
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 12px;
  line-height:1.6;
}
.contact-card p a{
  color:var(--navy);
  font-weight:500;
  transition:color var(--t-fast);
}
.contact-card p a:hover{ color:var(--accent); }
.contact-card__note{
  display:block;
  font-size:.74rem;
  color:var(--muted-light);
  letter-spacing:.04em;
  margin-top:6px;
}

/* =========================================================
   MAIN CONTACT LAYOUT (info + form)
   ========================================================= */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:56px;
  align-items:start;
}

/* ----- LEFT: Info ----- */
.contact-info h2{
  font-size:clamp(1.5rem,2.4vw,2rem);
  margin-bottom:16px;
}
.contact-info > p{
  font-size:.98rem;
  line-height:1.8;
  margin-bottom:32px;
  color:var(--muted);
}

.contact-info__list{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-bottom:34px;
}
.contact-info__list li{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.contact-info__icon{
  flex:none;
  display:grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:12px;
  background:rgba(230,57,70,.09);
  border:1px solid rgba(230,57,70,.18);
}
.contact-info__icon svg{
  width:20px; height:20px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-info__list strong{
  display:block;
  font-family:var(--font-head);
  font-size:.92rem;
  color:var(--navy);
  margin-bottom:4px;
}
.contact-info__list span{
  display:block;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.6;
}
.contact-info__list a{ color:var(--navy-2); }
.contact-info__list a:hover{ color:var(--accent); }
.contact-info__list em{
  font-style:normal;
  font-size:.78rem;
  color:var(--muted-light);
}

/* ----- Registration block ----- */
.contact-info__reg{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 28px;
}
.contact-info__reg h3{
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 18px;
  position:relative;
  padding-bottom:12px;
}
.contact-info__reg h3::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:32px; height:2px;
  background:var(--accent);
  border-radius:2px;
}
.contact-info__reg ul{
  display:grid;
  gap:10px;
}
.contact-info__reg li{
  font-size:.86rem;
  color:var(--muted);
  line-height:1.55;
}
.contact-info__reg li span{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:600;
  color:var(--navy);
  letter-spacing:.05em;
  min-width:82px;
}

/* ----- RIGHT: Form ----- */
.contact-form-wrap__note{
  font-size:.92rem;
  color:var(--muted);
  margin:0 0 26px;
}

/* =========================================================
   MAP SECTION
   ========================================================= */
.contact-map{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:44px;
  align-items:center;
  margin-top:24px;
}
.contact-map__frame{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-lg);
  background:#e9eef3;
  aspect-ratio:16 / 11;
}
.contact-map__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.contact-map__info h3{
  font-size:clamp(1.3rem,2vw,1.7rem);
  margin-bottom:14px;
}
.contact-map__info p{
  font-size:.96rem;
  line-height:1.8;
  margin-bottom:18px;
}
.contact-map__info .check-list{ margin:0 0 28px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .page-hero{ padding:84px 0 72px; }
  .contact-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .contact-layout{ grid-template-columns:1fr; gap:48px; }
  .contact-map{ grid-template-columns:1fr; gap:34px; }
  .contact-map__frame{ aspect-ratio:16 / 10; }
}

@media (max-width:768px){
  .page-hero{ padding:72px 0 62px; }
  .page-hero h1{ font-size:clamp(1.6rem,6vw,2.2rem); }
  .page-hero p{ font-size:.96rem; }

  .contact-card{ padding:26px 22px; }
  .contact-card__icon{ width:52px; height:52px; }
  .contact-card__icon svg{ width:22px; height:22px; }

  .contact-info__reg{ padding:22px 22px; }
  .contact-info__list{ gap:20px; }
}

@media (max-width:560px){
  .page-hero{ padding:62px 0 54px; }
  .breadcrumb{ font-size:.76rem; margin-bottom:14px; }

  .contact-cards{ grid-template-columns:1fr; }
  .contact-card{ text-align:left; }
  .contact-card__icon{ margin-left:0; }

  .contact-info__icon{ width:42px; height:42px; }
  .contact-info__icon svg{ width:18px; height:18px; }

  .contact-info__reg li span{ display:block; min-width:0; }
}