/* ==========================================================================
   AMC Hungary — Kontakt page v1
   Loaded only on /kontakt (and /kapcsolat alias). All rules scoped under
   .kontakt-page. Mirrors the editorial register of home.css and about.css:
   Playfair Display headings, Inter body, champagne #C9A961 italic accent,
   single-hairline eyebrow pattern (no flanking lines), generous padding.
   ========================================================================== */

.kontakt-page {
    --kontakt-container: 1320px;
    --kontakt-container-px: clamp(20px, 4vw, 56px);
    --kontakt-section-y: clamp(5rem, 8vw, 8rem);
    --kontakt-section-y-large: clamp(7rem, 10vw, 10rem);
    --kontakt-ivory: #FAF7F2;
    --kontakt-white: #FFFFFF;
    --kontakt-dark: #1A1410;
    --kontakt-ink: #0E1412;
    --kontakt-text: #3A3530;
    --kontakt-muted: #6B6760;
    --kontakt-gold: #C9A961;
    --kontakt-gold-dark: #A88A47;
    --kontakt-border: #E8E2D5;
    --kontakt-error: #B85450;
    --kontakt-shadow: 0 24px 60px rgba(14, 20, 18, 0.08);
    --kontakt-motion-fast: var(--amc-motion-fast, 240ms);
    --kontakt-motion-medium: var(--amc-motion-medium, 480ms);
    --kontakt-motion-slow: var(--amc-motion-slow, 720ms);
    --kontakt-ease: var(--amc-ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
    background: var(--kontakt-ivory);
    color: var(--kontakt-ink);
    overflow-x: clip;
}

html:has(.kontakt-page),
body:has(.kontakt-page) {
    overflow-x: clip;
}

main:has(.kontakt-page) + .site-footer {
    margin-top: 0;
}

.kontakt-page *,
.kontakt-page *::before,
.kontakt-page *::after {
    box-sizing: border-box;
}

.kontakt-page :is(h1, h2, h3) {
    hyphens: none;
    overflow-wrap: normal;
    text-wrap: balance;
    word-break: normal;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0;
}

.kontakt-page p {
    text-wrap: pretty;
}

.kontakt-page em {
    color: var(--kontakt-gold);
    font-style: italic;
}

.kontakt-page a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color var(--kontakt-motion-fast) var(--kontakt-ease),
        border-bottom-color var(--kontakt-motion-fast) var(--kontakt-ease);
}

.kontakt-page a:hover {
    color: var(--kontakt-gold-dark);
    border-bottom-color: var(--kontakt-gold);
}

.kontakt-page a:focus-visible {
    outline: 2px solid var(--kontakt-gold);
    outline-offset: 4px;
    border-bottom-color: transparent;
}

.kontakt-container {
    width: min(100% - (var(--kontakt-container-px) * 2), var(--kontakt-container));
    margin-inline: auto;
}

/* Hairline + eyebrow shared (single hairline above eyebrow, no flanking lines) */
.kontakt-hairline {
    display: block;
    width: 60px;
    height: 1px;
    margin: 0 auto 1.5rem;
    background: var(--kontakt-gold);
}

.kontakt-eyebrow,
.kontakt-info-eyebrow,
.kontakt-form-eyebrow,
.kontakt-success-eyebrow,
.kontakt-closing-label,
.kontakt-info-label {
    margin: 0;
    color: var(--kontakt-gold-dark);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.35;
    text-transform: uppercase;
}

/* Reveal animation (mirrors home/about pattern) */
.kontakt-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--kontakt-motion-slow) var(--kontakt-ease),
        transform var(--kontakt-motion-slow) var(--kontakt-ease);
}

.kontakt-page.is-enhanced .kontakt-reveal.is-visible,
.kontakt-page:not(.is-enhanced) .kontakt-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Section 1 — Hero
   ========================================================================== */

.kontakt-hero {
    padding: clamp(6rem, 10vw, 9.5rem) var(--kontakt-container-px) clamp(3.5rem, 6vw, 5.5rem);
    background: var(--kontakt-white);
}

.kontakt-hero-inner {
    width: min(100%, 740px);
    margin-inline: auto;
    text-align: center;
}

.kontakt-hero .kontakt-eyebrow {
    margin: 0 auto 1.25rem;
    display: inline-block;
}

.kontakt-hero-title {
    margin: 0 auto 1.25rem;
    color: var(--kontakt-ink);
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    line-height: 1.06;
    max-width: 18ch;
}

.kontakt-hero-lead {
    max-width: 56ch;
    margin: 0 auto;
    color: var(--kontakt-text);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.7;
}

/* ==========================================================================
   Section 2 — Info + Form
   ========================================================================== */

