/*
 * blocks.css — gjør den påkostede forsiden redigerbar med vanlige
 * Gutenberg-blokker. Klassene (ex-*) settes på blokker via
 * «Avansert → Ekstra CSS-klasse(r)» eller via de medfølgende patterns.
 * Lastes både i front-end og i blokk-editoren.
 */

/* Forside-innholdet holdes innenfor maks-bredden */
.front-content{max-width:var(--maxw);margin:0 auto;padding:99px 24px 0}
/* Starter innholdet med en hero? Nullstill heroens topp-luft så total topp blir ~80px (ikke dobbel). */
.front-content>.ex-hero:first-child{padding-top:0}

/* ---- Knapper: gjør core-knapper til Expectit-knapper ---- */
.front-content .wp-block-button__link,
.entry .wp-block-button__link{
  border-radius:12px;padding:14px 26px;font-weight:600;font-family:'Inter',sans-serif;
  background:linear-gradient(135deg,var(--brand),var(--deep));color:#fff;border:none;
  box-shadow:0 12px 28px -12px var(--brand);transition:.3s
}
.front-content .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px var(--brand)}
.front-content .is-style-outline .wp-block-button__link,
.front-content .wp-block-button.is-style-outline .wp-block-button__link{
  background:#fff;color:var(--deep);border:1px solid var(--stroke);box-shadow:none
}
.front-content .is-style-outline .wp-block-button__link:hover{background:var(--bg-2);border-color:var(--brand);transform:translateY(-2px)}

