/* ==========================================================================
   Contact Page Styles
   Sav visual chrome (form fields, alerts, buttons, social-links) dolazi iz
   canonical komponenti: form.css, alert.css, button.css, social-link.css.
   Ovde su samo page-specific:
   - .contact-grid (2-col main + sidebar layout)
   - .section-card editorial chrome
   - .contact-info-item (icon + label + value pattern, page-specific)
   - .honeypot-field (anti-spam helper)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout: 2-col form + sidebar
   -------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(20px, 3vw, 32px);
    max-width: 1100px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Section card chrome — editorial (hairline border, no rounded, no shadow,
   warm-white BG). Konzistentno sa .ad-form-card / .calculator-card pattern-om.
   -------------------------------------------------------------------------- */
.section-card {
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
    padding: clamp(28px, 4vw, 40px);
    box-shadow: none;
}

.section-card .section-title {
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline-strong);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    line-height: 1.2;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Contact form
   Form fields / labels / inputs / errors / button — sve canonical iz
   components/form.css i components/button.css. .honeypot-field je sad
   takođe canonical u components/form.css (anti-spam form utility). */

/* --------------------------------------------------------------------------
   Contact info — icon + label + value rows
   -------------------------------------------------------------------------- */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Outlined editorial icon — isti pattern kao .feature-card__icon i
   .stat-icon. Hairline border + terracotta ikona u transparent
   background-u (ne solid cream/gray circle). */
.contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--terracotta);
    font-size: 0.95rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.contact-details .label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe);
}

.contact-details a,
.contact-details span:not(.label) {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    word-break: break-word;
}

.contact-details a:hover {
    color: var(--terracotta);
}

/* --------------------------------------------------------------------------
   Social links — canonical .social-link iz components/social-link.css
   (monochrome outlined circle, ne brand original boje). Page CSS ovde
   nema override-a.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        order: -1;
    }
}