/* ============================================================
   PIXELBUZZ — Layouts
   ============================================================ */

.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 72px; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: var(--bg-hero-overlay); z-index: 1; }
.hero__content { position: relative; z-index: 2; text-align: center; max-width: 820px; padding: var(--space-3xl) var(--space-xl); }
.hero__label { display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--orange); margin-bottom: var(--space-lg); }
.hero__title { font-size: var(--fs-hero); font-weight: var(--fw-extrabold); color: #FFFFFF; line-height: var(--lh-tight); margin-bottom: var(--space-xl); }
.hero__subtitle { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.8); line-height: var(--lh-relaxed); max-width: 600px; margin: 0 auto var(--space-2xl); }
.hero__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

.page-hero { position: relative; padding: calc(72px + var(--space-4xl)) 0 var(--space-4xl); background: var(--bg-secondary); text-align: center; overflow: hidden; }
.page-hero--dark { background: #111111; }
.page-hero--dark .page-hero__title { color: #F5F5F5; }
.page-hero--dark .page-hero__subtitle { color: #A0A0A0; }
.page-hero__title { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); margin-bottom: var(--space-lg); }
.page-hero__subtitle { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--lh-relaxed); }

.grid { display: grid; gap: var(--space-xl); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--services { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.grid--features { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid--testimonials { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid--packages { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); align-items: start; }
.grid--team { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.grid--blog { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid--cities { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__content { padding: var(--space-xl) 0; }
.split__image { border-radius: var(--radius-lg); overflow: hidden; }
.split__image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }

.cta-section { background: #111111; padding: var(--space-4xl) 0; text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse at center, rgba(255,92,0,0.06) 0%, transparent 60%); pointer-events: none; }
.cta-section__content { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.cta-section__title { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); color: #F5F5F5; margin-bottom: var(--space-lg); }
.cta-section__text { font-size: var(--fs-body-lg); color: #A0A0A0; margin-bottom: var(--space-2xl); line-height: var(--lh-relaxed); }
.cta-section__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

.city-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-xl) var(--space-md); background: var(--card-bg); border-radius: var(--radius-md); border: 1px solid var(--border-color); text-align: center; transition: all var(--transition-base); text-decoration: none; }
.city-card:hover { border-color: var(--orange-border); box-shadow: var(--card-shadow); color: var(--orange); }
.city-card__name { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-primary); transition: color var(--transition-fast); }
.city-card:hover .city-card__name { color: var(--orange); }

.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: stretch; }
.editorial__image { border-radius: var(--radius-lg); overflow: hidden; }
.editorial__image img { width: 100%; height: 100%; object-fit: cover; min-height: 500px; }
.editorial__content { display: flex; flex-direction: column; justify-content: center; padding: var(--space-2xl) 0; }
.editorial__content h2 { margin-bottom: var(--space-lg); }
.editorial__content p { margin-bottom: var(--space-lg); }

.form-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
.form-layout__info { padding: var(--space-2xl) 0; }
.form-layout__form { background: var(--card-bg); border-radius: var(--radius-xl); padding: var(--space-3xl); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

.blog-post-layout { max-width: var(--container-narrow); margin: 0 auto; padding: var(--space-3xl) var(--space-xl); }
.blog-post-layout h1 { margin-bottom: var(--space-lg); }
.blog-post-layout .post-meta { display: flex; gap: var(--space-lg); color: var(--text-muted); font-size: var(--fs-small); margin-bottom: var(--space-3xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-color); }
.blog-post-layout .post-content p { margin-bottom: var(--space-xl); }
.blog-post-layout .post-content h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-lg); }
.blog-post-layout .post-content h3 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.blog-post-layout .post-content img { border-radius: var(--radius-md); margin: var(--space-2xl) 0; }
.blog-post-layout .post-content ul, .blog-post-layout .post-content ol { margin-bottom: var(--space-xl); padding-left: var(--space-xl); }
.blog-post-layout .post-content li { list-style: disc; margin-bottom: var(--space-sm); color: var(--text-secondary); }