/* Athalie Extrák – frontend styles.
 * Each shortcode's styles are scoped to its own wrapper, so they don't
 * clash on the same page (e.g. v1 and v2 testimonials).
 */

/* =========================================================================
 * Testimonials – shared
 * ====================================================================== */

.ath-testimonials .ath-slider-container-outer {
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.ath-testimonials .ath-slider {
	display: flex;
	transition: transform 0.3s ease-in-out;
}

.ath-testimonials .ath-slider-item {
	box-sizing: border-box;
	font-size: 2rem;
	margin: 0;
}

.ath-testimonials .athalie-testimonial-container {
	width: 100%;
	padding: 0;
	margin: 0;
}

.ath-testimonials .testimonial-box {
	clear: both;
}

.ath-testimonials .testimonal-description img {
	max-height: 100px;
	width: auto;
}

.ath-testimonials .ath-testimonial-pager {
	margin-top: 40px;
	display: flex;
	width: 300px;
	flex-wrap: wrap;
}

.ath-testimonials .ath-flex-pager-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Noto Sans Mono', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 100%;
	text-transform: uppercase;
}

.ath-testimonials a.ath_slidearrow_prev,
.ath-testimonials a.ath_slidearrow_next {
	transform: translateY(-50%);
}

.ath-testimonials .ath-flex-pager-item img {
	height: 60px;
	width: auto;
	cursor: pointer;
}

.ath-testimonials .ath-testimonial-current-page-nr {
	margin: -60px 30px 0;
}

.ath-testimonials .ath-testimonial-current-page-nr span {
	padding: 0;
	margin: 0;
	display: inline-block;
}

/* =========================================================================
 * Testimonials – v1 (1 per page, with image)
 * ====================================================================== */

.ath-testimonials--v1 .ath-slider-item {
	min-width: 100%;
	width: 100%;
}

.ath-testimonials--v1 .testimonial-col-1 {
	float: left;
	width: 20%;
}

.ath-testimonials--v1 .testimonial-col-1 img {
	max-width: 100%;
	height: auto;
}

.ath-testimonials--v1 .testimonial-col-2 {
	float: right;
	width: 78%;
}

.ath-testimonials--v1 .testimonal-title {
	font-family: 'Noto Sans Mono', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	text-transform: uppercase;
	color: #000;
}

.ath-testimonials--v1 .testimonal-position {
	margin-top: 20px;
	font-family: 'Noto Sans Mono', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	color: #536165;
}

.ath-testimonials--v1 .testimonal-description {
	margin-top: 30px;
	font-family: 'Noto Sans Mono', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 130%;
	color: #536165;
}

.ath-testimonials--v1 .ath-testimonial-pager {
	float: right;
}

.ath-testimonials--v1 .ath-flex-pager-item {
	color: #000;
}

@media (max-width: 767px) {
	.ath-testimonials--v1 .testimonial-col-1 {
		display: none;
	}

	.ath-testimonials--v1 .testimonial-col-2 {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
		min-height: 610px;
	}
}

/* =========================================================================
 * Testimonials – v2 (2 per page on desktop, 1 on mobile)
 * ====================================================================== */

.ath-testimonials--v2 .ath-slider-item {
	min-width: 50%;
	width: 50%;
}

.ath-testimonials--v2 .testimonial-col-2 {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

.ath-testimonials--v2 .testimonial-col-2-inner {
	background-color: rgba(83, 97, 101, 0.5);
	padding: 10px;
}

.ath-testimonials--v2 .testimonal-description {
	margin: 0 0 10px;
	color: #fff;
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 16px;
	line-height: 130%;
}

.ath-testimonials--v2 .testimonal-title {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid #b6d8e3;
	font-family: 'Noto Sans Mono', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 100%;
	text-transform: uppercase;
	color: #fff;
}

.ath-testimonials--v2 .testimonal-position {
	margin-top: 0;
	font-family: 'Noto Sans Mono', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	color: #fff;
}

.ath-testimonials--v2 .ath-testimonial-pager {
	float: left;
}

.ath-testimonials--v2 .ath-flex-pager-item {
	color: #fff;
}

@media (max-width: 767px) {
	.ath-testimonials--v2 .ath-slider-item {
		min-width: 100%;
		width: 100%;
	}
}

/* =========================================================================
 * Featured works – [athalie_category_slider_shortcode]
 * ====================================================================== */

.ath-portfolio-carousel {
	width: 100%;
}

/* Arrows + bullets: narrow screens only */
.ath-portfolio-carousel .ath-pf-nav {
	display: none;
}

.ath-portfolio-carousel .ath-pf-main-section {
	width: 100%;
	display: grid;
	gap: 0;
	grid-template-columns: 110px 1fr 1fr;
	align-items: stretch;
}

.ath-portfolio-carousel .ath-pf-col1 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.ath-portfolio-carousel .ath-pf-col2 {
	background: var(--ath-grainy-bg, #e4ecee) url('../img/blue-grainy-background.jpg') no-repeat center / cover; /* plugin file: static/img/ */
	min-height: 500px;
	padding: 30px;
	box-sizing: border-box;
}

.ath-portfolio-carousel .ath-pf-col3 {
	padding-left: 30px;
	box-sizing: border-box;
}

.ath-portfolio-carousel .ath-pf-col3 img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
}

.ath-portfolio-carousel .ath-pf-col3 .ath-pf-data-inner-container > a {
	display: block;
	height: 100%;
}

/* Numbers on the left */
.ath-portfolio-carousel .ath-pf-colnr {
	width: 100%;
	flex: 1;
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 65px;
	line-height: 100%;
	text-align: center;
	color: #509eb3;
	border-right: 7px solid #509eb3;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}

.ath-portfolio-carousel .ath-pf-colnr-2 { opacity: 0.8; }
.ath-portfolio-carousel .ath-pf-colnr-3 { opacity: 0.6; }
.ath-portfolio-carousel .ath-pf-colnr-4 { opacity: 0.4; }
.ath-portfolio-carousel .ath-pf-colnr-5 { opacity: 0.2; }

.ath-portfolio-carousel .ath-pf-colnr:focus-visible {
	outline: 2px solid #000;
	outline-offset: -2px;
}

.ath-portfolio-carousel .ath-pf-colnr.active-col-nr {
	border-color: #000;
	color: #000;
	opacity: 1;
}

/* Panels are switched by JS; the [hidden] attribute hides inactive ones */
.ath-portfolio-carousel .ath-pf-data-inner-container {
	min-height: 680px;
	height: 100%;
	transition: opacity 2s ease;
}

.ath-portfolio-carousel .ath-pf-data-inner-container[hidden] {
	display: none;
}

.ath-portfolio-carousel .ath-pf-data-inner-container.is-fading {
	opacity: 0;
}

.ath-portfolio-carousel .ath-pf-data-innerflex {
	display: flex;
	flex-direction: column;
	min-height: 680px;
}

.ath-portfolio-carousel .ath-pf-data-innerflex > div:last-child {
	flex: 1;
}

.ath-portfolio-carousel .ath-pf-info-top {
	text-align: right;
	min-height: 150px;
}

.ath-portfolio-carousel .ath-pf-info-top h5 {
	font-family: 'Inconsolata', monospace;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1em;
	color: #509eb3;
}

.ath-portfolio-carousel .ath-pf-info-mid {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
}

.ath-portfolio-carousel .ath-pf-info-inner-details {
	flex: 1;
	padding-bottom: 30px;
}

.ath-portfolio-carousel .ath-pf-info-inner-details h4 {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 100%;
	color: #000;
}

.ath-portfolio-carousel .ath-pf-info-inner-details p {
	font-family: 'Inconsolata', monospace;
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	color: #000;
}

.ath-portfolio-carousel .ath-pf-info-inner-link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 100%;
	text-align: right;
}

.ath-portfolio-carousel .ath-pf-info-inner-link img {
	width: 160px !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 -20px -20px 0;
}

/* =========================================================================
 * Social share buttons
 * ====================================================================== */

.custom-ath-share-buttons img {
	margin: 0 10px;
}

/* =========================================================================
 * Partner logo carousel
 * ====================================================================== */

.ath-logo-row {
	width: 100%;
	overflow: hidden;
}

.ath-logo-row .swiper-wrapper {
	transition-timing-function: linear !important;
}

.ath-logo-row .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
}

