/* Purpose: Services page section styles. Ported from AXL axl-services.html. Loaded only on the Services page. */

/* ---- Content hero (light chevron variant) ---- */
.chero { padding: 140px 0 60px; background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .92)), var(--chero-img, url("../../images/bg-chevron-hero.jpg")) center / cover; position: relative; }
.chero h1 { font-size: clamp(34px, 5vw, 62px); font-weight: 800; letter-spacing: -.03em; }
.chero h1 .red { color: var(--accent); }
.chero .lead { margin: 22px 0 28px; font-size: clamp(17px, 2vw, 20px); color: var(--slate); max-width: 46ch; }
.chero-copy { max-width: 740px; }

/* ---- Breadcrumb (light) ---- */
.crumb { font-size: 13px; color: var(--slate); margin-bottom: 22px; display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: var(--accent); }
.crumb span { opacity: .5; }
.crumb .current { opacity: 1; color: var(--ink); }

/* ---- SLA cards ---- */
.sla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.slac { border: 1px solid var(--hair); border-radius: var(--r); padding: 30px; background: #fff; transition: .4s var(--ease); }
.slac:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.slac .n { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .12em; }
.slac h3 { font-size: 18px; margin: 10px 0 14px; }
.slac ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.slac li { font-size: 14px; color: var(--slate); padding-left: 18px; position: relative; line-height: 1.5; }
.slac li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.slac li b { color: var(--ink); }
@media (max-width: 820px) { .sla { grid-template-columns: 1fr; } }

/* ---- SLA gallery ---- */
.slagal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.slagal img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--hair); }
@media (max-width: 820px) { .slagal { grid-template-columns: 1fr; } }

/* ---- Escalation matrix ---- */
.esc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.escc { border: 1px solid var(--hair); border-radius: var(--r); padding: 24px 20px; background: #fff; transition: .4s var(--ease); }
.escc:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.escc .lv { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--grad); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
.escc .role { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; min-height: 58px; }
.escc .nm { font-size: 14px; color: var(--ink); margin-top: 14px; }
.escc .nm b { font-weight: 600; }
.escc .tel { font-size: 13px; color: var(--slate); margin-top: 4px; }
.escc .tel a:hover { color: var(--accent); }
@media (max-width: 1000px) { .esc { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px) { .esc { grid-template-columns: 1fr; } }

/* Blog card grid (.bgrid/.bcard) is global — see assets/css/components.css */

/* Get-in-touch band styles are global — see assets/css/components.css + template-parts/global/git-cta.php */

/* Blog section: match the home Latest-Insights responsive behaviour on tablet/mobile */
@media (max-width: 880px) { .svc-blogs .bgrid { grid-template-columns: 1fr; } }
@media (min-width: 767px) and (max-width: 881px) {
  .svc-blogs .bgrid { display: flex; grid-template-columns: none; overflow-x: auto; gap: 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .svc-blogs .bgrid .bcard { flex: 0 0 300px; scroll-snap-align: start; }
}

/* Tablet: halve the vertical padding of the page sections (escalation + blog gaps) */
@media (min-width: 601px) and (max-width: 1024px) {
  .section-pad { padding-top: 40px; padding-bottom: 40px; }
  .section-pad.is-flush-top { padding-top: 0; }
}