/* ─── Panamar — Contactos page ──────────────────────────────────────── */

body.panamar-contactos {
    background: #eeeeee;
    margin: 0;
    color: #161616;
    font-family: 'Jost', system-ui, -apple-system, sans-serif;
}

/* ─── HERO ────────────────────────────────────────────────────────── */
.contactos-hero {
    position: relative;
    width: 100%;
    height: clamp(260px, 28vw, 360px);
    /* Sem overflow:hidden — o header está dentro do hero e o dropdown do menu
       estende-se para baixo; overflow:hidden cortava-o no fim do banner. A imagem
       é object-fit:cover com inset:0, por isso não transborda na mesma. */
    background: #1a1a1a;
}
.contactos-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.contactos-hero__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%),
        linear-gradient(rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
body.panamar-contactos .panamar-header {
    background: transparent !important;
    border-bottom: 0 !important;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
}
.contactos-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 0;
    text-align: center;
}
.contactos-hero__eyebrow {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0 0 12px;
}
.contactos-hero__title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 32px);
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.2px;
}

/* ─── BODY (2 cols: visite-nos / form) ─────────────────────────── */
.contactos-body {
    padding: 56px 24px 80px;
}
.contactos-body__inner {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    gap: 56px;
}
@media (min-width: 900px) {
    .contactos-body__inner { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ─── LEFT — Visite-nos ─────────────────────────────────────────── */
.contactos-info__title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 24px);
    color: #161616;
    margin: 0 0 32px;
}
.contactos-info__block {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid #cccccc;
}
.contactos-info__block--last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.contactos-info__label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #808080;
    margin: 0 0 12px;
}
.contactos-info__addr {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #161616;
    line-height: 1.7;
    margin: 0;
}