.ath-logo-row .swiper-slide img {
	max-height: 70px;
}

/* =========================================================================
 * Price tables – [athalie_price_table]
 *
 * One grid for the whole table. Each box spans 5 rows and shares them through
 * subgrid, so these line up across the boxes of the same row:
 *   1 alt title · 2 main title · 3 info · 4 feature list · 5 button
 * A shorter feature list leaves empty space below it; buttons stay aligned.
 * Selectors are prefixed with .ath-pt to win over Divi's text module styles.
 * ====================================================================== */

.ath-pt {
	--ath-pt-accent: #509eb3;
	--ath-pt-line: #b6d8e3;
	--ath-pt-star-bg: #3e7c8c;
	--ath-pt-mono: 'Noto Sans Mono', 'Inconsolata', Menlo, Consolas, monospace;
	--ath-pt-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 per row, the rest wraps */
	column-gap: clamp(30px, 8%, 100px);
	row-gap: 0;
	width: 100%;
	box-sizing: border-box;
}

.ath-pt *,
.ath-pt *::before,
.ath-pt *::after {
	box-sizing: border-box;
}

.ath-pt .ath-pt-box {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	row-gap: 0;
	min-width: 0;
	margin-bottom: 60px; /* space between wrapped rows of boxes */
}

/* Header: rows 1–2 (alt title + main title) */
.ath-pt .ath-pt-header {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	padding: 28px 20px 24px;
	text-align: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ath-pt .ath-pt-box--bg-white .ath-pt-header {
	background-color: #fff;
}

.ath-pt .ath-pt-box--bg-transparent .ath-pt-header {
	background-color: transparent;
}

.ath-pt .ath-pt-alt-title {
	align-self: end;
	font-family: var(--ath-pt-mono);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ath-pt-accent);
	overflow-wrap: anywhere;
}

