/*
Theme Name:   Graver74
Description:  Дочерняя тема Graver74 на основе Twenty Twenty-Five. Блоки, паттерны и theme.json, без конструкторов.
Template:     twentytwentyfive
Version:      0.4.4
Requires at least: 6.5
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  graver74
*/

:root {
	--g74-ink: #111214;
	--g74-graphite: #1F2124;
	--g74-paper: #F3F2EF;
	--g74-muted: #6B6E73;
	--g74-line: #D8D6D0;
	--g74-line-dark: #34373C;
	--g74-gutter: clamp(1rem, 4vw, 3rem);
	--g74-wide: 1320px;
	/* distance from the wide container edge to the viewport edge */
	--g74-bleed: calc((100vw - min(var(--g74-wide), 100vw - 2 * var(--g74-gutter))) / 2);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; font-feature-settings: "tnum" 0; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
img { height: auto; }
[id] { scroll-margin-top: 88px; }
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Labels, lead, numbers ---------- */
.g74-label { margin: 0 0 1.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g74-muted); }
.g74-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--g74-muted); max-width: 36rem; }
.g74-num { margin: 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--g74-muted); }
.g74-num--xl { font-size: clamp(3.5rem, 2rem + 5vw, 6rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.9; color: inherit; margin-bottom: 1.5rem; }

/* ---------- Header ---------- */
.g74-header { position: sticky; top: 0; z-index: 50; background: var(--g74-paper); border-bottom: 1px solid var(--g74-line); }
.admin-bar .g74-header { top: var(--wp-admin--admin-bar--height, 32px); }
.g74-header__row { min-height: 72px; gap: 2rem; }
.g74-logo { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.g74-logo a { color: var(--g74-ink); text-decoration: none; }
.g74-nav { flex: 1 1 auto; }
.g74-nav .wp-block-navigation__container { gap: clamp(1.25rem, 2vw, 2rem); }
.g74-nav .wp-block-navigation-item__content { color: var(--g74-ink); text-decoration: none; padding-block: 0.75rem; }
.g74-nav .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.g74-nav .g74-nav__mobile-only, .g74-nav .g74-nav__cta { display: none; }
.g74-header__actions { gap: 0.5rem; }
.g74-header__cta .wp-block-button__link { font-size: 0.9375rem; padding: 0.7rem 1.15rem; min-height: 44px; white-space: nowrap; }
.g74-header__call { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--g74-ink); }

/* Burger below 1100px (core switches only at 600px). */
@media (min-width: 600px) and (max-width: 1099px) {
	.g74-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.g74-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1099px) {
	.g74-nav { flex: 0 0 auto; order: 3; width: auto; }
	.g74-header__row { gap: 0.25rem; justify-content: flex-start !important; }
	.g74-header .g74-header__row > .g74-header__actions { margin-left: auto !important; order: 2; }
	.g74-header__call { display: inline-flex; }
	.g74-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; align-items: center; justify-content: center; }
	.g74-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}
