/*
Theme Name: Klask
Author: Equipe Dev
Description: Site institucional da Klask (associação de produção e realização de filmes documentários), baseado no Template Geral de WordPress (Full Site Editing) — seções editáveis pelo Site Editor, com paleta de cores e tipografia configuráveis.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klask
Tags: blog, portfolio, full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, custom-logo, editor-style, featured-images, flexible-header, one-column, two-columns, three-columns, threaded-comments, translation-ready, wide-blocks
*/

html,
body,
.wp-block-post-author__avatar,
.wp-block-social-links,
.wp-block-post-excerpt__excerpt,
.wp-block-separator {
	margin: 0;
	padding: 0;
}

/* overflow-x precisa ser "clip", não "hidden": "hidden" transforma html/body
   num scroll container, o que quebra position:sticky em elementos
   descendentes (o header sticky some ao rolar). "clip" evita o scroll
   horizontal indesejado sem criar esse scroll container. */
html,
body {
	overflow-x: clip;
}

/* O wp:template-part gera um wrapper <header> extra ao redor do pattern do
   header. Como esse wrapper encolhe para a altura do conteúdo, ele vira o
   containing block do header sticky e anula o position:sticky (o header
   rola junto com a página em vez de fixar). Tornar o próprio wrapper
   sticky resolve, já que o containing block dele é a página inteira. */
