/* ============================================================
   Thaleria — Contact page. Ported as-is from Claude Design "Full website WIP".
   ============================================================ */

.tl-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 980px) {
  .tl-contact-layout { grid-template-columns: 1fr; gap: var(--space-10); }
}

.tl-contact-form {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (max-width: 640px) { .tl-contact-form { padding: var(--space-6); } }

.tl-contact-form__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.tl-contact-form__head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.tl-contact-form__head p { color: var(--fg-2); font-size: 15px; line-height: 1.55; max-width: 56ch; }

.tl-contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .tl-contact-form__grid { grid-template-columns: 1fr; } }

.tl-contact-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tl-contact-consent:hover { border-color: var(--neutral-300); }
.tl-contact-consent input { position: absolute; opacity: 0; pointer-events: none; }
.tl-contact-consent__box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--neutral-300);
  border-radius: 4px;
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  margin-top: 1px;
}
.tl-contact-consent.is-on .tl-contact-consent__box { background: var(--navy-700); border-color: var(--navy-700); color: var(--neutral-0); }
.tl-contact-consent.is-error { border-color: var(--danger); background: rgba(217, 83, 79, 0.04); }
.tl-contact-consent__text a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; }
.tl-contact-consent__req { color: var(--danger); font-weight: var(--weight-semibold); }

.tl-contact-form__captcha-error { font-size: 13px; color: var(--danger); margin-top: -8px; }
.tl-contact-form__error {
  font-size: 14px; color: var(--danger);
  padding: var(--space-3) var(--space-4);
  background: rgba(217, 83, 79, 0.08);
  border: 1px solid rgba(217, 83, 79, 0.25);
  border-radius: var(--radius-md);
}

.tl-contact-form__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-1);
}
/* Shrinkable rather than pinned at its cap. At a fixed 36ch (~310px) the note
   plus the gap plus the 170px button came to 500px, three pixels more than the
   497px form column at desktop — so the row wrapped and the button dropped below
   the note at every width except 768, where the layout is still one column and
   the row is wider. Letting it shrink keeps them on one line wherever both fit;
   the 16ch basis is the floor at which wrapping is the better answer, which is
   what still stacks them on a phone. */
.tl-contact-form__submit-note {
  font-size: 13px;
  color: var(--fg-3);
  flex: 1 1 16ch;
  min-width: 0;
  max-width: 36ch;
  line-height: 1.45;
}
.tl-contact-form__submit-note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }

.tl-contact-form--sent { text-align: center; align-items: center; gap: var(--space-4); padding: var(--space-12); }
.tl-contact-form__sent-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--fg-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}
.tl-contact-form--sent h3 { font-size: 22px; font-weight: var(--weight-semibold); color: var(--fg-1); margin: 0; }
.tl-contact-form--sent p { color: var(--fg-2); max-width: 52ch; margin: 0 auto; }

.tl-contact-aside { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 110px; }
@media (max-width: 980px) { .tl-contact-aside { position: static; } }
.tl-contact-aside__panel {
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.tl-contact-aside__panel::after {
  content: "";
  position: absolute;
  inset: auto -40px -120px auto;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 165, 59, 0.18), transparent 65%);
  pointer-events: none;
}
/* Dark panel — only the colour differs from the base eyebrow. */
.tl-contact-aside__panel .tl-eyebrow { color: var(--neutral-300); }
.tl-contact-aside__title { margin-top: var(--space-3); font-size: 26px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--fg-on-dark); }
.tl-contact-aside__list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.tl-contact-aside__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.tl-contact-aside__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--orange-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tl-contact-aside__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--neutral-400); font-weight: var(--weight-semibold); margin-bottom: 4px; }
.tl-contact-aside__value { font-size: 14px; line-height: 1.55; color: var(--neutral-0); }
.tl-contact-aside__value a { color: var(--neutral-0); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); transition: border-color var(--dur-fast) var(--ease-out); }
.tl-contact-aside__value a:hover { border-color: var(--orange-500); color: var(--orange-500); }
.tl-contact-aside__social { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; }
.tl-contact-aside__social-row { display: inline-flex; gap: var(--space-3); margin-top: var(--space-3); }
.tl-contact-aside__social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--neutral-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tl-contact-aside__social-btn:hover { background: var(--orange-700); color: var(--navy-900); transform: translateY(-2px); }
.tl-contact-aside__other { background: var(--surface-card); border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: var(--space-8); }
.tl-contact-aside__other-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.tl-contact-aside__other-list li { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--space-4); border-bottom: 1px dashed var(--border-1); font-size: 14px; }
.tl-contact-aside__other-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.tl-contact-aside__other-list strong { font-weight: var(--weight-semibold); color: var(--fg-1); font-size: 15px; }
.tl-contact-aside__other-list span { color: var(--fg-2); }

.tl-contact-map { padding: 0 0 var(--space-24); }
.tl-contact-map__frame {
  position: relative;
  width: 100%;
  height: 480px;
  background: var(--surface-card);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
}
.tl-contact-map__iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.92); }
.tl-contact-map__shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-6);
  transition: background var(--dur-base) var(--ease-out);
}
.tl-contact-map__shield:hover { background: rgba(11, 21, 36, 0.04); }
.tl-contact-map__shield-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(11, 21, 36, 0.78);
  color: var(--neutral-0);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.tl-contact-map__shield:hover .tl-contact-map__shield-hint,
.tl-contact-map__shield:focus-visible .tl-contact-map__shield-hint { opacity: 1; transform: translateY(0); }
.tl-contact-map__shield svg { color: var(--orange-500); }
.tl-contact-map__frame.is-engaged .tl-contact-map__iframe { filter: saturate(1); }
.tl-contact-map__card {
  position: absolute;
  left: max(var(--gutter-md), calc(50% - var(--container-lg) / 2));
  bottom: var(--space-8);
  width: 360px;
  max-width: calc(100% - 2 * var(--gutter-sm));
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 2;
}
.tl-contact-map__card h3 { margin: 0; font-size: 22px; font-weight: var(--weight-semibold); color: var(--fg-1); letter-spacing: -0.01em; }
.tl-contact-map__card p { color: var(--fg-2); font-size: 14px; line-height: 1.55; margin: 0 0 var(--space-2); }
.tl-contact-map__card .tl-btn { align-self: flex-start; }
@media (max-width: 720px) {
  .tl-contact-map__frame { height: 380px; }
  .tl-contact-map__card { left: 50%; bottom: var(--space-4); transform: translateX(-50%); padding: var(--space-6); }
  .tl-contact-map__card h3 { font-size: 19px; }
}