/*
 * SiteQode — components.css
 * Cards, pagination, 404, search, tags, single-post layout, widgets.
 */

/** 
	Card grid 
*/

	.sq-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

	.sq-card__body > *:not(:last-child) { margin: 0 0 10px; }
	
	.sq-card__media-fallback { display: block; width: 100%; height: 256px; 
		background: linear-gradient(135deg, var(--sq-color-ink-100), var(--sq-color-surface-tint)); }

	.sq-card__media-fallback:before { content: "No Image Available"; display: flex; align-items: center; 
		justify-content: center; width: 100%; height: 100%; font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem); 
		color: var(--sq-color-ink); text-transform: uppercase; letter-spacing: -.05em; 
	}

	.sq-card { background: color-mix(in srgb, var(--sq-color-ink) 0.9%, #fff); border: 1px solid var(--sq-color-border); border-radius: var(--sq-radius-md); 
		overflow: hidden; transition: var(--sq-transition); display: flex; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px; }

	/* Title */
	.sq-card__title { font-size: var(--sq-h4); margin: 0; }
	.sq-card__title a { transition: var(--sq-transition); }
	.sq-card__title a:hover,
	.sq-card__title a:focus { color: var(--sq-color-ink-soft); }

	.sq-card__excerpt { color: var(--sq-color-base); font-size: var(--sq-text-base); margin: 0; flex: 1; }

	.sq-card__link { display: inline-flex; align-items: center; font-size: var(--sq-text-base); 
		font-weight: normal; color: var(--sq-color-ink); transition: var(--sq-transition); }
	.sq-card__link:hover,
	.sq-card__link:focus { color: var(--sq-color-ink-soft); } 


	.sq-card__link .sq-icon_grp { overflow: hidden; position: relative; display: flex; margin-left: 4px; }
	.sq-card__link .sq-icon_grp i { transform: translate(0px, 0px); 
		transition: var(--sq-transition); display: inline-flex; font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem); }
	.sq-card__link .sq-icon_grp i:nth-child(2) { position: absolute; 
		top: 0; right: 0; bottom: 0; left: 0; transform: translate(-20px, 20px); }

	.sq-card__link:hover .sq-icon_grp i:nth-child(1),
	.sq-card__link:focus .sq-icon_grp i:nth-child(1) { transform: translate(20px, -20px); }
	.sq-card__link:hover .sq-icon_grp i:nth-child(2),
	.sq-card__link:focus .sq-icon_grp i:nth-child(2) { transform: translate(0px, 0px); }

	
	@media (max-width: 900px) {
		.sq-card-grid { grid-template-columns: repeat(2, 1fr); }
	}

	@media (max-width: 620px) {
		.sq-card-grid { grid-template-columns: 1fr; }
	}


	/* Services */

	.sq-card.sq-card--service { 
		padding: clamp(1.25rem, 1.1058rem + 0.641vw, 1.875rem) clamp(0.9375rem, 0.7212rem + 0.9615vw, 1.875rem);
		background-color: #fafcff; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; border-color: rgba(28, 73, 140, 0.1);
	}

	.sq-card.sq-card--service .sq-card__icon { display: inline-flex; width: clamp(3.75rem, 3.1731rem + 2.5641vw, 6.25rem); 
		height: clamp(3.75rem, 3.1731rem + 2.5641vw, 6.25rem); align-items: center; justify-content: center;
  		border-radius: var(--sq-radius-md); background: var(--sq-color-ink-900); margin-bottom: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.875rem);
	}

	.sq-card.sq-card--service .sq-card__icon img { width: clamp(3rem, 2.8269rem + 0.7692vw, 3.75rem); 
		height: clamp(3rem, 2.8269rem + 0.7692vw, 3.75rem); object-fit: contain; 
		filter: invert(43%) sepia(50%) saturate(781%) hue-rotate(177deg) brightness(59%) contrast(106%); 
	}

	.sq-card.sq-card--service .sq-card__link { margin-top: clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem); }
	.sq-related .sq-card.sq-card--service .sq-card__link { margin-top: clamp(1rem, 0.9169rem + 0.2776vw, 1.25rem); }

	.sq-related .sq-card.sq-card--service { padding: 20px; background-color: #fafcff; 
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px; border-color: rgba(28, 73, 140, 0.1); }

	.sq-related .sq-card.sq-card--service .sq-card__icon { display: inline-flex; width: 70px; 
		height: 70px; align-items: center; justify-content: center; border-radius: var(--sq-radius-md); 
		background: var(--sq-color-ink-900); margin-bottom: clamp(1rem, 0.9169rem + 0.2776vw, 1.25rem); }

	.sq-related .sq-card.sq-card--service .sq-card__icon img { width: 40px; height: 40px; }
	.sq-related .sq-related-services-swiper .sq-services-nav { display: none; }


	/* Blog Cards */

	.sq-card--blog .sq-card__body { padding: clamp(1.25rem, 1.1058rem + 0.641vw, 1.875rem); }

	.sq-card--blog .blog-thumb-group { display: grid; }
	.sq-card--blog .blog-thumb-group > a,
	.sq-card--blog .blog-thumb-group > time { grid-area: 1/-1; }

	.sq-card--blog .blog-thumb-group > time { align-self: end; width: auto; justify-self: start; 
		margin-left: clamp(1.25rem, 1.1058rem + 0.641vw, 1.875rem); padding: 10px 20px; line-height: 1; font-size: 0.9rem; 
		background-color: var(--sq-color-accent-white); margin-bottom: 10px; border-radius: 10px; color: var(--sq-color-ink); 
	}



