/* V11 - maturity assessments, visible disclosure content, dual CTAs and gated catalog downloads */
:root{--maturity-0:#8b98a8;--maturity-1:#b97a54;--maturity-2:#c59a2d;--maturity-3:#1b78a8;--maturity-4:#0b8f80}

/* Details remain interactive but start fully visible. */
details[open] > summary{border-bottom-color:var(--line)}

.dual-cta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dual-cta-grid article{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:275px;padding:34px;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(145deg,#071a3d,#0c326d);color:#fff;box-shadow:0 18px 55px rgba(7,26,61,.2)}
.dual-cta-grid article h2{margin:8px 0 10px;color:#fff;font-size:28px}
.dual-cta-grid article p{max-width:620px;margin:0 0 22px;color:#d8e2ef;line-height:2}
.dual-cta-grid .maturity-cta-card{background:linear-gradient(145deg,#083f54,#0b7c73)}
.dual-cta-grid .btn{margin-top:auto}
.dual-cta-grid article .kicker{color:#9fe4dc}
.dual-cta-grid article h2{color:#fff}
.dual-cta-grid article p{color:#dce7f2}
.dual-cta-grid article .btn-light,.dual-cta-grid article .btn-secondary{background:#fff;color:#071a3d;border-color:#fff}
.dual-cta-grid article .btn-light:hover,.dual-cta-grid article .btn-secondary:hover{background:#eaf5f4;color:#071a3d;border-color:#eaf5f4}


.catalog-download-section{padding-top:38px;padding-bottom:38px}
.catalog-download-card{display:grid;grid-template-columns:minmax(0,.86fr) minmax(460px,1.14fr);gap:34px;align-items:center;padding:34px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,#f7fbfd,#edf9f8);box-shadow:var(--shadow-md)}
.catalog-download-copy{padding:10px 8px}
.catalog-download-copy .catalog-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:var(--navy-950);color:#fff;margin-bottom:18px}
.catalog-download-copy .catalog-icon .i{width:31px;height:31px}
.catalog-download-copy h2{font-size:29px;margin:8px 0 12px;color:var(--navy-950)}
.catalog-download-copy p{line-height:2;color:var(--ink-600)}
.catalog-download-copy small{display:block;margin-top:14px;color:var(--teal-700);font-weight:750}
.catalog-form{padding:24px;border:1px solid rgba(14,103,137,.15);border-radius:24px;background:#fff}
.catalog-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.catalog-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:var(--navy-950)}
.catalog-form input{width:100%;height:49px;border:1px solid var(--line);border-radius:13px;padding:0 14px;font-family:inherit;font-size:14px;background:#fbfdfe;outline:none;transition:.18s}
.catalog-form input:focus{border-color:var(--teal-500);box-shadow:0 0 0 4px rgba(20,183,169,.12);background:#fff}
.catalog-form .btn{margin-top:18px;width:100%;justify-content:center}
.catalog-form .form-status{min-height:25px;margin:10px 0 0;font-size:12px;color:var(--teal-700)}

.maturity-hero .checklist-title{max-width:1040px}
.maturity-method-section{padding-top:35px}
.maturity-scale-guide{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}
.maturity-scale-guide article{min-height:160px;padding:20px 16px;border:1px solid var(--line);border-radius:21px;background:#fff}
.maturity-scale-guide article b{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--navy-950);color:#fff;font-size:18px}
.maturity-scale-guide article span{display:block;margin:13px 0 7px;font-weight:900;color:var(--navy-950)}
.maturity-scale-guide article small{font-size:11px;line-height:1.8;color:var(--ink-600)}
.methodology-note{margin-top:18px;padding:20px 22px;border-right:4px solid var(--teal-500);border-radius:16px;background:#eff9f8;color:var(--ink-700);line-height:1.9;font-size:13px}
.methodology-note span{display:block;color:var(--ink-600)}
.methodology-note div{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.methodology-note a{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--blue-700);font-size:11px;font-weight:800}

.maturity-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.maturity-layout>main{display:flex;flex-direction:column;gap:22px}
.maturity-domain{border:1px solid var(--line);border-radius:26px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.maturity-domain>header{display:grid;grid-template-columns:75px 1fr;gap:16px;align-items:center;padding:24px;background:linear-gradient(135deg,#f5f9fc,#edf9f8);border-bottom:1px solid var(--line)}
.maturity-domain>header>span{display:grid;place-items:center;height:54px;border-radius:17px;background:var(--navy-950);color:#fff;font-size:11px;font-weight:900}
.maturity-domain>header h2{margin:0 0 5px;font-size:23px;color:var(--navy-950)}
.maturity-domain>header p{margin:0;color:var(--ink-600);font-size:13px;line-height:1.85}
.maturity-question{padding:23px 24px;border-bottom:1px solid var(--line)}
.maturity-question:last-child{border-bottom:0}
.maturity-question-title{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;margin-bottom:15px}
.maturity-question-title>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eef3f8;color:var(--blue-700);font-weight:900;font-size:11px}
.maturity-question-title p{margin:0;color:var(--navy-950);font-size:14px;font-weight:750;line-height:1.95}
.maturity-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-right:50px}
.maturity-option{cursor:pointer}
.maturity-option input{position:absolute;opacity:0;pointer-events:none}
.maturity-option span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fbfdfe;transition:.18s}
.maturity-option b{font-size:16px;color:var(--navy-950)}
.maturity-option small{font-size:9px;color:var(--ink-500);margin-top:2px}
.maturity-option:hover span{transform:translateY(-2px);border-color:var(--teal-400)}
.maturity-option input:focus-visible+span{outline:3px solid rgba(20,183,169,.2);outline-offset:2px}
.maturity-option input:checked+span{background:var(--navy-950);border-color:var(--navy-950);box-shadow:0 8px 22px rgba(7,26,61,.18)}
.maturity-option input:checked+span b,.maturity-option input:checked+span small{color:#fff}
.maturity-question.is-answered{background:linear-gradient(90deg,rgba(20,183,169,.035),transparent)}

.maturity-aside{position:sticky;top:105px;display:flex;flex-direction:column;gap:14px}
.maturity-result-card,.maturity-domain-results,.maturity-interpretation{padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-sm)}
.maturity-result-card{background:linear-gradient(145deg,var(--navy-950),#0c326d);color:#fff}
.maturity-result-card>span{font-size:11px;color:#9fe4dc;font-weight:850}
.maturity-result-card strong{display:block;margin:8px 0 2px;font-size:46px;line-height:1}
.maturity-result-card h2{margin:8px 0;color:#fff;font-size:20px}
.maturity-result-card p{margin:0;color:#cfdaea;font-size:12px;line-height:1.9}
.maturity-domain-results h3,.maturity-interpretation h3{margin:0 0 14px;font-size:17px;color:var(--navy-950)}
.domain-result{margin-bottom:14px}
.domain-result:last-child{margin-bottom:0}
.domain-result>div{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--ink-600);margin-bottom:5px}
.domain-result b{color:var(--teal-700)}
.domain-result progress{width:100%;height:8px}
.maturity-interpretation ol{margin:0;padding-right:18px}
.maturity-interpretation li{font-size:10px;line-height:1.9;color:var(--ink-600);margin-bottom:5px}
.maturity-interpretation a{display:flex;align-items:center;gap:5px;margin-top:14px;color:var(--blue-700);font-size:12px;font-weight:900}

@media(max-width:980px){
 .catalog-download-card{grid-template-columns:1fr}.maturity-layout{grid-template-columns:1fr}.maturity-aside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.maturity-interpretation{grid-column:1/-1}.maturity-scale-guide{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .dual-cta-grid,.catalog-form-grid{grid-template-columns:1fr}.dual-cta-grid article{min-height:auto;padding:25px}.catalog-download-card{padding:22px}.catalog-download-copy h2{font-size:24px}.maturity-scale-guide{grid-template-columns:1fr}.maturity-domain>header{grid-template-columns:1fr}.maturity-domain>header>span{width:72px}.maturity-question{padding:20px 16px}.maturity-scale{grid-template-columns:repeat(5,minmax(54px,1fr));overflow-x:auto;margin-right:0;padding-bottom:4px}.maturity-option span{min-height:58px}.maturity-option small{font-size:8px}.maturity-aside{grid-template-columns:1fr}.maturity-interpretation{grid-column:auto}
}
@media print{
 .maturity-method-section{padding-top:10px}.maturity-layout{grid-template-columns:1fr}.maturity-aside{position:static}.maturity-scale-guide{grid-template-columns:repeat(5,1fr)}.maturity-option input:not(:checked)+span{opacity:.45}.catalog-download-section{display:none!important}
}

/* Article index pagination (board feedback 2).
   Appended to v11 rather than shipped as a new v12 file: adding another
   <link> would alter the <head> of every page and break the byte-parity the
   static pages are held to. Uses the site's existing button language. */
.pagination-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.pagination-link{padding:10px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;font-weight:800;color:var(--blue-700);transition:.2s}
.pagination-link:hover{border-color:var(--blue-700);box-shadow:var(--shadow-sm)}
.pagination-link.is-disabled{color:var(--ink-500);opacity:.5;pointer-events:none}
.pagination-status{font-size:12px;color:var(--ink-600)}
@media (max-width:520px){.pagination-nav{gap:8px}.pagination-link{padding:9px 14px;font-size:12px}}

/* Logo-only client entries (board feedback 3): same box as a linked logo, but
   no pointer or hover lift, so it does not invite a click that goes nowhere. */
.client-logo.is-static{cursor:default}
.client-logo.is-static:hover{transform:none;box-shadow:none}

/* Article card cover photo (board feedback 6). The cover box is a fixed-height
   flex container built for an icon; an image fills it without distorting. */
.article-cover.has-image{padding:0}
.article-cover.has-image img{width:100%;height:100%;object-fit:cover;display:block}

/* Article-page cover photo, same treatment. */
.article-main-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:30px}

/* Blockquote inside article and story bodies (board feedback 7).
   The box was already styled, but the editor wraps quote text in <p>, and
   `.article-layout article p` (16px, grey body colour) is more specific than
   the blockquote's own typography — so a quote rendered as ordinary body copy
   sitting in a mint box. These rules restore the intended treatment. */
.article-layout blockquote{position:relative;padding-inline-start:60px}
.article-layout blockquote::before{content:"\201D";position:absolute;inset-inline-start:18px;top:6px;font-family:Georgia,'Times New Roman',serif;font-size:64px;line-height:1;color:var(--teal-500);opacity:.55}
.article-layout blockquote p{font-size:19px;line-height:2;color:var(--navy-950);font-weight:600;margin:0}
.article-layout blockquote p + p{margin-top:14px}
.article-layout blockquote cite,.article-layout blockquote footer{display:block;margin-top:14px;font-size:13px;font-weight:700;font-style:normal;color:var(--ink-600)}
@media (max-width:640px){
  .article-layout blockquote{padding:20px;padding-inline-start:46px}
  .article-layout blockquote::before{font-size:48px;inset-inline-start:12px}
  .article-layout blockquote p{font-size:16px}
}

/* Images placed inside an article body from the editor's toolbar. Without a
   rule they render at the file's own pixel size, which on a phone overflows
   the column and on a wide screen leaves a postage stamp mid-paragraph. */
.article-layout article img{display:block;width:100%;height:auto;margin:26px 0;border-radius:18px;border:1px solid var(--line)}

/* ===== Article reading experience =====
   Typography, contents list and closing section for /<slug>.html. The hero,
   header, footer and palette are untouched; this is about how the article
   itself reads. */

/* The hero opened 70px below a sticky header and set the title in up to 60px,
   which pushed the article's own first paragraph off the first screen and let
   the title outweigh the cover photo under it. */
.article-hero-v9{padding:44px 0 26px}
.article-hero-v9 h1{font-size:clamp(29px,3.3vw,42px);line-height:1.6;max-width:820px;margin:14px 0 10px}
.article-hero-v9>div>p{font-size:16px;line-height:2.05;max-width:760px}
/* Subordinate to the title, not competing with it. */
.article-meta{gap:18px;margin:16px 0 0;font-size:12px;color:var(--ink-500)}
.article-main-image{margin-top:26px}

/* Body rhythm. Headings carry the structure, so they need clear air above and
   a tight bond to the text they introduce — the gap above an h2 is deliberately
   several times the gap below it. All sizes ride --article-scale, the size the
   author picked in the panel (App\Enums\ArticleFontSize). */
.article-layout article>*:first-child{margin-top:0}
.article-layout article h2{font-weight:850;line-height:1.65;margin:46px 0 14px}
.article-layout article h3{font-size:calc(20px * var(--article-scale));font-weight:800;line-height:1.75;margin:32px 0 10px;color:var(--navy-950)}
.article-layout article h4{font-size:calc(17px * var(--article-scale));font-weight:800;line-height:1.8;margin:26px 0 8px;color:var(--navy-950)}
.article-layout article p{margin:0 0 18px}
/* Emphasis inside a sentence: heavier and darker than the body, but not a
   second heading — no colour change, no size change. */
.article-layout article strong,.article-layout article b{font-weight:800;color:var(--navy-950)}

/* Lists read as lists, not as paragraphs that happen to be indented. */
.article-layout article ul,.article-layout article ol{margin:0 0 20px;padding-inline-start:0;list-style:none}
.article-layout article li{position:relative;margin-bottom:10px;padding-inline-start:26px;font-size:calc(16px * var(--article-scale));line-height:2.2;color:var(--ink-600)}
.article-layout article ul>li::before{content:"";position:absolute;inset-inline-start:6px;top:calc(1.1em - 3px);width:6px;height:6px;border-radius:50%;background:var(--teal-500)}
.article-layout article ol{counter-reset:article-step}
.article-layout article ol>li{counter-increment:article-step}
.article-layout article ol>li::before{content:counter(article-step) "."; position:absolute;inset-inline-start:0;top:0;font-weight:850;color:var(--teal-700);font-size:calc(14px * var(--article-scale))}
.article-layout article li>ul,.article-layout article li>ol{margin:10px 0 0}
.article-layout article hr{margin:34px 0;border:0;border-top:1px solid var(--line)}
/* The pull-quote keeps the treatment board feedback 7 gave it; it only follows
   the reader's chosen size now. */
.article-layout blockquote p{font-size:calc(19px * var(--article-scale))}

/* Contents list. Every entry is a real anchor now — the ids are injected into
   the body at render time, see pages/article.blade.php. */
.article-toc{gap:0;max-height:calc(100vh - 190px);overflow-y:auto}
.article-toc b{margin-bottom:10px}
.article-toc a{display:block;padding:7px 12px 7px 8px;border-inline-start:2px solid transparent;border-radius:0 8px 8px 0;line-height:1.85;transition:.18s ease}
.article-toc a:hover{color:var(--blue-700);background:var(--surface)}
.article-toc a.toc-h3{padding-inline-start:20px;font-size:11.5px;color:var(--ink-500)}
/* Set by the scrollspy in v11.js on the section currently being read. */
.article-toc a.is-current{color:var(--navy-950);font-weight:850;border-inline-start-color:var(--teal-500);background:var(--surface)}

/* "بازگشت به مقاله‌ها" is navigation, not an offer, so it is a quiet link.
   The three checklist CTAs (bi/bpm/governance) keep .btn.btn-primary. */
.article-back-link{display:flex;align-items:center;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:800;color:var(--ink-600);background:#fff;transition:.18s ease}
.article-back-link:hover{border-color:var(--teal-400);color:var(--blue-700)}
.article-back-link::before{content:"\2190";font-size:14px;line-height:1}

/* A finished article ends somewhere. Same cards as the index, so this adds a
   section rather than a new visual language. */
.article-related-v11{padding-top:0}
.article-related-v11 .article-card h3{font-size:19px;line-height:1.7;margin:7px 0;color:var(--navy-950)}

@media (max-width:900px){
  /* The sidebar is no longer beside the text, so an inner scroll would trap
     the page's own scrolling. */
  .article-toc{max-height:none;overflow:visible}
}
@media (max-width:780px){
  .article-hero-v9{padding:32px 0 22px}
  .article-layout article h2{margin:36px 0 12px}
  .article-layout article h3{font-size:calc(18px * var(--article-scale));margin:26px 0 8px}
  .article-layout article li{font-size:calc(15px * var(--article-scale))}
}

/* ---------------------------------------------------------------- demos ---
   The demo cards shipped as an empty gradient with a play glyph on it. They
   carry a real screenshot of the product now, with the glyph left on top as a
   badge: the card still opens the video modal, so it has to keep reading as a
   poster rather than as a picture. A scrim sits between the two so the white
   caption stays legible whatever the image behind it looks like. */
.demo-poster{position:relative;overflow:hidden}
.demo-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.demo-poster:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,61,.28),rgba(7,26,61,.74))}
.demo-poster .i,.demo-poster span{position:relative}
.demo-poster .i{background:rgba(7,26,61,.5);border-radius:50%;padding:11px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.demo-poster span{text-shadow:0 1px 6px rgba(0,0,0,.55)}
.demo-poster:hover>img{transform:scale(1.04)}

/* Same treatment for the hero, minus the play glyph: nothing there is
   clickable, so a play button would promise something the box cannot do. */
.demo-hero-visual{position:relative;overflow:hidden}
.demo-hero-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,61,.22),rgba(7,26,61,.7))}
.demo-hero-visual b{position:relative;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}

@media (prefers-reduced-motion:reduce){
  .demo-poster>img{transition:none}
  .demo-poster:hover>img{transform:none}
}