/* ==========================================================================
   09-contact.css – Kontaktní stránka (kontakt.htm)
   Používá sdílené proměnné z 00-variables.css a komponenty z 01-global.css
   (.pk-eyebrow, .pk-btn). Header, závěrečný pás (.pk-mission) a patička
   se přebírají beze změny z 02-header.css, 07-mission.css a 08-footer.css.
   ========================================================================== */

.pk-contact {
  --pk-contact-bg: #F2F6F9;
  --pk-contact-aside-bg: #EAF1F6;
  --pk-contact-input-border: #A9B6C2;
  --pk-contact-error: #B3261E;
  --pk-contact-warning: #8A5A00;
}

/* --- Eyebrow s krátkou linkou vlevo (podle návrhu kontaktní stránky) ---- */

.pk-contact__eyebrow {
  padding-left: 3.6rem;
}

.pk-contact__eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.6rem;
  width: 3rem;
  height: 1px;
  background: #C3CFD9;
}

/* ==========================================================================
   B – HERO
   ========================================================================== */

.pk-contact__hero {
  position: relative;
  overflow: hidden;
  background-color: var(--pk-contact-bg);
  background-image: linear-gradient(180deg, #F3F7FA 0%, var(--pk-contact-bg) 100%);
}

.pk-contact__hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.pk-contact__hero-media {
  display: none;
}

.pk-contact__title {
  margin: 0.4rem 0 1.25rem;
  font-family: var(--pk-font-serif);
  font-size: var(--pk-fs-hero);
  font-weight: 500;
  line-height: var(--pk-lh-tight);
  letter-spacing: -0.022em;
  color: var(--pk-color-text);
}

.pk-contact__title-line {
  display: block;
}

.pk-contact__title-line--muted {
  color: var(--pk-color-muted-heading);
}

.pk-contact__subtitle {
  max-width: 38rem;
  margin: 0;
  font-size: var(--pk-fs-hero-lead);
  line-height: 1.65;
  color: var(--pk-color-text-body);
}

@media (min-width: 992px) {
  .pk-contact__hero {
    min-height: 438px;
  }
}

@media (min-width: 992px) {
  .pk-contact__hero-inner {
    padding-top: 3.4rem;
    padding-bottom: 3.5rem;
  }
}

/* Světlý obraz katedrály vpravo, plynule přechází do pozadí */

@media (min-width: 992px) {
  .pk-contact__hero-media {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(0px, calc((100% - 1720px) / 2));
    z-index: 1;
    width: min(48%, 820px);
  }
}

@media (min-width: 992px) {
  .pk-contact__hero-media picture, .pk-contact__hero-image {
    display: block;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 992px) {
  .pk-contact__hero-image {
    object-fit: cover;
    object-position: left center;
  }
}

@media (min-width: 992px) {
  .pk-contact__hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--pk-contact-bg) 0%, rgba(242, 246, 249, 0.6) 14%, rgba(242, 246, 249, 0) 34%);
  }
}

@media (min-width: 1721px) {
  .pk-contact__hero-media {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
  }
}

/* ==========================================================================
   C + D – ROZLOŽENÍ: formulář (≈ 60 %) + informační panel (≈ 40 %)
   ========================================================================== */

.pk-contact__layout {
  background-color: var(--pk-contact-bg);
  background-image: linear-gradient(90deg, var(--pk-contact-bg) 0%, var(--pk-contact-bg) 70%, #E2ECF2 100%);
}

/* Panely sahají až k okraji kontejneru (bez vnitřního odsazení) */

.pk-contact__layout-container {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 576px) {
  .pk-contact__layout-container {
    padding-left: var(--pk-gutter);
    padding-right: var(--pk-gutter);
  }
}

@media (min-width: 992px) {
  .pk-contact__layout-container {
    padding-left: calc(var(--pk-gutter) - 4px);
    padding-right: calc(var(--pk-gutter) - 4px);
  }
}

/* --- C – Formulář -------------------------------------------------------- */

.pk-contact__form-panel {
  height: 100%;
  padding: 2.25rem var(--pk-gutter) 1.5rem;
  background-color: var(--pk-color-white);
}

.pk-contact__heading {
  margin: 0 0 1.5rem;
  font-family: var(--pk-font-serif);
  font-size: clamp(2rem, 1.35rem + 1.9vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pk-color-text);
}

.pk-contact__form .row {
  --bs-gutter-y: 1.6rem;
}

.pk-contact__required-note {
  margin: -0.5rem 0 1.25rem;
  font-size: var(--pk-fs-xs);
  color: var(--pk-color-text-secondary);
}

.pk-contact__label {
  margin-bottom: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pk-color-text);
}

.pk-contact__req, .pk-contact__required-note span[aria-hidden] {
  color: var(--pk-contact-error);
}

.pk-contact__input {
  min-height: 54px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--pk-color-text);
  background-color: var(--pk-color-white);
  border: 1px solid var(--pk-contact-input-border);
  border-radius: var(--pk-radius);
}