.kontakt-main {
    padding: var(--kontakt-section-y) 0;
    background: var(--kontakt-ivory);
}

.kontakt-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(48px, 7vw, 96px);
    align-items: start;
}

/* Sticky left column — desktop only (≥1025px). The parent grid's
   align-items: start naturally bounds sticky to the .kontakt-main-grid
   row height, so the info aside releases at the section edge instead
   of carrying past the form. */
@media (min-width: 1025px) {
    .kontakt-info {
        position: sticky;
        top: 32px;
    }
}

/* Left column — info */
.kontakt-info-eyebrow {
    margin: 0 0 1.25rem;
}

.kontakt-info-title {
    margin: 0 0 1rem;
    color: var(--kontakt-ink);
    font-size: clamp(1.875rem, 3.2vw, 2.5rem);
    line-height: 1.1;
}

.kontakt-info-lead {
    max-width: 38ch;
    margin: 0 0 2.5rem;
    color: var(--kontakt-text);
    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    line-height: 1.65;
}

.kontakt-info-blocks {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 2.8vw, 2.25rem);
}

.kontakt-info-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--kontakt-border);
}

.kontakt-info-label {
    margin: 0;
    font-size: 0.68rem;
}

.kontakt-info-value {
    margin: 0;
    color: var(--kontakt-ink);
    font-family: var(--font-sans);
    font-size: 1.04rem;
    font-weight: 400;
    line-height: 1.55;
}

.kontakt-info-value a {
    color: var(--kontakt-ink);
    border-bottom: 1px solid var(--kontakt-border);
}

.kontakt-info-value-hours {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kontakt-info-hours-line {
    white-space: nowrap;
}

.kontakt-info-value a:hover {
    color: var(--kontakt-gold-dark);
    border-bottom-color: var(--kontakt-gold);
}

/* Right column — form card */
.kontakt-form-wrapper {
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--kontakt-white);
    border: 1px solid var(--kontakt-border);
    box-shadow: var(--kontakt-shadow);
}

.kontakt-form-eyebrow {
    margin: 0 0 1rem;
}

.kontakt-form-title {
    margin: 0 0 0.875rem;
    color: var(--kontakt-ink);
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
    line-height: 1.12;
}

.kontakt-form-lead {
    margin: 0 0 2rem;
    color: var(--kontakt-text);
    font-size: 0.98rem;
    line-height: 1.65;
    max-width: 48ch;
}

.kontakt-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kontakt-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kontakt-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kontakt-field label {
    color: var(--kontakt-ink);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kontakt-required {
    color: var(--kontakt-gold);
}

.kontakt-field input,
.kontakt-field textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--kontakt-ivory);
    border: 1px solid var(--kontakt-border);
    border-radius: 0;
    color: var(--kontakt-ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    transition:
        border-color var(--kontakt-motion-fast) var(--kontakt-ease),
        background-color var(--kontakt-motion-fast) var(--kontakt-ease),
        box-shadow var(--kontakt-motion-fast) var(--kontakt-ease);
}

.kontakt-field input::placeholder,
.kontakt-field textarea::placeholder {
    color: var(--kontakt-muted);
}

.kontakt-field input:hover,
.kontakt-field textarea:hover {
    border-color: rgba(201, 169, 97, 0.42);
}

.kontakt-field input:focus,
.kontakt-field textarea:focus {
    outline: none;
    background: var(--kontakt-white);
    border-color: var(--kontakt-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16);
}

.kontakt-field textarea {
    resize: vertical;
    min-height: 140px;
    font-family: var(--font-sans);
}

.kontakt-input-error {
    border-color: var(--kontakt-error) !important;
    background: rgba(184, 84, 80, 0.04) !important;
}

.kontakt-error {
    margin: 0;
    color: var(--kontakt-error);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
}

.kontakt-submit {
    align-self: flex-start;
    min-height: 48px;
    margin-top: 0.5rem;
    padding: 1rem 2.25rem;
    background: var(--kontakt-gold);
    border: 1px solid var(--kontakt-gold);
    color: var(--kontakt-dark);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color var(--kontakt-motion-fast) var(--kontakt-ease),
        border-color var(--kontakt-motion-fast) var(--kontakt-ease),
        color var(--kontakt-motion-fast) var(--kontakt-ease),
        transform var(--kontakt-motion-medium) var(--kontakt-ease),
        box-shadow var(--kontakt-motion-medium) var(--kontakt-ease);
}

.kontakt-submit:hover {
    background: var(--kontakt-gold-dark);
    border-color: var(--kontakt-gold-dark);
    color: var(--kontakt-dark);
    transform: translateY(-1px);
    box-shadow: var(--kontakt-shadow);
}

