// ZASO Services Grid Widget
// NOTE: SiteOrigin prepends .so-widget-<id> to every selector compiled from this file.
// Cross-element modifier rules MUST be flat top-level selectors — never use chained & for
// descendant modifiers (e.g. &--cols-3 &__grid) — the double-prefix produces a selector
// that never matches. See reference_siteorigin_widget_dev for the full explanation.

@icon_color:         #4f46e5;
@icon_size:          2.5rem;
@icon_bg:            transparent;
@icon_pad:           0;
@title_color:        #111111;
@description_color:  #444444;
@link_color:         #4f46e5;
@card_background:    #ffffff;
@card_padding:       28px 28px 28px 28px;
@card_border_radius: 10px;
@gap:                24px;

// ─── Base container ───────────────────────────────────────────────────────────
& {
	box-sizing: border-box;
}

// ─── Grid ─────────────────────────────────────────────────────────────────────
.zaso-services-grid__grid {
	display:               grid;
	grid-template-columns: repeat( 3, 1fr );
	gap:                   @gap;
	list-style:            none;
	margin:                0;
	padding:               0;
}

// ─── Column variants (flat selectors — no chained & !) ────────────────────────
.zaso-services-grid--cols-2 .zaso-services-grid__grid { grid-template-columns: repeat( 2, 1fr ); }
.zaso-services-grid--cols-4 .zaso-services-grid__grid { grid-template-columns: repeat( 4, 1fr ); }

// ─── Card ─────────────────────────────────────────────────────────────────────
.zaso-services-grid__card {
	background:    @card_background;
	border-radius: @card_border_radius;
	padding:       @card_padding;
	height:        100%;
	box-sizing:    border-box;
}

// Framed style adds a border + subtle shadow
.zaso-services-grid--style-framed .zaso-services-grid__card {
	border:     1px solid rgba( 0, 0, 0, 0.08 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
}

// ─── Alignment (flat selectors) ───────────────────────────────────────────────
.zaso-services-grid--align-center .zaso-services-grid__card { text-align: center; }
.zaso-services-grid--align-center .zaso-services-grid__icon { margin-left: auto; margin-right: auto; }
.zaso-services-grid--align-left .zaso-services-grid__card   { text-align: left; }

// ─── Icon ─────────────────────────────────────────────────────────────────────
.zaso-services-grid__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         @icon_pad;
	border-radius:   50%;
	background:      @icon_bg;
	margin-bottom:   18px;
	color:           @icon_color;
	font-size:       @icon_size;
	line-height:     1;

	.sow-icon-image,
	.sow-icon-fontawesome,
	.sow-icon-genericons,
	.sow-icon-typicons,
	.sow-icon-elegantline,
	.sow-icon-iconfont {
		color:     @icon_color;
		font-size: @icon_size;
		width:     1em;
		height:    1em;
	}
}

.zaso-services-grid__icon-image {
	width:      @icon_size;
	height:     @icon_size;
	object-fit: contain;
	display:    block;
}

// ─── Body ─────────────────────────────────────────────────────────────────────
.zaso-services-grid__title {
	font-size:   1.15em;
	font-weight: 600;
	color:       @title_color;
	margin:      0 0 10px;
	line-height: 1.3;
}

.zaso-services-grid__description {
	font-size:   0.95em;
	color:       @description_color;
	margin:      0 0 16px;
	line-height: 1.6;
}

// Qualified with the container class on purpose. Some themes colour widget links
// via rules like `.widget a:link` (specificity 0,2,1) on the SiteOrigin panel
// wrapper, which would otherwise beat a bare `.zaso-services-grid__link` (0,2,0)
// and force the link to the theme's link colour (invisible on dark skins). The
// extra `.zaso-services-grid` lifts this to (0,3,0) so the skin's @link_color
// always wins, with no !important. Flat descendant selector (SiteOrigin prefixes
// .so-widget-<id> once); not chained &, so no double-prefix.
.zaso-services-grid .zaso-services-grid__link {
	display:         inline-block;
	color:           @link_color;
	font-weight:     600;
	font-size:       0.9em;
	text-decoration: none;
	transition:      opacity 0.2s ease;

	&:hover,
	&:focus {
		text-decoration: underline;
		opacity:         0.85;
	}

	&:focus {
		outline:        2px solid @link_color;
		outline-offset: 2px;
		border-radius:  2px;
	}
}