.pk-contact__input::placeholder {
  color: #6E7B8B;
  opacity: 1;
}

.pk-contact__select:invalid {
  color: #6E7B8B;
}

.pk-contact__select option {
  color: var(--pk-color-text);
}

.pk-contact__input:focus {
  border-color: var(--pk-color-secondary);
  box-shadow: 0 0 0 3px rgba(81, 108, 131, 0.2);
}

.pk-contact__textarea {
  min-height: 192px;
  resize: vertical;
}

/* Chybový stav pole (Bootstrap .is-invalid) v barvách webu */

.pk-contact__input.is-invalid {
  border-color: var(--pk-contact-error);
}

.pk-contact__input.is-invalid:focus {
  border-color: var(--pk-contact-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

.pk-contact__error {
  margin-top: 0.4rem;
  font-size: var(--pk-fs-xs);
  color: var(--pk-contact-error);
}

/* Honeypot – mimo obrazovku, nedostupný pro běžné uživatele */

.pk-contact__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pk-contact__privacy {
  margin: 1.75rem 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pk-color-text-secondary);
}

.pk-contact__privacy a {
  color: var(--pk-color-primary);
  text-underline-offset: 3px;
}

.pk-contact__privacy a:hover {
  color: var(--pk-color-secondary);
}

.pk-contact__submit {
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-disabled-bg: var(--pk-color-secondary);
  --bs-btn-disabled-border-color: var(--pk-color-secondary);
  --bs-btn-disabled-color: var(--pk-color-white);
  --bs-btn-disabled-opacity: 1;
  min-width: 18rem;
  min-height: 60px;
  gap: 2.5rem;
}

/* --- Stavová zpráva po odeslání ----------------------------------------- */

.pk-contact__status:empty {
  display: none;
}

.pk-contact__status {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pk-color-text);
  background-color: #EEF4F8;
  border-left: 3px solid var(--pk-color-secondary);
}

.pk-contact__status:focus {
  outline: none;
}

.pk-contact__status:focus-visible {
  outline: 2px solid var(--pk-color-focus);
}

.pk-contact__status-title {
  margin: 0 0 0.25rem;
  font-family: var(--pk-font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
}

.pk-contact__status p:last-child {
  margin-bottom: 0;
}

.pk-contact__status--error {
  background-color: #FBF1F0;
  border-left-color: var(--pk-contact-error);
}

.pk-contact__status--warning {
  background-color: #FBF6EC;
  border-left-color: var(--pk-contact-warning);
}

/* --- Bezpečnostní informace pod formulářem ------------------------------ */

.pk-contact__safety {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem -0.6rem 0;
  padding: 1.1rem 0.6rem 0;
  font-size: 0.875rem;
  color: var(--pk-color-text-secondary);
  border-top: 1px solid #DCE3E9;
}

.pk-contact__safety .bi {
  font-size: 1.35rem;
  color: var(--pk-color-primary);
}

/* --- D – Informační panel ------------------------------------------------ */

.pk-contact__aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--pk-contact-aside-bg);
  background-image: linear-gradient(180deg, #E9F1F6 0%, #EDF3F7 100%);
}

.pk-contact__aside-body {
  padding: 2.25rem var(--pk-gutter) 0.5rem;
}

.pk-contact__aside .pk-contact__heading {
  margin-bottom: 1.1rem;
}

.pk-contact__aside-text {
  margin: 0;
  padding-bottom: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--pk-color-text-secondary);
  border-bottom: 1px solid #C6D3DE;
}

.pk-contact__info {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.4rem 0;
}

.pk-contact__info + .pk-contact__info {
  border-top: 1px solid #C6D3DE;
}

.pk-contact__info-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.65);
  font-size: 1.75rem;
  color: var(--pk-color-primary);
}

.pk-contact__info-title {
  margin: 0.35rem 0 0.3rem;
  font-family: var(--pk-font-serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--pk-color-text);
}

.pk-contact__info-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pk-color-text-secondary);
}

/* Fotografie otevřené Bible – dole v panelu, horní hrana se rozplývá */

.pk-contact__aside-media {
  display: block;
  margin-top: auto;
}

.pk-contact__aside-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 615 / 327;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
}

@media (min-width: 768px) {
  .pk-contact__form-panel {
    padding: 2.75rem 2.5rem 1.75rem;
  }
}

@media (min-width: 768px) {
  .pk-contact__aside-body {
    padding: 2.75rem 2.5rem 0.5rem;
  }
}

@media (min-width: 992px) {
  .pk-contact__form-panel {
    padding: 3.4rem 3.5rem 2rem;
  }
}

@media (min-width: 992px) {
  .pk-contact__aside-body {
    padding: 3.4rem 2.75rem 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .pk-contact__submit {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   E – Závěrečný pás: sdílená komponenta .pk-mission (07-mission.css)
   ========================================================================== */

.pk-contact__mission {
  padding-top: 2.25rem;
  padding-bottom: 2.5rem;
}