.contactos-info__hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contactos-info__hours-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
}
.contactos-info__hours-row > span:first-child { color: #161616; }
.contactos-info__hours-time { color: #808080; }

.contactos-info__direct {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contactos-info__direct-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #161616;
    text-decoration: none;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
    transition: opacity 0.2s ease;
}
.contactos-info__direct-link:hover,
.contactos-info__direct-link:focus { color: #161616; opacity: 0.6; }

.contactos-info__social {
    display: flex;
    gap: 16px;
}
.contactos-info__social-link {
    color: #303030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.contactos-info__social-link:hover,
.contactos-info__social-link:focus { color: #303030; opacity: 0.6; }
/* Constrain icon images (img or svg) to 20×20 regardless of file size */
.contactos-info__social-link img,
.contactos-info__social-link svg {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

/* ─── RIGHT — Form ────────────────────────────────────────────── */
.contactos-form__title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 24px);
    color: #161616;
    margin: 0 0 32px;
}

.contactos-form,
.contactos-form-success {
    background: #ffffff;
    border-radius: 8px;
    padding: 32px;
}

.contactos-form { display: flex; flex-direction: column; gap: 20px; }
.contactos-form__row--two {
    display: grid;
    gap: 20px;
}
@media (min-width: 520px) {
    .contactos-form__row--two { grid-template-columns: 1fr 1fr; }
}
.contactos-form__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contactos-form__label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #808080;
}
.contactos-form__input {
    border: 0;
    border-bottom: 1px solid #dddddd;
    padding: 10px 0;
    background: transparent;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: #161616;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.contactos-form__input:focus { border-bottom-color: #161616; }
.contactos-form__textarea { resize: none; line-height: 1.6; }

.contactos-form__disclaimer {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    color: #808080;
    line-height: 1.6;
    margin: 0;
}
.contactos-form__disclaimer a {
    color: #808080;
    text-decoration: underline;
}
.contactos-form__disclaimer a:hover { color: #161616; }

.contactos-form__submit {
    margin-top: 8px;
    padding: 14px 24px;
    border: 0;
    border-radius: 4px;
    background: #161616;
    color: #ffffff;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}
.contactos-form__submit:hover { background: #333333; }

/* Success state */
.contactos-form-success {
    text-align: center;
    padding: 40px;
}
.contactos-form-success svg { display: block; margin: 0 auto 16px; }
.contactos-form-success__title {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    color: #161616;
    margin: 0 0 8px;
}
.contactos-form-success__sub {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #808080;
    margin: 0;
}
.contactos-form-success__again {
    margin-top: 24px;
    background: transparent;
    border: 0;
    color: #161616;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.contactos-form-success__again:hover { opacity: 0.6; }

/* Map placeholder */
.contactos-map {
    margin-top: 24px;
    height: 200px;
    background: #d0cdc8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Mapa real (Google Maps embed): o iframe preenche a caixa (sem esta regra
   caía no tamanho default ~300×150 centrado). */
.contactos-map--live {
    display: block;
    padding: 0;
    overflow: hidden;
}
.contactos-map--live iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.contactos-map__label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: rgba(22,22,22,0.5);
    margin: 0;
}

/* ─── Form module skin (overrides #form_view CSS variables) ─────── */
/* The Form module renders into <div id="form_view"> with its own
   inline CSS using --fv-* variables. Override the variables here to
   match Panamar branding. Scope strictly to #form_view to avoid
   bleeding into other forms (e.g. backoffice). */
.contactos-body__inner #form_view {
    --fv-bg: #ffffff;
    --fv-text: #161616;
    --fv-muted: #808080;
    --fv-label: #808080;
    --fv-border: #dddddd;
    --fv-border-hover: #b3b3b3;
    --fv-border-focus: #161616;
    --fv-focus-ring: rgba(22, 22, 22, 0.08);
    --fv-error: #b00020;
    --fv-error-bg: #fff5f6;
    --fv-error-border: #f3c4cb;
    --fv-primary: #161616;
    --fv-primary-hover: #333333;
    --fv-primary-active: #000000;
    --fv-radius: 4px;
    --fv-radius-sm: 4px;
    --fv-font: 'Jost', system-ui, -apple-system, sans-serif;

    max-width: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

/* Hide the form module's default header — the page already has its own
   <h2 class="contactos-form__title"> above the form component, and we move
   the required-fields notice to just above the submit button (below). */
.contactos-body__inner #form_view .form-header {
    display: none;
}

/* Fields container — matches Figma p-8 (32px) + gap-5 (20px between rows) */
.contactos-body__inner #form_view .form-container {
    padding: 32px 32px 0;
    margin: 0;
}
.contactos-body__inner #form_view .form-field {
    margin-bottom: 20px;
}
.contactos-body__inner #form_view .form-field > label,
.contactos-body__inner #form_view .form-field > .label-wrapper label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 2px;
    color: #808080;
}
.contactos-body__inner #form_view input[type="text"],
.contactos-body__inner #form_view input[type="email"],
.contactos-body__inner #form_view input[type="tel"],
.contactos-body__inner #form_view input[type="date"],
.contactos-body__inner #form_view textarea,
.contactos-body__inner #form_view select {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    border: 0;
    border-bottom: 1px solid #dddddd;
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
    transition: border-color 0.2s ease;
}
.contactos-body__inner #form_view input:focus,
.contactos-body__inner #form_view textarea:focus,
.contactos-body__inner #form_view select:focus {
    border-bottom-color: #161616;
    box-shadow: none;
    outline: none;
}
.contactos-body__inner #form_view textarea {
    min-height: 100px;
    resize: vertical;
}

/* Required-fields + privacy disclaimer (rendered by views/Form/view.tpl,
   above the submit button). */
.contactos-body__inner #form_view .form-disclaimer {
    padding: 0 32px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: #808080;
    line-height: 1.6;
    margin-bottom: 8px;
}
.contactos-body__inner #form_view .form-disclaimer a {
    color: #808080;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.contactos-body__inner #form_view .form-disclaimer a:hover {
    color: #161616;
}

/* Submit button — Panamar primary, full width per Figma */
.contactos-body__inner #form_view .submit-container {
    padding: 8px 32px 32px;
    text-align: stretch;
}
.contactos-body__inner #form_view .submit-container button {
    width: 100%;
    padding: 14px 28px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    background: #161616;
    color: #ffffff;
    border: 1px solid #161616;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.contactos-body__inner #form_view .submit-container button:hover,
.contactos-body__inner #form_view .submit-container button:focus {
    background: #333333;
    color: #ffffff;
}
/* Replace the form module's default "Submeter" label with Panamar copy.
   Scoped to contactos only — other forms keep the module default. */
.contactos-body__inner #form_view .submit-container button span {
    font-size: 0;
    line-height: 0;
}
.contactos-body__inner #form_view .submit-container button span::after {
    content: 'Enviar mensagem';
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: normal;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .contactos-hero { height: clamp(200px, 50vw, 280px); }
    .contactos-body { padding: 40px 22px 60px; }
    .contactos-body__inner { gap: 40px; }
    .contactos-form, .contactos-form-success { padding: 24px; }
}