/*
 * Dalga Blog homepage block ([dalga_blog_home], "Colour tiles"). Scoped to #dlh.
 * Tagged dracula-ignore: it authors both palettes itself.
 * Light = base tokens. Dark = html[data-dracula-scheme="dark"], which Dracula stamps.
 * The colour tiles keep the same field colours and dark ink in both themes.
 */

#dlh{
	--dlh-ink:#12112e; --dlh-ink-2:#45427a; --dlh-ink-3:#625e96;
	--dlh-line:rgba(18,17,46,.10); --dlh-panel:#f1effb;
	--dlh-accent:#5645d4; --dlh-focus:#6050dc; --dlh-sel:rgba(96,80,220,.22);
	--dlh-field-ink:#0f0e25; --dlh-field-ink-2:rgba(15,14,37,.78); --dlh-field-line:rgba(15,14,37,.24);
	--dlb-f-search:#7d6ff0; --dlb-f-maps:#9be15d; --dlb-f-yt:#ff4d5e; --dlb-f-ip:#3fc3ff; --dlb-f-ai:#2fd9b0; --dlb-f-setup:#ffb547; --dlb-f-biz:#ff6fb5;
	--dlh-card:#ffffff; --dlh-card-line:rgba(18,17,46,.06); --dlh-card-glow:0 0 15px 2px rgba(127,127,127,.12);
	--dlh-cover:#f1effb; --dlh-mix:#12112e; --dlh-mix-amt:84%; --dlh-mix-text:58%;
	--dlh-display:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	--dlh-body:"Nunito Sans","Nunito",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html[data-dracula-scheme="dark"] #dlh{
	--dlh-ink:#eceaf8; --dlh-ink-2:#bdb8e0; --dlh-ink-3:#9a95c4;
	--dlh-line:rgba(236,234,248,.10); --dlh-panel:#1b1740;
	--dlh-accent:#a79cff; --dlh-focus:#a79cff; --dlh-sel:rgba(125,111,240,.45);
	--dlh-card:#0f0e25; --dlh-card-line:rgba(236,234,248,.08); --dlh-card-glow:0 0 15px 2px rgba(70,66,138,.12);
	--dlh-cover:#1d1846; --dlh-mix:#ffffff; --dlh-mix-amt:100%; --dlh-mix-text:100%;
}

/* ---------- Reset inside the block (the Elementor kit styles h2/h3/a/p globally) ---------- */
#dlh{display:block;padding-block:clamp(40px,6vw,72px) clamp(8px,2vw,24px);color:var(--dlh-ink);font:400 17px/1.6 var(--dlh-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-align:left}
#dlh *,#dlh *::before,#dlh *::after{box-sizing:border-box}
#dlh h2,#dlh h3{margin:0;padding:0;font-family:var(--dlh-display);font-weight:600;color:inherit;text-transform:none;text-wrap:balance;border:0;background:none}
#dlh p,#dlh ul,#dlh li{margin:0;padding:0}
#dlh ul{list-style:none}
#dlh li::before,#dlh li::marker{content:none}
#dlh a{color:inherit;text-decoration:none;box-shadow:none;text-underline-offset:.22em;text-decoration-thickness:1px;transition:none}
#dlh svg{display:block}
#dlh ::selection{background:var(--dlh-sel);color:inherit}
#dlh :focus-visible{outline:2px solid var(--dlh-focus);outline-offset:3px;border-radius:6px}
#dlh .dlh-num{font-variant-numeric:tabular-nums;font-weight:600}
#dlh .dlh-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s}

