/* =====================================================================
   Future Tech Care · Footer component
   CTA band → brand + link columns → map row → legal bar.
   Every selector is prefixed .ftc-f so nothing leaks into page content.
   Colour, font and layout tokens are injected from the dashboard as CSS
   custom properties; the values below are only the shipped fallbacks.
   ===================================================================== */
.ftc-footer{
  --ftc-band:#0F1E33; --ftc-band-2:#16294A; --ftc-deep:#0A1628; --ftc-band-fg:#F2F6FB; --ftc-band-muted:#A9B8CC; --ftc-band-line:#263B5C;
  --ftc-teal:#0B7F7B; --ftc-teal-on-band:#3FD0C9;
  --ftc-cta:#C9530E; --ftc-cta-hover:#A9440A; --ftc-cta-fg:#FFFFFF; --ftc-cta-on-band:#F59A5E;
  --ftc-font-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --ftc-font-body:"Figtree","Segoe UI",Roboto,Arial,sans-serif;
  --ftc-wrap:1240px; --ftc-radius-s:6px; --ftc-radius-m:12px;
  --ftc-safe-l:env(safe-area-inset-left,0px); --ftc-safe-r:env(safe-area-inset-right,0px); --ftc-safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- Base (scoped) ---------- */
.ftc-footer,.ftc-footer *,.ftc-footer *::before,.ftc-footer *::after{box-sizing:border-box}
.ftc-footer{background:var(--ftc-deep); color:var(--ftc-band-fg); font-family:var(--ftc-font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; padding-bottom:var(--ftc-safe-b)}
.ftc-footer ul{list-style:none; margin:0; padding:0}
.ftc-footer li{margin:0; padding:0}
.ftc-footer li::before,.ftc-footer li::marker{content:none}
.ftc-footer p,.ftc-footer h2,.ftc-footer h3{margin:0}
.ftc-footer a{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; box-shadow:none}
.ftc-footer img{max-width:100%; height:auto}
.ftc-footer :focus-visible{outline:3px solid var(--ftc-teal-on-band); outline-offset:3px; border-radius:var(--ftc-radius-s)}
.ftc-f-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.ftc-f-wrap{width:100%; max-width:var(--ftc-wrap); margin-inline:auto;
  padding-left:max(20px,var(--ftc-safe-l)); padding-right:max(20px,var(--ftc-safe-r))}
.ftc-f-arrow{display:inline-block; transition:transform .15s}
.ftc-footer a:hover > .ftc-f-arrow,.ftc-footer a:focus-visible > .ftc-f-arrow{transform:translateX(3px)}

/* ---------- Buttons ---------- */
.ftc-f-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:var(--ftc-radius-m);
  font-family:var(--ftc-font-display); font-weight:600; font-size:16px; white-space:nowrap; border:1px solid transparent;
  transition:background-color .15s,border-color .15s,transform .15s}
.ftc-f-btn svg{flex:none}
.ftc-f-btn-cta{background:var(--ftc-cta); color:var(--ftc-cta-fg)!important; box-shadow:0 14px 30px -14px rgba(201,83,14,.75)}
.ftc-f-btn-cta:hover{background:var(--ftc-cta-hover)}
.ftc-f-btn-ghost{background:rgba(255,255,255,.04); border-color:var(--ftc-band-line); color:var(--ftc-band-fg)!important}
.ftc-f-btn-ghost svg{color:var(--ftc-teal-on-band)}
.ftc-f-btn-ghost:hover{border-color:var(--ftc-band-muted); background:var(--ftc-band-2)}

/* ---------- 1. CTA band ---------- */
.ftc-f-cta{position:relative; overflow:hidden; background:var(--ftc-band); border-top:1px solid var(--ftc-band-line); border-bottom:1px solid var(--ftc-band-line)}
.ftc-f-cta::before{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,127,123,.95) 0%,rgba(11,127,123,.55) 16%,rgba(15,30,51,0) 52%); pointer-events:none}
.ftc-f-cta-row{position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; padding-top:72px; padding-bottom:72px}
.ftc-f-cta-text{max-width:720px; display:grid; gap:14px; justify-items:start}
.ftc-f-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid rgba(63,208,201,.45);
  background:rgba(10,22,40,.45); color:var(--ftc-teal-on-band); font-size:14px; font-weight:600}
