/* ============================================================
   Seresa Block Templates — stylesheet
   Self-contained. Scoped under .seresa-content (front-end) and
   .editor-styles-wrapper (block editor). No dependency on Bricks.
   ============================================================ */

/* ---------- 1. Fonts ----------------------------------------
   Both font families (PosteramaTextW15, DM Sans) are loaded
   site-wide by Bricks / the parent theme, so this stylesheet
   references them by name only — no @font-face declarations
   are needed here, which keeps this CSS file lean and avoids
   double-loading.
   ------------------------------------------------------------ */

/* ---------- 2. Design tokens -------------------------------- */

.seresa-content,
.editor-styles-wrapper .seresa-content,
body.seresa-block-page {
    /* Colour */
    --seresa-bg-primary:    #0B1120;
    --seresa-bg-section:    #111827;
    --seresa-bg-card:       #1E293B;
    --seresa-bg-highlight:  #162032;
    --seresa-border:        #1E3A5F;

    --seresa-text-primary:   #E2E8F0;
    --seresa-text-secondary: #94A3B8;
    --seresa-text-heading:   #FFFFFF;

    --seresa-accent:       #22D3EE;
    --seresa-accent-hover: #06B6D4;
    --seresa-accent-glow:  rgba(34, 211, 238, 0.15);

    --seresa-tag-bg:   #1E3A5F;
    --seresa-tag-text: #7DD3FC;
    --seresa-success:  #4ADE80;
    --seresa-warning:  #FBBF24;

    /* Type */
    --seresa-font-heading: 'PosteramaTextW15', 'Helvetica Neue', Arial, sans-serif;
    --seresa-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* One consistent scale — used everywhere, no ad-hoc sizes. */
    --seresa-fs-h1:     clamp(2.5rem, 5vw, 4.25rem);
    --seresa-fs-h2:     clamp(1.875rem, 3.5vw, 2.625rem);
    --seresa-fs-h3:     clamp(1.375rem, 2.4vw, 1.75rem);
    --seresa-fs-h4:     1.1875rem;
    --seresa-fs-eyebrow:0.8125rem; /* section number / tiny label */
    --seresa-fs-body:   1.1875rem; /* 19px — readable, generous */
    --seresa-fs-small:  0.9375rem;
    --seresa-fs-metric: clamp(3rem, 6vw, 4.5rem);

    --seresa-lh-tight: 1.1;
    --seresa-lh-snug:  1.25;
    --seresa-lh-body:  1.65;

    --seresa-tracking-eyebrow: 0.18em;

    /* Spacing */
    --seresa-s-1: 0.5rem;
    --seresa-s-2: 1rem;
    --seresa-s-3: 1.5rem;
    --seresa-s-4: 2rem;
    --seresa-s-5: 3rem;
    --seresa-s-6: 4rem;
    --seresa-section-y: clamp(4rem, 8vw, 7rem);
    --seresa-block-y:   clamp(2rem, 4vw, 3rem);

    /* Layout — ONE width used everywhere, no exceptions.
       Desktop: 70vw centered, capped at 1100px so it doesn't go silly wide.
       Mobile:  95vw (override applied via @media below).
       Keeping the legacy --seresa-w-* aliases pointing at the same value so
       any older rule that still references them stays consistent. */
    --seresa-w-page:    min(70vw, 1100px);
    --seresa-w-content: var(--seresa-w-page);
    --seresa-w-narrow:  var(--seresa-w-page);
    --seresa-w-wide:    var(--seresa-w-page);

    /* Shape */
    --seresa-radius:    0.5rem;
    --seresa-radius-lg: 0.75rem;
    --seresa-radius-pill: 999px;

    /* Motion */
    --seresa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 3. Base resets scoped to our content ------------ */

body.seresa-block-page {
    background: var(--seresa-bg-primary);
    color: var(--seresa-text-primary);
}

.seresa-content {
    font-family: var(--seresa-font-body);
    font-size: var(--seresa-fs-body);
    line-height: var(--seresa-lh-body);
    color: var(--seresa-text-primary);
    background: var(--seresa-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.seresa-content *,
.seresa-content *::before,
.seresa-content *::after {
    box-sizing: border-box;
}

.seresa-content img,
.seresa-content svg,
.seresa-content video {
    max-width: 100%;
    height: auto;
    display: block;
}

.seresa-content a {
    color: var(--seresa-accent);
    text-decoration: none;
    transition: color 0.2s var(--seresa-ease);
}
.seresa-content a:hover {
    color: var(--seresa-accent-hover);
}

/* ---------- 4. Typography (the single source of truth) ----- */

.seresa-content h1,
.seresa-content h2,
.seresa-content h3,
.seresa-content h4,
.seresa-content h5,
.seresa-content h6 {
    font-family: var(--seresa-font-heading);
    color: var(--seresa-text-heading);
    font-weight: 600;
    line-height: var(--seresa-lh-tight);
    margin: 0 0 var(--seresa-s-3);
    letter-spacing: -0.005em;
}

.seresa-content h1,
.seresa-content .wp-block-heading.has-h-1-font-size,
.seresa-content h1.wp-block-heading {
    font-size: var(--seresa-fs-h1);
    line-height: var(--seresa-lh-tight);
}
.seresa-content h2,
.seresa-content h2.wp-block-heading {
    font-size: var(--seresa-fs-h2);
    line-height: var(--seresa-lh-snug);
}
.seresa-content h3,
.seresa-content h3.wp-block-heading {
    font-size: var(--seresa-fs-h3);
    line-height: var(--seresa-lh-snug);
}
.seresa-content h4,
.seresa-content h4.wp-block-heading {
    font-size: var(--seresa-fs-h4);
    line-height: var(--seresa-lh-snug);
}

.seresa-content p {
    margin: 0 0 var(--seresa-s-3);
    font-size: var(--seresa-fs-body);
    line-height: var(--seresa-lh-body);
}
.seresa-content p:last-child { margin-bottom: 0; }

.seresa-content strong { color: var(--seresa-text-heading); font-weight: 700; }
.seresa-content em { color: var(--seresa-text-primary); }

.seresa-content ul,
.seresa-content ol {
    margin: 0 0 var(--seresa-s-3);
    padding-left: 1.25rem;
}
.seresa-content li { margin-bottom: var(--seresa-s-1); }

.seresa-content blockquote {
    border-left: 3px solid var(--seresa-accent);
    padding: var(--seresa-s-1) var(--seresa-s-3);
    margin: var(--seresa-s-4) 0;
    color: var(--seresa-text-secondary);
    font-style: italic;
}

/* ---------- 5. Layout primitives ---------------------------- */

.seresa-content > .seresa-article {
    /* Article fills viewport width; sections control their own width. */
    width: 100%;
}

/* All top-level blocks inside an article center via these classes.
   Specificity is bumped via `.seresa-content` so Bricks's `#brx-content`
   inline rules can't drag our column off-centre. */
.seresa-content .seresa-section {
    display: block;
    width: 100%;
    padding: var(--seresa-section-y) 0;
    margin: 0;
}
.seresa-content .seresa-section--card-bg   { background: var(--seresa-bg-section); }
.seresa-content .seresa-section--alt-bg    { background: var(--seresa-bg-highlight); }

/* THE one container. Every section uses it. No --narrow / --wide variants. */
.seresa-content .seresa-container {
    display: block;
    width: var(--seresa-w-page);
    max-width: var(--seresa-w-page);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .seresa-content .seresa-container { width: 95vw; max-width: 95vw; }
}

/* WP alignfull / alignwide overrides — keep within our dark bg */
.seresa-content .alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.seresa-content .alignwide {
    width: var(--seresa-w-wide);
    max-width: 100%;
    margin-inline: auto;
}

/* Tighten WP's default vertical rhythm inside our scope */
.seresa-content .wp-block-group { margin: 0; }
.seresa-content .wp-block-group + .wp-block-group { margin-top: var(--seresa-block-y); }

/* ---------- 6. Pattern: Hero --------------------------------- */

.seresa-hero {
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
    background:
        radial-gradient(70% 50% at 50% 0%, var(--seresa-accent-glow) 0%, transparent 60%),
        var(--seresa-bg-primary);
}
.seresa-hero__title {
    font-size: var(--seresa-fs-h1);
    line-height: var(--seresa-lh-tight);
    margin: 0 0 var(--seresa-s-3);
}
.seresa-hero__subtitle {
    font-size: 1.0625rem;
    color: var(--seresa-text-secondary);
    margin: 0 0 var(--seresa-s-5);
    max-width: 60ch;
}

/* ---------- 7. Pattern: Meta row (CLIENT / SOLUTION / …) ---- */

.seresa-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--seresa-s-4);
    padding: var(--seresa-s-3) 0;
    margin: 0 0 var(--seresa-s-4);
    border-top: 1px solid var(--seresa-border);
    border-bottom: 1px solid var(--seresa-border);
}
.seresa-meta__item {}
.seresa-meta__label {
    font-family: var(--seresa-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--seresa-accent);
    letter-spacing: var(--seresa-tracking-eyebrow);
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.seresa-meta__value {
    font-family: var(--seresa-font-body);
    font-size: var(--seresa-fs-body);
    color: var(--seresa-text-heading);
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}
.seresa-meta__value small {
    display: block;
    color: var(--seresa-text-secondary);
    font-weight: 400;
    font-size: var(--seresa-fs-small);
    margin-top: 0.15rem;
}

/* ---------- 8. Pattern: Metric cards ------------------------- */

.seresa-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--seresa-s-2);
    margin: var(--seresa-s-3) 0 0;
}
.seresa-metric {
    background: var(--seresa-bg-card);
    border: 1px solid var(--seresa-border);
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-4) var(--seresa-s-3);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s var(--seresa-ease), border-color 0.2s var(--seresa-ease);
}
.seresa-metric::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--seresa-accent), transparent);
    opacity: 0.7;
}
.seresa-metric:hover {
    transform: translateY(-2px);
    border-color: var(--seresa-accent);
}
.seresa-metric__value {
    font-family: var(--seresa-font-heading);
    font-size: var(--seresa-fs-metric);
    line-height: 1;
    color: var(--seresa-text-heading);
    font-weight: 700;
    margin: 0 0 var(--seresa-s-2);
    letter-spacing: -0.02em;
}
.seresa-metric__label {
    font-size: var(--seresa-fs-small);
    color: var(--seresa-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ---------- 9. Pattern: Image gallery ----------------------- */

.seresa-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--seresa-s-2);
    margin: var(--seresa-block-y) 0;
    /* width comes from the .seresa-container parent — no override here */
}
.seresa-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--seresa-radius);
    border: 1px solid var(--seresa-border);
    aspect-ratio: 3 / 5; /* taller / more portrait */
}

