/* article.css — layout de articol de blog pentru cele 4 articole din /en/guides/ (peste spoke.css).
   Mobile-first (390px). Trepte de latime, toate centrate: text 680 → antet 860 → poze late 980.
   Nu contine animatii: performanta > fancy. Tokenii vin din spoke.css (:root). */

:root { --ink:#3A362F; --hl:rgba(203,162,76,.4); }

.art { padding-top:104px; overflow-x:clip; }

/* ── ANTET ── */
.art-head { max-width:860px; margin:0 auto; padding:0 20px; }
.art-crumb { font-size:13px; letter-spacing:.3px; color:var(--light); margin-bottom:20px; }
.art-crumb a { display:inline-block; padding:5px 0; color:var(--gold); text-decoration:none; }
.art-crumb a:hover { text-decoration:underline; }
.art-kicker { display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:13px; font-weight:500; color:var(--light); }
.art-chip { background:var(--gold); color:#fff; padding:5px 13px; border-radius:99px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.art-title { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(38px,8.4vw,66px); line-height:1.04; letter-spacing:-.01em; color:var(--dark); text-wrap:balance; }
.art-title em { color:var(--gold); font-style:italic; }
.art-deck { margin-top:22px; max-width:720px; font-size:clamp(18px,2.6vw,22px); font-weight:300; line-height:1.5; color:var(--mid); text-wrap:balance; }

.byline { display:flex; align-items:center; gap:14px; margin-top:32px; padding-top:22px; border-top:1px solid var(--border); }
.byline-photo { width:56px; height:56px; flex:none; border-radius:50%; object-fit:cover; border:2px solid var(--cream); box-shadow:0 0 0 1px var(--border); }
.byline-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.byline-by { font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--light); }
.byline-name { font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:600; line-height:1.1; color:var(--dark); }
.byline-role { font-size:13px; line-height:1.35; color:var(--light); }
.byline-sig { height:56px; width:auto; flex:none; mix-blend-mode:multiply; opacity:.92; }

/* ── COPERTA ── */
.art-cover { max-width:980px; margin:34px auto 0; padding:0 20px; }
.art-cover img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.14); }

