/* Eglė Šekštelo — site-specific styles that theme.json can't express
   (hover states, fixed positioning, responsive layout swaps). */

#site-content {
	transition: opacity 0.15s ease;
	opacity: 1;
}

#site-content.is-transitioning {
	opacity: 0;
}

/* ---------- Landing hero ---------- */

.landing-shell {
	padding: 0;
}

.landing-columns {
	max-width: 125rem;
	margin-inline: auto;
	align-items: stretch;
	gap: 0;
	/* The block's own layout sets flexWrap:wrap, which — independent of
	   our 781px stacking breakpoint below — would wrap the media column
	   onto its own line the moment both columns' 28rem flex-basis no
	   longer fit side by side (782px content + 8rem padding + 28rem +
	   28rem = 1024px exactly). Force nowrap here so the two columns stay
	   side by side and shrink instead of wrapping between 782-1024px;
	   the mobile media query below switches to an explicit column
	   direction well before that, so nowrap never fights the stacked
	   layout on narrow screens. */
	flex-wrap: nowrap !important;
}

.landing-columns__text {
	flex: 1 1 28rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

.landing-columns__media {
	position: relative;
	flex: 1 1 28rem;
	padding-left: 8rem;
	overflow: hidden;
}

.landing-columns__media figure {
	margin: 0;
	height: 100%;
}

.landing-title {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.15;
	/* The h1 preset bottoms out at 2.15rem, too wide for "PSICHOTERAPEUTĖ"
	   in bold caps on a phone. Scale with the viewport below that, keeping
	   the preset as the ceiling so desktop is unchanged. */
	font-size: clamp(1.125rem, 6vw, var(--wp--preset--font-size--xx-large));
}

.is-style-eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.landing-nav {
	margin-top: 1.5rem;
}

.landing-nav .wp-block-navigation__container,
.landing-nav .wp-block-navigation-item {
	flex-wrap: wrap;
	gap: 0.75rem;
}

.landing-nav .wp-block-navigation-item__content {
	display: inline-block;
	border: 3px solid var(--wp--preset--color--border);
	padding: 0.75rem 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	font-weight: bold;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.landing-nav .wp-block-navigation-item__content:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.landing-columns__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	/* Biased toward the top: keep the head/upper body mostly intact and
	   let cropping fall mostly on the lower body instead of a straight
	   center crop. */
	object-position: center 20%;
}

@media (max-width: 781px) {
	.landing-columns {
		flex-direction: column;
	}

	.landing-columns__media {
		order: -1;
		padding-left: 0;
		flex: 0 0 auto;
		width: 100%;
		height: 18rem;
		overflow: hidden;
	}

	/* The post-featured-image block renders aspect-ratio/width/object-fit
	   as an INLINE style on the <img> itself (from its block attributes),
	   which always wins over an external stylesheet rule regardless of
	   selector specificity — hence !important here, one of the few
	   legitimate uses of it, to actually override that inline aspect-ratio
	   and stop the image overflowing its fixed-height container. */
	.landing-columns__media img {
		height: 100% !important;
		aspect-ratio: auto !important;
		object-position: center 20%;
	}

	.landing-columns__text {
		text-align: center;
	}

	.landing-nav .wp-block-navigation__container {
		justify-content: center;
	}
}

/* Default Page/Post featured image: show small uploads at their own size,
   centered, instead of stretching them. The block puts width:100% in an
   inline style, so !important is needed. On posts the inline 3/2
   aspect-ratio still applies, cropping at the image's own width. */
.featured-image-natural img {
	display: block;
	width: auto !important;
	max-width: 100%;
	margin-inline: auto;
}

/* Per-post "Titulinio paveikslėlio dydis" caps (class added in functions.php).
   The block's inline aspect-ratio/width/height are dropped so the image keeps
   its own proportions and scales down to fit the cap — never up, never cropped. */
[class*="fi-size-"] img {
	display: block;
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	max-width: 100%;
	margin-inline: auto;
}

.fi-size-h240 img { max-height: 240px; }
.fi-size-h320 img { max-height: 320px; }
.fi-size-h460 img { max-height: 460px; }
.fi-size-h680 img { max-height: 680px; }
.fi-size-h800 img { max-height: 800px; }
.fi-size-w320 img { max-width: min(320px, 100%); }
.fi-size-w480 img { max-width: min(480px, 100%); }
.fi-size-w620 img { max-width: min(620px, 100%); }
.fi-size-w800 img { max-width: min(800px, 100%); }
.fi-size-w1024 img { max-width: min(1024px, 100%); }
.fi-size-half img { max-width: 50%; }

/* Same content-width cap as the landing page (.landing-columns above),
   applied to the default Page template's <main> so a page never grows
   wider than the landing page does on a very large screen. */
.page-width-cap {
	max-width: 80rem;
	margin-inline: auto;
}

/* ---------- Site header (all non-landing pages) ---------- */

.site-header {
	background: var(--wp--preset--color--base);
}

/* The title area doubles as a "back" affordance — a small arrow prefix
   makes that explicit at a glance. The link target is computed per
   request (see header-site.php): the Straipsniai listing when on a single
   post, home everywhere else — a genuine "up one level", not always home. */
.site-back-link {
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.site-back-link:hover {
	color: var(--wp--preset--color--accent);
}

.site-back-link::before {
	content: "←";
	font-weight: 400;
}

/* alt="" on purpose: the site name right after it already names the link. */
.site-back-link__logo {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
}

@media (max-width: 600px) {
	.site-back-link__logo {
		width: 2rem;
		height: 2rem;
	}
}

.site-header__actions {
	gap: 1.5rem;
	align-items: center;
}

/* Pill button, modeled on the landing page's nav-item pills
   (.landing-nav .wp-block-navigation-item__content below) but smaller:
   resting state is filled with the landing page's own background tint,
   with a border a shade darker than the plain --border token; hovering
   empties the fill back to transparent (the header's own background is
   --base, so this reads as "back to page color") while the border/text
   pick up the accent color, same as the landing pills' hover. */
.site-header__contact-link {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: bold;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 75%, black);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 15%, white);
	border: 2px solid var(--wp--preset--color--accent);
	padding: 0.5rem 1.25rem;
	transition: background-color 0.2s ease;
}