.ath-pt .ath-pt-title {
	align-self: start;
	margin: 2px 0 0;
	padding: 0;
	font-family: var(--ath-pt-serif);
	font-size: clamp(34px, 4vw, 48px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000;
	overflow-wrap: anywhere;
}

/* Info: row 3 */
.ath-pt .ath-pt-info {
	padding: 22px 20px 0;
	text-align: center;
	font-family: var(--ath-pt-mono);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.65;
	color: var(--ath-pt-accent);
}

.ath-pt .ath-pt-info p {
	margin: 0 0 1em;
	padding: 0;
	font: inherit;
	color: inherit;
}

.ath-pt .ath-pt-info p:last-child {
	margin-bottom: 0;
}

/* Feature list: row 4 */
.ath-pt ul.ath-pt-features {
	align-self: start;
	margin: 50px 0 0;
	padding: 0 10px;
	list-style: none;
}

.ath-pt ul.ath-pt-features li {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin: 0;
	padding: 12px 0 12px 4px;
	list-style: none;
	border-bottom: 1px solid var(--ath-pt-line);
	font-family: var(--ath-pt-mono);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.95;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #000;
}

.ath-pt ul.ath-pt-features li::before {
	content: none; /* no theme bullets */
}

.ath-pt .ath-pt-feature-text {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ath-pt .ath-pt-bullet {
	flex: none;
}

.ath-pt .ath-pt-box--dot .ath-pt-bullet {
	width: 7px;
	height: 7px;
	margin-top: 0.45em;
	border-radius: 50%;
	background: var(--ath-pt-line);
}

.ath-pt .ath-pt-box--star .ath-pt-bullet {
	width: 26px;
	height: 26px;
	margin-top: 0.1em;
	border-radius: 2px;
	background: var(--ath-pt-star-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2.6l2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / 17px no-repeat;
}

/* Button: row 5 */
.ath-pt .ath-pt-action {
	align-self: start;
	padding-top: 45px;
	text-align: center;
}

.ath-pt a.ath-pt-button {
	display: inline-block;
	max-width: 100%;
	padding: 18px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--ath-pt-btn-bg, #b6d8e3);
	color: var(--ath-pt-btn-fg, #000);
	font-family: var(--ath-pt-mono);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ath-pt a.ath-pt-button:hover {
	opacity: 0.85;
	color: var(--ath-pt-btn-fg, #000);
}

.ath-pt a.ath-pt-button:focus-visible {
	outline: 2px solid var(--ath-pt-accent);
	outline-offset: 3px;
}

/* Mobile: one box per row */
@media (max-width: 767px) {
	.ath-pt {
		grid-template-columns: minmax(0, 1fr);
	}

	.ath-pt ul.ath-pt-features {
		margin-top: 35px;
		padding: 0;
	}

	.ath-pt ul.ath-pt-features li {
		gap: 16px;
		font-size: 13px;
	}
}

/* Browsers without subgrid: boxes stay equal height and buttons sit at the bottom;
 * only the per-part alignment is lost. */
@supports not (grid-template-rows: subgrid) {
	.ath-pt .ath-pt-box {
		display: flex;
		flex-direction: column;
	}

	.ath-pt .ath-pt-header {
		display: block;
	}

	.ath-pt .ath-pt-action {
		margin-top: auto;
	}
}

/* =========================================================================
 * Blog carousel – [athalie_blog_carousel]
 * Desktop: text panel (≈58%) + image (≈42%, cover).
 * ≤ 900px: image on top, text below.
 * The date box geometry lives in variables, so the author/category row can
 * always reserve exactly the space next to it.
 * Prefixed with .ath-bc to win over Divi's text module styles.
 * ====================================================================== */

.ath-bc {
	--ath-bc-accent: #509eb3;
	--ath-bc-light: #b6d8e3;
	--ath-bc-panel: #e4ecee;
	--ath-bc-mono: 'Noto Sans Mono', 'Inconsolata', Menlo, Consolas, monospace;
	--ath-bc-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

	--ath-bc-pad-x: 46px;        /* text panel side padding */
	--ath-bc-pad-top: 36px;      /* text panel top padding */
	--ath-bc-date-right: 55px;   /* date box distance from the panel's right edge */
	--ath-bc-date-w: 74px;       /* date box width */
	--ath-bc-date-h: 96px;       /* date box height (fixed, so the title can always clear it) */
	--ath-bc-date-num: 24px;     /* month / day font size */
	--ath-bc-more-w: 170px;      /* "Olvass tovább" circle */
	--ath-bc-more-bottom: 26px;  /* circle distance from the panel's bottom edge */
	--ath-bc-more-right: 30px;   /* circle distance from the panel's right edge */

	width: 100%;
}

.ath-bc *,
.ath-bc *::before,
.ath-bc *::after {
	box-sizing: border-box;
}

.ath-bc .swiper {
	width: 100%;
	overflow: hidden;
}

.ath-bc .ath-bc-slide {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	height: auto; /* all slides as tall as the tallest one */
	min-height: 450px;
}

/* Text panel: the same grainy background as the works carousel (static/img/) */
.ath-bc .ath-bc-content {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--ath-bc-pad-top) var(--ath-bc-pad-x) var(--ath-bc-more-bottom);
	background: var(--ath-bc-panel) url('../img/blue-grainy-background.jpg') no-repeat center / cover;
}

/* Date box: top right corner of the text panel */
.ath-bc .ath-bc-date {
	position: absolute;
	top: 0;
	right: var(--ath-bc-date-right);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--ath-bc-date-w);
	height: var(--ath-bc-date-h);
	padding: 0 6px;
	background: #000;
	font-family: var(--ath-bc-mono);
	line-height: 1;
	text-align: center;
}

.ath-bc .ath-bc-year {
	margin-bottom: 6px;
	font-size: calc(var(--ath-bc-date-num) * 0.55);
	color: #fff;
}

.ath-bc .ath-bc-month,
.ath-bc .ath-bc-day {
	font-size: var(--ath-bc-date-num);
	line-height: 1.05;
	letter-spacing: 0.05em;
	color: var(--ath-bc-light);
}

/* Author (left) + categories (right, next to the date box) */
.ath-bc .ath-bc-meta {
	display: flex;
	align-items: flex-start;
	gap: 6px 24px;
	/* Reserve the date box's height, so the title always starts below it. */
	min-height: calc(var(--ath-bc-date-h) - var(--ath-bc-pad-top));
	padding: 4px calc(var(--ath-bc-date-right) + var(--ath-bc-date-w) - var(--ath-bc-pad-x) + 18px) 0 0;
	font-family: var(--ath-bc-mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ath-bc-accent);
}

.ath-bc .ath-bc-author {
	min-width: 0;
}

/* One category per line, max 3 (limited in PHP) */
.ath-bc .ath-bc-categories {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	margin-left: auto;
	text-align: right;
}

.ath-bc .ath-bc-meta a {
	color: var(--ath-bc-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.ath-bc .ath-bc-meta a:hover {
	color: #000;
}

/* Title */
.ath-bc .ath-bc-title {
	margin: 24px 0 0;
	padding: 0 30px 0 0;
	font-family: var(--ath-bc-serif);
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #000;
	overflow-wrap: break-word;
}

.ath-bc .ath-bc-title a {
	color: inherit;
	text-decoration: none;
}

.ath-bc .ath-bc-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* Excerpt + read more circle.
 * The circle is pinned to the panel's bottom-right corner, so it is in the same
 * place on every slide. The excerpt block reserves its width (and at least its
 * height), so text can never run under it. */
.ath-bc .ath-bc-bottom {
	margin-top: 26px; /* follows the title */
	min-height: var(--ath-bc-more-w);
	padding-right: calc(var(--ath-bc-more-w) + var(--ath-bc-more-right) - var(--ath-bc-pad-x) + 24px);
}

.ath-bc .ath-bc-excerpt {
	max-width: 380px;
	margin: 0;
	padding: 0;
	font-family: var(--ath-bc-mono);
	font-size: 12.5px;
	line-height: 1.35;
	color: #1f2a2e;
}

.ath-bc .ath-bc-more {
	position: absolute;
	right: var(--ath-bc-more-right);
	bottom: var(--ath-bc-more-bottom);
	display: block;
	width: var(--ath-bc-more-w);
	margin: 0;
	transition: transform 0.3s ease;
}

.ath-bc .ath-bc-more:hover {
	transform: translateX(4px);
}

.ath-bc .ath-bc-more img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

/* Image: fills the right panel like background-size: cover */
.ath-bc .ath-bc-media {
	position: relative;
	display: block;
	min-height: 100%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ath-bc-light), var(--ath-bc-accent)); /* no image */
}

.ath-bc .ath-bc-media img.ath-bc-image {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Navigation: arrows + bullet bar */
.ath-bc .ath-bc-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 22px;
}

.ath-bc .ath-bc-prev,
.ath-bc .ath-bc-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px; /* comfortable touch target */
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	cursor: pointer;
}

.ath-bc .ath-bc-prev:hover,
.ath-bc .ath-bc-next:hover {
	color: var(--ath-bc-accent);
}

.ath-bc .ath-bc-bullets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
	width: auto !important; /* override Swiper's default pagination width */
}

.ath-bc .ath-bc-bullet {
	display: block;
	width: 14px;
	height: 6px;
	background: var(--ath-bc-accent);
	opacity: max(0.2, calc(1 - var(--i, 0) * 0.25)); /* fades like the works carousel numbers */
	cursor: pointer;
	transition: background-color 0.2s, opacity 0.2s;
}

.ath-bc .ath-bc-bullet.is-active {
	background: #000;
	opacity: 1;
}

.ath-bc .ath-bc-prev:focus-visible,
.ath-bc .ath-bc-next:focus-visible,
.ath-bc .ath-bc-bullet:focus-visible,
.ath-bc a:focus-visible {
	outline: 2px solid var(--ath-bc-accent);
	outline-offset: 2px;
}

/* Smaller desktops / landscape tablets */
@media (max-width: 1200px) {
	.ath-bc {
		--ath-bc-pad-x: 34px;
		--ath-bc-pad-top: 30px;
		--ath-bc-date-right: 34px;
		--ath-bc-date-w: 70px;
		--ath-bc-date-h: 90px;
		--ath-bc-date-num: 22px;
		--ath-bc-more-w: 140px;
	}

	.ath-bc .ath-bc-title {
		padding-right: 0;
	}
}

/* Portrait tablets and phones: image on top, text below */
@media (max-width: 900px) {
	.ath-bc {
		--ath-bc-pad-x: 28px;
		--ath-bc-date-right: 28px;
	}

	.ath-bc .ath-bc-slide {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr; /* text panel fills the rest of the equal-height slide */
		min-height: 0;
	}

	.ath-bc .ath-bc-media {
		grid-row: 1;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.ath-bc .ath-bc-title {
		font-size: clamp(24px, 4.2vw, 32px);
	}

	.ath-bc .ath-bc-excerpt {
		max-width: none;
	}
}

/* Phones */
@media (max-width: 600px) {
	.ath-bc {
		--ath-bc-pad-x: 20px;
		--ath-bc-pad-top: 22px;
		--ath-bc-date-right: 20px;
		--ath-bc-date-w: 62px;
		--ath-bc-date-h: 80px;
		--ath-bc-date-num: 19px;
		--ath-bc-more-w: 120px;
		--ath-bc-more-bottom: 20px;
		--ath-bc-more-right: 16px;
	}

	.ath-bc .ath-bc-content {
		padding-bottom: 24px;
	}

	.ath-bc .ath-bc-media {
		aspect-ratio: 4 / 3;
	}

	/* Author and categories stay side by side; a long author name wraps the
	   categories onto the next line, still aligned next to the date box. */
	.ath-bc .ath-bc-meta {
		flex-wrap: wrap;
		gap: 6px 16px;
		font-size: 12px;
	}

	.ath-bc .ath-bc-title {
		margin-top: 20px;
		font-size: 24px;
	}

	/* Excerpt uses the full width; the space for the circle is reserved below it. */
	.ath-bc .ath-bc-bottom {
		min-height: 0;
		padding-right: 0;
		padding-bottom: calc(var(--ath-bc-more-w) + 12px);
	}

	.ath-bc .ath-bc-nav {
		gap: 10px;
	}
}

/* =========================================================================
 * Post header – [athalie_post_header]
 * Date box | h1 title, then categories (left) and author (right) under the
 * title. Transparent: the page background shows through.
 *
 * Responsive to its OWN width (container queries), not the screen's, so it
 * also fits when a Divi template places it in a narrow column, e.g. next to
 * the featured image.
 * ====================================================================== */

.ath-ph-container {
	container-type: inline-size;
	container-name: ath-ph;
	width: 100%;
}

.ath-ph {
	--ath-ph-accent: #509eb3;
	--ath-ph-light: #b6d8e3;
	--ath-ph-mono: 'Noto Sans Mono', 'Inconsolata', Menlo, Consolas, monospace;

	--ath-ph-date-w: 172px;
	--ath-ph-date-h: 182px;
	--ath-ph-date-num: 46px;

	display: grid;
	grid-template-columns: var(--ath-ph-date-w) minmax(0, 1fr);
	grid-template-rows: auto 1fr; /* title, then meta; the date box spans both */
	column-gap: clamp(20px, 5cqi, 60px); /* space between the date box and the title */
	row-gap: 20px;
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	box-sizing: border-box;
}

.ath-ph *,
.ath-ph *::before,
.ath-ph *::after {
	box-sizing: border-box;
}

/* Date box */
.ath-ph .ath-ph-date {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--ath-ph-date-w);
	height: var(--ath-ph-date-h);
	background: #000;
	font-family: var(--ath-ph-mono);
	line-height: 1;
	text-align: center;
}

.ath-ph .ath-ph-year {
	margin-bottom: 10px;
	font-size: calc(var(--ath-ph-date-num) * 0.5);
	color: #fff;
}

.ath-ph .ath-ph-month,
.ath-ph .ath-ph-day {
	font-size: var(--ath-ph-date-num);
	line-height: 1.02;
	letter-spacing: 0.06em;
	color: var(--ath-ph-light);
}

/* Title (the page's h1); scales with the container's width */
.ath-ph .ath-ph-title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	padding: 0;
	font-family: var(--ath-ph-mono);
	/* Scales smoothly with the header's width; each band below continues where
	   the previous one ends: 32px max -> 26px (900) -> 20px (620) -> 16px (420) -> 15px. */
	font-size: clamp(26px, 2.9cqi, 32px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.25; /* room for accented capitals (É, Á, Ő…) above the line */
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
	overflow-wrap: break-word; /* breaks a word only if it can't fit on a line at all */
	hyphens: manual;
}

/* Categories + author: level with the bottom of the date box
   (or right under the title when the title is taller than the box) */
.ath-ph .ath-ph-meta {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px 32px;
	font-family: var(--ath-ph-mono);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ath-ph-accent);
}

/* All categories in one line, comma separated (wraps if needed) */
.ath-ph .ath-ph-categories {
	flex: 0 1 auto;
	min-width: 0;
}

.ath-ph .ath-ph-author {
	margin-left: auto;
	text-align: right;
}

.ath-ph .ath-ph-meta a {
	color: var(--ath-ph-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.ath-ph .ath-ph-meta a:hover {
	color: #000;
}

.ath-ph a:focus-visible {
	outline: 2px solid var(--ath-ph-accent);
	outline-offset: 2px;
}

/* Medium width (laptop column, half-width column on a wide screen) */
@container ath-ph (max-width: 900px) {
	.ath-ph {
		--ath-ph-date-w: 132px;
		--ath-ph-date-h: 142px;
		--ath-ph-date-num: 36px;
	}

	.ath-ph .ath-ph-title {
		font-size: clamp(20px, calc(6.7px + 2.14cqi), 26px);
	}
}

/* Narrow: small date box beside the title, meta row under both */
@container ath-ph (max-width: 620px) {
	.ath-ph {
		--ath-ph-date-w: 78px;
		--ath-ph-date-h: 86px;
		--ath-ph-date-num: 22px;
		grid-template-rows: auto auto;
		column-gap: 18px;
		row-gap: 22px;
	}

	.ath-ph .ath-ph-date {
		grid-row: 1;
	}

	.ath-ph .ath-ph-year {
		margin-bottom: 6px;
	}

	.ath-ph .ath-ph-title {
		align-self: center;
		font-size: clamp(16px, calc(7.6px + 2cqi), 20px);
		line-height: 1.3;
		letter-spacing: 0;
	}

	.ath-ph .ath-ph-meta {
		grid-column: 1 / -1;
		align-self: start;
		font-size: 14px;
	}
}

/* Very narrow: title under the date box with the full width, so long
   Hungarian words don't have to break mid-word. */
@container ath-ph (max-width: 420px) {
	.ath-ph {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		row-gap: 18px;
	}

	.ath-ph .ath-ph-title {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		font-size: clamp(15px, calc(11.8px + 1cqi), 16px);
	}

	.ath-ph .ath-ph-meta {
		grid-column: 1;
		grid-row: 3;
	}
}

/* =========================================================================
 * Blog post cards – reusable two-column grid (athalie_blog_grid_html)
 * Used by [athalie_related_posts]. Responsive to its own width (container
 * queries): 2 columns, 1 column when the box is narrow.
 * ====================================================================== */

.ath-bg {
	--ath-bg-accent: #509eb3;
	--ath-bg-light: #b6d8e3;
	--ath-bg-card: #eef3f5;
	--ath-bg-mono: 'Noto Sans Mono', 'Inconsolata', Menlo, Consolas, monospace;
	--ath-bg-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ath-bg-strip-h: 22px;   /* marble strip at the bottom of each card */
	/* Date box geometry; the title and meta keep clear of its column. */
	--ath-bg-date-w: 70px;
	--ath-bg-date-right: 22px;
	--ath-bg-pad-x: 36px;

	container-type: inline-size;
	container-name: ath-bg;
	width: 100%;
}

.ath-bg *,
.ath-bg *::before,
.ath-bg *::after {
	box-sizing: border-box;
}

/* Heading row: title left, "Vissza a blogra" right */
.ath-bg .ath-bg-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 30px;
	margin: 0 0 50px;
}

.ath-bg .ath-bg-heading {
	margin: 0;
	padding: 0;
	font-family: var(--ath-bg-serif);
	font-size: clamp(32px, 5cqi, 58px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: none;
	color: #000;
}

.ath-bg a.ath-bg-back {
	margin-bottom: 0.4em;
	font-family: var(--ath-bg-mono);
	font-size: 15px;
	font-weight: 700;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.ath-bg a.ath-bg-back:hover {
	color: var(--ath-bg-accent);
}

/* Grid */
.ath-bg .ath-bg-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* Card */
.ath-bg .ath-bcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--ath-bg-card);
}

.ath-bg .ath-bcard-body {
	position: relative;
	flex: 1;
	padding: 38px var(--ath-bg-pad-x) 46px;
}

/* Date box: top right corner */
.ath-bg .ath-bcard-date {
	position: absolute;
	top: 0;
	right: var(--ath-bg-date-right);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--ath-bg-date-w);
	height: 90px;
	background: #000;
	font-family: var(--ath-bg-mono);
	line-height: 1;
	text-align: center;
}

.ath-bg .ath-bcard-year {
	margin-bottom: 6px;
	font-size: 13px;
	color: #fff;
}

.ath-bg .ath-bcard-month,
.ath-bg .ath-bcard-day {
	font-size: 25px;
	line-height: 1.02;
	letter-spacing: 0.06em;
	color: var(--ath-bg-light);
}

/* Author + categories (kept clear of the date box) */
.ath-bg .ath-bcard-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	min-height: 34px; /* with the margin below, the title always starts under the date box */
	margin-bottom: 18px;
	padding-right: calc(var(--ath-bg-date-w) + var(--ath-bg-date-right) - var(--ath-bg-pad-x) + 18px);
	font-family: var(--ath-bg-mono);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ath-bg-accent);
}

