/*
Theme Name: Moja Galerija
Theme URI: https://mojagalerija.rs
Author: Fototeka Models
Author URI: https://fototeka.rs
Description: Minimalistička tema za "Moja Galerija" — platformu za poručivanje fotografija sa svadbe. Crno-belo sa terakota akcentom, fokus na fotografijama.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: moja-galerija
*/

:root{
	--mg-ink:#111111;
	--mg-gray:#6e6e6e;
	--mg-line:#e6e6e6;
	--mg-accent:#a8431e;
	--mg-bg-soft:#f7f7f7;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color:var(--mg-ink);
	background:#fff;
	line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.mg-wrap{ max-width:1240px; margin:0 auto; padding:0 6vw; }

/* ---------- Header ---------- */
.mg-site-header{
	position:absolute; top:0; left:0; right:0; z-index:20;
	padding:30px 6vw; display:flex; justify-content:space-between; align-items:center; color:#fff;
}
.mg-site-header.mg-solid{ position:relative; color:var(--mg-ink); background:#fff; border-bottom:1px solid var(--mg-line); }
.mg-logo{ font-size:19px; font-weight:800; letter-spacing:-0.02em; text-decoration:none; color:inherit; }
.mg-nav{ display:flex; gap:34px; align-items:center; list-style:none; margin:0; padding:0; }
.mg-nav a{ text-decoration:none; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:inherit; }
.mg-nav .mg-nav-cta{ border:1px solid currentColor; padding:9px 20px; }

/* ---------- Hero ---------- */
.mg-hero{
	position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden;
	background:linear-gradient(160deg,#1a1a1a,#3a3a3a);
}
.mg-hero img.mg-hero-bg{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); opacity:0.55;
}
.mg-hero-content{ position:relative; color:#fff; padding:0 6vw 90px; max-width:900px; }
.mg-eyebrow{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#e08a5c; font-weight:700; }
.mg-hero-content h1{ font-size:clamp(38px,6.5vw,76px); font-weight:800; line-height:1.02; letter-spacing:-0.02em; margin:16px 0 22px; }
.mg-hero-content p{ font-size:18px; color:#dadada; max-width:480px; margin-bottom:32px; }
.mg-hero-buttons{ display:flex; gap:16px; flex-wrap:wrap; }

.mg-btn{
	display:inline-block; background:var(--mg-accent); color:#fff; padding:15px 30px; text-decoration:none;
	font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; border-radius:2px; border:1px solid var(--mg-accent);
}
.mg-btn:hover{ opacity:0.9; }
.mg-btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.7); }

/* ---------- Sections ---------- */
.mg-section{ padding:110px 0; }
.mg-section-head{ margin-bottom:60px; max-width:560px; }
.mg-section-head h2{ font-size:38px; font-weight:800; letter-spacing:-0.02em; margin:14px 0 0; }
.mg-section-head p{ color:var(--mg-gray); font-size:16px; }

.mg-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--mg-ink); }
.mg-step{ padding:26px 30px 0 0; border-right:1px solid var(--mg-line); }
.mg-step:last-child{ border-right:none; }
.mg-step .mg-num{ font-size:13px; color:var(--mg-accent); font-weight:800; letter-spacing:0.08em; margin-bottom:14px; }
.mg-step h3{ font-size:21px; font-weight:700; margin:0 0 10px; letter-spacing:-0.01em; }
.mg-step p{ color:var(--mg-gray); font-size:15px; margin:0; }

.mg-about{ background:var(--mg-bg-soft); }
.mg-about-grid{ display:grid; grid-template-columns:0.5fr 1fr; gap:60px; align-items:center; }
.mg-about-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:4px; filter:grayscale(0.3); }
.mg-about-grid h3{ font-size:26px; font-weight:800; margin:0 0 14px; letter-spacing:-0.01em; }
.mg-about-grid p{ color:var(--mg-gray); font-size:16px; }

.mg-favorites-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mg-favorites-item{ aspect-ratio:3/4; overflow:hidden; border-radius:3px; }
.mg-favorites-item img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.15); transition:transform 0.3s; }
.mg-favorites-item:hover img{ transform:scale(1.04); }

.mg-cta-band{ background:var(--mg-ink); color:#fff; text-align:center; padding:90px 6vw; }
.mg-cta-band h2{ font-size:34px; font-weight:800; margin:0 0 26px; letter-spacing:-0.01em; }

/* ---------- Footer ---------- */
.mg-site-footer{ padding:60px 6vw 30px; border-top:1px solid var(--mg-line); }
.mg-footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-bottom:40px; }
.mg-footer-grid a{ display:block; text-decoration:none; font-size:14px; margin-bottom:8px; font-weight:500; color:var(--mg-ink); }
.mg-footer-col-title{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mg-gray); margin-bottom:14px; }
.mg-fine{ font-size:13px; color:var(--mg-gray); }

/* ---------- Generic page (shortcode panels) ---------- */
.mg-page-wrap{ max-width:1100px; margin:0 auto; padding:150px 6vw 90px; min-height:50vh; }

@media (max-width:820px){
	.mg-nav, .mg-hero-buttons .mg-btn-outline{ display:none; }
	.mg-steps{ grid-template-columns:1fr; border-top:none; }
	.mg-step{ border-right:none; border-top:2px solid var(--mg-ink); padding:26px 0 0; }
	.mg-about-grid{ grid-template-columns:1fr; }
	.mg-page-wrap{ padding-top:120px; }
	.mg-favorites-grid{ grid-template-columns:repeat(2,1fr); }
}