.site-header__contact-link:hover {
	background-color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.site-header .wp-block-navigation__responsive-container-open {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.5rem 0.75rem;
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* By default the Navigation block's overlay is a full-viewport modal with
   left-aligned items. Turn it into a small dropdown anchored under the
   toggle button instead, so the menu appears right where you clicked. */
.site-header .wp-block-navigation {
	position: relative;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	bottom: auto;
	left: auto;
	width: max-content;
	min-width: 220px;
	max-width: 90vw;
	max-height: 70vh;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 2.5rem 1.5rem 1.5rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

.site-header .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}

.site-header .wp-block-navigation__responsive-container-close {
	top: 0.75rem;
	right: 0.75rem;
}

/* ---------- Content images: left/right/center alignment ---------- */
/* Explicit, unambiguous rules for classic alignleft/alignright/aligncenter
   images inside page/post content, plus a clearfix so the content column
   properly contains the float instead of collapsing around it. Declared
   directly (with !important on the property that actually matters, float)
   so they win regardless of whatever else is in the cascade — this is the
   one property core relies on other rules never touching, so forcing it
   here is safe. */
.entry-content .alignright {
	float: right !important;
	margin: 0.5em 0 1.5em 2em;
}

.entry-content .alignleft {
	float: left !important;
	margin: 0.5em 2em 1.5em 0;
}

.entry-content .aligncenter {
	display: block;
	float: none !important;
	margin-left: auto;
	margin-right: auto;
}

/* Images left on the editor's default "None" alignment (no alignleft/
   alignright/aligncenter class) center themselves too, instead of sitting
   at the content column's left edge. Only affects images narrower than
   the content column — a full-width image has nowhere to move either
   way. */
.entry-content .wp-block-image:not(.alignleft):not(.alignright) {
	text-align: center;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------- Footer ---------- */

.site-footer__contact {
	max-width: 90rem;
	margin-inline: auto;
	gap: 1.25rem 2rem;
	margin-bottom: 1rem;
	font-size: 0.85rem;
}

.site-footer__item {
	margin: 0;
}

.site-footer__item a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--footer-text);
}

.site-footer__item a:hover {
	color: var(--wp--preset--color--accent);
}

.site-footer__item svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

.site-footer__copyright {
	opacity: 0.7;
}

/* ---------- Straipsniai grid ---------- */

.straipsniai-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
	margin-top: 2rem;
}

/* #straipsniai-grid carries WordPress's own "is-layout-flow" class, so its
   global block-spacing rule (:where(.is-layout-flow) > * — see any
   compiled global-styles-inline-css) adds margin-block-start:1.2rem to
   every .article-card except the literal first one in the HTML. In this
   2-column grid that pushes the *second* card in each row down inside
   its own cell while the first one isn't touched — a visible gap above
   one card's video/thumbnail that its row-mate doesn't have. The grid's
   own `gap` above already provides the spacing between cards, so this
   margin is pure interference; cancel it here rather than touching the
   global rule, which other parts of the site still rely on. */
.straipsniai-grid .article-card {
	margin-block-start: 0;
}

@media (max-width: 600px) {
	.straipsniai-grid {
		grid-template-columns: 1fr;
	}
}

.article-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.article-card__link:hover .article-card__title {
	color: var(--wp--preset--color--accent);
}

.article-card__thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 350px;
	object-fit: cover;
	margin-bottom: 1rem;
}

.article-card__video {
	position: relative;
	/* Matches .article-card__thumb img's ratio so a video card and a
	   photo card are the same shape in the grid — otherwise a row mixing
	   the two (16:9 video vs 3:2 photo) comes out uneven heights. */
	/* Height = min(3:2 of the card width, 350px) — same as .article-card__thumb img.
	   Padding % is relative to width; aspect-ratio + max-height would instead
	   shrink the box's width too. The iframe fills it absolutely. */
	height: 0;
	padding-top: min(66.6667%, 350px);
	margin-bottom: 1rem;
	background: var(--wp--preset--color--contrast);
}

