/* ===========================================================
   contact_v2.css — F4J Contact Us fragment ("Office Cards + Map Row")
   Prefix: cf- (contact fragment) — scoped to avoid collisions.
   =========================================================== */

.cf-wrap{
    --cf-navy:#31485a;
    --cf-blue:#3399d1;
    --cf-teal:#16999b;
    --cf-ink:#22323f;
    --cf-muted:#5c6f7e;
    --cf-hairline:#e6edf2;
    margin-block-start:8px;
    margin-block-end:8px;
}

/* ---------- Heading ---------- */
.cf-head{
    margin-block-end:28px;
    text-align:start;
}
.cf-eyebrow{
    display:inline-block;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--cf-blue);
    margin-block-end:8px;
}
[dir="rtl"] .cf-eyebrow{
    letter-spacing:0;
}
.cf-title{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:clamp(22px,2.6vw,32px);
    color:var(--cf-navy);
    margin:0;
}

/* ---------- Office cards grid ---------- */
.cf-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px;
    margin-block-end:34px;
}
.cf-grid-single{
    grid-template-columns:minmax(280px,520px);
}

.cf-card{
    background:#fff;
    border:1px solid var(--cf-hairline);
    border-radius:18px;
    padding:26px 24px;
    box-shadow:0 10px 26px rgba(34,50,63,.06);
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.cf-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 36px rgba(34,50,63,.12);
}

.cf-card-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-block-end:14px;
}
.cf-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:12px;
    background:linear-gradient(135deg,rgba(51,153,209,.12),rgba(22,153,155,.12));
    color:var(--cf-blue);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.cf-card:hover .cf-icon{
    transform:scale(1.08) rotate(-4deg);
}
.cf-icon .in{
    font-family:'Material Icons';
    font-size:22px;
    line-height:1;
}
.cf-city{
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:19px;
    color:var(--cf-navy);
    margin:0;
}

.cf-address{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--cf-muted);
    font-size:14.5px;
    line-height:1.7;
    margin:0 0 20px 0;
}
.cf-address-icon{
    font-family:'Material Icons';
    font-size:19px;
    line-height:1.7;
    color:var(--cf-teal);
    flex-shrink:0;
}

.cf-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-block-start:16px;
    border-top:1px solid var(--cf-hairline);
}
.cf-action{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    padding:9px 12px;
    border-radius:10px;
    color:var(--cf-ink);
    transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.cf-action:hover{
    background:rgba(51,153,209,.08);
    color:var(--cf-blue);
    transform:translateX(2px);
}
[dir="rtl"] .cf-action:hover{
    transform:translateX(-2px);
}
.cf-action-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--cf-hairline);
    color:var(--cf-navy);
    transition:background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.cf-action-icon .in{
    font-family:'Material Icons';
    font-size:16px;
    line-height:1;
}
.cf-action:hover .cf-action-icon{
    background:var(--cf-blue);
    color:#fff;
    transform:scale(1.1);
}
.cf-action-text{
    font-size:14.5px;
    font-weight:600;
    word-break:break-word;
    direction:ltr;
    unicode-bidi:isolate;
}

/* ---------- Map section ---------- */
.cf-maps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:22px;
}
.cf-maps-single{
    grid-template-columns:1fr;
}

.cf-map-block{
    background:#fff;
    border:1px solid var(--cf-hairline);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(34,50,63,.06);
}
.cf-map-label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 20px;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:14px;
    color:var(--cf-navy);
    border-bottom:1px solid var(--cf-hairline);
}
.cf-map-label .in{
    font-family:'Material Icons';
    font-size:18px;
    color:var(--cf-teal);
}

/* Responsive ratio box wrapping the raw DB iframe embed (fixed 600x450 attrs) */
.cf-map-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--cf-hairline);
}
.cf-map-frame iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border:0 !important;
}

/* ---------- Empty state ---------- */
.cf-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
    padding:48px 20px;
    border:1px dashed var(--cf-hairline);
    border-radius:18px;
    color:var(--cf-muted);
}
.cf-empty .cf-icon{
    width:52px;
    height:52px;
}
.cf-empty .cf-icon .in{
    font-size:26px;
}
.cf-empty p{
    margin:0;
    font-size:15px;
    max-width:420px;
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
    .cf-grid, .cf-grid-single{
        grid-template-columns:1fr;
    }
    .cf-maps, .cf-maps-single{
        grid-template-columns:1fr;
    }
    .cf-map-frame{
        aspect-ratio:4/3;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    .cf-card,
    .cf-icon,
    .cf-action,
    .cf-action-icon{
        transition:none !important;
    }
    .cf-card:hover{
        transform:none;
    }
    .cf-card:hover .cf-icon{
        transform:none;
    }
    .cf-action:hover{
        transform:none;
    }
    .cf-action:hover .cf-action-icon{
        transform:none;
    }
}