/**
 * Zamseed Brand Promise Widget Styles
 *
 * One declaration per property. This file used to be two stylesheets in one:
 * a light-background base block and, appended below the responsive section, a
 * parity block that re-declared the same selectors with the dark-panel values.
 * Every colour, size and spacing in the first block was dead — overridden a few
 * hundred lines later — which is exactly the kind of drift that let the panel
 * design diverge in three places at once.
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Section
   ========================================================================== */

.zs-brand-promise {
    /* The faint page wash the section sits on. Both stops are custom properties
       so the Elementor controls stay real instance-level overrides: Section
       Background writes both stops (setting it flattens the wash to one
       colour), and Section Background End writes the second on its own. A plain
       `background-image` here would have made Section Background a dead control,
       since a colour cannot show through an opaque gradient. */
    --zs-brand-wash-start: #fdfcf9;
    --zs-brand-wash-end: #f1ede5;

    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background-color: var(--zs-brand-wash-start);
    background-image: linear-gradient(
        180deg,
        var(--zs-brand-wash-start) 0%,
        var(--zs-brand-wash-end) 100%
    );
}

/* ==========================================================================
   Panel
   ========================================================================== */

.zs-brand-promise__inner {
    position: relative;
    width: min(var(--zs-brand-panel-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin-inline: auto;
    padding: 56px;
    overflow: hidden;
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 12% 14%,
            rgba(196, 140, 51, 0.22) 0%,
            rgba(196, 140, 51, 0) 32%
        ),
        linear-gradient(
            var(--zs-brand-panel-gradient-angle, 139deg),
            var(--zs-brand-panel-gradient-start, #244f22) 0%,
            var(--zs-brand-panel-gradient-end, #2d5a27) 100%
        );
    box-shadow: 0 24px 60px rgba(45, 90, 39, 0.20);
}

/* Optional panel gradient, driven by the panel gradient controls. It replaces
   the two-layer background above, corner highlight included, which is why the
   controls default to the same colours the panel already paints. */
.zs-brand-promise--panel-gradient .zs-brand-promise__inner {
    background-image: linear-gradient(
        var(--zs-brand-panel-gradient-angle, 139deg),
        var(--zs-brand-panel-gradient-start, #244f22),
        var(--zs-brand-panel-gradient-end, #2d5a27)
    );
}

/* ==========================================================================
   Watermark
   ========================================================================== */

/* It lives inside .zs-brand-promise__inner, so the panel's own overflow clips
   it to the rounded corners — the design shows only the lower band of the
   letterforms across the top of the panel. Absolute positioning here resolves
   against __inner's padding box.

   Everything is em-based so the whole mark scales with the one font-size
   control: the 64px horizontal inset the design uses is 0.27em of its 240px
   type, and the top offset that leaves the glyph bottoms showing is -0.83em. */
.zs-brand-promise__watermark {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    box-sizing: border-box;
    padding-inline: 0.27em;
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-weight: 800;
    font-size: 240px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
    /* White, because the mark sits on the dark panel. As --zs-primary it was
       dark green on dark green: invisible even where it was not covered. */
    color: #ffffff;
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
}

.zs-brand-promise--watermark-top .zs-brand-promise__watermark { top: -0.83em; }
.zs-brand-promise--watermark-center .zs-brand-promise__watermark { top: 50%; transform: translateY(-50%); }
.zs-brand-promise--watermark-bottom .zs-brand-promise__watermark { bottom: -0.83em; }

/* The watermark is the only positioned child of __inner, so without this the
   static header and grid would paint underneath it. Keeping the content in
   front is also what stops a 4%-opacity wash from ever touching text
   contrast. */
.zs-brand-promise__header,
.zs-brand-promise__grid {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* margin-inline centres the box itself; the header_alignment control's
   text-align decides where the text sits inside it. (The old [style*="center"]
   selector never matched — Elementor emits a scoped <style> rule, not an inline
   style attribute.) Longhands, so nothing here silently resets anything else. */
.zs-brand-promise__header {
    max-width: 720px;
    margin-top: 0;
    margin-inline: auto;
    margin-bottom: 40px;
}

.zs-brand-promise__eyebrow {
    display: inline-block;
    /* The design's full 40px step down to the promise. */
    margin-bottom: 40px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    /* The eyebrow sits on the dark panel, not on the page. The brand gold
       (--zs-accent, #c48c33) is the light-background treatment and drops to
       roughly 2.5:1 against #244f22. */
    color: rgba(255, 255, 255, 0.76);
}

.zs-brand-promise__heading {
    margin: 0 0 16px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 40px;
    /* Medium, not bold: at 40px on the dark panel the promise is set in the
       serif's lighter cut with negative tracking, which is what keeps two long
       lines from reading as a slab. */
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* With no description under it the heading is the last thing in the header, so
   its own bottom margin stacked onto the header's and pushed the card row 16px
   further down than the design places it. */
.zs-brand-promise__heading:last-child {
    margin-bottom: 0;
}

.zs-brand-promise__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Promise cards
   ========================================================================== */

.zs-brand-promise__grid {
    --zs-brand-promise-gap: 20px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Same structural treatment on all five — the reference has one tile at an 18px
   radius, which is an artefact of the design file rather than an intent, so
   every tile takes 12px. */
.zs-brand-promise__item {
    position: relative;
    min-width: 0;
    min-height: 145px;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    text-align: left;
}

/* Optional frosted-glass cards. The item_background control supplies a
   translucent rgba surface; the blur is applied via the item_backdrop_blur
   control. overflow:hidden keeps the blur/background within the rounded
   corners. Falls back to the solid item_background if backdrop-filter is
   unsupported. */
.zs-brand-promise--glass .zs-brand-promise__item {
    overflow: hidden;
}

.zs-brand-promise--dividers .zs-brand-promise__item:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 4px;
    left: calc(var(--zs-brand-promise-gap, 20px) / -2);
    width: 1px;
    height: calc(100% - 8px);
    background-color: rgba(0, 0, 0, 0.1);
}

.zs-brand-promise__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    /* The card stack is evenly spaced: icon, title, text, 12px between each. */
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    /* Light type throughout, because the panel is dark. Font Awesome sizes off
       font-size; the theme's own SVGs take currentColor and the explicit
       dimensions below. */
    color: #ffffff;
    font-size: 20px;
}

.zs-brand-promise__icon svg,
.zs-brand-promise__icon img {
    display: block;
    width: 20px;
    height: 20px;
    /* contain, never cover: an icon that is cropped is a broken icon. */
    object-fit: contain;
    fill: currentColor;
}

.zs-brand-promise__item-title {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
}

.zs-brand-promise__item-text {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Editor empty state
   ========================================================================== */

.zs-brand-promise__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--zs-warm, #fdfcf9);
    border: 2px dashed var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
}

.zs-brand-promise__empty p {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-muted, #555555);
}

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

/* Breakpoints track Elementor's default tiers (tablet <= 1024, mobile <= 767)
   so these baselines and the responsive control values switch on the same
   pixel. At 1080/760 the CSS tablet layout applied 56px before any tablet
   control value did, and mobile control values applied 7px before the mobile
   layout did — and a 1023px block missed the tier by one. */
@media (max-width: 1024px) {
    /* Column count, gap and watermark size are also driven by Elementor's own
       responsive controls; these are the baselines those controls match. */
    .zs-brand-promise__inner { padding: 40px; }
    .zs-brand-promise__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; --zs-brand-promise-gap: 24px; }
    .zs-brand-promise__heading { font-size: 32px; line-height: 36px; }
    .zs-brand-promise__watermark { font-size: 140px; }
}

@media (max-width: 767px) {
    .zs-brand-promise { padding: 64px 0; }
    .zs-brand-promise__inner { padding: 28px 22px; border-radius: 14px; }
    .zs-brand-promise__grid { grid-template-columns: 1fr; gap: 28px; --zs-brand-promise-gap: 28px; }
    .zs-brand-promise__heading { font-size: 27px; line-height: 31px; }
    .zs-brand-promise__watermark { font-size: 90px; }
    .zs-brand-promise--dividers .zs-brand-promise__item:not(:first-child)::before {
        top: -14px;
        left: 0;
        width: 40px;
        height: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zs-brand-promise__item { transition: none; }
}