.wp-block-template-part:has(> .site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Hero pattern */
.hero-image-wrap {
	position: relative;
}

.hero-stat-card {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 2;
	white-space: nowrap;
}

.hero-avatars {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.hero-avatars .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.hero-avatars .wp-block-image:not(:last-child) {
	margin-right: -8px;
}

.hero-avatars .wp-block-image img {
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--cream);
	object-fit: cover;
	display: block;
}

.hero-coach-img {
	margin: 0 !important;
}

.hero-coach-img img {
	border-radius: 16px;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.hero-stat-icon {
	background: color-mix(in oklab, var(--wp--preset--color--primary) 12%, transparent);
	border-radius: 8px;
	padding: 8px;
	line-height: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.no-margin-top {
	margin-top: 0 !important;
}

.service-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
}

.service-icon-img {
	display: block !important;
	width: fit-content !important;
	height: auto !important;
	margin: 0 !important;
}


.service-icon-img img {
	width: 24px;
	height: 24px;
	display: block;
	filter: brightness(0) saturate(100%) invert(53%) sepia(35%) saturate(650%) hue-rotate(334deg) brightness(88%);
}

.cred-check-icon {
	width: 15px !important;
	height: 15px;
	flex-shrink: 0;
	margin: 0 !important;
}

.cred-check-icon img {
	width: 15px;
	height: 15px;
	display: block;
	filter: brightness(0) saturate(100%) invert(53%) sepia(35%) saturate(650%) hue-rotate(334deg) brightness(88%);
}

/* Logo icon — white inside primary circle */
.logo-icon img {
	filter: brightness(0) invert(1);
}

/* Trust badge dot */
.badge-dot {
	width: 6px;
	flex: 0 0 auto;
}

/* Credentials icon badge */
.cred-icon {
	display: inline-flex;
	width: -moz-fit-content;
	width: fit-content;
}

/* Inline SVG icon wrapper */
.tc-svg-icon {
	display: flex;
	color: var(--wp--preset--color--primary);
}

.tc-svg-icon svg {
	width: 24px;
	height: 24px;
}

/* How It Works step card + watermark number */
.step-card {
	position: relative;
	overflow: hidden;
}

.step-num {
	position: absolute !important;
	top: -16px;
	right: -8px;
	left: auto;
	margin: 0 !important;
	pointer-events: none;
}

/* Hero badge icon — sizes the image and colorizes the default sparkle SVG to primary */
.hero-badge-icon {
	width: 16px !important;
	height: 16px;
	flex-shrink: 0;
	margin: 0 !important;
}

.hero-badge-icon img {
	width: 16px;
	height: 16px;
	display: block;
	filter: brightness(0) saturate(100%) invert(53%) sepia(35%) saturate(650%) hue-rotate(334deg) brightness(88%);
}

/* Client Results before/after label with leading dot */
.result-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.result-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* Program curriculum — scrollable modules column (scrollbar hidden) */
.program-scroll {
	max-height: 620px;
	overflow-y: auto;
	-ms-overflow-style: none; /* IE & old Edge */
	scrollbar-width: none; /* Firefox */
}

.program-scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge */
}

.program-scroll .week-label {
	white-space: nowrap;
	min-width: 56px;
}

/* Equal-height cards inside columns (e.g. About – Credentials) */
.about-card {
	height: 100%;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
	font-smooth: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
 }

body {
	font-smooth: auto;
	font-smooth: inherit;
	-webkit-font-smoothing: inherit;
}

.wp-site-blocks > .wp-block-group  {
	margin-block-start: 0;
}

.wp-block-columns{
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-cover{
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Instagram pattern */
.instagram-grid .wp-block-column {
	margin: 0;
}

.instagram-grid .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.instagram-grid .wp-block-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.instagram-grid {
		overflow-x: auto;
		flex-wrap: nowrap !important;
	}
	.instagram-grid .wp-block-column {
		min-width: 150px;
	}
}

/* Blog Journal pattern */
.journal-label-line {
	width: 32px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.blog-separator {
	background-color: var(--wp--preset--color--rule);
}

.blog-feat-image-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

.blog-feat-image-wrap > .wp-block-image {
	margin: 0;
}

.blog-feat-image-wrap > .wp-block-image img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.blog-feat-category-pill {
	position: absolute !important;
	top: 16px;
	left: 16px;
	z-index: 2;
}

.blog-feat-arrow {
	position: absolute !important;
	bottom: 16px;
	right: 16px;
	z-index: 2;
	width: 40px !important;
	height: 40px !important;
}

.blog-list-item {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 24px;
	padding-bottom: 24px;
}

.blog-list-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.blog-list-num {
	flex-shrink: 0;
	min-width: 32px;
}

.blog-list-content {
	flex: 1 !important;
	min-width: 0;
}

.blog-list-thumb {
	flex-shrink: 0;
	width: 80px;
}

.blog-list-thumb .wp-block-image {
	margin: 0;
}

.blog-list-thumb img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* Get Started CTA pattern */
.cta-images-pair .wp-block-image {
	flex: 1;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}

.cta-images-pair .wp-block-image img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

.cta-right-image .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}

.cta-right-image .wp-block-image img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

/* Resources hero pattern */
.resources-card {
	overflow: hidden;
}

/* Footer pattern */
.footer-logo-circle img {
	filter: brightness(0) invert(1);
	display: block;
}

.footer-social-icons .wp-social-link {
	border: 1px solid var(--wp--preset--color--rule) !important;
	border-radius: 50% !important;
	background: transparent !important;
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.footer-social-icons .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.footer-social-icons .wp-social-link svg {
	width: 15px;
	height: 15px;
	fill: var(--wp--preset--color--paragraph-text);
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.footer-contact-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex-shrink: 0;
	margin-top: 6px;
}

/* Navigation hover state — same nav-item markup is reused for both the
   inline desktop menu and the mobile overlay, so this covers both. */
.header-nav .wp-block-navigation-item__content {
	transition: color 0.2s ease;
	text-decoration: none;
}

.header-nav .wp-block-navigation-item__content:hover,
.header-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent) !important;
}

/* Navigation active state */
.header-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.header-nav .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.header-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary)) !important;
	font-weight: 600 !important;
}

.header-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content *,
.header-nav .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] *,
.header-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content * {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--primary)) !important;
}

@media (max-width: 600px) {
	.site-header .wp-block-buttons {
		display: none;
	}
}

/* FAQ accordion */
.therapy-faq-item > summary {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--heading-text);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.therapy-faq-item > summary::-webkit-details-marker {
	display: none;
}