// ─── Responsive ───────────────────────────────────────────────────────────────
@media ( max-width: 767px ) {
	.zaso-services-grid__grid,
	.zaso-services-grid--cols-2 .zaso-services-grid__grid,
	.zaso-services-grid--cols-3 .zaso-services-grid__grid,
	.zaso-services-grid--cols-4 .zaso-services-grid__grid {
		grid-template-columns: 1fr;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023px ) {
	.zaso-services-grid--cols-3 .zaso-services-grid__grid,
	.zaso-services-grid--cols-4 .zaso-services-grid__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

// ═══════════════════════════════════════════════════════════════════════════════
// LAYOUT VARIANTS (structure only)
// ───────────────────────────────────────────────────────────────────────────────
// Orthogonal to the colour skins. The Style preset still drives icon/title/bg
// colour via the vars above; these rules only restructure shape (icon placement,
// elevation, padding). They reuse @card_background / @icon_bg / @icon_size so they
// combine cleanly with every skin and with the Card Style + Alignment modifiers.
// Flat top-level selectors only (SiteOrigin prepends .so-widget-<id>; chained &
// would double-prefix and never match). The "default" layout adds no class.
// Placed AFTER the alignment rules so equal-specificity (0,2,0) layout overrides
// win by source order where they intentionally diverge from alignment.
// ═══════════════════════════════════════════════════════════════════════════════

// ----- Layout: boxed -----------------------------------------------------------
// Each item becomes a distinctly elevated surface with a soft border, rounded
// corners and a depth shadow, plus a hover lift. Reads as a tactile card on any
// skin because the border/shadow are neutral alpha values over @card_background.
.zaso-services-grid--layout-boxed .zaso-services-grid__card {
	border:        1px solid rgba( 0, 0, 0, 0.06 );
	border-radius: 18px;
	box-shadow:    0 18px 38px -16px rgba( 0, 0, 0, 0.35 ), 0 3px 8px rgba( 0, 0, 0, 0.08 );
	transition:    transform 0.2s ease, box-shadow 0.2s ease;
}

.zaso-services-grid--layout-boxed .zaso-services-grid__card:hover,
.zaso-services-grid--layout-boxed .zaso-services-grid__card:focus-within {
	transform:  translateY( -6px );
	box-shadow: 0 28px 52px -16px rgba( 0, 0, 0, 0.4 ), 0 6px 14px rgba( 0, 0, 0, 0.1 );
}

// ----- Layout: icon-left -------------------------------------------------------
// Icon sits to the LEFT of the text block on a flex row. Forces left text
// alignment and resets the icon's centering margins so it stays flush-left even
// when the Alignment field is set to Center. The icon never shrinks.
.zaso-services-grid--layout-icon-left .zaso-services-grid__card {
	display:     flex;
	align-items: flex-start;
	gap:         18px;
	text-align:  left;
}

.zaso-services-grid--layout-icon-left .zaso-services-grid__icon {
	flex-shrink:   0;
	margin-top:    0.1em;
	margin-left:   0;
	margin-right:  0;
	margin-bottom: 0;
}

.zaso-services-grid--layout-icon-left .zaso-services-grid__body {
	flex:      1 1 auto;
	min-width: 0;
}

// ----- Layout: centered --------------------------------------------------------
// Icon on top, everything centered, with generous vertical padding and a larger
// icon plate. Centers regardless of the Alignment field so the layout is
// self-consistent. The icon box is sized in em of @icon_size so it scales with
// the chosen icon size and forms a clean circle when @icon_bg is set.
.zaso-services-grid--layout-centered .zaso-services-grid__card {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding-top:    46px;
	padding-bottom: 46px;
}

.zaso-services-grid--layout-centered .zaso-services-grid__icon {
	width:         1.9em;
	height:        1.9em;
	margin-left:   auto;
	margin-right:  auto;
	margin-bottom: 26px;
}

.zaso-services-grid--layout-centered .zaso-services-grid__body {
	max-width: 34ch;
	margin:    0 auto;
}

// ═══════════════════════════════════════════════════════════════════════════════
// PRE-MADE DESIGNS — free set (6). Complete looks chosen from the "Browse designs"
// gallery via the design_variant field. Each fixes its own card shape, icon tile,
// typography and accent, so it is self-contained and overrides the base skin. The
// design class carries the .so-widget-<id> prefix (0,3,0) and beats the base card
// rules (0,2,0) by specificity, so no !important is needed. Flat top-level
// selectors only; .sow-icon-* / ::before / ::after nest under a flat parent, which
// is a valid descendant (same shape as the base icon rule). Pro appends 24 more
// via the zaso_services_grid_designs filter in its own (tripled-selector) sheet.
// ═══════════════════════════════════════════════════════════════════════════════

// Recolour + resize the rendered glyph (wrapper + SiteOrigin inner icon element).
.zaso-svc-glyph(@c; @s) {
	color:     @c;
	font-size: @s;
	.sow-icon-fontawesome, .sow-icon-materialsymbols, .sow-icon-genericons,
	.sow-icon-typicons, .sow-icon-elegantline, .sow-icon-iconfont, .sow-icon-image {
		color:     @c;
		font-size: @s;
	}
}

// Text link with a trailing arrow (Unicode → so no extra webfont dependency).
.zaso-svc-arrow(@c) {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	color:           @c;
	font-weight:     700;
	text-decoration: none;
	&::after { content: "\2192"; font-weight: 600; }
	&:hover, &:focus { text-decoration: none; opacity: 0.82; }
	&:focus { outline: 2px solid @c; outline-offset: 2px; border-radius: 2px; }
}

// ----- 01 Centered — icon tile on top, everything centred -----------------------
.zaso-services-grid--design-centered .zaso-services-grid__card {
	background:    #ffffff;
	border:        1px solid #e2e8f0;
	border-radius: 18px;
	padding:       30px 26px;
	box-shadow:    0 4px 16px rgba( 15, 23, 42, 0.05 );
	text-align:    center;
}
.zaso-services-grid--design-centered .zaso-services-grid__icon {
	width:         60px;
	height:        60px;
	border-radius: 16px;
	background:    #eef2ff;
	padding:       0;
	margin:        0 auto 18px;
	.zaso-svc-glyph( #4f46e5; 30px );
}
.zaso-services-grid--design-centered .zaso-services-grid__title       { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.01em; }
.zaso-services-grid--design-centered .zaso-services-grid__description  { font-size: 13.5px; line-height: 1.55; color: #64748b; margin: 0 0 16px; }
.zaso-services-grid--design-centered .zaso-services-grid__link         { .zaso-svc-arrow( #4f46e5 ); font-size: 13.5px; }

// ----- 02 Inline — icon tile to the left of the text ----------------------------
.zaso-services-grid--design-inline .zaso-services-grid__card {
	display:       flex;
	align-items:   flex-start;
	gap:           16px;
	text-align:    left;
	background:    #ffffff;
	border:        1px solid #e2e8f0;
	border-radius: 18px;
	padding:       26px;
	box-shadow:    0 4px 16px rgba( 15, 23, 42, 0.05 );
}
.zaso-services-grid--design-inline .zaso-services-grid__icon {
	width:         50px;
	height:        50px;
	flex:          none;
	border-radius: 13px;
	background:    #f1f5f9;
	padding:       0;
	margin:        0;
	.zaso-svc-glyph( #0f172a; 26px );
}
.zaso-services-grid--design-inline .zaso-services-grid__body         { flex: 1 1 auto; min-width: 0; }
.zaso-services-grid--design-inline .zaso-services-grid__title        { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 6px; letter-spacing: -0.01em; }
.zaso-services-grid--design-inline .zaso-services-grid__description  { font-size: 13px; line-height: 1.5; color: #64748b; margin: 0 0 12px; }
.zaso-services-grid--design-inline .zaso-services-grid__link         { .zaso-svc-arrow( #0f172a ); font-size: 13px; }

// ----- 03 Chip badge — icon in a pill, divider above the link -------------------
.zaso-services-grid--design-chip-badge .zaso-services-grid__card {
	background:    #ffffff;
	border:        1px solid #e2e8f0;
	border-radius: 18px;
	padding:       26px;
	box-shadow:    0 4px 16px rgba( 15, 23, 42, 0.05 );
	text-align:    left;
}
.zaso-services-grid--design-chip-badge .zaso-services-grid__icon {
	width:         auto;
	height:        auto;
	border-radius: 999px;
	background:    #fff1f2;
	padding:       7px 13px;
	margin:        0 0 16px;
	.zaso-svc-glyph( #e11d48; 17px );
}
.zaso-services-grid--design-chip-badge .zaso-services-grid__title       { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.01em; }
.zaso-services-grid--design-chip-badge .zaso-services-grid__description  { font-size: 13.5px; line-height: 1.55; color: #64748b; margin: 0 0 16px; }
.zaso-services-grid--design-chip-badge .zaso-services-grid__link {
	.zaso-svc-arrow( #e11d48 );
	display:     flex;
	font-size:   13.5px;
	margin-top:  2px;
	padding-top: 14px;
	border-top:  1px solid #f1f5f9;
}

// ----- 04 Borderless — no card, bare glyph --------------------------------------
.zaso-services-grid--design-borderless .zaso-services-grid__card {
	background:  transparent;
	border:      0;
	box-shadow:  none;
	padding:     8px 4px;
	text-align:  left;
}
.zaso-services-grid--design-borderless .zaso-services-grid__icon {
	width:      auto;
	height:     auto;
	background: transparent;
	padding:    0;
	margin:     0 0 14px;
	.zaso-svc-glyph( #059669; 32px );
}
.zaso-services-grid--design-borderless .zaso-services-grid__title       { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.01em; }
.zaso-services-grid--design-borderless .zaso-services-grid__description  { font-size: 14px; line-height: 1.6; color: #64748b; margin: 0 0 14px; }
.zaso-services-grid--design-borderless .zaso-services-grid__link         { .zaso-svc-arrow( #059669 ); font-size: 14px; }

// ----- 05 Icon top-right — index counter + circular icon at top-right -----------
.zaso-services-grid--design-icon-top-right .zaso-services-grid__grid { counter-reset: zaso-svc; }
.zaso-services-grid--design-icon-top-right .zaso-services-grid__item { counter-increment: zaso-svc; }
.zaso-services-grid--design-icon-top-right .zaso-services-grid__card {
	position:      relative;
	background:    #ffffff;
	border:        1px solid #e2e8f0;
	border-radius: 18px;
	padding:       84px 26px 26px;
	box-shadow:    0 4px 16px rgba( 15, 23, 42, 0.05 );
	text-align:    left;
}
.zaso-services-grid--design-icon-top-right .zaso-services-grid__card::before {
	content:        "/ " counter( zaso-svc, decimal-leading-zero );
	position:       absolute;
	top:            30px;
	left:           26px;
	font-family:    'DM Mono', ui-monospace, monospace;
	font-size:      12px;
	font-weight:    500;
	letter-spacing: 0.06em;
	color:          #94a3b8;
}
.zaso-services-grid--design-icon-top-right .zaso-services-grid__icon {
	position:      absolute;
	top:           26px;
	right:         26px;
	width:         46px;
	height:        46px;
	border-radius: 50%;
	background:    #f0fdfa;
	padding:       0;
	margin:        0;
	.zaso-svc-glyph( #0d9488; 24px );
}
.zaso-services-grid--design-icon-top-right .zaso-services-grid__title       { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.01em; }
.zaso-services-grid--design-icon-top-right .zaso-services-grid__description  { font-size: 13.5px; line-height: 1.55; color: #64748b; margin: 0 0 14px; }
.zaso-services-grid--design-icon-top-right .zaso-services-grid__link         { .zaso-svc-arrow( #0d9488 ); font-size: 13.5px; }

// ----- 06 Icon over title — small amber tile, left aligned ----------------------
.zaso-services-grid--design-icon-over-title .zaso-services-grid__card {
	background:    #ffffff;
	border:        1px solid #e2e8f0;
	border-radius: 18px;
	padding:       26px;
	box-shadow:    0 4px 16px rgba( 15, 23, 42, 0.05 );
	text-align:    left;
}
.zaso-services-grid--design-icon-over-title .zaso-services-grid__icon {
	width:         44px;
	height:        44px;
	border-radius: 12px;
	background:    #fffbeb;
	padding:       0;
	margin:        0 0 16px;
	.zaso-svc-glyph( #d97706; 23px );
}
.zaso-services-grid--design-icon-over-title .zaso-services-grid__title       { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.01em; }
.zaso-services-grid--design-icon-over-title .zaso-services-grid__description  { font-size: 13.5px; line-height: 1.55; color: #64748b; margin: 0 0 14px; }
.zaso-services-grid--design-icon-over-title .zaso-services-grid__link         { .zaso-svc-arrow( #d97706 ); font-size: 13.5px; }