/* Shared widget styling.

   Everything static lives here so a site stylesheet can override it with
   ordinary specificity. Widgets previously wrote these declarations inline,
   which beat any stylesheet rule, and then forced their mobile layout with
   !important because their own inline grid outranked their own <style> block.

   Anything the user sets arrives as a custom property on the element, so
   the cascade still works: --anvil-cols and friends are set inline, and the
   rules below read them with a fallback. Overriding in site CSS is then just

       .anvil-gallery{--anvil-cols:4}
       @media(max-width:767px){.anvil-stats{--anvil-cols-m:1}}
*/

/* ------------------------------------------------------------ grids */
.anvil-stats,
.anvil-counters,
.anvil-flist,
.anvil-iconcards,
.anvil-plinks,
.anvil-dir,
.anvil-gallery{
	display:grid;
	grid-template-columns:repeat(var(--anvil-cols, 3), minmax(0, 1fr));
	gap:var(--anvil-gap, 24px);
}
.anvil-mt{
	display:grid;
	grid-template-columns:var(--anvil-cols, 1fr 1fr);
	gap:var(--anvil-gap, 48px);
	align-items:center;
}
.anvil-footer-grid{
	display:grid;
	grid-template-columns:var(--anvil-cols, 1.6fr repeat(3, 1fr));
	gap:var(--anvil-gap, 40px);
}
.anvil-masonry{
	column-count:var(--anvil-cols, 3);
	column-gap:var(--anvil-gap, 18px);
}

@media(max-width:1024px){
	.anvil-stats,.anvil-counters,.anvil-flist,
	.anvil-iconcards,.anvil-plinks,.anvil-dir,.anvil-gallery{
		grid-template-columns:repeat(var(--anvil-cols-t, var(--anvil-cols, 2)), minmax(0, 1fr));
	}
	.anvil-masonry{ column-count:var(--anvil-cols-t, var(--anvil-cols, 2)) }
	.anvil-mt{ grid-template-columns:var(--anvil-cols-t, var(--anvil-cols, 1fr 1fr)) }
	.anvil-footer-grid{ grid-template-columns:var(--anvil-cols-t, 1fr 1fr) }
}
@media(max-width:767px){
	.anvil-stats,.anvil-counters,.anvil-flist,
	.anvil-iconcards,.anvil-plinks,.anvil-dir,.anvil-gallery{
		grid-template-columns:repeat(var(--anvil-cols-m, 1), minmax(0, 1fr));
		row-gap:var(--anvil-gap-m, var(--anvil-gap, 26px));
	}
	.anvil-masonry{ column-count:var(--anvil-cols-m, 1) }
	.anvil-mt{ grid-template-columns:var(--anvil-cols-m, 1fr) }
	.anvil-footer-grid{ grid-template-columns:var(--anvil-cols-m, 1fr) }
}

/* ------------------------------------------------------------ stats */
.anvil-stat{ border-left:2px solid var(--anvil-rule-color, rgba(128,128,128,.25)); padding-left:18px }
.anvil-stat strong{ display:block; font-size:var(--anvil-stat-size, 30px); line-height:1.15; color:var(--anvil-stat-value, inherit) }
.anvil-stat small{ font-size:12px; letter-spacing:.07em; text-transform:uppercase; opacity:.75; color:var(--anvil-stat-label, inherit) }

/* --------------------------------------------------------- masonry */
.anvil-masonry figure{ margin:0 0 var(--anvil-gap, 18px); break-inside:avoid }
.anvil-masonry img{ width:100%; height:auto; display:block; border-radius:var(--anvil-radius, 10px) }
.anvil-masonry figcaption{ font-size:13px; opacity:.7; margin-top:6px }

/* --------------------------------------------------------- gallery */
.anvil-gallery figure{ margin:0 }
.anvil-gallery img{
	width:100%;
	display:block;
	border-radius:var(--anvil-radius, 12px);
	object-fit:var(--anvil-fit, cover);
	height:var(--anvil-thumb-h, 220px);
}
/* Uniform thumbnails via aspect-ratio: every cell the same shape whatever
   the source image is. Set when the user picks an aspect. */
.anvil-gallery[data-uniform="ratio"] img{ height:auto; aspect-ratio:var(--anvil-thumb-ar, 4 / 3) }
/* Natural: each image keeps its own proportions. */
.anvil-gallery[data-uniform="0"] img{ height:auto; aspect-ratio:auto; object-fit:contain }
.anvil-gallery figcaption{ font-size:13px; opacity:.7; margin-top:8px }

/* ------------------------------------------------------------ logos */
.anvil-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:var(--anvil-justify, center); gap:var(--anvil-gap, 40px) var(--anvil-gap-x, 56px) }
.anvil-logos img{ height:var(--anvil-logo-h, 44px); width:auto; display:block; filter:var(--anvil-logo-filter, none); opacity:var(--anvil-logo-op, 1); transition:opacity .2s, filter .2s }
.anvil-logos a:hover img{ filter:none; opacity:1 }

/* .anvil-social IS emitted; the -boxed variant is not, so only the base
   flex row lives here. Everything else the widget still writes inline. */
.anvil-social{ display:flex; flex-wrap:wrap; gap:var(--anvil-gap, 12px); align-items:center }