/* ==========================================================================
   InfyPress V2 — Layout System
   Container, grid, sections, flex/spacing utilities
   ========================================================================== */

/* --- Containers --- */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-sm {
    max-width: var(--container-sm);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* --- Sections --- */

.section {
    padding: var(--space-24) 0;
}

.section-bordered {
    border-top: 1px solid var(--border-light);
}

.section-surface {
    background: var(--bg-surface);
}

/* `.section-no-grid` — paints a solid flat bg that covers the body's
   grid pattern. Matches the v2 reference semantics: sections like FAQ
   and newsletter use a flat `--bg-base` instead of the 24px grid that
   shows on CTA / trusted-by / pricing etc. */
.section-no-grid {
    background-color: var(--bg-base);
}

/* Surface override — wins over `.section-no-grid` via combined-selector
   specificity so the sidebar "Surface background" toggle flips sections
   from flat base to flat surface. */
.section-no-grid.section-surface {
    background-color: var(--bg-surface);
}

/* --- Gradient Separators ---
   Animated 2px line at the top and/or bottom edge of a section.
   Rendered via background-image layers on the element itself (NOT
   pseudo-elements) so they don't collide with Gutenberg's own
   ::before / ::after used for the block selection outline in the
   editor, which caused flicker on click-in / click-out of the block.
   Supports single-border and dual-border usage via combined selectors.

   Note: these rules only set `background-image` — they coexist fine
   with `.section-no-grid` / `.section-surface`'s `background-color`
   because color and image are distinct cascade properties. The earlier
   combined `.section-no-grid.gradient-border-*` stack is intentionally
   gone now that `.section-no-grid` no longer paints its own grid
   background. */

.gradient-border-top:not(.gradient-border-bottom) {
    background-image: var(--gradient-border);
    background-size: 200% 2px;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    animation: gradient-shift-top var(--duration-gradient) ease infinite;
}

.gradient-border-bottom:not(.gradient-border-top) {
    background-image: var(--gradient-border);
    background-size: 200% 2px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    animation: gradient-shift-bottom var(--duration-gradient) ease infinite;
}

.gradient-border-top.gradient-border-bottom {
    background-image: var(--gradient-border), var(--gradient-border);
    background-size: 200% 2px, 200% 2px;
    background-repeat: no-repeat, no-repeat;
    background-position: 0% 0%, 0% 100%;
    animation: gradient-shift-both var(--duration-gradient) ease infinite;
}

@keyframes gradient-shift-top {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

@keyframes gradient-shift-bottom {
    0%   { background-position: 0% 100%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 100%; }
}

@keyframes gradient-shift-both {
    0%   { background-position: 0% 0%, 0% 100%; }
    50%  { background-position: 100% 0%, 100% 100%; }
    100% { background-position: 0% 0%, 0% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-border-top,
    .gradient-border-bottom {
        animation: none;
    }
}

/* --- Section Header --- */

.section-header {
    max-width: var(--container-prose);
    margin-bottom: var(--space-12);
}

.section-header-center {
    max-width: var(--container-prose);
    margin: 0 auto var(--space-12);
    text-align: center;
}

.section-header h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.section-header p {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

/* --- Grid --- */

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* --- Flex --- */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* --- Gap --- */

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* --- Responsive --- */

@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 { grid-template-columns: 1fr; }

    .section { padding: var(--space-16) 0; }
}