.therapy-faq-item > summary::after {
	content: "+";
	font-size: 20px;
	font-weight: 300;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.therapy-faq-item[open] > summary::after {
	transform: rotate(45deg);
}

/* CTA gradient section */
.wp-block-group.has-background[style*="linear-gradient"] {
	background-attachment: local;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -9999px;
	left: -9999px;
	z-index: 999999;
	text-decoration: none;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	background: var(--wp--preset--color--primary, #2563eb);
	color: #fff;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
}

/* Focus indicators */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #2563eb);
	outline-offset: 2px;
}

/* Dashboard feature grid — Journaling card spans two rows */
.dashboard-feature {
	grid-row: span 2;
}

@media (max-width: 781px) {
	.dashboard-grid {
		grid-template-columns: 1fr !important;
	}
	.dashboard-feature {
		grid-row: span 1;
	}
}

/* Header logo — fill its fixed-size wrapper regardless of the source
   image's own intrinsic dimensions. The percentage chain has to be
   unbroken all the way down: the wrapper sets an explicit 36x36, but
   the <a class="custom-logo-link"> WordPress renders in between is an
   auto-sized inline element by default, so it must be forced to fill
   the wrapper too — otherwise the img's `width/height:100%` resolves
   against that auto-sized (i.e. image-natural-size) anchor instead,
   and the logo renders at its full uploaded resolution. */
.klask-header-logo {
	overflow: hidden;
}

.klask-header-logo a.custom-logo-link {
	display: block;
	width: 100%;
	height: 100%;
}

.klask-header-logo img.custom-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Footer logo — same technique as .klask-header-logo above, smaller size. */
.klask-footer-logo {
	width: 32px;
	height: 32px;
	overflow: hidden;
}

.klask-footer-logo a.custom-logo-link {
	display: block;
	width: 100%;
	height: 100%;
}

.klask-footer-logo img.custom-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.klask-footer-social {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Footer on mobile — matches the Figma mobile variant (node 63:208):
   stacked instead of a single row (logo, then icons, then the copyright
   text last on its own full-width line), so nothing needs to be shrunk
   to fit. `!important` overrides WP's own generated inline layout
   styles for the flex row, which otherwise win over this stylesheet. */
@media (max-width: 600px) {
	#footer {
		padding: 32px 20px !important;
	}

	.klask-footer-row {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 16px !important;
	}

	.klask-footer-logo {
		order: 1;
	}

	.klask-footer-social {
		order: 2;
	}

	.klask-footer-copyright {
		order: 3;
		white-space: normal;
		text-align: center;
		width: 100%;
	}
}

/* Contact form — Nom/E-mail sit side by side on desktop, but that inline
   2-column grid is too cramped on phones (each field ends up under
   ~150px wide); stack them like every other field in the form. */
@media (max-width: 600px) {
	.klask-contact-name-email {
		grid-template-columns: 1fr !important;
	}
}

/* À propos — on mobile, only the first photo is shown (per client request). */
@media (max-width: 781px) {
	.klask-about-photo2 {
		display: none;
	}
}

/* Nos Actualités — horizontal-scrolling carousel. The Query Loop can hold
   more than 3 posts (see pattern-blog.php), so instead of a fixed 3-column
   grid with nowhere to put the rest, `.wp-block-post-template` (the <ul>)
   itself becomes the scroll container and each post <li> is a fixed-width
   flex item. klask-actualites-carousel.js drives the prev/next arrow
   buttons (klask-carousel-arrow) by scrolling this element. */
#actualites .wp-block-post-template {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	padding: 8px 4px;
}

/* The scrollbar is redundant with the arrow buttons/touch swipe and would
   just add visual noise inside a dark card row. */
#actualites .wp-block-post-template {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#actualites .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* 3 cards per "page" on desktop, matching the old grid's column math. */
#actualites .wp-block-post-template > li {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
}