.ath-bg .ath-bcard-meta a {
	color: var(--ath-bg-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.ath-bg .ath-bcard-meta a:hover {
	color: #000;
}

/* Title: never runs into the date box's column.
   h3 in the selector: more specific than Divi's heading / text module rules. */
.ath-bg h3.ath-bcard-title {
	margin: 0;
	padding: 0 calc(var(--ath-bg-date-w) + var(--ath-bg-date-right) - var(--ath-bg-pad-x) + 18px) 0 0;
	font-family: var(--ath-bg-mono);
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #000;
	overflow-wrap: break-word;
}

.ath-bg h3.ath-bcard-title a,
.ath-bg h3.ath-bcard-title a:hover,
.ath-bg h3.ath-bcard-title a:focus {
	color: inherit;
	font-weight: inherit; /* the link must not reset the weight */
	text-decoration: none;
}

/* Excerpt */
.ath-bg .ath-bcard-excerpt {
	margin: 18px 0 0;
	padding: 0;
	font-family: var(--ath-bg-mono);
	font-size: 13.5px;
	line-height: 1.4;
	color: #4f5a5e;
}

/* Marble strip at the bottom (plugin file: static/img/premium-box-hatter.png) */
.ath-bg .ath-bcard-strip {
	display: block;
	flex: none;
	margin: 0;
	height: var(--ath-bg-strip-h);
	background: var(--ath-bg-light) url('../img/premium-box-hatter.png') no-repeat center / cover;
}

.ath-bg a:focus-visible {
	outline: 2px solid var(--ath-bg-accent);
	outline-offset: 2px;
}

/* Medium width: a bit tighter */
@container ath-bg (max-width: 900px) {
	.ath-bg .ath-bcard { /* the container itself can't be styled from its own query */
		--ath-bg-pad-x: 24px;
		--ath-bg-date-right: 16px;
	}

	.ath-bg .ath-bcard-body {
		padding-top: 32px;
		padding-bottom: 36px;
	}

	.ath-bg .ath-bcard-meta {
		gap: 2px 18px;
		font-size: 13px;
	}

	.ath-bg h3.ath-bcard-title {
		font-size: 15px;
		letter-spacing: 0.04em;
	}
}

/* Narrow: one card per row */
@container ath-bg (max-width: 640px) {
	.ath-bg .ath-bg-head {
		margin-bottom: 30px;
	}

	.ath-bg .ath-bg-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Very narrow: smaller date box */
@container ath-bg (max-width: 380px) {
	.ath-bg .ath-bcard {
		--ath-bg-pad-x: 18px;
		--ath-bg-date-right: 12px;
		--ath-bg-date-w: 58px;
	}

	.ath-bg .ath-bcard-body {
		padding-top: 26px;
		padding-bottom: 30px;
	}

	.ath-bg .ath-bcard-date {
		height: 76px;
	}

	.ath-bg .ath-bcard-month,
	.ath-bg .ath-bcard-day {
		font-size: 20px;
	}

	.ath-bg h3.ath-bcard-title {
		font-size: 14px;
		letter-spacing: 0.02em;
	}

	.ath-bg .ath-bcard-excerpt {
		font-size: 13px;
	}
}

/* =========================================================================
 * Builder placeholder – shown only to editors in the Divi builder where a
 * module has nothing to show (e.g. post header on a template preview).
 * ====================================================================== */

.ath-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 24px;
	box-sizing: border-box;
	border: 2px dashed #a7aaad;
	border-radius: 4px;
	background: repeating-linear-gradient(135deg, #f0f0f1, #f0f0f1 12px, #e8e8e9 12px, #e8e8e9 24px);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: #50575e;
}

.ath-placeholder strong {
	font-size: 15px;
	color: #1d2327;
}

/* =========================================================================
 * Blog list pagination – [athalie_blog_list]
 * ====================================================================== */

.ath-bg[data-ath-list] {
	outline: none; /* focused programmatically after loading a page */
	transition: opacity 0.2s ease;
}

.ath-bg[data-ath-list].is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.ath-bg .ath-bg-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 44px;
	font-family: var(--ath-bg-mono);
	font-size: 15px;
	line-height: 1;
}

.ath-bg .ath-bg-pager a,
.ath-bg .ath-bg-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px; /* comfortable touch target */
	padding: 0 6px;
	color: #000;
	text-decoration: none;
}

.ath-bg .ath-bg-pager a.ath-pager-num {
	border-bottom: 2px solid var(--ath-bg-light);
}

.ath-bg .ath-bg-pager a:hover {
	color: var(--ath-bg-accent);
	border-color: var(--ath-bg-accent);
}

.ath-bg .ath-bg-pager .ath-pager-num.is-current {
	background: #000;
	color: var(--ath-bg-light);
	font-weight: 700;
}

.ath-bg .ath-bg-pager .ath-pager-gap {
	min-width: 20px;
	color: #6b7477;
}

@container ath-bg (max-width: 380px) {
	.ath-bg .ath-bg-pager {
		gap: 2px;
		font-size: 14px;
	}

	.ath-bg .ath-bg-pager a,
	.ath-bg .ath-bg-pager span {
		min-width: 34px;
	}
}

/* =========================================================================
 * News grid – [athalie_news_grid]
 * One grid for all items: the items of a row share the row's height, so the
 * divider lines (item bottom borders) line up across the columns.
 * 3 columns → 2 → 1, based on the box's own width.
 * ====================================================================== */

.ath-ng {
	--ath-ng-accent: #509eb3;
	--ath-ng-bubble: #b6d8e3;
	--ath-ng-line: #536165;
	--ath-ng-mono: 'Noto Sans Mono', 'Inconsolata', Menlo, Consolas, monospace;
	--ath-ng-thumb: 56px;

	container-type: inline-size;
	container-name: ath-ng;
	width: 100%;
	background: transparent;
}

.ath-ng *,
.ath-ng *::before,
.ath-ng *::after {
	box-sizing: border-box;
}

.ath-ng h2.ath-ng-heading {
	margin: 0 0 34px;
	padding: 0;
	font-family: var(--ath-ng-mono);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #000;
}

.ath-ng .ath-ng-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(24px, 6cqi, 82px);
	row-gap: 0;
}

