/* ============================================================
   Calgary City Hub — /calgary/
   ------------------------------------------------------------
   Page-scoped additions on top of css/rml-blog.css. Everything
   that already exists there (.rml-hero, .rml-container,
   .rml-content-card, .rml-btn, .rml-faq, .rml-hub-grid …) is
   reused as-is; only the patterns this hub genuinely introduces
   live here: the breadcrumb, the service-pathway grid, the
   quadrant grid, the vehicle decision cards, the numbered
   request steps, the trust story block and the conversion rows.
   Scoped under .cal-hub so no other page can be affected.
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────────────
   Top padding is left exactly as rml-blog.css sets it: the header is
   absolutely positioned over the hero, and those values are what
   clear it at every breakpoint. Only the bottom padding is trimmed,
   so the service pathways start closer to the fold without the
   breadcrumb ever sliding under the header. */
.cal-hub .rml-hero{padding-bottom:64px;}
@media (min-width:1200px){
  .cal-hub .rml-hero{padding-bottom:74px!important;}
}
@media (max-width:991px){
  .cal-hub .rml-hero{padding-bottom:52px!important;}
}
@media (max-width:767px){
  .cal-hub .rml-hero{padding-bottom:40px!important;}
}
.cal-hub .rml-hero-inner{max-width:900px;}
.cal-hub .rml-hero p{margin-bottom:22px;}

