/* ============================================================
   mg-gallery.css — Delat galleri-lager för Mäklargruvan
   Single source of truth för broschyr- och skyltgalleriet.
   Förutsätter att värdsidan definierar dessa CSS-variabler:
     --p (navy var(--mg-navy)), --mg-surface (#f6f2ec), --surface (var(--mg-surface)),
     --g (gold #b87539), --g-shine, --line (#e6e0d4),
     --text (var(--mg-navy)), --text-soft (var(--mg-ink-soft)),
     --font (Inter), --display (Cormorant/Source Serif), --mono (JetBrains)
   Faller tillbaka på literala värden om variabler saknas.
   ============================================================ */

.mg-gal{
  --gal-navy:var(--p,var(--mg-navy));
  --gal-paper:var(--mg-surface,#f6f2ec);
  --gal-surface:var(--surface,var(--mg-surface));
  --gal-gold:var(--g,#b87539);
  --gal-line:var(--line,#e6e0d4);
  --gal-soft:var(--text-soft,var(--mg-ink-soft));
    --gal-serif:var(--display,"Source Serif 4","Cormorant Garamond",Georgia,serif);
  --gal-mono:var(--mono,"JetBrains Mono",ui-monospace,monospace);
  display:flex; flex-direction:column; flex:1; min-height:0; min-width:0;
  color:var(--gal-navy); box-sizing:border-box;
}
.mg-gal *,.mg-gal *::before,.mg-gal *::after{box-sizing:border-box}

/* ── FLIKRAD ── */
.mg-gal-tabs{flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem 1.6rem .2rem; background:var(--gal-surface)}
.mg-gal-tab{display:flex; align-items:center; gap:.55rem; padding:.7rem 1.5rem; font-size:1rem; font-weight:600; border:0;
  border-bottom:3px solid transparent; background:transparent; color:var(--gal-soft); cursor:pointer; font-family:var(--mg-font);
  transition:all .15s; border-radius:8px 8px 0 0}
.mg-gal-tab .mg-gal-ic{font-size:1.05rem; opacity:.8; display:inline-flex}
.mg-gal-tab.active{color:var(--gal-navy); border-bottom-color:var(--gal-gold)}
.mg-gal-tab:not(.active):hover{color:var(--gal-navy); background:var(--gal-paper)}
.mg-gal-tabsrule{flex-shrink:0; height:1px; background:var(--gal-line)}

/* ── GALLERI-VY ── */
.mg-gal-view{display:none; flex-direction:column; flex:1; min-height:0}
.mg-gal-view.active{display:flex}
.mg-gal-toolbar{flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; padding:1rem 1.6rem; background:var(--gal-surface)}
.mg-gal-toolbar:empty{display:none}
.mg-gal-fblock{display:flex; align-items:center; gap:.6rem}
.mg-gal-flabel{font-family:var(--gal-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gal-soft)}
.mg-gal-seg{display:inline-flex; background:var(--gal-paper); border:1px solid var(--gal-line); border-radius:9px; padding:3px}
.mg-gal-seg button{padding:.45rem .9rem; font-size:.82rem; font-weight:500; border:0; border-radius:6px; background:transparent; color:var(--gal-soft); cursor:pointer;  transition:.15s}
.mg-gal-seg button.active{background:#fff; color:var(--gal-navy); box-shadow:0 1px 3px rgba(13,38,63,.12)}
.mg-gal-divider{width:1px; height:34px; background:var(--gal-line)}

.mg-gal-scroll{flex:1; min-height:0; overflow-y:auto; padding:1.4rem 1.6rem 3rem}
.mg-gal-intro{max-width:680px; margin:0 auto 1.6rem; text-align:center}
.mg-gal-intro h2{font-family:var(--gal-serif); font-size:1.5rem; font-weight:500; margin:0 0 .3rem; color:var(--gal-navy)}
.mg-gal-intro p{margin:0; color:var(--gal-soft); font-size:.92rem; line-height:1.55}

.mg-gal-grid{display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); max-width:760px; margin:0 auto}
.mg-gal-grid.is-landscape{max-width:1040px}
.mg-gal-grid.is-broschyr{max-width:1180px; gap:1.8rem}

.mg-gal-card{background:var(--gal-surface); border:1px solid var(--gal-line); border-radius:14px; padding:1rem;
  display:flex; flex-direction:column; gap:.85rem; transition:.18s; position:relative}
.mg-gal-card:hover{border-color:var(--gal-gold); box-shadow:0 12px 34px rgba(13,38,63,.10); transform:translateY(-2px)}
.mg-gal-card.active{border-color:rgba(13,38,63,.46); box-shadow:inset 4px 0 0 var(--gal-navy), 0 12px 34px rgba(13,38,63,.10)}
.mg-gal-card.active::after{content:''; position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:50%; background:var(--gal-navy)}
.mg-gal-thumbframe{display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(160deg,#ece5d7,#ddd4c2); border-radius:9px; padding:14px; overflow:hidden; min-height:180px}
.mg-gal-thumb{overflow:hidden; flex-shrink:0; border-radius:3px; box-shadow:0 8px 22px rgba(13,38,63,.16)}
.mg-gal-thumb.portrait{width:166px; height:234px}
.mg-gal-thumb.landscape{width:234px; height:166px}
.mg-gal-meta{display:flex; flex-direction:column; gap:.15rem; padding:0 .15rem}
.mg-gal-name{font-family:var(--gal-serif); font-size:1.08rem; font-weight:600; line-height:1.2; color:var(--gal-navy)}
.mg-gal-desc{font-size:.8rem; color:var(--gal-soft); line-height:1.4}
.mg-gal-tags{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.15rem}
.mg-gal-tag{font-family:var(--gal-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .45rem; border-radius:4px; background:var(--gal-paper); color:var(--gal-soft)}
.mg-gal-tag.rich{background:rgba(184,148,106,.16); color:#8a5a2e}
.mg-gal-actions{display:flex; gap:.5rem; margin-top:.15rem}
.mg-gal-btn{flex:1; padding:.6rem; font-size:.85rem; font-weight:900; border-radius:7px; cursor:pointer; transition:.15s; border:1px solid var(--gal-line); display:flex; align-items:center; justify-content:center; gap:.4rem}
.mg-gal-btn.ghost{background:rgba(255,255,255,.64); color:var(--gal-navy)}
.mg-gal-btn.ghost:hover{background:#fff; border-color:var(--line-warm,rgba(184,117,57,.22)); transform:translateY(-1px); box-shadow:0 8px 22px rgba(13,38,63,.06)}
.mg-gal-btn.solid{background:var(--gal-navy); color:#fff; border-color:var(--gal-navy); box-shadow:0 12px 24px rgba(13,38,63,.18)}
.mg-gal-btn.solid:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 16px 30px rgba(13,38,63,.24)}

/* mini-uppslag (broschyr) */
.mg-gal-spread{display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(160deg,#ece5d7,#ddd4c2); border-radius:10px; padding:18px 14px; overflow:hidden; min-height:210px}
.mg-gal-minipage{background:#fff; border-radius:2px; box-shadow:0 6px 18px rgba(13,38,63,.18); overflow:hidden; flex-shrink:0}
.mg-gal-minipage.lead{width:118px; height:167px}
.mg-gal-minipage.inner{width:92px; height:130px; align-self:center}
.mg-gal-minipage.inner.third{width:78px; height:110px}

/* ── EDITOR-VY ── */
.mg-gal-editor{display:none; flex-direction:column; flex:1; min-height:0}
.mg-gal-editor.active{display:flex}
.mg-gal-editorbar{flex-shrink:0; display:flex; align-items:center; gap:1rem; padding:.7rem 1.6rem; border-bottom:1px solid var(--gal-line); background:var(--gal-surface)}
.mg-gal-back{display:flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:8px; border:1px solid var(--gal-line); background:transparent; color:var(--gal-navy); cursor:pointer;  font-size:.88rem; transition:.15s}
.mg-gal-back:hover{background:var(--gal-paper)}
.mg-gal-chosen{font-size:.86rem; color:var(--gal-soft)}
.mg-gal-chosen strong{color:var(--gal-navy); font-weight:600}

/* page-nav (broschyr) */
.mg-gal-pagenav{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; padding:.8rem 1rem; flex-shrink:0}
.mg-gal-pagedot{padding:.35rem .7rem; font-size:.76rem; border-radius:6px; border:1px solid var(--gal-line); background:var(--gal-surface); color:var(--gal-soft); cursor:pointer;transition:.15s}
.mg-gal-pagedot.active{background:var(--gal-navy); color:#fff; border-color:var(--gal-navy)}

/* ── MODAL (förhandsgranskning) ── */
.mg-gal-modal{position:fixed; inset:0; background:rgba(13,38,63,.78); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:9000; padding:2rem; flex-direction:column; gap:1.3rem}
.mg-gal-modal.open{display:flex}
.mg-gal-modalhost{display:flex; align-items:center; justify-content:center; gap:14px; max-height:72vh}
.mg-gal-modalbar{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center}
.mg-gal-modaltitle{color:#fff; font-family:var(--gal-serif,"Source Serif 4","Cormorant Garamond",Georgia,serif); font-size:1.25rem}
.mg-gal-modaltitle em{color:var(--mg-dark-gold-2); font-style:italic; font-weight:600}
.mg-gal-modalbtn{padding:.7rem 1.4rem; font-size:.9rem; font-weight:500; border-radius:24px; cursor:pointer;  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; transition:.15s}
.mg-gal-modalbtn:hover{background:rgba(255,255,255,.12)}
.mg-gal-modalbtn.solid{background:rgba(21,34,51,.92); border-color:rgba(255,255,255,.45); color:#fff}
.mg-gal-modalbtn.solid:hover{background:rgba(21,34,51,1); border-color:rgba(255,255,255,.7)}
.mg-gal-modalplate{display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.85); font-size:.8rem}
.mg-gal-modalplate .mg-gal-seg{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2)}
.mg-gal-modalplate .mg-gal-seg button{color:rgba(255,255,255,.7)}
.mg-gal-modalplate .mg-gal-seg button.active{background:rgba(255,255,255,.92); color:var(--mg-navy)}
body[data-theme="dark"] .mg-gal-modalplate .mg-gal-seg button{color:rgba(255,255,255,.7)}
body[data-theme="dark"] .mg-gal-modalplate .mg-gal-seg button.active{background:rgba(255,255,255,.92); color:var(--mg-navy)}

/* scrollbar */
.mg-gal-scroll::-webkit-scrollbar{width:10px}
.mg-gal-scroll::-webkit-scrollbar-thumb{background:#d8cfbe; border-radius:6px}

/* ── DARK MODE (matchar broschyr.html: body[data-theme="dark"]) ── */
body[data-theme="dark"] .mg-gal-tabs,
body[data-theme="dark"] .mg-gal-toolbar,
body[data-theme="dark"] .mg-gal-editorbar{background:rgba(16,25,37,.6)}
body[data-theme="dark"] .mg-gal-card{background:var(--mg-dark-surface); border-color:rgba(255,255,255,.08)}
body[data-theme="dark"] .mg-gal-card.active{border-color:rgba(201,154,95,.5); box-shadow:inset 4px 0 0 var(--g,var(--mg-gold-2)), 0 12px 34px rgba(0,0,0,.30)}
body[data-theme="dark"] .mg-gal-card.active::after{background:var(--g,var(--mg-gold-2))}
body[data-theme="dark"] .mg-gal-seg{background:rgba(21,34,51,.6); border-color:rgba(255,255,255,.08)}
body[data-theme="dark"] .mg-gal-seg button.active{background:rgba(21,34,51,.92); color:var(--text); box-shadow:inset 0 0 0 1px rgba(201,154,95,.40)}
body[data-theme="dark"] .mg-gal-btn.ghost{background:rgba(21,34,51,.70); color:var(--text); border-color:rgba(255,255,255,.12)}
body[data-theme="dark"] .mg-gal-btn.ghost:hover{background:rgba(21,34,51,.90); border-color:rgba(201,154,95,.40)}
body[data-theme="dark"] .mg-gal-btn.solid{background:rgba(21,34,51,.85); color:var(--text); border-color:rgba(201,154,95,.40)}
body[data-theme="dark"] .mg-gal-btn.solid:hover{background:rgba(21,34,51,.95); border-color:rgba(201,154,95,.60)}
body[data-theme="dark"] .mg-gal-pagedot{background:rgba(21,34,51,.6); color:var(--text-soft)}
body[data-theme="dark"] .mg-gal-pagedot.active{background:rgba(21,34,51,.92); color:var(--text); border-color:rgba(201,154,95,.40)}
body[data-theme="dark"] .mg-gal-back{background:rgba(21,34,51,.6); border-color:rgba(255,255,255,.08); color:var(--text)}