/* ═══════════════════════════════════════════════════════════════════════════
New sections: works, reviews, archive header, single product, SEO/FAQ
(enqueued from functions.php alongside style.css)
═══════════════════════════════════════════════════════════════════════════ */
/* Headings inherit a global `h1..h6 { color: stone-950 }` rule, so on dark
sections they'd be near-invisible. Any container with an explicit dark
background gets light headings (higher specificity than the global rule,
no !important needed). */
.has-stone-950-background-color :is(h1, h2, h3, h4, h5, h6),
.has-primary-500-background-color :is(h1, h2, h3, h4, h5, h6){
color: var(--wp--preset--color--stone-50);
}
/* ─── Групи зображень з акцентом ──────────────────────────────────────────── */
/* Base layout: N images in a row, equal share, GSAP grows the `.is-accent`
item's flex-grow on scroll (see initImageAccentGroups in main.js) while
the rest — all still flex-grow:1 — shrink to match automatically. Working
with flex-grow (not width/flex-basis %) is what lets the same JS handle
both row and column direction: flex-grow always acts along the main axis. */
.image-accent-group{
display: flex;
flex-direction: row;
align-items: stretch;
/* `--iag-aspect-ratio` is set inline per-instance by render.php (editable
in the block's inspector, default 4/5) so the group always has a real
height regardless of what its images' own native ratios are — mobile
stacks, a text column without a stretched sibling, etc. `aspect-ratio`
only takes over when `height:100%` can't resolve to anything (no
definite parent height); wherever the parent DOES provide one (e.g. a
stretched column next to text, like the CTA card), that wins instead. */
aspect-ratio: var(--iag-aspect-ratio, 4 / 5);
flex-wrap: nowrap;
gap: var(--gap);
max-width: 100%;
}
.image-accent-group[data-direction="column"]{
flex-direction: column;
width: 100%;
}
.image-accent-group .image-accent-group__item{
flex: 1 1 0;
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
}
.image-accent-group .image-accent-group__item img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
will-change: transform;
}
/* ─── Наші роботи ─────────────────────────────────────────────────────────── */
.works-block{
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Homepage: 4×2 grid on desktop. NOTE — class deliberately avoids the words
"slider"/"carousel": main.js auto-attaches mouse drag-scroll (and a grab
cursor) to any element matching those, which is wrong for a static grid. */
.works-home{
display: grid;
grid-template-columns: repeat(var(--works-cols, 4), 1fr);
gap: var(--gap);
}
/* Tablet & mobile: horizontal scroll strip, card width is block-configurable
(--works-card-w, default 80vw). */
@media (max-width: 1199.98px){
.works-home{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: var(--gap);
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.works-home::-webkit-scrollbar{
display: none;
}
.works-home .work-card{
flex: 0 0 var(--works-card-w, 80vw);
scroll-snap-align: start;
}
}
/* Product page grid */
.works-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--gap);
}
.work-card{
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 4 / 5;
border-radius: var(--border-radius);
overflow: hidden;
padding: 1rem;
gap: 0.75rem;
color: var(--wp--preset--color--stone-50);
background-color: var(--wp--preset--color--stone-950);
border: 1px solid transparent;
text-decoration: none;
isolation: isolate;
transition: border-color 0.35s ease;
&:hover{
border-color: var(--wp--preset--color--stone-50);
}
}
.work-card .work-card__img{
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.work-card::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.5) 100%);
transition: background-color 0.35s ease;
}
.work-card__label{
font-weight: 400;
line-height: 1.3;
text-wrap: balance;
}
/* Inner span so the lift transform is scoped to the glyph, not the flex box —
same technique as .link-card__title-text. */
.work-card__label-text{
display: inline-block;
}
/* Button is styled identically to the product card's "Детальніше" action
(.pc-actions__details): translucent dark chip, light text, blur. */
.work-card__cta{
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
padding: 0.5em 1em;
border-radius: var(--border-radius);
background-color: var(--wp--preset--color--stone-50);
color: var(--wp--preset--color--stone-950);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--font-weight-heading);
/* line-height: 1; */
text-decoration: none;
backdrop-filter: blur(0.5rem);
transition: background 0.2s var(--ease), letter-spacing 0.3s var(--ease), letter-spacing 0.2s var(--ease);
width: 100%;
}
.work-card__cta:hover{
background: var(--wp--preset--color--stone-200);
letter-spacing: 0.02em;
}
/* Hover choreography — copied from .link-card: the title sits lowered until
the CTA is revealed, then rises into place as the button slides up from
below. Scoped to the DESKTOP grid only (min-width:1200px): the tablet/mobile
scroll strip (≤1199.98px) and touch devices keep the base state — title in
place and CTA ALWAYS visible — even on a narrow hover-capable window. */
@media (hover: hover) and (pointer: fine) and (min-width: 1200px){
/* Only cards that link to a product (rendered as , with a CTA) get the
lowered-title reveal; plain works cards keep the title in place. */
a.work-card .work-card__label-text{
transform: translateY(3rem);
transition: transform 0.8s var(--ease);
}
.work-card__cta{
opacity: 0;
transform: translateY(2rem);
transition: opacity 0.25s ease-out, transform 0.4s ease-out,
background 0.25s ease-out, letter-spacing 0.25s ease-out;
}
a.work-card:hover .work-card__label-text{
transform: none;
}
a.work-card:hover .work-card__cta{
opacity: 1;
transform: none;
transition-delay: 0.2s, 0.2s, 0s, 0s;
}
/* Zoom applies to EVERY card (linked or plain