/* ---------- 10. Pattern: Narrative section ------------------ */

.seresa-narrative {
    padding: var(--seresa-section-y) 0;
}
.seresa-eyebrow {
    display: inline-block;
    font-family: var(--seresa-font-body);
    font-weight: 700;
    font-size: var(--seresa-fs-eyebrow);
    letter-spacing: var(--seresa-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--seresa-accent);
    margin: 0 0 var(--seresa-s-2);
}
.seresa-narrative h2 {
    border-bottom: 2px solid var(--seresa-accent);
    padding-bottom: var(--seresa-s-1);
    display: inline-block;
    margin-bottom: var(--seresa-s-4);
}

/* ---------- 11. Pattern: Highlight card --------------------- */

.seresa-highlight {
    background: var(--seresa-bg-card);
    border-left: 3px solid var(--seresa-accent);
    border-radius: var(--seresa-radius);
    padding: var(--seresa-s-4);
    margin: var(--seresa-block-y) 0;
}
.seresa-highlight h3,
.seresa-highlight h4 {
    margin-top: 0;
    color: var(--seresa-text-heading);
}
.seresa-highlight p:last-child { margin-bottom: 0; }

/* ---------- 12. Pattern: System diagram --------------------- */

.seresa-diagram {
    padding: var(--seresa-section-y) 0;
    background: var(--seresa-bg-section);
    text-align: center;
}
.seresa-diagram h2 {
    margin-bottom: var(--seresa-s-5);
}
.seresa-diagram img {
    margin: 0 auto;
    border-radius: var(--seresa-radius-lg);
    border: 1px solid var(--seresa-border);
}
.seresa-diagram__labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--seresa-s-3);
    margin-top: var(--seresa-s-4);
    font-size: var(--seresa-fs-small);
    color: var(--seresa-text-secondary);
    letter-spacing: 0.04em;
}

