/* =====================================================================
 * 03 — LAYOUT
 * Body, container, grid system. Foundation для всіх сторінок.
 * ===================================================================== */

/* ---------- BODY ---------- */
.sm-premium body,
body.sm-premium {
    background: var(--sm-cream) !important;
    color: var(--sm-charcoal);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Не змінюємо background якщо є home / single / page-template-template-full-width
   — Elementor сам керує background sections. */
.sm-premium .body-color,
.sm-premium .blog-page,
.sm-premium .archive,
.sm-premium .single {
    background: var(--sm-cream);
}

/* ---------- HTML ---------- */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--sm-header-height);
}

/* ---------- CONTAINER ---------- */
.sm-premium .container,
.sm-premium > .container,
.sm-premium main .container {
    max-width: var(--sm-container-lg);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sm-space-5);
    padding-right: var(--sm-space-5);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .sm-premium .container,
    .sm-premium main .container {
        padding-left: var(--sm-space-4);
        padding-right: var(--sm-space-4);
    }
}

/* ---------- GENERAL SECTIONS ---------- */
.sm-premium .site-content,
.sm-premium #content,
.sm-premium .page-content {
    padding-top: var(--sm-space-6);
    padding-bottom: var(--sm-space-7);
}

/* Не чіпаємо Elementor-секції — вони мають свої padding */

/* ---------- ROW + COLUMN (Bootstrap-сумісність, але тонше) ---------- */
.sm-premium .row {
    margin-left: calc(var(--sm-space-3) * -1);
    margin-right: calc(var(--sm-space-3) * -1);
}

.sm-premium .row > [class*="col-"] {
    padding-left: var(--sm-space-3);
    padding-right: var(--sm-space-3);
}

@media (max-width: 768px) {
    .sm-premium .row {
        margin-left: calc(var(--sm-space-2) * -1);
        margin-right: calc(var(--sm-space-2) * -1);
    }
    .sm-premium .row > [class*="col-"] {
        padding-left: var(--sm-space-2);
        padding-right: var(--sm-space-2);
    }
}

/* ---------- MAIN CONTENT GRID (для archive/single 8+4) ---------- */
.sm-premium .blog-page {
    display: block;
}

@media (min-width: 1024px) {
    .sm-premium .blog-page-with-sidebar {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--sm-space-7);
        align-items: start;
    }
}

/* ---------- CONTENT WIDTH (для статей) ---------- */
.sm-premium .single .entry-content,
.sm-premium .single .post-content {
    max-width: var(--sm-content-width);
    margin-left: auto;
    margin-right: auto;
}

/* ---------- IMAGES — базова поведінка ---------- */
.sm-premium img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Featured image у single post */
.sm-premium .single .post-thumbnail,
.sm-premium .single .featured-image,
.sm-premium .single .entry-thumbnail {
    margin: 0 auto var(--sm-space-6);
    max-width: 1080px;
    border-radius: var(--sm-radius-lg);
    overflow: hidden;
    box-shadow: var(--sm-shadow-md);
}

.sm-premium .single .post-thumbnail img,
.sm-premium .single .featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------- FIGURE + CAPTION ---------- */
.sm-premium figure {
    margin: var(--sm-space-5) 0;
}

.sm-premium figcaption,
.sm-premium .wp-caption-text {
    font-family: var(--sm-font-meta);
    font-size: var(--sm-text-sm);
    font-style: italic;
    color: var(--sm-gold-deep);
    text-align: center;
    margin-top: var(--sm-space-2);
}

/* ---------- VIDEO RESPONSIVE ---------- */
.sm-premium .wp-video,
.sm-premium .video-container,
.sm-premium iframe[src*="youtube"],
.sm-premium iframe[src*="vimeo"] {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    border-radius: var(--sm-radius-md);
    overflow: hidden;
}

/* ---------- TABLES ---------- */
.sm-premium table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sm-space-5) 0;
    font-size: var(--sm-text-base);
}

.sm-premium th,
.sm-premium td {
    padding: var(--sm-space-3) var(--sm-space-4);
    border-bottom: 1px solid var(--sm-gray-light);
    text-align: left;
}

.sm-premium th {
    font-weight: 600;
    color: var(--sm-blue);
    background: var(--sm-cream-deep);
    font-family: var(--sm-font-body);
    text-transform: uppercase;
    letter-spacing: var(--sm-tracking-wide);
    font-size: var(--sm-text-sm);
}

/* ---------- UTILITY CLASSES ---------- */
.sm-text-center { text-align: center; }
.sm-text-right  { text-align: right; }
.sm-text-left   { text-align: left; }

.sm-mt-0 { margin-top: 0; }
.sm-mt-1 { margin-top: var(--sm-space-1); }
.sm-mt-2 { margin-top: var(--sm-space-2); }
.sm-mt-3 { margin-top: var(--sm-space-3); }
.sm-mt-4 { margin-top: var(--sm-space-4); }
.sm-mt-5 { margin-top: var(--sm-space-5); }
.sm-mt-6 { margin-top: var(--sm-space-6); }
.sm-mt-7 { margin-top: var(--sm-space-7); }

.sm-mb-0 { margin-bottom: 0; }
.sm-mb-1 { margin-bottom: var(--sm-space-1); }
.sm-mb-2 { margin-bottom: var(--sm-space-2); }
.sm-mb-3 { margin-bottom: var(--sm-space-3); }
.sm-mb-4 { margin-bottom: var(--sm-space-4); }
.sm-mb-5 { margin-bottom: var(--sm-space-5); }
.sm-mb-6 { margin-bottom: var(--sm-space-6); }
.sm-mb-7 { margin-bottom: var(--sm-space-7); }

.sm-hidden { display: none !important; }
.sm-visible-mobile { display: none; }
.sm-visible-desktop { display: block; }

@media (max-width: 768px) {
    .sm-visible-mobile { display: block; }
    .sm-visible-desktop { display: none; }
}

/* ---------- FOCUS STATES (accessibility WCAG) ---------- */
.sm-premium *:focus-visible {
    outline: 3px solid var(--sm-gold);
    outline-offset: 2px;
    border-radius: var(--sm-radius-sm);
}

/* ---------- SKIP LINK (a11y) ---------- */
.sm-premium .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--sm-blue);
    color: var(--sm-white);
    padding: var(--sm-space-2) var(--sm-space-4);
    z-index: var(--sm-z-top);
    text-decoration: none;
}

.sm-premium .skip-link:focus {
    top: 0;
}

/* ---------- PRELOADER (м'який, преміальний) ---------- */
.sm-premium #preloader {
    background: var(--sm-cream);
}

.sm-premium #preloader .double-bounce1,
.sm-premium #preloader .double-bounce2 {
    background: var(--sm-gold);
}

/* Швидкий fade-out preloader після load */
body.sm-premium.sm-loaded #preloader {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}