/* =========================================================
   Creative Studio - Professional Modular Styles
   Target: Content Area Only (Preserving Header/Footer)
========================================================= */

:root {
    --cs-bg-1: #f9f0e1;
    --cs-primary: #294c52;
    --cs-accent: #b88c3a;
    --cs-text: #294c52;
    --cs-white: #ffffff;
    --cs-shadow: rgba(41, 76, 82, 0.16);
}

/* =========================================================
   Astra Content Fix (Strictly Page Content)
   این بخش فقط محتوای برگه را تمام‌صفحه و رنگی می‌کند
========================================================= */

/* جلوگیری از تغییر رنگ کل بادی برای حفظ هدر */
body.page-template-default, 
body.page {
    background-color: transparent; /* اجازه بده هدر رنگ خودش را داشته باشد */
}

/* هدف قرار دادن ظرف محتوای اصلی در Astra */
.site-content,
#content,
.ast-container,
.entry-content {
    background: var(--cs-bg-1) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* حذف حاشیه‌های سفید آسترا در برگه */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--cs-bg-1) !important;
    border: none !important;
}

/* تمام‌عرض کردن محتوای داخلی */
.cs-wrapper {
    direction: rtl;
    width: 100%;
    background: var(--cs-bg-1);
    color: var(--cs-primary);
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
}

/* =========================================================
   Hero Section & Layout Components
========================================================= */

.studio-shell {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.cs-hero-wrapper {
    padding: 100px 0 60px;
    background: var(--cs-bg-1);
    position: relative;
}

.cs-hero-main {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
}

/* Typography */
.cs-main-title {
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 900;
    color: var(--cs-primary);
    line-height: 1.2;
    margin-bottom: 20px;
}

.cs-main-title small {
    display: block;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    opacity: 0.8;
    margin-top: 10px;
}

.cs-hero-p {
    font-size: 18px;
    line-height: 1.9;
    color: var(--cs-primary);
    opacity: 0.8;
    margin-bottom: 35px;
}

/* Premium Button */
.cs-btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cs-primary);
    color: var(--cs-bg-1) !important;
    padding: 15px 32px;
    border-radius: 14px;
    text-decoration: none !important;
    font-weight: 800;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cs-btn-premium:hover {
    transform: translateY(-5px);
    background: var(--cs-accent);
    box-shadow: 0 15px 30px rgba(184, 140, 58, 0.3);
}

/* =========================================================
   The Arches (Premium Visual)
========================================================= */

.cs-arch-group {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    justify-content: center;
}

.cs-arch-item {
    flex: 1;
    position: relative;
    transition: transform 0.5s ease;
}

.arch-inner {
    position: relative;
    border-radius: 1000px 1000px 25px 25px;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 25px 50px rgba(41, 76, 82, 0.15);
}

.arch-1 { height: 380px; animation: csFloat 6s ease-in-out infinite; }
.arch-2 { height: 480px; animation: csFloat 6s ease-in-out infinite 1s; }
.arch-3 { height: 420px; animation: csFloat 6s ease-in-out infinite 2s; }

.cs-arch-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.arch-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px 5px;
    background: var(--cs-primary);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}

/* Floating Animation */
@keyframes csFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* =========================================================
   Responsive Fixes
========================================================= */

@media (max-width: 992px) {
    .cs-hero-main { grid-template-columns: 1fr; text-align: center; }
    .cs-hero-p { margin: 0 auto 30px; }
    .cs-arch-group { transform: scale(0.9); }
}

@media (max-width: 600px) {
    .cs-arch-group { flex-direction: column; align-items: center; }
    .cs-arch-item { width: 100%; max-width: 280px; height: 350px !important; }
}