/* ================================================================
   NexaGulf — Block pattern styling.
   Loaded on the front end AND inside the block editor (via
   add_editor_style, which auto-scopes these rules to the canvas),
   so patterns look identical while editing and when published.
   Everything here is class-scoped so it never touches core blocks
   the user adds on their own.
   ================================================================ */

:root{
  --ngb-ink:#08131c; --ngb-navy:#092f4f; --ngb-navy-deep:#041f35;
  --ngb-mint:#29c49a; --ngb-mint-dark:#0f8063; --ngb-line:#d9dfdf;
  --ngb-muted:#61707b; --ngb-surface:#f5f6f4;
}

/* --- section rhythm --- */
.ng-blk-section{padding-block:clamp(48px,7vw,88px)}
.ng-blk-section.ng-blk-soft{background:var(--ngb-surface)}
.ng-blk-section.ng-blk-dark{background:var(--ngb-navy-deep);color:#fff}
.ng-blk-section.ng-blk-dark :where(h1,h2,h3,p){color:#fff}

/* --- editorial heading block --- */
.ng-blk-kicker{color:var(--ngb-mint-dark);font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.ng-blk-dark .ng-blk-kicker{color:var(--ngb-mint)}
.ng-blk-title{font-size:clamp(28px,4vw,42px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 14px}
.ng-blk-lead{font-size:18px;line-height:1.65;color:var(--ngb-muted);max-width:60ch}
.ng-blk-dark .ng-blk-lead{color:#c4d3dc}

/* --- hero (CSS background, fully text-editable inside) --- */
.ng-blk-hero{position:relative;color:#fff;border-radius:18px;overflow:hidden;
  padding:clamp(40px,7vw,84px) clamp(24px,5vw,64px);
  background:linear-gradient(180deg,rgba(4,20,32,.72),rgba(4,20,32,.58) 42%,rgba(4,20,32,.82)),
             url(../images/gcc-skyline-hero.jpg) center/cover no-repeat}
.ng-blk-hero :where(h1,h2,h3,p){color:#fff}
.ng-blk-hero .ng-blk-title{font-size:clamp(32px,5vw,52px)}
.ng-blk-hero .ng-blk-lead{color:#e7eef2;max-width:56ch}

/* --- card grids (built from core columns) --- */
.ng-blk-cards{gap:20px}
.ng-blk-card{background:#fff;border:1px solid var(--ngb-line);border-radius:14px;
  padding:26px 24px;height:100%;transition:border-color .15s,transform .15s}
.ng-blk-card:hover{border-color:var(--ngb-mint);transform:translateY(-2px)}
.ng-blk-card .ng-blk-num{color:var(--ngb-mint-dark);font-weight:800;font-size:15px;letter-spacing:.04em;margin:0 0 8px}
.ng-blk-card h3{font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0 0 8px;font-weight:800}
.ng-blk-card p{font-size:15.5px;line-height:1.6;color:var(--ngb-muted);margin:0}
.ng-blk-dark .ng-blk-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.ng-blk-dark .ng-blk-card p{color:#c4d3dc}

/* --- trust / stat strip --- */
.ng-blk-stat{padding:6px 0}
.ng-blk-stat strong{display:block;font-size:clamp(30px,4vw,44px);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ngb-navy)}
.ng-blk-dark .ng-blk-stat strong{color:#fff}
.ng-blk-stat span{display:block;margin-top:8px;font-size:15px;color:var(--ngb-muted)}
.ng-blk-dark .ng-blk-stat span{color:#c4d3dc}

/* --- newsletter / CTA band --- */
.ng-blk-cta{background:var(--ngb-navy-deep);color:#fff;border-radius:18px;
  padding:clamp(32px,5vw,56px) clamp(24px,5vw,56px)}
.ng-blk-cta :where(h2,h3,p){color:#fff}
.ng-blk-cta .ng-blk-lead{color:#c4d3dc}

/* --- buttons inherit the theme look for the two brand styles --- */
.ng-blk-section .wp-block-button__link,
.ng-blk-cta .wp-block-button__link{border-radius:10px;font-weight:700;padding:14px 26px}
.wp-block-button.is-style-ng-green .wp-block-button__link{background:var(--ngb-mint);color:#04231a}
.wp-block-button.is-style-ng-outline .wp-block-button__link{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* --- responsive: core columns already stack; tighten card padding --- */
@media(max-width:600px){
  .ng-blk-card{padding:22px 20px}
}