@media (max-width: 599px) {
	.g74-header .wp-block-buttons.g74-header__cta { display: none; }
	.g74-header__row { min-height: 60px; }
}
.g74-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--g74-paper); padding: 1.25rem var(--g74-gutter); }
.g74-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.g74-nav .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.g74-nav .is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; }
.g74-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--g74-line); }
.g74-nav .is-menu-open .wp-block-navigation-item__content { padding-block: 0.85rem; }
.g74-nav .is-menu-open .g74-nav__mobile-only { display: block; }
.g74-nav .is-menu-open .g74-nav__cta { display: block; border-bottom: 0; margin-top: 1.5rem; }
.g74-nav .is-menu-open .g74-nav__cta .wp-block-navigation-item__content { background: var(--g74-ink); color: #fff; font-size: 1rem; padding: 0.95rem 1.4rem; }

/* Editors only: links to unpublished pages (hidden from visitors by graver74-core). */
.g74-link-unpublished > a,
.g74-link-unpublished > .wp-block-navigation-item__content { outline: 1px dashed currentColor; outline-offset: 4px; opacity: 0.6; }

/* ---------- Sections ---------- */
.g74-section { padding-block: var(--wp--preset--spacing--60); }
.g74-section--white { background: #fff; }
.g74-section--graphite { background: var(--g74-graphite); color: #fff; }
.g74-section--ink { background: var(--g74-ink); color: #fff; }
:is(.g74-section--graphite, .g74-section--ink) :is(.g74-label, .g74-num:not(.g74-num--xl)) { color: #9EA1A6; }
:is(.g74-section--graphite, .g74-section--ink) .g74-lead { color: #B8BBC0; }
:is(.g74-section--graphite, .g74-section--ink) .wp-block-button:not(.is-style-outline):not(.is-style-text) .wp-block-button__link { background: #fff; color: var(--g74-ink); }
.g74-head { margin-bottom: clamp(2.25rem, 4vw, 4rem); }
.g74-head h2 { margin: 0; }
.g74-head .g74-lead { margin-top: 1.25rem; }
.g74-head--row { align-items: flex-end; gap: 1rem 2rem; }

/* Text links styled as arrows (rendered as buttons so unpublished targets can be hidden). */
.wp-block-button.is-style-text .wp-block-button__link { font-variant-emoji: text; background: transparent !important; color: inherit; padding: 0; min-height: 44px; font-weight: 600; border-radius: 0; box-shadow: inset 0 -1px 0 currentColor; }
.wp-block-button.is-style-text .wp-block-button__link:hover { box-shadow: inset 0 -2px 0 currentColor; }
.g74-arrow .wp-block-button__link::after { content: "→"; margin-left: 0.5rem; transition: transform 0.2s ease; }
.g74-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
.g74-arrow { margin-top: 1rem; }

/* ---------- Media & placeholders (no Media Library files) ---------- */
.g74-media { margin: 0; overflow: hidden; }
.g74-media img, .wp-block-image.g74-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.g74-ph { display: flex; align-items: flex-end; padding: 1rem 1.1rem; background: #E6E4DF; }
.g74-ph--4-5 { aspect-ratio: 4 / 5; }
.g74-ph--4-3 { aspect-ratio: 4 / 3; }
.g74-ph--3-2 { aspect-ratio: 3 / 2; }
.g74-ph--1-1 { aspect-ratio: 1 / 1; }
.g74-ph .g74-ph__label { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8C8A84; }
:is(.g74-section--graphite, .g74-section--ink) .g74-ph { background: #2B2D31; }
:is(.g74-section--graphite, .g74-section--ink) .g74-ph .g74-ph__label { color: #7F8287; }

/* ---------- Hero ---------- */
.g74-hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem); }
.g74-hero__grid { gap: clamp(2rem, 5vw, 5rem) !important; align-items: center !important; }
.g74-hero h1 { margin: 0 0 1.5rem; text-wrap: balance; }
.g74-hero .g74-lead { margin: 0 0 2.25rem; }
.g74-hero__cta { gap: 1.25rem 2rem; align-items: center; }
.g74-hero h1 { font-size: clamp(2.125rem, 1.1rem + 3.2vw, 4rem); }
.g74-hero__media .g74-media--hero { width: calc(100% + var(--g74-bleed)); max-width: none; max-height: min(84vh, 860px); }

/* ---------- Directions: asymmetric editorial grid ---------- */
.g74-dirs { gap: clamp(1.5rem, 3vw, 3rem) !important; align-items: flex-start !important; }
.g74-dirs + .g74-dirs { margin-top: clamp(3rem, 7vw, 7rem); }
.g74-head + .g74-dirs > .wp-block-column:last-child { padding-top: clamp(0rem, 9vw, 8rem); }
.g74-dir__meta { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.75rem; padding-top: 1.25rem; }
.g74-dir__meta > * { grid-column: 2; margin: 0; }
.g74-dir__meta > .g74-num { grid-column: 1; grid-row: 1; padding-top: 0.45rem; }
.g74-dir__meta h3 { margin: 0 0 0.5rem; }
.g74-dir__text { color: var(--g74-muted); max-width: 30rem; }
.g74-dir:hover .g74-media img { transform: scale(1.02); }

/* ---------- Works mosaic ---------- */
.g74-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.g74-mosaic > *, .g74-strip > *, .g74-dir__meta > * { margin-block: 0 !important; }
.g74-mosaic > .g74-work { grid-column: span 4; }
.g74-mosaic > .g74-work--xl { grid-column: 1 / span 8; grid-row: span 2; }
.g74-mosaic > .g74-work--side { grid-column: 9 / span 4; }
.g74-work--xl .g74-ph, .g74-work--xl .g74-media { aspect-ratio: auto; height: 100%; }
.g74-work figcaption, .g74-work .g74-caption { margin: 0.6rem 0 0; font-size: 0.8125rem; color: #9EA1A6; }
.g74-work:hover .g74-media img { transform: scale(1.02); }

/* ---------- Steps ---------- */
.g74-steps { gap: clamp(1.5rem, 3vw, 3rem) !important; }
.g74-step { border-top: 1px solid var(--g74-line); padding-top: 1.75rem; }
.g74-step h3 { margin: 0 0 0.5rem; }
.g74-step p:not(.g74-num) { margin: 0; color: var(--g74-muted); max-width: 22rem; }
.g74-contact-buttons { margin-top: clamp(2.5rem, 5vw, 4rem); gap: 1rem 1.25rem; align-items: center; }

/* ---------- Workshop strip ---------- */
.g74-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.g74-facts-row { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--g74-line); display: flex; flex-wrap: wrap; gap: 0.75rem 3rem; }
.g74-facts-row li { font-size: 1.0625rem; }

/* ---------- Feature (crosses) ---------- */
.g74-feature { gap: clamp(2rem, 6vw, 6rem) !important; align-items: center !important; }
.g74-feature__text .g74-head { margin-bottom: 1rem; }

/* ---------- Final CTA ---------- */
.g74-final .g74-final__title { font-size: clamp(2.75rem, 1.2rem + 6vw, 6.5rem); letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 1.5rem; }
.g74-final .g74-contact-buttons { margin-top: 2.5rem; }
.g74-facts-row--contacts { border-top: 0; padding-top: 0; }
.g74-facts-row a { color: inherit; }

/* ---------- FAQ (service pages) ---------- */
.g74-faq { border-top: 1px solid var(--g74-line); max-width: 52rem; }
.g74-faq:last-of-type { border-bottom: 1px solid var(--g74-line); }
.g74-faq summary { cursor: pointer; font-weight: 600; font-size: 1.125rem; padding-block: 1rem; min-height: 48px; }
.g74-faq p { margin-top: 0; color: var(--g74-muted); }

/* ---------- Footer ---------- */
.g74-footer { background: var(--g74-ink); color: #fff; padding-block: clamp(4rem, 8vw, 7rem) 2rem; }
.g74-footer a { color: #fff; }
.g74-footer__wordmark { margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: clamp(4rem, 1rem + 13vw, 13.5rem); font-weight: 600; letter-spacing: -0.055em; line-height: 0.8; }
.g74-footer__contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem); }
.g74-footer__contacts a { text-decoration: none; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4); }
.g74-footer__nav { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--g74-line-dark); padding-top: 1.5rem; }
.g74-footer__nav .wp-block-navigation__container { gap: 0.5rem 2rem; }
.g74-footer__nav .wp-block-navigation-item__content { color: #C9CBCF; text-decoration: none; padding-block: 0.4rem; }
.g74-footer__nav .wp-block-navigation-item__content:hover { color: #fff; }
.g74-footer__nav:not(:has(.wp-block-navigation-item)) { display: none; }
.g74-footer__legal { margin-top: 1.5rem; color: #8E9196; font-size: 0.8125rem; }
.g74-footer__legal p { margin: 0; }
.g74-footer__nav--legal { margin-top: 0; border: 0; padding: 0; }

@media (min-width: 782px) {
	.g74-hero__grid > .g74-hero__text { flex-basis: 58% !important; }
	.g74-hero__grid > .g74-hero__media { flex-basis: 42% !important; }
}

/* ---------- Scroll experience: PROTOTYPE (hero + direction 01 only) ----------
   Native CSS scroll-driven animations; transform/opacity only; no JS, no libraries.
   Browsers without animation-timeline get the static layout. Native scrolling is untouched. */
.g74-ph { position: relative; isolation: isolate; }
/* Texture layer so movement inside the frame is visible on placeholders; real <img> uses the same motion. */
.g74-ph::before { content: ""; position: absolute; inset: -12% 0; z-index: -1;
	background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(17,18,20,0.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(17,18,20,0.05) 39px 40px); }
:is(.g74-section--graphite, .g74-section--ink) .g74-ph::before { background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,0.05) 39px 40px); }

@keyframes g74-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 56px, 0); } }
@keyframes g74-inner { from { transform: translate3d(0, -7%, 0); } to { transform: translate3d(0, 7%, 0); } }
@keyframes g74-in-frame { from { opacity: 0.35; transform: translate3d(0, 64px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes g74-in-line { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes g74-in-num { from { opacity: 0.15; } to { opacity: 1; } }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Hero: the big frame drifts slightly slower than the page; the texture/image inside moves on its own. */
		.g74-hero .g74-media--hero { animation: g74-drift linear both; animation-timeline: scroll(root); animation-range: 0 90vh; will-change: transform; }
		.g74-hero .g74-media--hero::before, .g74-hero .g74-media--hero img { animation: g74-inner linear both; animation-timeline: scroll(root); animation-range: 0 110vh; }

		/* Direction 01: frame enters, then number → title → text → link in sequence; image drifts inside its frame. */
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir > .g74-media { animation: g74-in-frame linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir > .g74-media::before,
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir > .g74-media img { animation: g74-inner linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir__meta { view-timeline: --g74-dir1 block; }
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir__meta > .g74-num { animation: g74-in-num linear both; animation-timeline: --g74-dir1; animation-range: entry 0% entry 60%; }
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir__meta > h3 { animation: g74-in-line linear both; animation-timeline: --g74-dir1; animation-range: entry 20% entry 80%; }
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir__meta > .g74-dir__text { animation: g74-in-line linear both; animation-timeline: --g74-dir1; animation-range: entry 40% entry 100%; }
		.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir__meta > .g74-arrow { animation: g74-in-line linear both; animation-timeline: --g74-dir1; animation-range: entry 60% cover 30%; }

		/* Touch / small screens: no parallax, only the light entrance of direction 01. */
		@media (max-width: 781px), (pointer: coarse) {
			.g74-hero .g74-media--hero, .g74-hero .g74-media--hero::before, .g74-hero .g74-media--hero img,
			.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir > .g74-media::before,
			.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir > .g74-media img { animation: none; transform: none; will-change: auto; }
			.g74-head + .g74-dirs > .wp-block-column:first-child .g74-dir > .g74-media { animation-name: g74-in-line; }
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.g74-media img { transition: none; }
	*, *::before, *::after { animation: none !important; }
}

/* ---------- Tablet & mobile ---------- */
@media (max-width: 781px) {
	.g74-hero__media .g74-media--hero { width: calc(100% + 2 * var(--g74-gutter)); margin-left: calc(-1 * var(--g74-gutter)); max-height: 72vh; }
	.g74-hero .wp-block-button:not(.is-style-text), .g74-contact-buttons .wp-block-button:not(.is-style-text) { width: 100%; }
	.g74-hero .wp-block-button:not(.is-style-text) .wp-block-button__link, .g74-contact-buttons .wp-block-button:not(.is-style-text) .wp-block-button__link { width: 100%; }
	.g74-head + .g74-dirs > .wp-block-column:last-child { padding-top: 0; }
	.g74-dirs { row-gap: 3rem !important; }
	.g74-dirs + .g74-dirs { margin-top: 3rem; }
	.g74-dir .g74-ph--4-5 { aspect-ratio: 4 / 3; }
	.g74-mosaic { grid-template-columns: repeat(2, 1fr); }
	.g74-mosaic > .g74-work, .g74-mosaic > .g74-work--side { grid-column: span 1; }
	.g74-mosaic > .g74-work--xl { grid-column: 1 / -1; grid-row: auto; }
	.g74-work--xl .g74-ph { aspect-ratio: 4 / 3; height: auto; }
	.g74-mosaic > .g74-work--side .g74-ph { aspect-ratio: 1 / 1; }
	.g74-mosaic > .g74-work:last-child { grid-column: 1 / -1; }
	.g74-mosaic > .g74-work:last-child .g74-ph { aspect-ratio: 16 / 9; }
	.g74-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--g74-gutter)) !important; padding-inline: var(--g74-gutter) !important; scroll-padding-inline: var(--g74-gutter); scrollbar-width: none; }
	.g74-strip > * { flex: 0 0 78%; scroll-snap-align: start; }
	.g74-facts-row { flex-direction: column; }
	.g74-footer__contacts { flex-direction: column; }
}
@media (min-width: 600px) and (max-width: 781px) {
	.g74-strip > * { flex-basis: 46%; }
}

/* v1.1.0 — footer «Услуги» on pages outside the dark system */
.g74-footer__services { margin-bottom: 1rem; }
.g74-footer__services-title { margin: 0 0 .35rem; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: #C9CBCF; }