/* =============================================================
   Contact Page — Page-level Styles
   Tema Piedrangular

   Sections:
     1. Contact Banner   (.contact-banner)
     2. CTA Floating Card (.contact-cta)
     3. Map              (.contact-map)

   NOTE: Form & feature styles (.contact-section, .contact-card,
   .contact-form, .contact-features, .form-field) live in
   assets/css/contact.css which is globally enqueued.

   CTA OVERLAP TECHNIQUE:
   ──────────────────────────────────────────────────────────────
   DOM order is preserved: contact-section → contact-cta → contact-map

   The CTA wrapper is collapsed to height: 0 so it contributes
   zero space to the document flow. Its child card overflows via
   position: relative + top: -50px, placing the card's center
   exactly on the seam between contact-section and contact-map.

   Visual result:
     ┌─────────────────────────────┐
     │     .contact-section        │  (blue bg, normal flow)
     │                             │
     │   ┌─────────────────────┐   │  ← top half of CTA card (inside blue)
     └───┤    .contact-cta     ├───┘  ← height: 0 seam (invisible boundary)
         │    __inner card     │      ← card spans the seam
     ┌───┤                     ├───┐  ← bottom half of CTA card (inside map)
     │   └─────────────────────┘   │
     │     .contact-map            │  (padding-top pushes iframe below card)
     └─────────────────────────────┘

   The contact-section gets extra padding-bottom so the card
   never overlaps actual section content.
   The contact-map gets padding-top equal to the card's lower half.
   ============================================================= */


/* =============================================================
   1. CONTACT BANNER
   ============================================================= */

.contact-banner {
    position: relative;
    min-height: 480px;
    background-color: var(--color-navy, #0a1f3d);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.contact-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(5, 18, 46, 0.88) 0%,
        rgba(5, 18, 46, 0.65) 55%,
        rgba(5, 18, 46, 0.45) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.contact-banner__inner {
    position: relative;
    z-index: 2;
    padding: 96px 0 72px;
}

.contact-banner__title {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0 0 28px;
}


/* =============================================================
   2. CONTACT SECTION — bottom padding override
   (defined in contact.css as padding: 5rem 0)
   We extend the bottom by 52px so the CTA card's upper half
   never sits over actual form/feature content.
   ============================================================= */

.contact-section {
    padding-bottom: calc(5rem + 52px);
}


/* =============================================================
   3. CTA FLOATING CARD
   ============================================================= */

/*
 * Wrapper: collapsed to zero layout height.
 * overflow: visible lets the card bleed out in both directions.
 * z-index: 10 stacks it above both neighbours.
 * pointer-events: none on the wrapper so the sections
 * underneath remain interactive; re-enabled on the card.
 */
.contact-cta {
    position: relative;
    z-index: 10;
    height: 0;          /* ← zero layout contribution              */
    overflow: visible;  /* ← card bleeds above AND below this seam  */
    padding: 0;
    background: transparent;
    pointer-events: none;
}

/*
 * Card: floats at the seam.
 * position: relative + top: -52px  → upper half (52 px) inside contact-section
 * The card's natural height (~104 px) means its lower half (52 px)
 * extends below the seam into the map's padding-top space.
 */
.contact-cta__inner {
    pointer-events: auto;

    /* Layout */
    position: relative;
    top: -52px;            /* pulls card UP into .contact-section  */
    max-width: 900px;
    margin: 0 auto;        /* horizontal centering inside container */

    /* Flex row */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: nowrap;     /* single row on desktop                 */

    /* Visual */
    background-color: #0b1c39;
    border-radius: 1rem;
    padding: 1.875rem 2.5rem;
    box-shadow:
        0  8px 24px rgba(0,  0,  0, 0.25),
        0 20px 60px rgba(0,  0,  0, 0.20);
}

/* ---------- CTA text ---------- */
.contact-cta__text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- Phone block ---------- */
.contact-cta__phone-wrap {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1 1 auto;          /* takes remaining space between text and button */
    justify-content: center;
}

.contact-cta__phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    color: #ffffff;
    flex-shrink: 0;
}

.contact-cta__phone-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.contact-cta__phone-number {
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.2s;
}

.contact-cta__phone-number:hover {
    color: rgba(255, 255, 255, 0.80);
}

.contact-cta__subtext {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

/* ---------- Button ---------- */
.contact-cta__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.875rem;
    background-color: var(--color-primary, #1a4ddb);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s, transform 0.15s;
}

.contact-cta__btn:hover {
    background-color: #1540c0;
    transform: translateY(-1px);
}


/* =============================================================
   4. MAP SECTION
   ============================================================= */

/*
 * z-index: 1 keeps the map below the CTA card (z-index: 10).
 * padding-top: 104px  = card height (≈ 104 px) so the iframe
 * starts well below the card's lower edge.
 */
.contact-map {
    position: relative;
    z-index: 1; 
    line-height: 0;        /* eliminates the gap below the iframe  */
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 500px;
    border: 0;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

/* ---- Tablet (≤ 860 px) ----------------------------------------
   Card wraps to two rows; it grows taller (~180 px).
   Adjust top offset and map padding accordingly.
   ---------------------------------------------------------------- */
@media (max-width: 860px) {

    .contact-cta__inner {
        flex-wrap: wrap;          /* allow items to stack             */
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.5rem 1.75rem;
        top: -60px;               /* pull up a bit more for taller card */
        max-width: calc(100% - 3rem);
    }

    .contact-cta__phone-wrap {
        justify-content: flex-start;
    }

    .contact-cta__text {
        white-space: normal;
    }

    .contact-section {
        padding-bottom: calc(5rem + 60px);
    }

    .contact-map {
        padding-top: 180px; /* taller card, more compensation        */
    }

    .contact-cta__btn {
        align-self: stretch;
        justify-content: center;
    }
}

/* ---- Mobile (≤ 520 px) ----------------------------------------
   Overlap is removed. CTA becomes a normal in-flow block.
   ---------------------------------------------------------------- */
@media (max-width: 520px) {
    
    /* Banner */
    .contact-banner {
        min-height: 360px;
    }

    .contact-banner__inner {
        padding: 80px 0 56px;
    }

    .contact-banner__title {
        font-size: 1.875rem;
    }

    /* Restore normal flow for contact-section */
    .contact-section {
        padding-bottom: 5rem; /* reset — no extra space needed       */
    }

    /* CTA: exit the collapsed/overlap mode, become normal block     */
    .contact-cta {
        height: auto;
        overflow: hidden;
        padding: 0 0 1.5rem;
        background-color: #6E97D9;
    }

    .contact-cta__inner {
        position: static;   /* ← remove relative+top offset         */
        top: auto;
        max-width: 100%;
        margin: 0 1rem;
        border-radius: 0.75rem;
        padding: 1.25rem 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .contact-cta__btn {
        width: 100%;
        justify-content: center;
    }

    /* Map: no compensation needed on mobile                         */
    .contact-map {
        padding-top: 0;
    }

    .contact-map iframe {
        height: 360px;
    }
}