/* Nos Actualités cards — keep every card the same height in its row
   regardless of the featured image's own size/aspect (already cropped
   consistently by post-featured-image's aspectRatio:"3/2") or how many
   lines the title/excerpt wrap to (a longer title otherwise pushes that
   one card taller than its neighbors). */
#actualites .resources-card {
	height: 100%;
}

/* Photo area gets a fixed height instead of the block's own
   width-relative aspectRatio:"3/2" — an explicit height takes priority
   over aspect-ratio (which only governs a dimension left as `auto`), so
   the image slot is always exactly this tall no matter the source
   photo's own size/shape or how many grid columns there are.

   The <img> is taken out of normal flow (absolute, filling the figure)
   instead of just overriding its width/height/aspect-ratio in place.
   The in-flow override worked in Chrome but on real iOS Safari the img
   kept sizing itself from its `aspect-ratio:3/2` HTML attribute-derived
   ratio combined with the forced height, so it only spanned ~55% of the
   card's width (WebKit-specific replaced-element sizing quirk when
   `aspect-ratio` and percentage width/height fight over a normal-flow
   box). An absolutely positioned replaced element resolves percentage
   width/height directly against its containing block, sidestepping that
   ratio math entirely — needs the figure as the positioning context.

   The figure itself needs an explicit width too: `.resources-card` is a
   column flex container with `align-items:flex-start` (not `stretch`),
   so the figure was always sizing itself to fit its content rather than
   stretching to the card's width. With the img in normal flow that still
   left *some* shrink-to-fit width to work with; now that the img is
   pulled out of flow (absolute, above) the figure has no in-flow content
   left at all and collapses to 0 width — taking the whole photo with it. */
#actualites .wp-block-post-featured-image {
	position: relative;
	width: 100% !important;
	height: 250px !important;
	overflow: hidden;
}

#actualites .wp-block-post-featured-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

/* The <a> wrapping the img would otherwise collapse to 0×0 once its only
   child is taken out of flow above, losing the click target. */
#actualites .wp-block-post-featured-image a {
	position: absolute;
	inset: 0;
	display: block;
}

#actualites .klask-card-content {
	flex: 1;
}

/* The CTA row is a flex child of a vertical flex column, so it hugs
   its own (button) width by default — justify-content:flex-end has
   nothing to push against until the row itself spans the full card
   width. */
#actualites .klask-card-cta {
	width: 100%;
}

/* On phones/small tablets one card at a time (with a sliver of the next
   peeking in) reads better than squeezing 3 narrow columns into view;
   visitors scroll it with a swipe instead of the desktop arrow buttons. */
@media (max-width: 781px) {
	#actualites .wp-block-post-template > li {
		flex-basis: 85%;
	}
}

/* Carousel arrow buttons — shared shell (Nos Actualités and Portfolio
   both use this scroll-and-arrows scheme, see initCarousels() in
   animations.js). Each section's wrapper carries its own className
   (e.g. klask-actualites-carousel) for positioning/coloring below;
   this base rule only handles shape and behavior common to both. */
.klask-carousel {
	position: relative;
}

.klask-carousel-arrow {
	position: absolute;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	z-index: 2;
}

.klask-carousel-arrow--prev {
	left: -22px;
}

.klask-carousel-arrow--next {
	right: -22px;
}

/* Reaching either end of the scroll — initCarousels() in animations.js
   toggles this via the scroller's scrollLeft/scrollWidth. */
.klask-carousel-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* 3 or fewer items total: nothing to scroll to, so hide the arrows
   entirely instead of showing ones that never do anything (also the
   default state before JS has measured — arrows only reveal once we know
   there's overflow). Toggled by initCarousels() in animations.js. */
.klask-carousel:not(.is-scrollable) .klask-carousel-arrow {
	display: none;
}

/* Nos Actualités arrows — bold/solid, centered on the seam where the
   fixed-height photo band (250px, see .wp-block-post-featured-image
   below) ends and the title/excerpt text begins. */
.klask-actualites-carousel .klask-carousel-arrow {
	top: 250px;
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--card-bg);
	color: var(--wp--preset--color--accent);
}