/* ---- HERO ---- */
.ex-hero{padding:60px 0 30px;text-align:center}
.ex-hero h1{font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:700;margin:0 0 22px}
.ex-hero .ex-lead,.ex-lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--slate);max-width:690px;margin:0 auto 30px}
.ex-pill{display:inline-flex;align-items:center;gap:9px;width:auto;padding:8px 18px;border-radius:999px;border:1px solid var(--stroke);background:#fff;font-size:14px;color:var(--slate);margin:0 auto 26px;box-shadow:var(--shadow-sm)}
.ex-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);flex:none}
.ex-grad{background:linear-gradient(100deg,var(--brand) 0%,var(--deep) 55%,var(--accent) 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ex-micro{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* ---- Seksjoner ---- */
.ex-section{padding:64px 0}
.ex-section .ex-eyebrow{color:var(--brand);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;text-align:center;margin:0 0 12px}
.ex-section h2{text-align:center;font-size:clamp(2rem,4vw,2.9rem);margin:0 auto 14px;max-width:760px}
.ex-section .ex-sub{text-align:center;color:var(--slate);font-size:1.08rem;max-width:680px;margin:0 auto 44px}
.ex-band{border-radius:28px;padding:46px;background:var(--bg-2);border:1px solid var(--stroke-soft)}

/* ---- Kort-rader (core/columns med klasse ex-cards) ---- */
.ex-cards{gap:22px!important;margin-bottom:22px}
.ex-cards .wp-block-column{
  background:#fff;border:1px solid var(--stroke-soft);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);transition:.4s
}
.ex-cards .wp-block-column:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(22,64,87,.4)}
.ex-cards .wp-block-column h3{font-size:1.25rem;margin:0 0 10px;color:var(--deep)}
.ex-cards .wp-block-column p{color:var(--slate);font-size:15px;margin:0}
.ex-cards .wp-block-column .ex-ic,
.ex-cards .wp-block-column .ex-emoji{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,rgba(16,98,128,.12),rgba(42,157,184,.16));border:1px solid var(--stroke-soft);margin-bottom:16px}
.ex-cards .wp-block-column .ex-emoji{font-size:30px}
.ex-cards .wp-block-column .ex-ic svg{width:27px;height:27px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Ikoner via CSS-mask fra SVG-filer i /assets/icons (bytt klasse for å bytte ikon) */
.ex-ic::before{content:"";display:block;width:27px;height:27px;background:var(--brand);-webkit-mask:var(--ic,none) center / contain no-repeat;mask:var(--ic,none) center / contain no-repeat}
.ex-ic.ic-apps{--ic:url(assets/icons/apps.svg)}
.ex-ic.ic-cloud{--ic:url(assets/icons/cloud.svg)}
.ex-ic.ic-shield{--ic:url(assets/icons/shield.svg)}
.ex-ic.ic-server{--ic:url(assets/icons/server.svg)}
.ex-ic.ic-headset{--ic:url(assets/icons/headset.svg)}
.ex-ic.ic-refresh{--ic:url(assets/icons/refresh.svg)}
.ex-ic:has(svg)::before{display:none}

/* ---- Statistikk ---- */
.ex-stats .wp-block-column{
  background:#fff;border:1px solid var(--stroke-soft);border-radius:var(--radius);
  padding:28px 20px;box-shadow:var(--shadow-sm);text-align:center
}
.ex-stats .wp-block-column h3{font-family:var(--heading-font);font-weight:700;font-size:2.4rem;line-height:1;margin:0 0 6px}
.ex-stats .wp-block-column p{color:var(--muted);font-size:14px;margin:0}

/* ---- Sitater ---- */
.ex-quotes .wp-block-column{
  background:#fff;border:1px solid var(--stroke-soft);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm)
}
.ex-quotes .wp-block-column p{margin:0 0 14px;font-size:1.05rem;color:var(--body)}
.ex-quotes .wp-block-column cite{color:var(--muted);font-style:normal;font-family:var(--heading-font);font-weight:600}
.ex-quotes .ex-stars{color:#f0a500;letter-spacing:3px;margin:0 0 12px!important}

/* ---- CTA-banner ---- */
.ex-cta{position:relative;border-radius:28px;padding:60px 40px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--deep),var(--brand))}
.ex-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(42,157,184,.45),transparent 60%)}
.ex-cta *{position:relative;z-index:1}
.ex-cta h2{color:#fff!important;margin:0 auto 14px;max-width:640px;text-align:center}
.ex-cta p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 26px}
.ex-cta .wp-block-button__link{background:#fff;color:var(--deep)}
.ex-cta .is-style-outline .wp-block-button__link{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}

/* Editor-tilpasning: gi editoren litt luft og lik bredde */
.editor-styles-wrapper .ex-hero{padding-top:20px}
.editor-styles-wrapper .ex-cta h2{color:#fff!important}

/* ===== Pris-kort (med "Mest populær") ===== */
.ex-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:24px}
.ex-price{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--stroke-soft);border-radius:22px;padding:34px 30px;box-shadow:var(--shadow-sm)}
.ex-price.feat{border:1.5px solid var(--brand);box-shadow:0 30px 60px -26px rgba(16,98,128,.5);transform:scale(1.03)}
.ex-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--brand),var(--deep));color:#fff;font-size:12px;font-weight:600;padding:6px 16px;border-radius:999px;white-space:nowrap}
.ex-price h3,.ex-price h4{font-size:1.35rem;margin:0 0 4px;color:var(--deep);font-family:var(--heading-font)}
.ex-price .ex-sub{color:var(--muted);font-size:13.5px;margin:0 0 18px;min-height:38px}
.ex-price .ex-amt{font-family:var(--heading-font);font-weight:700;font-size:2.6rem;color:var(--deep);line-height:1;margin:4px 0 2px}
.ex-price .ex-amt span{font-size:1rem;font-weight:500;color:var(--muted)}
.ex-price .ex-per{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.ex-price .ex-amt.ask{font-size:1.5rem;line-height:1.15;color:var(--brand)}
.ex-price .ex-amt.ask span{display:block;font-size:.8rem;font-weight:500;color:var(--muted);margin-top:4px}
.ex-plist{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;flex:1}
.ex-plist li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--body);margin:0}
.ex-plist li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;background:var(--ok);-webkit-mask:url(assets/icons/check.svg) center/contain no-repeat;mask:url(assets/icons/check.svg) center/contain no-repeat}
.ex-plist li.no{color:var(--muted)}
.ex-plist li.no::before{background:var(--no);-webkit-mask-image:url(assets/icons/minus.svg);mask-image:url(assets/icons/minus.svg)}
.ex-price .wp-block-button{width:100%}
.ex-price .wp-block-button__link{width:100%;justify-content:center}
.ex-price .ex-btn{display:block;text-align:center;border-radius:12px;padding:13px 20px;font-weight:600;background:linear-gradient(135deg,var(--brand),var(--deep));color:#fff;text-decoration:none}
.ex-price:not(.feat) .ex-btn{background:#fff;color:var(--deep);border:1px solid var(--stroke)}
.ex-setup-note{text-align:center;color:var(--muted);font-size:14px;margin-top:26px}

/* ===== Sammenligningstabell ===== */
.ex-cmp-scroll{overflow-x:auto;margin-top:10px}
.ex-cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--stroke-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.ex-cmp th,.ex-cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--stroke-soft);font-size:14.5px}
.ex-cmp thead th{background:var(--deep);color:#fff;font-family:var(--heading-font);font-weight:600;font-size:15px}
.ex-cmp thead th:not(:first-child),.ex-cmp tbody td:not(:first-child){text-align:center}
.ex-cmp tbody tr:last-child td{border-bottom:none}
.ex-cmp tbody tr:nth-child(even) td{background:var(--bg-2)}
.ex-cmp .ex-txt{color:var(--slate);font-size:13px}
.ex-cmp .ex-yes,.ex-cmp .ex-no{display:inline-block;width:21px;height:21px;vertical-align:middle}
.ex-cmp .ex-yes{background:var(--ok);-webkit-mask:url(assets/icons/check.svg) center/contain no-repeat;mask:url(assets/icons/check.svg) center/contain no-repeat}
.ex-cmp .ex-no{background:var(--no);-webkit-mask:url(assets/icons/minus.svg) center/contain no-repeat;mask:url(assets/icons/minus.svg) center/contain no-repeat}

@media(max-width:781px){
  .ex-cards .wp-block-column,.ex-stats .wp-block-column,.ex-quotes .wp-block-column{padding:24px}
  .ex-prices{grid-template-columns:1fr}
  .ex-price.feat{transform:none}
  .ex-cmp{min-width:560px}
}