/** 
	Tags / categories
*/

	.sq-tag { display: inline-flex; align-items: center; font-size: 0.9rem; padding: 6px 13px; background: var(--sq-color-ink-700); 
		color: var(--sq-color-ink); border-radius: var(--sq-radius-sm); transition: var(--sq-transition);
	}
	.sq-tag:hover, .sq-tag:focus { background: var(--sq-color-ink); color: var(--sq-color-accent-white); }

	.sq-tag--muted {
		background: var(--sq-color-surface-tint);
		color: var(--sq-color-muted);
		text-transform: none;
		letter-spacing: 0;
		font-weight: 500;
	}

/** 
	Pagination
*/

	.sq-pagination { display: flex; justify-content: center; gap: var(--sq-space-2); margin-top: var(--sq-space-10); }

	.sq-pagination .nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }

	.sq-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; transition: var(--sq-transition);
		min-width: 2.5rem; height: 2.5rem; padding-inline: var(--sq-space-2); border-radius: var(--sq-radius-sm); 
		font-size: var(--sq-text-base); font-weight: 500; color: var(--sq-color-ink); background-color: var(--sq-color-ink-900); 
	}

	.sq-pagination .page-numbers.current { background: var(--sq-color-ink); color: var(--sq-color-accent-white); }
	.sq-pagination .page-numbers:not(.current):hover { background: var(--sq-color-ink); color: var(--sq-color-accent-white); }


/* Search form ----------------------------------------------------------- */

.sq-search-form {
	display: flex;
	align-items: center;
	gap: var(--sq-space-2);
	background: var(--sq-color-surface);
	border: 1px solid var(--sq-color-border);
	border-radius: var(--sq-radius-full);
	padding: var(--sq-space-2) var(--sq-space-2) var(--sq-space-2) var(--sq-space-5);
	max-width: 480px;
}
.sq-search-form__input {
	flex: 1;
	border: 0;
	background: none;
	outline: none;
	font-size: var(--sq-text-base);
}
.sq-search-form__submit {
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sq-radius-full);
	background: var(--sq-color-ink-700);
	color: #fff;
}
.sq-search-form__submit:hover {
	background: var(--sq-color-ink-900);
}

/** 
	No results 
*/

	.sq-no-results { display: flex; flex-direction: column; align-items: flex-start; }
	.sq-no-results__text { color: var(--sq-color-ink); margin: 0px; padding: 10px 20px; border-radius: var(--sq-radius-md);
		border: 1px dashed var(--sq-color-border); background-color: var(--sq-color-ink-500);}

/* 404 -------------------------------------------------------------- */