.kontakt-submit:active {
    transform: translateY(0);
}

.kontakt-submit[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Hide-when-[hidden]: needed because the explicit display: flex on .kontakt-form
   and .kontakt-success would otherwise outrank the UA `[hidden] { display: none }`
   rule (equal specificity, author CSS comes later in the cascade). */
.kontakt-form[hidden],
.kontakt-success[hidden] {
    display: none;
}

/* Success state */
.kontakt-success {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2.5rem 0 1rem;
    text-align: left;
}

.kontakt-success-headline:focus {
    outline: none;
}

.kontakt-success-headline:focus-visible {
    outline: 2px solid var(--kontakt-gold);
    outline-offset: 4px;
}

.kontakt-success.is-revealing {
    animation: kontaktSuccessFade 520ms var(--kontakt-ease) both;
}

@keyframes kontaktSuccessFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kontakt-success-headline {
    margin: 0;
    color: var(--kontakt-ink);
    font-family: var(--font-serif);
    font-size: clamp(1.625rem, 2.4vw, 2.125rem);
    line-height: 1.18;
    text-wrap: balance;
}

.kontakt-success-body {
    margin: 0;
    color: var(--kontakt-text);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 50ch;
}

.kontakt-success-body a {
    border-bottom: 1px solid var(--kontakt-border);
}

.kontakt-success-body a:hover {
    border-bottom-color: var(--kontakt-gold);
    color: var(--kontakt-gold-dark);
}

/* ==========================================================================
   Section 3 — Closing mantra
   ========================================================================== */

.kontakt-closing {
    padding: var(--kontakt-section-y-large) var(--kontakt-container-px);
    background: var(--kontakt-white);
    text-align: center;
}

.kontakt-closing-inner {
    width: min(100%, 760px);
    margin-inline: auto;
}

.kontakt-mantra {
    margin: 0 auto 1.75rem;
    color: var(--kontakt-ink);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.1;
}

.kontakt-mantra em {
    color: var(--kontakt-gold);
    font-style: italic;
}

.kontakt-closing-label {
    margin: 0;
    color: var(--kontakt-gold-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .kontakt-main-grid {
        grid-template-columns: 1fr;
        gap: clamp(40px, 6vw, 64px);
    }

    .kontakt-info-blocks {
        gap: 1.5rem;
    }

    .kontakt-info-lead {
        max-width: 60ch;
    }
}

@media (max-width: 720px) {
    .kontakt-hero {
        padding-top: clamp(4.5rem, 14vw, 6rem);
    }

    .kontakt-form-wrapper {
        padding: 1.75rem 1.5rem;
    }

    .kontakt-submit {
        align-self: stretch;
        width: 100%;
    }

    .kontakt-form {
        gap: 1.25rem;
    }
}

@media (max-width: 430px) {
    .kontakt-page {
        --kontakt-container-px: 18px;
    }

    .kontakt-hero-title {
        font-size: clamp(2.05rem, 9vw, 2.5rem);
    }

    .kontakt-info-block {
        padding-left: 1.25rem;
    }
}

/* ==========================================================================
   Mobile + tablet center-alignment pass (≤1023px)
   --------------------------------------------------------------------------
   Below 1024px the info aside + form card stack vertically (.kontakt-main-grid
   collapses to 1fr at 1024px). On a single column the info eyebrow / title /
   lead / contact blocks read as a centered editorial column, and the form
   card's eyebrow / title / lead / field labels do the same. Inputs and the
   submit button stay full-width — only the labels above each input are
   centered. Desktop (≥1024px) is untouched.
   ========================================================================== */
@media (max-width: 1023px) {
    .kontakt-info {
        text-align: center;
    }

    .kontakt-info-lead {
        margin-inline: auto;
    }

    .kontakt-info-blocks {
        align-items: center;
    }

    .kontakt-info-block {
        align-items: center;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--kontakt-border);
        padding-top: 1.25rem;
    }

    .kontakt-info-block:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .kontakt-form-block {
        text-align: center;
    }

    .kontakt-form-lead {
        margin-inline: auto;
    }

    .kontakt-field label {
        display: block;
        text-align: center;
    }

    .kontakt-success {
        text-align: center;
        align-items: center;
    }

    .kontakt-success-body {
        margin-inline: auto;
    }

    /* Keep the submit button full-width across the entire mobile + tablet
       range so it doesn't pin to the left edge of a centered form column. */
    .kontakt-submit {
        align-self: stretch;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kontakt-page *,
    .kontakt-page *::before,
    .kontakt-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .kontakt-page.is-enhanced .kontakt-reveal,
    .kontakt-page.is-enhanced .kontakt-reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}