/* ---------- 13. Pattern: Before / After --------------------- */

.seresa-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--seresa-s-4);
    margin: var(--seresa-block-y) 0;
}
.seresa-ba__col {
    padding: var(--seresa-s-4);
    border-radius: var(--seresa-radius);
    background: var(--seresa-bg-card);
}
.seresa-ba__col--before { border-top: 3px solid var(--seresa-text-secondary); }
.seresa-ba__col--after  { border-top: 3px solid var(--seresa-success); }
.seresa-ba__col h3 { font-size: var(--seresa-fs-h3); margin-bottom: var(--seresa-s-3); }
.seresa-ba__col ul { color: var(--seresa-text-primary); }
.seresa-ba__col--before { color: var(--seresa-text-secondary); }

/* ---------- 14. Pattern: Summary CTA ------------------------ */

.seresa-cta {
    padding: var(--seresa-section-y) 0;
    text-align: center;
    background:
        radial-gradient(60% 80% at 50% 100%, var(--seresa-accent-glow) 0%, transparent 60%),
        var(--seresa-bg-primary);
}
.seresa-cta h2 {
    font-size: var(--seresa-fs-h2);
    margin-bottom: var(--seresa-s-3);
}
.seresa-cta p {
    color: var(--seresa-text-secondary);
    margin-bottom: var(--seresa-s-4);
}
.seresa-cta__buttons {
    display: flex;
    gap: var(--seresa-s-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- 15. Buttons ------------------------------------- */

.seresa-content .wp-block-button__link,
.seresa-btn {
    display: inline-block;
    font-family: var(--seresa-font-body);
    font-size: var(--seresa-fs-body);
    font-weight: 600;
    padding: 0.85rem 1.5rem;
    border-radius: var(--seresa-radius);
    background: var(--seresa-accent);
    color: var(--seresa-bg-primary);
    border: 1px solid var(--seresa-accent);
    line-height: 1;
    transition: background 0.2s var(--seresa-ease), transform 0.15s var(--seresa-ease);
}
.seresa-content .wp-block-button__link:hover,
.seresa-btn:hover {
    background: var(--seresa-accent-hover);
    color: var(--seresa-bg-primary);
    transform: translateY(-1px);
}
.seresa-content .is-style-outline .wp-block-button__link,
.seresa-btn--ghost {
    background: transparent;
    color: var(--seresa-accent);
    border: 1px solid var(--seresa-accent);
}
.seresa-content .is-style-outline .wp-block-button__link:hover,
.seresa-btn--ghost:hover {
    background: var(--seresa-accent-glow);
    color: var(--seresa-text-heading);
}

/* ---------- 16. Status / utility ----------------------------- */

.seresa-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: var(--seresa-fs-small);
    font-weight: 600;
    border-radius: var(--seresa-radius-pill);
    line-height: 1.4;
}
.seresa-status--production { background: rgba(74, 222, 128, 0.15); color: var(--seresa-success); }
.seresa-status--beta       { background: rgba(251, 191, 36, 0.15); color: var(--seresa-warning); }
.seresa-status--soon       { background: rgba(148, 163, 184, 0.15); color: var(--seresa-text-secondary); }

/* ---------- 17. Responsive ---------------------------------- */

@media (max-width: 900px) {
    .seresa-gallery   { grid-template-columns: repeat(2, 1fr); }
    .seresa-ba        { grid-template-columns: 1fr; }
    .seresa-metrics   { grid-template-columns: 1fr; gap: var(--seresa-s-3); }
}

@media (max-width: 600px) {
    .seresa-content { font-size: 1rem; }
    .seresa-hero    { padding: 3rem 0 2rem; }
    .seresa-gallery { grid-template-columns: 1fr; }
}

/* ---------- 18. Editor-only tweaks -------------------------- */

.editor-styles-wrapper.seresa-block-page,
.editor-styles-wrapper .seresa-content {
    background: var(--seresa-bg-primary);
    color: var(--seresa-text-primary);
}