.sq-404 {
	padding-block: var(--sq-space-16);
}
.sq-404__inner {
	max-width: 640px;
	text-align: center;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sq-404__numeral {
	font-family: var(--sq-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(4rem, 3rem + 6vw, 7rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sq-color-ink-100);
	-webkit-text-stroke: 2px var(--sq-color-ink-700);
	margin: 0 0 var(--sq-space-4);
	line-height: 1;
}
.sq-404__illustration img {
	max-width: 260px;
	margin-bottom: var(--sq-space-4);
}
.sq-404__eyebrow {
	margin-bottom: var(--sq-space-2);
}
.sq-404__title {
	margin-bottom: var(--sq-space-3);
}
.sq-404__description {
	color: var(--sq-color-muted);
	margin-bottom: var(--sq-space-6);
}
.sq-404__actions {
	margin-bottom: var(--sq-space-8);
}
.sq-404__search {
	width: 100%;
	display: flex;
	justify-content: center;
}

/** 
	Single post layout 
*/

	.sq-post__layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(18.75rem, 17.3077rem + 6.4103vw, 25rem); gap: var(--sq-space-10); 
		padding: clamp(3.125rem, 2.4038rem + 3.2051vw, 6.25rem) 0px; align-items: start; 
	}

	.sq-post__layout:has(.sq-post__main:only-child) { grid-template-columns: 1fr; }

	.sq-post__main { max-width: 100%; }

	.sq-post__main .sq-post__header { margin-bottom: var(--sq-space-5); }

	.sq-post__thumbnail { border-radius: var(--sq-radius-md); overflow: hidden; }

	.sq-post__categories { margin: var(--sq-space-4) 0 var(--sq-space-5); display: flex; flex-wrap: wrap; gap: var(--sq-space-2); }
	.sq-post__title { margin-bottom: var(--sq-space-3); }
	.sq-post__meta { display: flex; gap: var(--sq-space-4); color: var(--sq-color-muted); font-size: var(--sq-text-base); 
		margin: var(--sq-space-5) 0 var(--sq-space-5); 
	}

	.sq-post__sidebar { position: sticky; top: calc(var(--sq-space-6) + 64px); }
	.sq-post__sidebar > div:not(:last-child) { margin-bottom: var(--sq-space-5); }
	.sq-post__meta-item { display: inline-flex; align-items: center; gap: var(--sq-space-2); }
	.sq-post__tags { display: flex; flex-wrap: wrap; gap: var(--sq-space-2); margin-top: var(--sq-space-8); }
	.sq-post__author-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--sq-color-ink-300); 
		border-radius: var(--sq-radius-md); padding: var(--sq-space-6); position: relative; }

	.sq-author-wrapper { display: inline-flex; gap: .25em; font-size: 16px; font-family: var(--sq-font-body); font-weight: 400; }

	.sq-post__author-card img { border-radius: 5px; margin-bottom: var(--sq-space-4); }
	.sq-post__author-eyebrow { font-size: var(--sq-text-base); font-weight: 400; margin: 0; }
	.sq-post__author-name { font-weight: 500; margin: 0 0 var(--sq-space-1); text-transform: capitalize; color: var(--sq-color-accent-black); }
	.sq-post__author-name a { color: inherit; }
	.sq-post__author-name a:hover { color: var(--sq-color-ink); }
	.sq-post__author-role { color: var(--sq-color-base); font-size: var(--sq-text-base); margin: 0 0 var(--sq-space-4); }
	.sq-post__author-bio { font-size: var(--sq-text-base); color: var(--sq-color-base); margin: 0; }
	.sq-post__author-link { display: inline-flex; align-items: center; gap: 0; margin-top: var(--sq-space-5); font-size: var(--sq-text-base); font-weight: 600; }
	.sq-post__author-link .sq-icon { font-size: 1rem; }
	.sq-post__author-card .sq-social { margin-top: var(--sq-space-5); }
	.sq-related { margin-top: clamp(3.125rem, 2.4038rem + 3.2051vw, 6.25rem); max-width: none; }
	.sq-related__title { margin-bottom: var(--sq-space-6); }
	.sq-post__sidebar .sq-widget { background: var(--sq-color-surface); border: 1px solid var(--sq-color-border); 
		border-radius: var(--sq-radius-md); padding: var(--sq-space-5); }
	.sq-post__sidebar .sq-widget:not(:last-child) { margin-bottom: var(--sq-space-5); }
	.sq-widget__title { font-size: var(--sq-h6); margin-bottom: var(--sq-space-3); }

	.sq-post__author-link .sq-icon_grp { overflow: hidden; position: relative; display: flex; margin-left: 4px; }
	.sq-post__author-link .sq-icon_grp i { transform: translate(0px, 0px); 
		transition: var(--sq-transition); display: inline-flex; font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem); }
	.sq-post__author-link .sq-icon_grp i:nth-child(2) { position: absolute; 
		top: 0; right: 0; bottom: 0; left: 0; transform: translate(-20px, 20px); }

	.sq-post__author-link:hover .sq-icon_grp i:nth-child(1),
	.sq-post__author-link:focus .sq-icon_grp i:nth-child(1) { transform: translate(20px, -20px); }
	.sq-post__author-link:hover .sq-icon_grp i:nth-child(2),
	.sq-post__author-link:focus .sq-icon_grp i:nth-child(2) { transform: translate(0px, 0px); }

	.sq-post__sidebar .sq-widget:last-child .wp-block-group { margin-bottom: 0; }

	@media (min-width: 901px) {
		.single-service .sq-post__layout{ display: flex; }
	.single-service .sq-post__layout .sq-post__main{ max-width: calc(100% - 400px); }
	}
	@media (max-width: 900px) {
		.single-service .sq-post__layout{ display: flex; }
	.single-service .sq-post__layout .sq-post__main{ max-width: 100%; }
		.sq-post__layout { grid-template-columns: 1fr; }
	}