.article-card__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.article-card__title {
	margin: 0 0 0.5rem;
	transition: color 0.2s ease;
}

.article-card__excerpt {
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.5rem;
}

.article-card__date {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

#straipsniai-load-more[hidden] {
	display: none;
}

/* ---------- Kontaktai: two-column contact + form ---------- */

.contact-columns {
	max-width: 90rem;
	margin-inline: auto;
	gap: 3rem;
	align-items: start;
	padding-inline: 4rem;
}

.contact-map iframe {
	display: block;
	margin-top: 1rem;
}

.contact-columns__info a {
	white-space: nowrap;
}

.contact-columns__form {
	font-size: 0.9rem;
}

.contact-columns__form p {
	margin: 0 0 1rem;
}

.contact-columns__form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 500;
}

.contact-columns__form .required-hint {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	margin-left: 0.35rem;
}

.contact-columns__form input.wpcf7-form-control,
.contact-columns__form textarea.wpcf7-form-control {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--page-background);
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6rem 0.85rem;
	font-size: 0.9rem;
	font-family: inherit;
	box-sizing: border-box;
}

.contact-columns__form textarea.wpcf7-form-control {
	min-height: 7rem;
	resize: vertical;
}

.contact-columns__form .wpcf7-list-item {
	margin: 0 0 1rem;
}

.contact-columns__form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	margin-bottom: 0;
	font-size: 0.9rem;
}

.contact-columns__form input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.contact-columns__form input.wpcf7-submit {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	padding: 0.85rem 2.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-columns__form input.wpcf7-submit:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
	.contact-columns {
		flex-direction: column;
	}
}

/* ---------- Full-width two-column page template ----------
   Title + featured image stay in view (sticky) while the content column
   scrolls; the columns stack below 782px, where sticky is dropped. */

.page-two-columns {
	align-items: flex-start;
}

@media (min-width: 782px) {
	.page-two-columns__aside {
		position: sticky;
		top: var(--wp--preset--spacing--50);
	}
}

/* ---------- "Title, Centered Image" template ----------
   Featured image keeps its own proportions, is capped at 400px tall and
   sits centered; small images are never upscaled. */

.featured-image-centered {
	text-align: center;
}

.featured-image-centered img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 400px;
	margin-inline: auto;
	object-fit: contain;
}

/* ---------- Pasiekimai (achievement cards) ---------- */
.pasiekimai-intro {
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
}

.pasiekimai-grid {
	--tint-1: #F6E3D6;
	--tint-2: #E2EADF;
	--tint-3: #E9E4F0;
	--tint-4: #E1EAF1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: var(--wp--preset--spacing--60);
}

.achievement-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	transition: border-color 0.2s ease;
}

.achievement-card:nth-child(4n+1) { --achievement-tint: var(--tint-1); }
.achievement-card:nth-child(4n+2) { --achievement-tint: var(--tint-2); }
.achievement-card:nth-child(4n+3) { --achievement-tint: var(--tint-3); }
.achievement-card:nth-child(4n+4) { --achievement-tint: var(--tint-4); }

.achievement-card:hover {
	border-color: var(--wp--preset--color--accent);
}

.achievement-card__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.achievement-card__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	background: var(--achievement-tint);
}

.achievement-card__icon svg {
	width: 3.6rem;
	height: 3.6rem;
}

.achievement-card__image {
	flex: 0 0 auto;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--achievement-tint);
}

/* PNG icons bring their own circle; a tint behind would show as a ring at the anti-aliased edge. */
.achievement-card__image--icon {
	background: none;
}

/* contain, not cover: uploaded icon PNGs must not be cropped. */
.achievement-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.achievement-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.achievement-card__text {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.achievement-card__text > * {
	margin: 0 0 0.75rem;
}

.achievement-card__text > :last-child {
	margin-bottom: 0;
}

/* margin-top:auto pins the link to the card bottom so links line up across a row. */
.achievement-card__link {
	margin-top: auto;
	padding-top: 1.25rem;
	align-self: flex-start;
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.achievement-card__link:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

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

@media (max-width: 600px) {
	.pasiekimai-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.achievement-card {
		padding: 1.5rem;
	}
	.achievement-card__icon,
	.achievement-card__image {
		width: 4.5rem;
		height: 4.5rem;
	}
	.achievement-card__icon svg {
		width: 3rem;
		height: 3rem;
	}
}

/* ---------- Kvalifikacijų juosta ([kvalifikacijos]) ---------- */
.credentials-strip {
	margin-block: 2rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--wp--preset--color--border);
}

.credentials-strip__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.credentials-strip__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.3;
}

/* Reuses the card icon markup; only the size differs here. */
.credentials-strip .achievement-card__icon,
.credentials-strip .achievement-card__image {
	width: 2.5rem;
	height: 2.5rem;
	background: none;
}

.credentials-strip .achievement-card__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.credentials-strip__more {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.credentials-strip__more:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.landing-columns__text .credentials-strip {
	margin-block: 1.5rem;
}

@media (max-width: 600px) {
	.credentials-strip__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.9rem 1rem;
	}
	.landing-columns__text .credentials-strip__item {
		text-align: left;
	}
}