/* 7Code — newsletter module: the reusable signup form newsletter_form($variant) (.nlf, variants block / footer / page)
   + the /newsletter.php page (signup, check-your-inbox, confirmed, unsubscribed). Loaded via page_open css => ['mod-newsletter']. */

/* ---------- signup form (all variants) ---------- */
.nlf{position:relative;min-width:0}
.nlf .nlf-body{margin-bottom:10px}
.nlf-row{display:flex;align-items:stretch;min-width:0}
.nlf-row input{flex:1 1 auto;min-width:0;min-height:52px}
.nlf-row input::placeholder{color:rgba(242,241,236,.38)}
.nlf-row .btn{flex:0 0 auto;min-height:52px;justify-content:center;margin-inline-start:-1.5px;padding-inline:24px}
.nlf .ferr{color:var(--red);font-size:14px;font-weight:600;margin-top:10px}
.nlf input[aria-invalid=true]{border-color:var(--red)}
.nlf-note{font-size:13px;line-height:1.5;color:var(--ink45)}
.nlf-note a{color:var(--ink70);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;margin-inline-start:4px}
.nlf-note a:hover{color:var(--red)}

/* block: heading + text + form, for the blog / any section */
.nlf--block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px clamp(24px,4vw,64px);align-items:end;border:1.5px solid var(--ink);background:var(--panel);padding:clamp(22px,3.5vw,44px)}
.nlf--block .nlf-head{grid-row:span 2}
.nlf-k{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:12px}
.nlf-t{font-weight:900;font-size:clamp(24px,3vw,40px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase}
.nlf-x{color:var(--ink70);margin-top:12px;max-width:44ch;line-height:1.55}

/* footer: compact */
.nlf--footer .field label{margin-bottom:10px}
.nlf--footer .nlf-row input{min-height:48px;padding-block:10px}
.nlf--footer .nlf-row .btn{min-height:48px;padding-inline:18px}
.nlf--footer .nlf-note{font-size:12.5px}

/* ---------- /newsletter.php ---------- */
.nl-kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:#3ad07a;margin-bottom:18px}
.nl-kick::before{content:"";width:10px;height:10px;background:currentColor}
.nl-kick.is-off{color:var(--red)}
.nl-h{max-width:18ch}
.nlp .ph-lead b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.nl-again{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:34px;padding-top:22px;border-top:1.5px solid var(--line);color:var(--ink70);font-size:16px}
.nl-again .btn{min-height:48px}
.nlp .ph-acts .btn{min-height:48px}

.nl-sec{padding-block:clamp(44px,6vw,88px) clamp(64px,8vw,110px)}
.nl-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.nl-card{border:1.5px solid var(--ink);background:var(--panel);padding:clamp(22px,3.5vw,44px)}
.nl-card>.k{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:12px}
.nl-card h2{font-weight:900;font-size:clamp(26px,3.2vw,46px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:26px}
.nl-get{list-style:none;border-top:1.5px solid var(--ink)}
.nl-get li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:22px 0;border-bottom:1.5px solid var(--ink)}
.nl-get .n{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--red);padding-top:3px}
.nl-get h3{font-weight:800;font-size:clamp(18px,1.7vw,22px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.nl-get p{color:var(--ink70);font-size:15.5px;line-height:1.55;margin-top:6px}

/* ---------- Arabic ---------- */
html[dir=rtl] .nlf-t,html[dir=rtl] .nl-card h2{line-height:1.35}
html[dir=rtl] .nl-get h3{line-height:1.45}
html[dir=rtl] .nlf-k,html[dir=rtl] .nl-kick,html[dir=rtl] .nl-card>.k{font-size:14px}
html[dir=rtl] .nlf-note{font-size:14px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nl-grid{grid-template-columns:1fr}
  .nlf--block{grid-template-columns:1fr;align-items:start}
  .nlf--block .nlf-head{grid-row:auto}
}
@media(max-width:420px){
  .nlf-row{flex-direction:column;gap:8px}
  .nlf-row .btn{margin-inline-start:0;width:100%}
}