.ftc-f-pill svg{flex:none}
.ftc-f-cta-title{font-family:var(--ftc-font-display); font-weight:700; font-size:clamp(28px,3.2vw,42px); line-height:1.12; letter-spacing:-.015em}
.ftc-f-cta-sub{font-size:18px; color:#D3DDEA; max-width:620px}
.ftc-f-cta-actions{display:flex; align-items:center; gap:14px; flex:none}

/* ---------- 2. Main: brand + link columns ---------- */
.ftc-f-main{padding-top:72px; padding-bottom:56px}
.ftc-f-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:40px 32px}
.ftc-f-brand{display:grid; gap:22px; align-content:start; max-width:420px}
.ftc-f-logo{display:inline-flex; align-self:start; justify-self:start; border-radius:var(--ftc-radius-s)}
.ftc-f-logo img{display:block; height:44px; width:auto}
.ftc-f-logo-text{font-family:var(--ftc-font-display); font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ftc-band-fg)}
.ftc-f-about{color:var(--ftc-band-muted); font-size:15.5px; line-height:1.65}
.ftc-f-contacts{display:grid; gap:4px}
.ftc-f-contact{display:inline-flex; align-items:center; gap:12px; min-height:40px; font-size:15.5px; color:var(--ftc-band-fg)}
.ftc-f-contact svg{flex:none; color:var(--ftc-cta-on-band)}
a.ftc-f-contact:hover span{text-decoration:underline; text-underline-offset:3px}
.ftc-f-label{font-family:var(--ftc-font-display); font-weight:700; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ftc-band-muted)}
.ftc-f-social-wrap{display:grid; gap:12px}
.ftc-f-social{display:flex; flex-wrap:wrap; gap:10px}
.ftc-f-social a{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--ftc-radius-m); border:1px solid var(--ftc-band-line);
  background:rgba(255,255,255,.03); color:var(--ftc-band-fg); transition:border-color .15s,color .15s,background-color .15s}
.ftc-f-social a:hover{border-color:var(--ftc-teal-on-band); color:var(--ftc-teal-on-band); background:var(--ftc-band-2)}

.ftc-f-col{min-width:0}
.ftc-f-col-title{font-family:var(--ftc-font-display); font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#FFFFFF; margin-bottom:16px}
.ftc-f-links{display:grid; gap:2px}
.ftc-f-links a{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-height:36px; padding:6px 0; font-size:15.5px; line-height:1.35;
  color:var(--ftc-band-muted); transition:color .15s}
.ftc-f-links a:hover{color:var(--ftc-band-fg)}
.ftc-f-links a.is-offer{color:var(--ftc-cta-on-band); font-weight:600}
.ftc-f-links a.is-offer:hover{filter:brightness(1.15)}
.ftc-f-links a.is-cta{color:var(--ftc-teal-on-band); font-weight:600}
.ftc-f-links a.is-cta:hover{filter:brightness(1.15)}
.ftc-f-links a.is-more{color:var(--ftc-band-fg); font-weight:600}
.ftc-f-badge{display:inline-block; padding:1px 7px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.5;
  color:var(--ftc-teal-on-band); background:rgba(63,208,201,.12); border:1px solid rgba(63,208,201,.35)}
.ftc-f-badge.is-b2b{color:#C9D6E6; background:rgba(169,184,204,.1); border-color:var(--ftc-band-line)}

/* ---------- 3. Map row (Google Business Profile) ---------- */
.ftc-f-map{border-top:1px solid var(--ftc-band-line)}
.ftc-f-map-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px 56px; align-items:center; padding-top:64px; padding-bottom:64px}
.ftc-f-map-text{display:grid; gap:16px; justify-items:start}
.ftc-f-map-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid rgba(245,154,94,.45);
  background:rgba(245,154,94,.08); color:var(--ftc-cta-on-band); font-size:14px; font-weight:600}
