/* ============================================================
   AvestaTech — surfaces shared beyond the homepage sections
   The page container, tag chips, the small page hero, and the
   blog card (used both by the blog listing and by the home
   page's "latest articles" row).
   ============================================================ */

/* ---------- Shared: constrained page container ---------- */
/* Raw HTML sections (patterns without a real wp:group wrapper) don't get
   the block editor's auto-generated max-width, so they render edge to edge.
   This class contains them to the theme's wide content size. */

.avesta-container {
	max-width: var(--wp--style--global--wide-size, 90rem);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* ---------- Shared: section CTA button row ---------- */

.avesta-section-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Tag chips (projects + articles) ---------- */

.avesta-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0;
}

.avesta-tag-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	border-radius: 999px;
	padding: 0.28rem 0.75rem;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.avesta-tag-chip:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	color: var(--wp--preset--color--primary-deep);
}

/* ---------- Page hero: shared small header for blog/portfolio/about ---------- */

.avesta-page-hero {
	position: relative;
	z-index: 0;
	padding-top: calc(var(--wp--preset--spacing--40) + 2rem);
	padding-bottom: var(--wp--preset--spacing--50);
	text-align: center;
}

.avesta-page-hero .avesta-eyebrow {
	justify-content: center;
}

/* Flanked eyebrow — a short line before AND after the label, used for
   page-hero titles (blog/portfolio/about) instead of the single leading
   bar the section eyebrows use. */
.avesta-eyebrow-flanked {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-block-end: 0.9rem;
	line-height: 1;
}

.avesta-eyebrow-flanked::before,
.avesta-eyebrow-flanked::after {
	content: "";
	inline-size: 1.6rem;
	block-size: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	flex: 0 0 auto;
}

.avesta-eyebrow-flanked i {
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary);
}

.avesta-page-hero h1 {
	margin: 0 auto;
	max-width: 46rem;
	text-wrap: balance;
}

.avesta-page-hero p {
	max-width: 36rem;
	margin: 0.9rem auto 0;
}

/* ---------- Blog listing ---------- */

.avesta-blog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
}

.avesta-blog-card {
	overflow: hidden;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

.avesta-blog-cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid var(--avesta-hairline);
}

.avesta-blog-cover img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 400ms var(--avesta-ease);
}

.avesta-blog-card:hover .avesta-blog-cover img {
	transform: scale(1.06);
}

.avesta-blog-cover-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
	background-size: 16px 16px;
}

.avesta-blog-cover-fallback svg {
	inline-size: 3.5rem;
	block-size: 3.5rem;
	stroke: rgba(255, 255, 255, 0.92);
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.avesta-blog-body {
	padding: 1.25rem 1.25rem 1.5rem;
	display: grid;
	gap: 0.6rem;
	flex: 1;
}

.avesta-blog-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

.avesta-blog-meta .avesta-blog-cat {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.avesta-blog-meta-dot {
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.avesta-blog-title {
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0;
	line-height: 1.5;
}

.avesta-blog-title a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

.avesta-blog-title a:hover {
	color: var(--wp--preset--color--primary);
}

.avesta-blog-excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 75rem) {
	.avesta-blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 62rem) {
	.avesta-blog-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.avesta-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Latest articles (home) — horizontal row, same card ---------- */

.avesta-latest-articles-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
}

.avesta-latest-articles-grid > article:nth-child(4n + 1) { --tilt: -0.7deg; }
.avesta-latest-articles-grid > article:nth-child(4n + 2) { --tilt: 0.6deg; }
.avesta-latest-articles-grid > article:nth-child(4n + 3) { --tilt: -0.4deg; }
.avesta-latest-articles-grid > article:nth-child(4n) { --tilt: 0.5deg; }

.avesta-latest-articles-grid .avesta-blog-card {
	rotate: var(--tilt, 0deg);
	transition: rotate var(--avesta-duration) var(--avesta-ease),
		translate var(--avesta-duration) var(--avesta-ease),
		box-shadow var(--avesta-duration) var(--avesta-ease);
}

.avesta-latest-articles-grid .avesta-blog-card:hover {
	rotate: 0deg;
	translate: 0 -4px;
}

.avesta-latest-articles-grid .avesta-blog-body {
	text-align: center;
	justify-items: center;
}

.avesta-latest-articles-grid .avesta-blog-meta {
	justify-content: center;
}

@media (max-width: 75rem) {
	.avesta-latest-articles-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 62rem) {
	.avesta-latest-articles-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.avesta-latest-articles-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Pagination ---------- */

.avesta-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
}

.avesta-pagination a,
.avesta-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.6rem;
	block-size: 2.6rem;
	padding-inline: 0.6rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--avesta-glass-border);
	background: var(--avesta-glass-bg);
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.avesta-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.avesta-pagination .current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}


/* ---------- Projects: tilted glass cards with cover art ---------- */

.avesta-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.avesta-project-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 !important;
	rotate: var(--tilt, 0deg);
	transition: rotate var(--avesta-duration) var(--avesta-ease),
		translate var(--avesta-duration) var(--avesta-ease),
		box-shadow var(--avesta-duration) var(--avesta-ease),
		border-color var(--avesta-duration) var(--avesta-ease);
}

.avesta-projects-grid > article:nth-child(3n + 1) { --tilt: -1deg; }
.avesta-projects-grid > article:nth-child(3n + 2) { --tilt: 0.8deg; }
.avesta-projects-grid > article:nth-child(3n) { --tilt: -0.5deg; }

.avesta-project-card:hover {
	rotate: 0deg;
	translate: 0 -6px;
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, var(--avesta-glass-border));
}

.avesta-project-cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

.avesta-project-cover-img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 450ms var(--avesta-ease);
}

/* Generated cover: gradient field + faint dot-grid texture + large centered
   line icon, so projects without a real photo still read as designed art
   rather than an empty box. */
.avesta-project-cover-pattern {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: 0.5;
	transition: transform 450ms var(--avesta-ease);
}

.avesta-project-cover-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 450ms var(--avesta-ease);
}

.avesta-project-cover-icon svg {
	inline-size: 4rem;
	block-size: 4rem;
	stroke: rgba(255, 255, 255, 0.92);
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
}

.avesta-project-card:hover .avesta-project-cover-img,
.avesta-project-card:hover .avesta-project-cover-icon {
	transform: scale(1.05);
}

.avesta-project-card:hover .avesta-project-cover-pattern {
	transform: scale(1.08);
}

.avesta-project-terms {
	display: inline-flex;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	text-decoration: none;
}

.avesta-project-terms:hover {
	text-decoration: none;
}

.avesta-project-body {
	flex: 1;
	padding: 1.15rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: start;
}

.avesta-project-title {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0;
}

.avesta-project-title a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

.avesta-project-title a:hover {
	color: var(--wp--preset--color--primary);
}

.avesta-project-body p {
	margin: 0;
	flex: 1;
}

.avesta-project-footer {
	margin-block-start: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.avesta-project-visit {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	padding: 0.4rem 0.2rem;
	border-block-end: 1px solid transparent;
	transition: border-color 200ms ease, gap 200ms ease;
}

.avesta-project-visit svg {
	inline-size: 0.9rem;
	block-size: 0.9rem;
	transition: translate 200ms ease;
}

.avesta-project-visit:hover {
	border-color: currentColor;
	gap: 0.5rem;
}

.avesta-project-visit:hover svg {
	translate: 0.15rem -0.15rem;
}

@media (max-width: 62rem) {
	.avesta-projects-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40rem) {
	.avesta-projects-grid {
		grid-template-columns: 1fr;
	}
}