/* Service / Event sidebars — same card treatment as .sq-widget above, for
   the hand-authored (non-W P-widget) sidebar content on those two templates. */

	.sq-service-sidebar,
	.sq-event-sidebar { background: var(--sq-color-surface); border: 1px solid var(--sq-color-border); border-radius: var(--sq-radius-md);
		padding: var(--sq-space-6) clamp(0.9375rem, 0.6923rem + 1.0897vw, 2rem); position: sticky; top: calc(var(--sq-space-6) + 64px);
	}
	.sq-service-sidebar__icon {
		width: 2.5rem;
		height: 2.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--sq-radius-sm);
		background: var(--sq-color-ink-100);
		margin-bottom: var(--sq-space-4);
	}
	.sq-service-sidebar__cta,
	.sq-event-sidebar__cta {
		width: 100%;
		justify-content: center;
		margin-top: var(--sq-space-5);
	}
	.sq-event-sidebar__list {
		display: flex;
		flex-direction: column;
		gap: var(--sq-space-4);
	}
	.sq-event-sidebar__list li {
		display: flex;
		align-items: flex-start;
		gap: var(--sq-space-3);
		font-size: var(--sq-text-base);
	}
	.sq-event-sidebar__list .sq-icon {
		color: var(--sq-color-ink-700);
		flex: none;
		margin-top: 0.15em;
	}
	.sq-event-sidebar__note {
		color: var(--sq-color-muted);
		font-size: var(--sq-text-base);
		margin-top: var(--sq-space-4);
	}

/* Shared light-background contact list — deliberately separate from
   .sq-footer__contact-list (layout.css), which is styled for the dark
   footer and would be unreadable reused here. */

	.sq-contact-list { display: flex; flex-direction: column; gap: var(--sq-space-2); font-size: var(--sq-text-base); }
	.sq-contact-list li,
	.sq-contact-list li a { display: flex; align-items: flex-start; gap: var(--sq-space-2); padding: 0px; }

	.sq-contact-list a:hover,
	.sq-contact-list a:focus { color: var(--sq-color-ink); }

	.sq-contact-list li svg,
	.sq-contact-list li a svg { color: var(--sq-color-ink); top: 0.2em; position: relative; font-size: 20px; }

	.sq-post__cta-inline { margin-top: var(--sq-space-8); }

	@media (max-width: 900px) {
		.sq-service-sidebar,
		.sq-event-sidebar { position: static; }
	}