/* css/mood.css — блок «Для будь-якого настрою» (спека 48 §1 + правки Ірини 29–30.08).
   ОДИН файл на дві сторінки: головна і /about. До 30.08 ці стилі жили двома копіями
   (в інлайні index.html і в lp.css) і вже почали розходитись — саме той борг, від якого
   застерігає канон 36 §4-bis. Токени, які файл споживає: --c1 --b1 --rd --r --t2 --t3
   --font-head --fs-alumni-scale --ease-out. */
/* ── «Для будь-якого настрою» (спека 48 §1 + правки Ірини 29.08) ──
   Компактні плашки: іконка + назва в один рядок, текст розкривається по кліку.
   Нативний <details> — жодного JS, працює з клавіатури і в будь-якому webview.
   Лайм не використовуємо (він лише для CTA), акцент — червоний бренд-колір. */
.mood-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.mood-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.mood-chip{background:var(--c1);border:1px solid var(--b1);border-radius:var(--rd);overflow:hidden;transition:border-color .2s}
.mood-chip[open]{border-color:rgba(200,16,46,.45)}
.mood-chip summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 14px;-webkit-tap-highlight-color:transparent}
.mood-chip summary::-webkit-details-marker{display:none}
.mood-chip summary:focus-visible{outline:2px solid var(--r);outline-offset:-2px}
.mood-ic{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(200,16,46,.12);border:1px solid rgba(200,16,46,.3);color:var(--r)}
.mood-ic svg{width:18px;height:18px}
.mood-t{flex:1;font-family:var(--font-head);font-weight:400;font-size:calc(17px * var(--fs-alumni-scale));line-height:1.05;letter-spacing:.5px;text-transform:uppercase;color:#f1f1f1}
/* «+» → «−» при розкритті: рискa-хрестик без зайвих символів у розмітці */
.mood-more{position:relative;flex:0 0 auto;width:16px;height:16px}
.mood-more::before,.mood-more::after{content:'';position:absolute;left:50%;top:50%;background:var(--t4);transition:transform .22s var(--ease-out),background .2s}
.mood-more::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.mood-more::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.mood-chip[open] .mood-more::after{transform:translate(-50%,-50%) rotate(90deg)}
.mood-chip[open] .mood-more::before,.mood-chip[open] .mood-more::after{background:var(--r)}
.mood-chip p{padding:0 14px 14px 59px;font-size:13.5px;line-height:1.6;color:var(--t3)}
@media(max-width:400px){.mood-chip p{padding-left:14px}}
@media(prefers-reduced-motion:reduce){.mood-more::before,.mood-more::after{transition:none}}
.mood-final{margin:18px 0 0;font-family:var(--font-head);font-weight:400;font-size:calc(18px * var(--fs-alumni-scale));line-height:1.2;color:#fff;text-align:center}
.mood-final em{font-style:normal;color:var(--r)}
.mood-cta{margin-top:16px;text-align:center}

/* мʼяке розкриття тексту по кліку (жило в інлайні index.html до 30.08 — тепер і на /about) */
.mood-chip p{animation:moodOpen .3s var(--ease-out) both}
@keyframes moodOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mood-chip p{animation:none}}