/* HDS — /kontakt/ : natywny, scoped .hds-contact. Pixel-perfect ze snapshotu.
   Tokeny (--g1, --card, --t1...) dziedziczone z main.css. Reveal globalny (.reveal). */

.hds-contact{overflow-x:hidden}
.hds-contact .w{max-width:1060px;margin:0 auto;padding:0 24px}
.hds-contact .gt{background:linear-gradient(160deg,var(--g1),var(--g2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hds-contact .k-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:100px;background:linear-gradient(160deg,rgba(158,122,255,0.12),rgba(254,139,187,0.12));border:1px solid rgba(158,122,255,0.2);font-size:var(--fs-200);font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--g1);margin-bottom:18px}
.hds-contact .k-badge svg{width:12px;height:12px}

/* ═══ HERO ═══ */
.hds-contact .k-hero{padding:var(--sp-sec) 0 var(--sp-sect);text-align:center;position:relative;overflow:hidden}
.hds-contact .k-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hds-contact .k-hero-bg canvas{width:100%;height:100%;opacity:0.35}
.hds-contact .k-hero-c{position:relative;z-index:1}
.hds-contact .k-hero h1{font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px}
.hds-contact .k-hero-sub{font-size:var(--fs-400);color:var(--t2);max-width:480px;margin:0 auto;line-height:1.6}
.hds-contact .k-hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.hds-contact .k-hero-cta .info-act{flex:0 0 auto}

/* ═══ MAIN GRID ═══ */
.hds-contact .k-main{padding:var(--sp-sect) 0 var(--sp-sec)}
.hds-contact .k-grid{display:grid;grid-template-columns:380px 1fr;gap:28px;align-items:start}

/* ═══ LEFT: Contact info ═══ */
.hds-contact .k-info{display:flex;flex-direction:column;gap:16px}
.hds-contact .info-card{
  border-radius:14px;background:var(--card);border:1.5px solid var(--brd);
  padding:22px;transition:border-color 0.3s,transform 0.3s;
  display:flex;align-items:flex-start;gap:16px;text-decoration:none;color:var(--t1);
}
.hds-contact .info-card:hover{border-color:var(--brd-h);transform:translateY(-3px)}
.hds-contact a.info-card:hover .info-ico{transform:scale(1.08)}
.hds-contact .info-ico{
  width:44px;height:44px;min-width:44px;border-radius:11px;
  background:linear-gradient(160deg,rgba(158,122,255,0.12),rgba(254,139,187,0.1));
  display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease;position:relative;
}
.hds-contact .info-ico svg{width:20px;height:20px;color:var(--g1)}
.hds-contact .info-ico::after{content:'';position:absolute;inset:-4px;border-radius:15px;border:1.5px solid rgba(158,122,255,0.1);opacity:0;transition:opacity 0.3s}
.hds-contact .info-card:hover .info-ico::after{opacity:1}
.hds-contact .info-body{display:flex;flex-direction:column;gap:3px}
.hds-contact .info-label{font-size:var(--fs-200);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--t3)}
.hds-contact .info-val{font-size:var(--fs-400);font-weight:600;color:var(--t1);line-height:1.4;word-break:break-word}
.hds-contact .info-hint{font-size:var(--fs-200);color:var(--t3);margin-top:1px}

/* hours mini card */
.hds-contact .info-hours{border-radius:14px;background:var(--card);border:1.5px solid var(--brd);padding:20px 22px}
.hds-contact .info-hours-title{font-size:var(--fs-200);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--t3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.hds-contact .info-hours-title svg{width:14px;height:14px;color:var(--g1)}
.hds-contact .hours-row{display:flex;justify-content:space-between;padding:6px 0;font-size:var(--fs-300);border-bottom:1px solid rgba(158,122,255,0.05)}
.hds-contact .hours-row:last-child{border-bottom:none}
.hds-contact .hours-day{color:var(--t2)}
.hds-contact .hours-time{font-weight:600;color:var(--t1)}
.hds-contact .hours-closed{color:var(--t3);font-weight:500}

/* quick action buttons */
.hds-contact .info-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-2)}
/* .info-act — styl w main.css (wspólny system przycisków) */
.hds-contact .info-act svg{width:15px;height:15px}