/* Item: image left, text right; stretches to the row height, line at the bottom */
.ath-ng .ath-ng-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	padding: 24px 0 26px;
	border-bottom: 1px solid var(--ath-ng-line);
}

/* Small square image, always the same size and cropped to fit */
.ath-ng .ath-ng-thumb {
	flex: none;
	display: block;
	width: var(--ath-ng-thumb);
	height: var(--ath-ng-thumb);
	overflow: hidden;
	background: var(--ath-ng-bubble); /* shown when the post has no image */
}

.ath-ng .ath-ng-thumb img.ath-ng-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.ath-ng .ath-ng-text {
	flex: 1;
	min-width: 0;
}

.ath-ng h3.ath-ng-title {
	margin: 0;
	padding: 0;
	font-family: var(--ath-ng-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
	overflow-wrap: break-word;
}

.ath-ng h3.ath-ng-title a,
.ath-ng h3.ath-ng-title a:hover,
.ath-ng h3.ath-ng-title a:focus {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* Category bubbles */
.ath-ng .ath-ng-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.ath-ng a.ath-ng-cat {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ath-ng-bubble);
	font-family: var(--ath-ng-mono);
	font-size: 12px;
	line-height: 1.4;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s;
}

.ath-ng a.ath-ng-cat:hover {
	background: #9ccbd9;
	color: #000;
}

.ath-ng a:focus-visible {
	outline: 2px solid var(--ath-ng-accent);
	outline-offset: 2px;
}

@container ath-ng (max-width: 860px) {
	.ath-ng .ath-ng-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container ath-ng (max-width: 540px) {
	.ath-ng .ath-ng-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ath-ng .ath-ng-item {
		padding: 20px 0 22px;
	}
}

/* =========================================================================
 * Works tabs – [athalie_category_slider_shortcode] (tabs mode)
 * One row: inactive tabs show only their icon between thin vertical lines;
 * the active tab opens up (icon + big title + "Összes projekt" link) in its
 * own place. Responsive to the box's own width.
 * ====================================================================== */

.ath-wt {
	--ath-wt-line: #536165;
	--ath-wt-accent: #509eb3;
	--ath-wt-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ath-wt-mono: 'Noto Sans Mono', 'Inconsolata', Menlo, Consolas, monospace;
	--ath-wt-icon: 30px;
	--ath-wt-cell: 70px; /* width of a closed tab */

	container-type: inline-size;
	container-name: ath-wt;
	width: 100%;
}

.ath-wt *,
.ath-wt *::before,
.ath-wt *::after {
	box-sizing: border-box;
}

.ath-wt .ath-wt-bar {
	display: flex;
	align-items: stretch;
	margin-bottom: 44px;
	border-bottom: 1px solid var(--ath-wt-line);
}

.ath-wt .ath-wt-tab {
	display: flex;
	align-items: center;
	flex: none;
	min-width: 0;
	min-height: 70px;
}

.ath-wt .ath-wt-tab + .ath-wt-tab {
	border-left: 1px solid var(--ath-wt-line);
}

.ath-wt .ath-wt-tab.is-active {
	flex: 1;
	padding-right: 0;
}

/* The tab button: icon (+ title when active) */
.ath-wt button.ath-wt-btn {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: var(--ath-wt-cell);
	height: 100%;
	margin: 0;
	padding: 12px 20px;
	border: 0;
	border-radius: 0;
	background: none;
	color: #000;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ath-wt .ath-wt-tab:first-child button.ath-wt-btn {
	padding-left: 0;
}

.ath-wt .ath-wt-tab:not(.is-active) button.ath-wt-btn {
	justify-content: center;
	width: var(--ath-wt-cell);
}

.ath-wt .ath-wt-tab:not(.is-active) button.ath-wt-btn:hover .ath-wt-icon {
	opacity: 0.65;
}

.ath-wt .ath-wt-icon {
	display: inline-flex;
	flex: none;
	width: var(--ath-wt-icon);
	height: var(--ath-wt-icon);
	transition: opacity 0.2s;
}

.ath-wt .ath-wt-icon img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.ath-wt .ath-wt-label {
	font-family: var(--ath-wt-serif);
	font-size: clamp(24px, 3.4cqi, 40px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #000;
	overflow-wrap: break-word;
}

/* Closed tabs: title hidden visually, still read by screen readers */
.ath-wt .ath-wt-tab:not(.is-active) .ath-wt-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* "Összes projekt": only on the open tab, at its right end */
.ath-wt a.ath-wt-all {
	display: none;
	flex: none;
	margin-left: auto;
	padding: 0 28px 0 16px;
	font-family: var(--ath-wt-mono);
	font-size: 13px;
	font-weight: 700;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.ath-wt .ath-wt-tab.is-active a.ath-wt-all {
	display: block;
}

.ath-wt .ath-wt-tab:last-child a.ath-wt-all {
	padding-right: 0;
}

.ath-wt a.ath-wt-all:hover {
	color: var(--ath-wt-accent);
}

.ath-wt button.ath-wt-btn:focus-visible,
.ath-wt a.ath-wt-all:focus-visible {
	outline: 2px solid var(--ath-wt-accent);
	outline-offset: -2px;
}

/* Panels */
.ath-wt .ath-wt-panel {
	transition: opacity 0.6s ease;
}

.ath-wt .ath-wt-panel[hidden] {
	display: none;
}

.ath-wt .ath-wt-panel.is-fading {
	opacity: 0;
}

/* Title + link row under the bar: narrow screens only */
.ath-wt .ath-wt-info {
	display: none;
}

/* Narrow: every tab is an equal icon-only cell; a line slides under the open
 * one and its title + "Összes projekt" slide in below the bar.
 * (A container query cannot style the container itself, so the sizes are set
 * on its children.) */
@container ath-wt (max-width: 760px) {
	.ath-wt > * {
		--ath-wt-icon: 28px;
	}

	.ath-wt .ath-wt-bar {
		position: relative;
		margin-bottom: 0;
	}

	.ath-wt .ath-wt-bar::after {
		content: '';
		position: absolute;
		bottom: -1px;
		left: calc(100% / var(--ath-wt-n, 4) * var(--ath-wt-i, 0));
		width: calc(100% / var(--ath-wt-n, 4));
		height: 3px;
		background: #000;
		transition: left 0.35s ease;
	}

	.ath-wt .ath-wt-tab,
	.ath-wt .ath-wt-tab.is-active {
		flex: 1 1 0;
		min-height: 60px;
		padding: 0;
	}

	.ath-wt .ath-wt-tab button.ath-wt-btn,
	.ath-wt .ath-wt-tab:not(.is-active) button.ath-wt-btn,
	.ath-wt .ath-wt-tab:first-child button.ath-wt-btn {
		justify-content: center;
		width: 100%;
		min-width: 0;
		padding: 10px 4px;
	}

	.ath-wt .ath-wt-tab:not(.is-active) .ath-wt-icon {
		opacity: 0.45;
	}

	.ath-wt .ath-wt-tab:not(.is-active) button.ath-wt-btn:hover .ath-wt-icon {
		opacity: 0.8;
	}

	/* Titles stay in the tabs for screen readers only */
	.ath-wt .ath-wt-tab .ath-wt-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ath-wt .ath-wt-tab.is-active a.ath-wt-all {
		display: none;
	}

	/* All items share one grid cell, so the row keeps the height of the
	 * tallest title and the panel below never jumps. */
	.ath-wt .ath-wt-info {
		display: grid;
		margin-bottom: 26px;
		overflow: hidden;
	}

	.ath-wt .ath-wt-info-item {
		grid-area: 1 / 1;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 16px;
		padding-top: 16px;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-14px);
		transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
	}

	.ath-wt .ath-wt-info-item.is-active {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, visibility 0s;
	}

	.ath-wt .ath-wt-info-label {
		min-width: 0;
		font-family: var(--ath-wt-serif);
		font-size: clamp(22px, 6.4cqi, 30px);
		font-weight: 400;
		line-height: 1.15;
		letter-spacing: -0.01em;
		color: #000;
		overflow-wrap: break-word;
	}

	.ath-wt a.ath-wt-info-all {
		flex: none;
		font-family: var(--ath-wt-mono);
		font-size: 13px;
		font-weight: 700;
		color: #000;
		text-decoration: underline;
		text-underline-offset: 3px;
		white-space: nowrap;
	}

	.ath-wt a.ath-wt-info-all:hover {
		color: var(--ath-wt-accent);
	}

	.ath-wt a.ath-wt-info-all:focus-visible {
		outline: 2px solid var(--ath-wt-accent);
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ath-wt .ath-wt-bar::after,
	.ath-wt .ath-wt-info-item,
	.ath-wt .ath-wt-info-item.is-active {
		transition: none;
	}
}

/* =========================================================================
 * Featured works carousel – narrow screens (stacked layout)
 * Desktop is unchanged. Below ~760px of available width (same as the tabs):
 * text panel, then the image, then arrows + bullets (the numbers are hidden).
 *
 * The mobile rules are deliberately "hardened" (higher specificity +
 * !important on layout properties): theme / Divi custom CSS written for the
 * old carousel (absolutely stacked slides, fixed heights, hidden columns)
 * would otherwise collapse the slides and cover the slider.
 * ====================================================================== */

.ath-portfolio-carousel {
	container-type: inline-size;
	container-name: ath-pf;
}

@container ath-pf (max-width: 760px) {
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-main-section {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto !important;
		position: relative !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		touch-action: pan-y pinch-zoom; /* horizontal swipes switch projects */
	}

	/* The numbers are replaced by the arrows + bullets under the carousel */
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col1 {
		display: none !important;
	}

	/* Text column and image column: always shown, natural height */
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col2,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col3 {
		display: block !important;
		position: relative !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		overflow: hidden !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col2 {
		padding: 24px 22px 26px !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col3 {
		padding: 0 !important;
	}

	/* Slides: the open one is in the normal flow, the others are hidden */
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-data-inner-container[hidden] {
		display: none !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-data-inner-container:not([hidden]) {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		visibility: visible !important;
		transform: none !important;
		z-index: auto !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-data-inner-container:not([hidden]):not(.is-fading) {
		opacity: 1 !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-data-inner-container.is-fading {
		opacity: 0 !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-data-innerflex {
		display: flex !important;
		flex-direction: column !important;
		position: static !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-top,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-mid,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-details,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-link {
		position: static !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-top {
		margin: 0 0 14px !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-top h5 {
		margin: 0 !important;
		padding: 0 !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-details {
		padding: 0 0 18px !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-details br {
		display: none;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-details h4 {
		margin: 0 0 12px !important;
		padding: 0 !important;
		font-size: 28px;
		line-height: 1.1;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-details p {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 15px;
		line-height: 1.35;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-info-inner-link img {
		width: 120px !important;
		margin: 0 !important;
	}

	/* Image: a fixed 4:3 frame the picture fills (cropped, never stretched) */
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col3 .ath-pf-data-inner-container > a {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		overflow: hidden !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-col3 img {
		display: block !important;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		object-fit: cover !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Arrows + bullets: below the slides, always on top and clickable */
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 10px;
		position: relative !important;
		inset: auto !important;
		z-index: 5 !important;
		width: auto !important;
		height: auto !important;
		margin: 18px 0 0 !important;
		padding: 0 !important;
		clear: both;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-prev,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-next {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		position: static !important;
		flex: none;
		width: 44px !important;
		height: 44px !important; /* comfortable touch target */
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: #000 !important;
		cursor: pointer;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-prev::after,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-next::after,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-bullet::after {
		content: none !important; /* Divi adds an arrow icon to buttons */
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav svg {
		display: block;
		width: 18px;
		height: 18px;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-prev:hover,
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-next:hover {
		color: #509eb3 !important;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-bullets {
		display: flex !important;
		align-items: center;
		gap: 2px;
		position: static !important;
	}

	/* The visible bar is 14x6, the button around it is taller for fingers */
	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-bullet {
		display: block !important;
		position: relative !important;
		flex: none;
		width: 22px !important;
		height: 32px !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: none !important;
		box-shadow: none !important;
		cursor: pointer;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-bullet::before {
		content: '';
		position: absolute;
		top: 13px;
		left: 4px;
		width: 14px;
		height: 6px;
		background: #509eb3;
		opacity: max(0.2, calc(1 - var(--i, 0) * 0.2)); /* fades like the numbers */
		transition: background-color 0.2s, opacity 0.2s;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button.ath-pf-bullet.is-active::before {
		background: #000;
		opacity: 1;
	}

	.ath-portfolio-carousel[data-ath-portfolio] .ath-pf-nav button:focus-visible {
		outline: 2px solid #509eb3 !important;
		outline-offset: 0;
	}
}