/* =========================================================
   Cloudmatic Blog Articles
   Styles only the individual blog/article content.
   Header, mobile menu, sticky enquiry buttons and footer remain
   controlled by the existing shared Cloudmatic stylesheets.
   ========================================================= */

.cm-article{
  --article-ink:#171717;
  --article-muted:#69645b;
  --article-line:rgba(23,23,23,.12);
  --article-paper:#f6f3eb;
  --article-yellow:#f5c84c;
  background:#fff;
  color:var(--article-ink);
  overflow:hidden;
}

/* ---------- ARTICLE HERO ---------- */

.cm-article-hero{
  position:relative;
  width:100%;
  height:clamp(430px,64vh,720px);
  min-height:430px;
  overflow:hidden;
  background:#111;
  isolation:isolate;
}

.cm-article-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}

.cm-article-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,8,15,.12) 0%,rgba(4,8,15,.16) 46%,rgba(4,8,15,.58) 100%);
}

.cm-article-hero-label{
  position:absolute;
  z-index:2;
  left:max(5vw,24px);
  bottom:30px;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(10,10,10,.38);
  color:#fff;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font:700 10px/1 "Inter",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- ARTICLE CONTENT ---------- */

.cm-article-shell{
  position:relative;
  z-index:3;
  width:min(920px,88vw);
  margin:-72px auto 0;
  padding:54px 64px 62px;
  border-radius:28px 28px 0 0;
  background:#fff;
  box-shadow:0 -16px 45px rgba(23,23,23,.07);
}

.cm-article-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 22px;
  color:#837b6d;
  font-family:"Inter",sans-serif;
}

.cm-article-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--article-yellow);
  color:#171717;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.cm-article-meta small{
  font-size:11px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.03em;
}

.cm-article-shell>h1{
  max-width:820px;
  margin:0 0 24px;
  color:var(--article-ink);
  font:700 clamp(38px,5.3vw,70px)/.98 "Sora",sans-serif;
  letter-spacing:-.065em;
  text-wrap:balance;
}

.cm-article-lead{
  max-width:810px;
  margin:0 0 40px!important;
  color:#58534b!important;
  font:400 clamp(17px,1.7vw,20px)/1.65 "Inter",sans-serif!important;
}

.cm-article-body{
  max-width:780px;
}

.cm-article-body h2{
  margin:46px 0 13px;
  color:var(--article-ink);
  font:600 clamp(24px,2.7vw,34px)/1.12 "Sora",sans-serif;
  letter-spacing:-.035em;
}

.cm-article-body h3{
  margin:34px 0 11px;
  color:var(--article-ink);
  font:600 clamp(19px,2vw,25px)/1.2 "Sora",sans-serif;
  letter-spacing:-.025em;
}

.cm-article-body p,
.cm-article-body li{
  color:var(--article-muted);
  font:400 16px/1.78 "Inter",sans-serif;
}

.cm-article-body p{
  margin:0 0 22px;
}

.cm-article-body ul,
.cm-article-body ol{
  margin:10px 0 26px;
  padding-left:22px;
}

.cm-article-body li{
  margin:7px 0;
  padding-left:3px;
}

.cm-article-body strong{
  color:var(--article-ink);
  font-weight:700;
}

.cm-article-body a{
  color:var(--article-ink);
  text-decoration-color:#c69b1e;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.cm-article-body blockquote{
  margin:34px 0;
  padding:24px 27px;
  border-left:4px solid var(--article-yellow);
  border-radius:0 16px 16px 0;
  background:var(--article-paper);
  color:#4f4a41;
  font:500 17px/1.65 "Inter",sans-serif;
}

.cm-article-body img{
  display:block;
  width:100%;
  height:auto;
  margin:32px 0;
  border-radius:18px;
}

.cm-article-body hr{
  border:0;
  border-top:1px solid var(--article-line);
  margin:42px 0;
}

.cm-article-source{
  max-width:780px;
  margin:46px 0 0!important;
  padding-top:20px;
  border-top:1px solid var(--article-line);
  color:#8a8376!important;
  font:400 11px/1.6 "Inter",sans-serif!important;
}

.cm-article-source a{
  color:#5e584d;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.cm-article-back{
  display:inline-flex;
  align-items:center;
  margin-top:30px;
  min-height:42px;
  padding:0 17px;
  border:1px solid rgba(23,23,23,.18);
  border-radius:999px;
  color:#171717;
  background:#fff;
  font:700 11px/1 "Inter",sans-serif;
  letter-spacing:.04em;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}

.cm-article-back:hover{
  background:var(--article-yellow);
  border-color:var(--article-yellow);
  transform:translateY(-2px);
}

/* ---------- TABLES / CODE IF USED IN ARTICLES ---------- */

.cm-article-body table{
  width:100%;
  margin:28px 0;
  border-collapse:collapse;
  border:1px solid var(--article-line);
  font:400 14px/1.55 "Inter",sans-serif;
}

.cm-article-body th,
.cm-article-body td{
  padding:12px 14px;
  border:1px solid var(--article-line);
  text-align:left;
  vertical-align:top;
}

.cm-article-body th{
  background:var(--article-paper);
  color:var(--article-ink);
  font-weight:700;
}

.cm-article-body pre{
  max-width:100%;
  overflow:auto;
  margin:28px 0;
  padding:20px;
  border-radius:16px;
  background:#171717;
  color:#f7f4ec;
  font:400 13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.cm-article-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- TABLET ---------- */

@media(max-width:1000px){
  .cm-article-hero{
    height:560px;
  }

  .cm-article-shell{
    width:min(900px,92vw);
    margin-top:-58px;
    padding:46px 46px 54px;
    border-radius:24px 24px 0 0;
  }
}

/* ---------- MOBILE ---------- */

@media(max-width:700px){
  .cm-article-hero{
    height:430px;
    min-height:430px;
  }

  .cm-article-hero img{
    object-position:center center;
  }

  .cm-article-hero-label{
    left:20px;
    bottom:18px;
  }

  .cm-article-shell{
    width:100%;
    margin:-34px 0 0;
    padding:34px 20px 46px;
    border-radius:22px 22px 0 0;
    box-shadow:0 -10px 30px rgba(23,23,23,.06);
  }

  .cm-article-meta{
    margin-bottom:17px;
  }

  .cm-article-shell>h1{
    margin-bottom:19px;
    font-size:clamp(34px,10.5vw,48px);
    line-height:1.01;
    letter-spacing:-.055em;
  }

  .cm-article-lead{
    margin-bottom:31px!important;
    font-size:16px!important;
    line-height:1.65!important;
  }

  .cm-article-body h2{
    margin-top:38px;
    font-size:25px;
  }

  .cm-article-body h3{
    margin-top:29px;
    font-size:20px;
  }

  .cm-article-body p,
  .cm-article-body li{
    font-size:15px;
    line-height:1.72;
  }

  .cm-article-body blockquote{
    margin:28px 0;
    padding:20px;
    font-size:15px;
  }

  .cm-article-source{
    margin-top:38px!important;
  }

  .cm-article-back{
    margin-top:24px;
  }
}

/* ---------- REDUCED MOTION ---------- */

@media(prefers-reduced-motion:reduce){
  .cm-article-back{
    transition:none!important;
  }
}