/* Стенгазеты — новая версия (v3), дополняет main/v3/razdel.css. stengazeta/template-v3.php, v3-editor.js. 25.10.2026 */

/* Кнопки */
.v3r .sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 16px; border: 1.5px solid var(--g200); border-radius: 14px;
  background: #fff; color: var(--g900); font: 700 15px/1.2 'Inter', sans-serif; cursor: pointer; transition: all .15s; text-decoration: none; }
.v3r .sg-btn:hover { border-color: var(--purple); color: var(--purple); }
.v3r .sg-btn--main { border-color: transparent; background: var(--grad); color: #fff !important; font-family: var(--display); font-weight: 800; box-shadow: 0 4px 14px rgba(106,76,240,.22); }
.v3r .sg-btn--main:hover { color: #fff; box-shadow: var(--shadow-hover); }
.v3r .sg-btn--sm { padding: 8px 12px; font-size: 14px; border-radius: 12px; }
.v3r .sg-btn--ai { background: var(--purple-light); border-color: transparent; color: var(--purple); }
.v3r .sg-btn.is-busy { opacity: .7; pointer-events: none; }
.sg-btn--file input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Конструктор */
.sg-ed { margin: 18px 0 8px; padding: 24px; border-radius: 24px; background: #FAF8FE; border: 1px solid #EEE9FB; }
.sg-ed__head .v3r-lead { margin-bottom: 18px; }
.sg-ed__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.sg-ed.is-port .sg-ed__in { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
.sg-ed__view { position: sticky; top: calc(var(--head) + 16px); }
.sg-ed__view canvas { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; box-shadow: 0 10px 34px rgba(40,20,90,.16); }
.sg-ed.is-port .sg-ed__view canvas { max-height: calc(100vh - var(--head) - 120px); width: auto; max-width: 100%; margin: 0 auto; }
.sg-ed__out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sg-ed__out .sg-btn--main { flex: 1 1 180px; padding: 14px 18px; font-size: 17px; }
.sg-print { display: grid; gap: 6px; margin-top: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); border: 1px solid #F0EEF6; }
.sg-print[hidden] { display: none; }
.sg-print b { font: 800 16px/1.2 var(--display); margin-bottom: 4px; }
.v3r .sg-print button { text-align: left; padding: 10px 12px; border: 1.5px solid var(--g200); border-radius: 12px; background: #fff; font: 600 15px/1.3 'Inter', sans-serif; cursor: pointer; }
.v3r .sg-print button:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
.sg-print small { color: var(--g600); font-size: 13px; line-height: 1.4; margin-top: 4px; }

.sg-ed__form { display: grid; gap: 14px; }
.sg-ed__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sg-ed__form legend, .sg-ed__form label > span, .sg-photo > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--g600); text-transform: uppercase; letter-spacing: .04em; }
.sg-ed__form label > span small, .sg-photo > span small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sg-ed__form label[hidden] { display: none; }
.sg-ed__form input[type=text], .sg-ed__form textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--g200); border-radius: 12px; background: #fff; font: 16px/1.4 'Inter', sans-serif; color: var(--g900); }
.sg-ed__form textarea { resize: vertical; }
.sg-ed__form input[type=text]:focus, .sg-ed__form textarea:focus { outline: none; border-color: var(--purple); }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v3r .sg-chips button { padding: 7px 12px; border: 1.5px solid var(--g200); border-radius: var(--pill); background: #fff; font: 700 14px/1.2 'Inter', sans-serif; color: var(--g900); cursor: pointer; transition: all .15s; }
.v3r .sg-chips button:hover { border-color: var(--purple); color: var(--purple); }
.v3r .sg-chips button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: #fff; }
.sg-txtbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.sg-txtbtns input { flex: 1 1 100%; }
.sg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sg-thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; background: center/cover no-repeat #eee; box-shadow: var(--shadow); }
.v3r .sg-thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1A1A1A; color: #fff; font: 700 14px/22px 'Inter', sans-serif; cursor: pointer; padding: 0; }

/* Готовые стенгазеты авторов */
.sg-cnt { color: var(--g400); font-size: .6em; font-weight: 700; }
.sg-pg { color: var(--g400); font-size: .6em; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 16px; }
.sg-card { display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: var(--shadow); border: 1px solid #F0EEF6; overflow: hidden; transition: box-shadow .2s; }
.sg-card:hover { box-shadow: 0 6px 26px rgba(40,20,90,.1); }
.sg-card__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #F4F1FB; overflow: hidden; }
.sg-card__img img { width: 100%; height: 100%; object-fit: cover; }
.sg-card__img span, .sg-card__img.is-noimg::after { font-size: 44px; }
.sg-card__img.is-noimg::after { content: '🖼'; }
.sg-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.sg-card__t { font: 800 16px/1.3 var(--display); }
.sg-card__t:hover { color: var(--purple); }
.sg-card__body small { color: var(--g600); font-size: 13px; }
.sg-card__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.sg-empty { padding: 24px; border-radius: 18px; background: #FAF8FE; }

/* Одна стенгазета */
.sg-one { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 12px; }
.sg-one__img { border-radius: 18px; overflow: hidden; background: #F4F1FB; box-shadow: var(--shadow); min-height: 160px; display: flex; align-items: center; justify-content: center; }
.sg-one__img img { width: 100%; height: auto; }
.sg-one__img.is-noimg::after { content: '🖼'; font-size: 60px; }
.sg-one__about { font-size: 16px; line-height: 1.65; color: #333; margin-bottom: 18px; }
.sg-one__or { margin-top: 14px; font-size: 15px; color: var(--g600); }
.sg-one__or a { color: var(--purple); font-weight: 700; }

@media (max-width: 1024px) {
  .sg-ed__in, .sg-ed.is-port .sg-ed__in { grid-template-columns: minmax(0, 1fr); }
  .sg-ed__view { position: static; }
  .sg-one { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .sg-ed { margin: 14px -16px 4px; padding: 18px 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .sg-ed.is-port .sg-ed__view canvas { max-height: 70vh; }
  .sg-ed__out .sg-btn { flex: 1 1 auto; }
  .sg-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sg-card__body { padding: 10px 12px 12px; }
  .sg-card__t { font-size: 14.5px; }
  .v3r .sg-card__acts .sg-btn--sm { flex: 1 1 100%; padding: 8px; font-size: 13px; }
}