/* ---------- Heading row ---------- */
/* Centred like the other homepage section headings ("Our Latest Products" 36px, "What our clients say" 34px). */
#dlh .dlh-head{display:flex;justify-content:center;margin-bottom:clamp(28px,3.4vw,44px);text-align:center}
#dlh .dlh-head-t{display:grid;justify-items:center;gap:10px;max-width:640px}
#dlh .dlh-head h2{font-size:clamp(28px,3vw,36px);line-height:1.15;letter-spacing:-.02em}
#dlh .dlh-head p{color:var(--dlh-ink-2);max-width:52ch;text-wrap:balance}
#dlh .dlh-more{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,28px)}
#dlh .dlh-all{display:inline-flex;align-items:center;gap:8px;padding:10px 0;font:600 15px/1 var(--dlh-display);color:var(--dlh-accent);white-space:nowrap}
#dlh .dlh-all:hover{text-decoration:underline}
#dlh .dlh-all:hover .dlh-i{transform:translateX(3px)}

/* ---------- Tiles ---------- */
#dlh .dlh-grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr)) minmax(0,.95fr);gap:clamp(14px,1.6vw,20px);align-items:stretch}
#dlh .dlh-tile{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;display:flex;flex-direction:column;gap:12px;min-height:440px;padding:clamp(20px,2vw,26px);border-radius:22px;background:var(--tf);color:var(--dlh-field-ink);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
#dlh .dlh-tile:hover{transform:translateY(-4px)}
#dlh .dlh-tile:has(a:focus-visible){outline:2px solid var(--dlh-focus);outline-offset:3px}
#dlh .dlh-wv{position:absolute;left:0;right:0;bottom:0;width:100%;height:34%;z-index:-1;pointer-events:none}
#dlh .dlh-wv path{fill:none;stroke:var(--dlh-field-line);stroke-width:1.25;vector-effect:non-scaling-stroke}
#dlh .dlh-top{display:flex;justify-content:space-between;gap:10px;font:600 13px/1.3 var(--dlh-display);color:var(--dlh-field-ink-2)}
#dlh .dlh-top b{color:var(--dlh-field-ink)}
#dlh .dlh-t{margin-top:6px;font-size:clamp(19px,1.6vw,22px);line-height:1.22;letter-spacing:-.015em;color:var(--dlh-field-ink)}
#dlh .dlh-tile--lead .dlh-t{font-size:clamp(22px,2.1vw,28px)}
#dlh .dlh-t a{color:var(--dlh-field-ink)}
#dlh .dlh-t a:hover{text-decoration:underline}
#dlh .dlh-t a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
#dlh .dlh-t a:focus-visible{outline:none}
#dlh .dlh-dek{font-size:15px;line-height:1.5;color:var(--dlh-field-ink-2)}
#dlh .dlh-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--dlh-field-line)}
#dlh .dlh-g{font:700 40px/.82 var(--dlh-display);font-size:min(calc(var(--fs) * .78),30cqi);letter-spacing:-.05em;white-space:nowrap}
#dlh .dlh-g.is-ver{letter-spacing:-.06em}
#dlh .dlh-tile--lead .dlh-g{font-size:min(calc(var(--fs) * .9),34cqi)}
#dlh .dlh-when{font:600 12.5px/1.35 var(--dlh-display);color:var(--dlh-field-ink-2);text-align:right;white-space:nowrap}

/* ---------- Topics panel ---------- */
#dlh .dlh-topics{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2vw,26px);border-radius:22px;background:var(--dlh-panel)}
#dlh .dlh-topics-h{font-size:18px;line-height:1.25}
#dlh .dlh-topics ul{display:grid}
#dlh .dlh-topics li+li{border-top:1px solid var(--dlh-line)}
#dlh .dlh-topics li a{display:flex;align-items:center;gap:12px;padding:11px 2px;font:500 15px/1.3 var(--dlh-display);color:var(--dlh-ink)}
#dlh .dlh-topics li a:hover .dlh-nm{text-decoration:underline}
#dlh .dlh-sw{flex:none;width:12px;height:12px;border-radius:4px}
#dlh .dlh-nm{flex:1;min-width:0}
#dlh .dlh-n{color:var(--dlh-ink-3);font-size:14px}