/* ═══ RIGHT: Form ═══ */
.hds-contact .form-wrap{border-radius:16px;background:var(--card);border:1.5px solid var(--brd);padding:32px 30px;position:relative;overflow:hidden}
.hds-contact .form-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.hds-contact .form-title{font-size:var(--fs-600);font-weight:800;margin-bottom:var(--sp-2);color:var(--t1)}
.hds-contact .form-sub{font-size:var(--fs-300);color:var(--t3);margin-bottom:24px;line-height:1.5}

.hds-contact .k-form{display:flex;flex-direction:column;gap:12px}
.hds-contact .k-field{
  width:100%;background:rgba(158,122,255,0.06);border:1.5px solid var(--brd);border-radius:10px;
  color:var(--t1);font-size:var(--fs-300);font-family:inherit;padding:14px 16px;
  transition:border-color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease;outline:none;-webkit-appearance:none;
}
.hds-contact .k-field::placeholder{color:var(--t3)}
/* Pierścień 0.32, nie 0.08: przy 8% obrys był niewidoczny, a `outline` jest tu
   wyłączony — nawigujący klawiaturą nie miał żadnego wskazania pola. */
.hds-contact .k-field:focus{border-color:var(--brd-h);background:rgba(158,122,255,0.1);box-shadow:0 0 0 3px rgba(158,122,255,0.32)}
.hds-contact textarea.k-field{min-height:120px;resize:vertical}
.hds-contact .k-consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-200);color:var(--t3);line-height:1.5;cursor:pointer}
.hds-contact .k-consent input{accent-color:var(--g1);width:16px;height:16px;min-width:16px;margin-top:1px}
/* .k-submit — styl w main.css (wspólny system przycisków) */
.hds-contact .k-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ═══ MAP ═══ */
.hds-contact .map-s{padding:var(--sp-sect) 0 var(--sp-sec)}
.hds-contact .map-s h2{font-size:var(--fs-800);font-weight:800;letter-spacing:-0.02em;margin-bottom:12px;text-align:center}
.hds-contact .map-sub{text-align:center;color:var(--t2);font-size:var(--fs-300);margin:0 auto 32px;max-width:400px}
.hds-contact .map-wrap{border-radius:16px;overflow:hidden;border:1.5px solid var(--brd);position:relative}
.hds-contact .map-wrap iframe{width:100%;height:400px;display:block;border:0;filter:brightness(0.7) contrast(1.1) saturate(0.3) hue-rotate(200deg);transition:filter 0.4s ease}
.hds-contact .map-wrap:hover iframe{filter:brightness(0.8) contrast(1.05) saturate(0.4) hue-rotate(200deg)}
.hds-contact .map-overlay{position:absolute;bottom:20px;left:20px;padding:16px 20px;border-radius:12px;background:rgba(21,18,39,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid var(--brd);z-index:2;max-width:280px}
.hds-contact .map-overlay-name{font-size:var(--fs-300);font-weight:700;color:var(--t1);margin-bottom:4px}
.hds-contact .map-overlay-addr{font-size:var(--fs-200);color:var(--t2);line-height:1.5}
.hds-contact .map-overlay-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:var(--fs-200);font-weight:700;color:var(--g1);text-decoration:none;transition:color 0.2s}
.hds-contact .map-overlay-link:hover{color:var(--g2)}
.hds-contact .map-overlay-link svg{width:12px;height:12px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:860px){
  .hds-contact .k-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .hds-contact .k-info{order:2}
  .hds-contact .form-wrap{order:1}
  .hds-contact .map-wrap iframe{height:300px}
  .hds-contact .map-overlay{position:static;margin:0;max-width:100%;border-radius:0 0 12px 12px;border-top:1px solid var(--brd)}
}
@media(max-width:480px){
  .hds-contact .info-actions{flex-direction:column}
}