/* ── PE SCURT ── */
.in-short { margin:0 0 34px; padding:22px 24px 12px; background:color-mix(in srgb, var(--gold-l) 13%, #fff); border:1px solid color-mix(in srgb, var(--gold-l) 50%, var(--border)); border-radius:16px; }
.in-short-label { margin-bottom:6px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.in-short ul { list-style:none; margin:0; padding:0; }
.in-short li { position:relative; padding:8px 0 8px 22px; font-size:16px; line-height:1.55; color:var(--ink); text-wrap:pretty; }
.in-short li::before { content:''; position:absolute; left:2px; top:1.02em; width:8px; height:8px; border-radius:50%; background:var(--gold-l); }

/* ── CORPUL: grila cu 3 latimi (text / poza larga / intreg) ── */
.art-body { display:grid; grid-template-columns:[full-start] minmax(20px,1fr) [wide-start] minmax(0,150px) [text-start] min(680px,calc(100% - 40px)) [text-end] minmax(0,150px) [wide-end] minmax(20px,1fr) [full-end]; margin-top:40px; }
.art-body > * { grid-column:text; min-width:0; }
.art-body p { margin:0 0 22px; font-size:17px; font-weight:400; line-height:1.82; color:var(--ink); text-wrap:pretty; }
.art-body p.art-lead { font-size:19px; line-height:1.68; color:var(--dark); }
.art-body p.art-note { font-size:14px; font-style:italic; color:var(--light); margin-top:8px; }
.art-body a { color:var(--gold); text-underline-offset:3px; }

.part-head { display:flex; align-items:baseline; gap:16px; margin-top:34px; padding-top:48px; border-top:1px solid var(--border); margin-bottom:22px; }
.part-num { font-family:'Cormorant Garamond',serif; font-size:clamp(46px,10vw,66px); font-weight:300; line-height:.85; color:var(--gold-l); flex:none; min-width:1.25em; }
.part-title { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(27px,5.4vw,36px); line-height:1.14; color:var(--dark); text-wrap:balance; margin:0; }

mark.hl { background:linear-gradient(transparent 60%, var(--hl) 60%); color:inherit; padding:0 1px; }

/* ── CITATE ── */
blockquote.pull { margin:44px 0 46px; padding:0; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:clamp(25px,5.2vw,33px); line-height:1.26; color:var(--dark); text-wrap:balance; }
blockquote.pull::before { content:'“'; display:block; height:36px; font-size:88px; font-style:normal; font-weight:400; line-height:.62; color:var(--gold-l); }
blockquote.pull p { margin:0; font:inherit; color:inherit; line-height:inherit; }
blockquote.story { margin:30px 0 32px; padding:22px 24px; background:var(--cream2); border-radius:14px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; line-height:1.62; color:var(--dark); }
blockquote.story p { margin:0; font:inherit; color:inherit; line-height:inherit; }

/* ── CELE TREI PLANURI (art. 15 apr) ── */
.plans { list-style:none; margin:6px 0 26px; padding:0; display:grid; gap:12px; }
.plans li { padding:16px 18px; background:color-mix(in srgb, var(--gold-l) 10%, #fff); border:1px solid var(--border); border-radius:14px; font-size:16px; line-height:1.6; color:var(--ink); }
.plans strong { display:block; margin-bottom:6px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }

/* ── POZE ── */
.art-photo { grid-column:wide; margin:40px 0 44px; }
.art-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.13); }
.art-photo figcaption { margin-top:12px; font-size:13px; font-style:italic; text-align:center; color:var(--light); }
.art-photo.sketch { grid-column:text; }
.art-photo.sketch img { width:auto; max-width:100%; max-height:400px; aspect-ratio:auto; margin:0 auto; object-fit:contain; border-radius:0; box-shadow:none; mix-blend-mode:multiply; }
.art-photo.molecule { grid-column:text; }
.art-photo.molecule img { width:auto; max-width:100%; max-height:190px; aspect-ratio:auto; margin:0 auto; object-fit:contain; border-radius:0; box-shadow:none; }

/* ── PRAGURI ── */
@media (max-width:489px) {
  .byline { align-items:flex-start; gap:12px; }
  .byline-sig { height:50px; align-self:flex-start; margin-top:-2px; }
}
@media (min-width:490px) { .art-cover img { aspect-ratio:16/9; } }
@media (min-width:768px) {
  .art { padding-top:126px; }
  .art-body p { font-size:18px; }
  .art-cover img { aspect-ratio:2/1; }
  .art-photo img { aspect-ratio:2/1; }
  .byline-photo { width:64px; height:64px; }
  .byline-sig { height:64px; }
  .in-short { padding:26px 30px 16px; }
  .in-short li { font-size:16.5px; }
  .plans { grid-template-columns:repeat(3,1fr); }
}

/* ── GHIDURI: aceleasi componente, peste continutul existent (.art-body.prose pastreaza stilurile .prose) ── */
.art-kicker { flex-wrap:wrap; }
.byline-mark { width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--dark); color:var(--gold-l); }
.byline-mark svg { width:58%; height:58%; }
.part-head.plain { padding-top:48px; }
.art-body.prose ul, .art-body.prose ol { margin:0 0 24px; max-width:none; }
.art-body.prose li { font-size:17px; font-weight:400; line-height:1.7; color:var(--ink); }
.art-body.prose li::before { top:12px; }
.art-body.prose p { max-width:none; }
.art-body .callout p { font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.9); font-weight:300; margin:0; }
.art-body .card p { font-size:14.5px; font-weight:300; line-height:1.6; color:var(--mid); margin:0; }
.art-body .cards { grid-column:wide; }
.art-body .src-row p, .art-body .faq-item p { font-size:17px; font-weight:400; line-height:1.75; color:var(--ink); }
.art-body .src-row a { text-decoration:none; }
.art-faq { counter-reset:q; }
.art-faq .faq-item { padding:26px 0; }
.art-faq .faq-item h3 { display:flex; align-items:baseline; gap:16px; margin:0 0 10px; font-size:clamp(22px,3vw,27px); line-height:1.25; }
.art-faq .faq-item h3::before { counter-increment:q; content:counter(q, decimal-leading-zero); flex:none; min-width:1.5em; font-weight:300; font-size:40px; line-height:.9; color:var(--gold-l); }

/* titlu si rezumat: fiecare propozitie pe randul ei (vezi fraza-noua-nu-incepe-la-coada-randului) */
.art-title .s, .art-deck .s { display:block; }
.art-body .faq-item h3 .s { display:block; }
.art-faq .faq-item h3 .q { flex:1; min-width:0; }
/* callout (fond inchis): linkul si textul ingrosat raman lizibile (.art-body a / .prose strong le faceau inchise pe inchis) */
.art-body .callout a { color:var(--gold-l); }
.art-body .callout strong, .art-body .callout b { color:#fff; font-weight:600; }

/* preturi/sume: fiecare pe randul ei; poze limitate la rezolutia fisierului */
.art-body .ln { display:block; text-wrap:balance; }
.art-body ul.pay-list { margin-top:2px; }
.art-photo { justify-self:center; width:100%; }
/* FAQ pret: comutatorul de moneda (currency.js il insereaza dupa primul paragraf cu suma mare) ramane vizual la sfarsit, dupa lista */
.pay-answer { display:flex; flex-direction:column; }
.pay-answer .cur-wrap { order:9; }