/* ---------- Tonal look (.dlh--tonal): the homepage product-card shell, category colour as an accent ---------- */
/* Accent = the category colour. On light it is mixed toward ink: a little for the big cover word, more for the
   small category label so light colours (amber, cyan) stay readable as text. */
#dlh .dlh-card{--dlh-tone:color-mix(in oklab,var(--tf) var(--dlh-mix-amt),var(--dlh-mix));position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:25px;background:var(--dlh-card);border:1px solid var(--dlh-card-line);box-shadow:var(--dlh-card-glow);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
#dlh .dlh-card:hover{transform:translateY(-4px)}
#dlh .dlh-card:has(a:focus-visible){outline:2px solid var(--dlh-focus);outline-offset:3px}
#dlh .dlh-cvp{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;display:flex;align-items:flex-end;height:clamp(150px,13vw,190px);background:var(--dlh-cover);color:var(--dlh-tone)}
#dlh .dlh-cvp .dlh-wv{top:0;height:100%}
#dlh .dlh-cvp .dlh-wv path{stroke:color-mix(in oklab,var(--dlh-tone) 45%,transparent)}
#dlh .dlh-cvp .dlh-g{padding:0 7cqi 6cqi;font-size:min(var(--fs),34cqi);line-height:.86}
#dlh .dlh-card-b{display:flex;flex-direction:column;gap:10px;flex:1;padding:clamp(18px,1.8vw,22px) clamp(18px,1.8vw,24px) clamp(20px,2vw,24px)}
#dlh .dlh-card .dlh-top{color:var(--dlh-ink-3)}
#dlh .dlh-card .dlh-cat{color:color-mix(in oklab,var(--tf) var(--dlh-mix-text),var(--dlh-mix))}
#dlh .dlh-card .dlh-type b{color:var(--dlh-ink)}
#dlh .dlh-card .dlh-t{margin-top:0;font-size:clamp(18px,1.4vw,20px);line-height:1.28;color:var(--dlh-ink)}
#dlh .dlh-card--lead .dlh-t{font-size:clamp(20px,1.8vw,24px)}
#dlh .dlh-card .dlh-t a{color:var(--dlh-ink)}
#dlh .dlh-card .dlh-dek{color:var(--dlh-ink-2)}
#dlh .dlh-card .dlh-when{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:auto;padding-top:6px;text-align:left;white-space:normal;font-weight:500;color:var(--dlh-ink-3)}
#dlh .dlh-dot{width:3px;height:3px;border-radius:50%;background:currentColor}
#dlh.dlh--tonal .dlh-topics{background:var(--dlh-card);border:1px solid var(--dlh-card-line);box-shadow:var(--dlh-card-glow);border-radius:25px}

/* Preview-only style switch */
#dlh .dlh-pv{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-bottom:18px;font:500 13px/1.4 var(--dlh-display);color:var(--dlh-ink-3)}
#dlh .dlh-pv a{color:var(--dlh-accent);text-decoration:underline}
#dlh .dlh-pv a[aria-current]{color:var(--dlh-ink);font-weight:700;text-decoration:none}

/* ---------- Responsive ---------- */
/* The homepage container pads 10px once it reaches the screen edge: top up to a 16px gutter. */
@media (max-width:1340px){
	#dlh{padding-inline:6px}
}
@media (max-width:1100px){
	#dlh .dlh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	#dlh .dlh-tile{min-height:380px}
}
@media (max-width:620px){
	#dlh .dlh-wv{height:24%}
	#dlh .dlh-grid{grid-template-columns:minmax(0,1fr)}
	#dlh .dlh-tile{min-height:0}
	#dlh .dlh-cvp{height:140px}
	#dlh .dlh-tile .dlh-g{font-size:min(calc(var(--fs) * .7),24cqi)}
}
@media (prefers-reduced-motion:reduce){
	#dlh .dlh-tile,#dlh .dlh-card,#dlh .dlh-i{transition:none}
	#dlh .dlh-tile:hover,#dlh .dlh-card:hover{transform:none}
}