.klask-actualites-carousel .klask-carousel-arrow:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--card-bg);
}

/* Portfolio arrows — softer/translucent so they sit quietly on top of
   the full-bleed photography instead of competing with it like the
   solid-lime Actualités arrows would. Centered on the row (card height
   is aspect-ratio-driven, not a fixed px band like Actualités).

   Positioned as an inset overlay on the photo (left/right: 16px) rather
   than straddling the row's edge (Actualités' left/right: -22px) — this
   row is edge-to-edge full-bleed against the viewport with no outside
   margin for an outside-straddling arrow to sit in without being
   clipped. */
.klask-portfolio-carousel .klask-carousel-arrow {
	top: 50%;
	border: none;
	background: rgba(13, 31, 20, 0.45);
	color: #EDF2E6;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.klask-portfolio-carousel .klask-carousel-arrow--prev {
	left: 16px;
}

.klask-portfolio-carousel .klask-carousel-arrow--next {
	right: 16px;
}

.klask-portfolio-carousel .klask-carousel-arrow:hover {
	background: rgba(13, 31, 20, 0.7);
	color: var(--wp--preset--color--accent);
}

/* Arrows would overlap the narrower card column at tablet/phone widths,
   and touch swipe already covers navigation there. */
@media (max-width: 900px) {
	.klask-carousel-arrow {
		display: none !important;
	}
}

.klask-post-category a {
	text-decoration: none;
}

/* Single post banner — fixed-height full-bleed featured image at the
   top of single.html, with a dark gradient fading the bottom edge into
   the page background (same technique/colors as the Hero section). */
.klask-post-banner {
	position: relative;
	height: 420px;
	overflow: hidden;
	margin: 0;
}

.klask-post-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.klask-post-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 31, 20, 0) 40%, rgba(13, 31, 20, 1) 100%);
	pointer-events: none;
}

@media (max-width: 600px) {
	.klask-post-banner {
		height: 260px;
	}
}

/* Portfolio — full-bleed card row with hover-revealed category/link.
   Full-bleed breakout itself is handled by the wrapping alignfull
   wp:group in pattern-portfolio.php (WordPress's own constrained-layout
   CSS), not by this rule — a plain 100vw/negative-margin trick here
   would be wrong because this row sits inside an already-constrained
   parent, not directly against the viewport.

   The Query can hold more than 3 projects (see pattern-portfolio.php),
   so — like Nos Actualités — the row itself scrolls horizontally with
   fixed-width cards instead of squeezing everything into view. */
.klask-portfolio-row {
	display: flex;
	width: 100%;
	overflow-x: auto;
	/* Vertical-only padding — leaves room for the hover-lift's
	   translateY(-6px) + shadow (below) without adding horizontal
	   padding, which would break the row's edge-to-edge full-bleed look. */
	padding: 8px 0;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.klask-portfolio-row::-webkit-scrollbar {
	display: none;
}

.klask-portfolio-card {
	position: relative;
	display: block;
	flex: 0 0 calc(100% / 3);
	aspect-ratio: 338 / 423;
	overflow: hidden;
	text-decoration: none;
	scroll-snap-align: start;
}

.klask-portfolio-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13, 31, 20, 0.8) 0%, rgba(13, 31, 20, 0.1) 50%, rgba(13, 31, 20, 0) 100%);
}

.klask-portfolio-card__content {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
}