.ftc-f-map-title{font-family:var(--ftc-font-display); font-weight:700; font-size:clamp(26px,2.6vw,36px); line-height:1.12; letter-spacing:-.015em}
.ftc-f-map-sub{color:var(--ftc-band-muted); font-size:16.5px; line-height:1.65; max-width:540px}
.ftc-f-map-list{display:grid; gap:4px}
.ftc-f-map-list .ftc-f-contact{align-items:flex-start; padding:8px 0; min-height:0}
.ftc-f-map-list .ftc-f-contact svg{margin-top:3px}
.ftc-f-map-text .ftc-f-btn{margin-top:8px}
.ftc-f-map-frame{position:relative; width:100%; aspect-ratio:16 / 10; border-radius:20px; overflow:hidden; border:1px solid var(--ftc-band-line);
  background:var(--ftc-band); box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.ftc-f-map-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.ftc-f-map-fallback{position:absolute; inset:0; display:grid; place-items:center; color:var(--ftc-band-muted); font-size:14.5px; text-align:center; padding:20px}

/* ---------- 4. Legal bar ---------- */
.ftc-f-bottom{border-top:1px solid var(--ftc-band-line)}
.ftc-f-bottom-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 32px; padding-top:24px; padding-bottom:28px; font-size:14.5px}
.ftc-f-copy{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; color:var(--ftc-band-muted)}
.ftc-f-dot{opacity:.5}
.ftc-f-legal{display:flex; flex-wrap:wrap; gap:4px 28px}
.ftc-f-legal a{display:inline-flex; align-items:center; min-height:36px; color:var(--ftc-band-muted); transition:color .15s}
.ftc-f-legal a:hover{color:var(--ftc-band-fg)}
.ftc-f-legal a.is-cta{color:var(--ftc-teal-on-band); font-weight:600}

/* ===================== Responsive ===================== */
/* Laptop / tablet landscape: brand spans the top, 4 link columns below */
@media (max-width:1099.98px){
  .ftc-f-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:44px 28px}
  .ftc-f-brand{grid-column:1 / -1; max-width:none; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px 48px; align-items:start}
  .ftc-f-brand > .ftc-f-logo,.ftc-f-brand > .ftc-f-about{grid-column:1}
  .ftc-f-brand > .ftc-f-contacts{grid-column:2; grid-row:1 / span 2}
  .ftc-f-brand > .ftc-f-social-wrap{grid-column:2}
}
@media (max-width:991.98px){
  .ftc-f-cta-row{flex-direction:column; align-items:flex-start; gap:28px; padding-top:56px; padding-bottom:56px}
  .ftc-f-map-row{grid-template-columns:1fr}
}
/* Tablet portrait & phone: link columns become a 2 × 2 grid (no empty right half) */
@media (max-width:767.98px){
  .ftc-f-wrap{padding-left:max(16px,var(--ftc-safe-l)); padding-right:max(16px,var(--ftc-safe-r))}
  .ftc-f-cta::before{background:linear-gradient(180deg,rgba(11,127,123,.7) 0%,rgba(11,127,123,.25) 40%,rgba(15,30,51,0) 75%)}
  .ftc-f-cta-row{align-items:center; text-align:center; padding-top:48px; padding-bottom:48px}
  .ftc-f-cta-text{justify-items:center}
  .ftc-f-cta-sub{font-size:16.5px}
  .ftc-f-cta-actions{flex-direction:column; align-items:stretch; width:100%; max-width:360px}
  .ftc-f-cta-actions .ftc-f-btn{width:100%}
  .ftc-f-btn{white-space:normal; text-align:center; padding:12px 20px; line-height:1.3}

  .ftc-f-main{padding-top:52px; padding-bottom:36px}
  .ftc-f-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 20px}
  .ftc-f-brand{display:grid; grid-template-columns:1fr; gap:20px}
  .ftc-f-brand > *{grid-column:1!important; grid-row:auto!important}
  .ftc-f-col-title{font-size:14px; margin-bottom:10px}
  .ftc-f-links a{min-height:40px; font-size:15px}

  .ftc-f-map-row{padding-top:48px; padding-bottom:48px; gap:32px}
  .ftc-f-map-text .ftc-f-btn{width:100%; max-width:360px}
  .ftc-f-map-frame{aspect-ratio:4 / 3.4; border-radius:16px}

  .ftc-f-bottom-row{flex-direction:column; align-items:flex-start; gap:8px; padding-top:20px}
  .ftc-f-legal{gap:0 22px}
  .ftc-f-dot{display:none}
  .ftc-f-copy{flex-direction:column; align-items:flex-start; gap:2px}
}
@media (max-width:359.98px){
  .ftc-f-grid{gap:36px 14px}
  .ftc-f-links a{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .ftc-footer *,.ftc-footer *::before,.ftc-footer *::after{transition:none!important}
}
@media (forced-colors:active){
  .ftc-f-btn,.ftc-f-badge,.ftc-f-social a{border:1px solid CanvasText}
}