/* ── Breadcrumb (light on the dark hero) ─────────────────────── */
.cal-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);
  margin:0 0 18px;line-height:1.5;
}
.cal-crumb a{color:rgba(255,255,255,.78);text-decoration:none!important;}
.cal-crumb a:hover,.cal-crumb a:focus-visible{color:#fff;text-decoration:underline!important;}
.cal-crumb .sep{color:rgba(255,255,255,.35);}
.cal-crumb .current{color:#fff;font-weight:700;}

/* ── Conversion rows ─────────────────────────────────────────── */
.cal-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;padding:0;list-style:none;}
.cal-btn-outline{
  background:#fff;color:var(--rml-black)!important;
  border:1px solid var(--rml-border);
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.cal-btn-outline:hover{border-color:var(--rml-red);color:var(--rml-red)!important;transform:translateY(-2px);}
.cal-btn-ghost{
  background:transparent;color:var(--rml-red)!important;
  border:1px solid rgba(228,29,55,.35);
}
.cal-btn-ghost:hover{background:var(--rml-red);color:#fff!important;}

/* Section-level CTA group — sits inside a content card */
.cal-cta-row{
  display:flex;flex-wrap:wrap;gap:11px;align-items:center;
  margin:22px 0 4px;padding-top:20px;border-top:1px solid var(--rml-border);
}
.cal-cta-row .rml-btn{min-height:46px;padding:12px 18px;font-size:13.5px;}

/* Honest placeholder for a pathway whose page is not published yet */
.cal-note{
  display:block;margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--rml-muted);
}

/* ── Section rhythm ──────────────────────────────────────────────
   The hub runs without the blog sidebar, so the reading column is
   set here instead: feature rows (the pathway grid, the regional
   cards) use the full container, while every block of running copy
   keeps the same ~800px measure the rest of the site reads at. */
.cal-hub .rml-main .rml-container{max-width:1140px;}
.cal-block{margin:0 0 26px;}
.cal-block:last-child{margin-bottom:0;}
/* Cards, grids and headings all share one left edge across the full
   container; only the running copy is capped, at the same measure the
   rest of the site reads at. */
.cal-hub .cal-section-head{max-width:none;margin-bottom:26px;}
.cal-intro{margin:0 0 40px;}
.cal-intro .rml-lead{max-width:88ch;margin:0;font-size:16.5px;line-height:1.8;}
.cal-hub .rml-content-card > p,
.cal-hub .rml-content-card > ol,
.cal-hub .cal-section-head p,
.cal-hub .rml-faq details p{max-width:88ch;}

/* Inline photography inside a content card */
.cal-hub .rml-content-card > img{
  display:block;width:100%;height:auto;max-height:400px;object-fit:cover;
  border-radius:16px;margin:6px 0 22px;background:#eef2f7;
}

/* ── Service pathway grid ────────────────────────────────────── */
.cal-section-head{max-width:760px;margin:0 0 26px;}
.cal-section-head h2{
  font-size:clamp(22px,2.6vw,34px);line-height:1.22;letter-spacing:-.02em;
  color:var(--rml-black);font-weight:700;margin:0 0 10px;
}
.cal-section-head p{font-size:15px;line-height:1.75;color:#374151;margin:0;}

.cal-paths{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin:0 0 12px;padding:0;list-style:none;
}
.cal-path{
  display:flex;flex-direction:column;gap:10px;
  padding:24px 22px;min-width:0;
  border:1px solid var(--rml-border);border-radius:18px;background:#fff;
  box-shadow:0 12px 32px rgba(15,23,42,.055);
  text-decoration:none!important;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
a.cal-path:hover,a.cal-path:focus-visible{
  transform:translateY(-3px);border-color:rgba(228,29,55,.35);
  box-shadow:0 20px 44px rgba(15,23,42,.10);
}
.cal-path .rml-icon{margin-bottom:2px;}
.cal-path h3{font-size:16px;line-height:1.3;color:var(--rml-black);font-weight:700;margin:0;}
.cal-path .cal-path-best{font-size:13.5px;line-height:1.6;color:var(--rml-text);margin:0;}
.cal-path .cal-path-best b{color:var(--rml-black);font-weight:800;}
.cal-path .cal-path-cta{
  margin-top:auto;padding-top:6px;
  font-size:13px;font-weight:800;color:var(--rml-red);
  display:inline-flex;align-items:center;gap:7px;
}
a.cal-path:hover .cal-path-cta i{transform:translateX(3px);}
.cal-path .cal-path-cta i{transition:transform .25s ease;}

/* Seven pathways never divide evenly into two or three columns, and the
   regional one is the natural "continue beyond Calgary" closer — so it
   runs the full width of the grid as a single horizontal row. */
@media (min-width:768px){
  .cal-paths > .cal-path:last-child{
    grid-column:1/-1;flex-direction:row;align-items:center;gap:20px;
  }
  .cal-paths > .cal-path:last-child .rml-icon{margin-bottom:0;flex:0 0 auto;}
  .cal-paths > .cal-path:last-child h3{flex:0 0 auto;}
  .cal-paths > .cal-path:last-child .cal-path-best{flex:1 1 auto;}
  .cal-paths > .cal-path:last-child .cal-path-cta{margin-top:0;padding-top:0;flex:0 0 auto;}
}

/* ── Calgary quadrant grid ───────────────────────────────────── */
.cal-quadrants{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 8px;
}
.cal-quadrant{
  padding:22px 20px;min-width:0;
  border:1px solid var(--rml-border);border-radius:18px;background:var(--rml-soft);
}
.cal-quadrant h3{
  font-size:15.5px;line-height:1.35;color:var(--rml-black);font-weight:700;
  margin:0 0 8px;display:flex;align-items:center;gap:9px;
}
.cal-quadrant h3 i{color:var(--rml-red);font-size:14px;}
.cal-quadrant p{font-size:14px;line-height:1.72;color:#374151;margin:0;}

/* ── Vehicle decision cards ──────────────────────────────────── */
.cal-vehicles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 8px;
}
.cal-vehicle{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:22px 20px;border:1px solid var(--rml-border);border-radius:18px;background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.cal-vehicle h3{font-size:15px;line-height:1.3;color:var(--rml-black);font-weight:800;margin:0;}
.cal-vehicle dl{margin:0;padding:0;}
.cal-vehicle dt{
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rml-muted);margin:0 0 4px;
}
.cal-vehicle dd{margin:0 0 12px;font-size:13.5px;line-height:1.65;color:#374151;}
.cal-vehicle dd:last-child{margin-bottom:0;}
.cal-vehicle .cal-decide{color:var(--rml-black);}

/* ── Numbered request steps ──────────────────────────────────── */
.cal-steps{counter-reset:cal-step;list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:12px;}
.cal-steps > li{
  position:relative;padding:16px 18px 16px 58px;min-width:0;
  border:1px solid var(--rml-border);border-radius:14px;background:#fff;
  font-size:14.5px;line-height:1.7;color:#374151;
}
.cal-steps > li:before{
  counter-increment:cal-step;content:counter(cal-step);
  position:absolute;left:16px;top:15px;
  width:28px;height:28px;border-radius:50%;
  background:var(--rml-red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.cal-steps ul{margin:8px 0 0;padding-left:18px;list-style:disc;}
.cal-steps ul li{
  font-size:14px;line-height:1.65;color:#4b5563;margin-bottom:2px;
}

/* ── Trust / first-hand story block ──────────────────────────── */
.cal-story{
  margin:34px 0;padding:30px 32px;border-radius:var(--rml-radius);
  background:linear-gradient(145deg,#111827,#222b3c);color:#fff;
  position:relative;overflow:hidden;z-index:1;
}
.cal-story:after{
  content:"";position:absolute;right:-60px;bottom:-70px;width:180px;height:180px;
  border-radius:50%;background:rgba(228,29,55,.22);z-index:-1;
}
.cal-story .cal-story-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 12px;
}
.cal-story .cal-story-label i{color:var(--rml-red);}
.cal-story h3{font-size:clamp(19px,2.2vw,26px);line-height:1.28;color:#fff;font-weight:700;margin:0 0 14px;}
.cal-story p{font-size:15px;line-height:1.78;color:rgba(255,255,255,.86);margin:0 0 13px;}
.cal-story p:last-child{margin-bottom:0;}

/* ── Final conversion block ──────────────────────────────────── */
.cal-final{padding:56px 0;background:var(--rml-soft);border-top:1px solid var(--rml-border);}
.cal-final-inner{
  max-width:880px;margin:0 auto;text-align:center;
  padding:36px 32px;border:1px solid var(--rml-border);border-radius:var(--rml-radius);
  background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.07);
}
.cal-final h2{font-size:clamp(21px,2.4vw,30px);line-height:1.25;color:var(--rml-black);font-weight:700;margin:0 0 10px;}
.cal-final p{font-size:15px;line-height:1.75;color:#374151;margin:0 0 22px;}
.cal-final .cal-actions{justify-content:center;}

/* ── Focus visibility (keyboard) ─────────────────────────────── */
.cal-hub a:focus-visible,
.cal-hub summary:focus-visible{
  outline:3px solid var(--rml-red);outline-offset:3px;border-radius:6px;
}
.cal-hub .rml-hero a:focus-visible,
.cal-hub .cal-crumb a:focus-visible{outline-color:#fff;}

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width:1199px){
  .cal-paths{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:991px){
  .cal-vehicles{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
  /* Quote full width, then Call and WhatsApp side by side, then the
     services jump — four stacked full-width buttons would push the
     pathways well below the fold on a phone. */
  .cal-hub .rml-hero-actions{flex-direction:row!important;flex-wrap:wrap;gap:10px!important;}
  .cal-hub .rml-hero-actions .rml-btn{flex:1 1 100%;width:auto!important;min-width:0;}
  .cal-hub .rml-hero-actions .rml-btn[data-track="phone"],
  .cal-hub .rml-hero-actions .rml-btn[data-track="whatsapp"]{flex:1 1 calc(50% - 5px);padding-left:10px;padding-right:10px;}
  .cal-crumb{font-size:12px;margin-bottom:14px;}

  .cal-block{margin-bottom:18px;}
  .cal-intro{margin-bottom:28px;}
  .cal-intro .rml-lead{font-size:15px;line-height:1.75;}
  .cal-section-head{margin-bottom:20px;}
  .cal-paths{grid-template-columns:1fr;gap:12px;}
  .cal-path{padding:18px 16px;}
  .cal-path h3{font-size:15px;}

  .cal-quadrants{grid-template-columns:1fr;gap:12px;}
  .cal-quadrant{padding:18px 16px;}

  .cal-vehicles{grid-template-columns:1fr;gap:12px;}
  .cal-vehicle{padding:18px 16px;}

  .cal-cta-row{gap:9px;margin-top:18px;padding-top:16px;}
  .cal-cta-row .rml-btn{width:100%;}

  .cal-steps > li{padding:14px 15px 14px 52px;font-size:14px;}
  .cal-steps > li:before{left:14px;top:13px;}

  .cal-story{padding:22px 18px;margin:26px 0;}
  .cal-story p{font-size:14.5px;}

  .cal-final{padding:38px 0;}
  .cal-final-inner{padding:26px 18px;}
  .cal-final .cal-actions .rml-btn{width:100%;}
}

@media (max-width:360px){
  .cal-path,.cal-quadrant,.cal-vehicle{padding:16px 14px;}
  .cal-final-inner{padding:22px 14px;}
}