.klask-portfolio-card__category,
.klask-portfolio-card__link {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

.klask-portfolio-card__category {
	display: block;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C9E63A;
}

.klask-portfolio-card__title {
	display: block;
	font-family: 'Bricolage Grotesque', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #EDF2E6;
}

.klask-portfolio-card__link {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #C9E63A;
}

.klask-portfolio-card:hover .klask-portfolio-card__category,
.klask-portfolio-card:focus-visible .klask-portfolio-card__category,
.klask-portfolio-card:hover .klask-portfolio-card__link,
.klask-portfolio-card:focus-visible .klask-portfolio-card__link {
	max-height: 40px;
	opacity: 1;
}

.klask-portfolio-card__category {
	margin-bottom: 0;
}

.klask-portfolio-card:hover .klask-portfolio-card__category,
.klask-portfolio-card:focus-visible .klask-portfolio-card__category {
	margin-bottom: 4px;
}

.klask-portfolio-card__link {
	margin-top: 0;
}

.klask-portfolio-card:hover .klask-portfolio-card__link,
.klask-portfolio-card:focus-visible .klask-portfolio-card__link {
	margin-top: 8px;
}

/* One card at a time (with a sliver of the next peeking in), same as
   Nos Actualités — swipe navigates instead of the desktop arrows. */
@media (max-width: 781px) {
	.klask-portfolio-card {
		flex-basis: 85%;
		aspect-ratio: 390 / 488;
	}
}

/* Nos Actions — icon box fills with accent green on card hover/focus,
   icon strokes flip to the dark base color for contrast. */
.klask-action-icon {
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.klask-action-icon svg * {
	transition: stroke 0.2s ease;
}

.klask-action-card:hover .klask-action-icon,
.klask-action-card:focus-within .klask-action-icon {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.klask-action-card:hover .klask-action-icon svg *,
.klask-action-card:focus-within .klask-action-icon svg * {
	stroke: var(--wp--preset--color--base);
}

/* Contact — mail/Instagram value text turns accent green on hover/focus. */
.klask-contact-link {
	transition: color 0.2s ease;
}

.klask-contact-link:hover,
.klask-contact-link:focus-visible {
	color: var(--wp--preset--color--accent) !important;
	opacity: 1 !important;
}

/* Hero — "Plus" scroll cue at the bottom, bouncing chevron. */
.klask-hero-scroll-cue svg {
	animation: klask-scroll-bounce 1.8s ease-in-out infinite;
}

.klask-hero-scroll-cue span,
.klask-hero-scroll-cue svg path {
	transition: opacity 0.2s ease, stroke-opacity 0.2s ease;
}

.klask-hero-scroll-cue:hover span,
.klask-hero-scroll-cue:focus-visible span {
	opacity: 0.8 !important;
}

.klask-hero-scroll-cue:hover svg path,
.klask-hero-scroll-cue:focus-visible svg path {
	stroke-opacity: 0.8;
}

@keyframes klask-scroll-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* Scroll-reveal — fade + slide-up as sections/cards enter the viewport.
   The klask-reveal/is-visible classes are added by assets/js/animations.js;
   without JS (or with IntersectionObserver unsupported) elements are never
   tagged klask-reveal in the first place, so content stays visible by default. */
.klask-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.klask-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.klask-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Hover lift — Nos Actions, Portfolio and blog cards rise slightly with a
   soft shadow on hover/focus, reinforcing that they're clickable. */
.klask-action-card,
.resources-card,
.klask-portfolio-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.klask-action-card:hover,
.klask-action-card:focus-within,
.resources-card:hover,
.resources-card:focus-within,
.klask-portfolio-card:hover,
.klask-portfolio-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.klask-portfolio-card:hover,
.klask-portfolio-card:focus-within {
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.klask-action-card,
	.resources-card,
	.klask-portfolio-card {
		transition: none;
	}
}

/* Hero — kicker/heading/subtitle/buttons fade + slide up in sequence on
   page load (animation-delay set per element in pattern-hero.php). Pure
   CSS, no JS needed since these are always above the fold on load. */
.klask-hero-fade-item {
	opacity: 0;
	animation: klask-hero-fade-in 0.8s ease forwards;
}

/* Some fade items (e.g. the subtitle) have a final opacity below 1 —
   read it back via --klask-fade-opacity so the animation's end state
   (and the reduced-motion fallback below) don't flatten it to 1. */
@keyframes klask-hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: var(--klask-fade-opacity, 1);
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.klask-hero-fade-item {
		opacity: var(--klask-fade-opacity, 1);
		animation: none;
	}
}