/**
 * Rólunk oldal — stílusok
 * Betöltés: csak is_page('rolunk') esetén (lásd functions.php)
 */

/* ==========================================================================
   HERO — Rólunk módosítók
   Az alap .famingo-hero stílusok a main.css-ben vannak (globális).
   ========================================================================== */

/* Figma: a Rólunk hero-ban nincs "Prémium bútorok" badge elem */
.famingo-hero--rolunk .famingo-hero__badge {
	display: none;
}

/* Figma: "SZIA..." badge — Group 33, x:122 y:292, 282×74px, #70BFFF, border-radius:10.5px
   A h1 első sora egy inline kék hátterű elembe van csomagolva.
   Padding: top/bottom a 74px magassághoz igazítva (70px font → ~2px); left: 19px (x:141−x:122) */
.famingo-hero__heading-badge {
	display: inline-block;
	background: var(--color-accent);
	border-radius: 11px;
	padding: 2px 20px 2px 19px;
	line-height: inherit;
}

/* Főoldal display:block + absolute layout helyett itt flex + align-items:center,
   hogy a szövegoszlop és a kép vertikálisan középre igazodjon egymáshoz. */
/* Hero container: 32px alul → 32+32=64px gap a következő section előtt */
.famingo-hero--rolunk .famingo-hero__container {
	padding-bottom: 32px;
}

@media (min-width: 1200px) {
	.famingo-hero--rolunk .famingo-hero__container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 48px 141px 32px;
		min-height: auto;
	}

	.famingo-hero--rolunk .famingo-hero__content {
		position: relative;
		left: auto;
		top: auto;
		width: 486px;
		flex-shrink: 0;
	}

	.famingo-hero--rolunk .famingo-hero__image-wrap {
		position: relative;
		right: auto;
		top: auto;
		width: 504px;
		max-width: 504px;
		flex-shrink: 0;
	}
}

/* Dekoráció az h1-en BELÜL van → h1-hez (position:relative) relatív pozíció.
   z-index:-1 → karikázás a szöveg MÖGÖTT. */
@media (min-width: 1200px) {
	.famingo-hero--rolunk .famingo-hero__decoration {
		left: auto;
		right: 0;
		top: 62px;
		width: 382px;
		z-index: -1;
	}
}

/* Betűméret csökkentve: "Kell egy bútor?" elférjen egy sorban 486px széles contentnél */
@media (min-width: 1200px) {
	.famingo-hero--rolunk .famingo-hero__heading {
		font-size: 58px;
	}

	.famingo-hero--rolunk .famingo-hero__text {
		margin-top: 56px;
	}
}

/* Figma: hero kép — tri-rounded mask, border-radius:86px */
.famingo-hero--rolunk .famingo-hero__image-wrap {
	border-radius: 86px;
	overflow: hidden;
	border: 1px solid #000000;
	box-shadow: var(--shadow-hard);
}

/* Figma: dekoratív nyíl — csak desktop, flex layout padding-top:48px-hoz igazítva */
.famingo-hero__arrow {
	display: none;
}

@media (min-width: 1200px) {
	.famingo-hero__arrow {
		display: block;
		position: absolute;
		left: 451px;
		top: 48px; /* flex layout padding-top:48px → nyíl a tartalom tetejéhez igazítva */
		width: 316px;
		height: auto;
		pointer-events: none;
	}
}

/* ==========================================================================
   BEMUTATKOZÁS SZEKCIÓ
   Figma: y:781–1532 | cím + dekoráció + bal kártya (616×525px) + jobb szöveges oszlop
   ========================================================================== */

.bemutatkozas-section {
	background: var(--color-background);
	padding: 32px var(--container-padding-mobile);
}

@media (min-width: 768px) {
	.bemutatkozas-section {
		padding: 32px var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.bemutatkozas-section {
		padding: 32px var(--container-padding-desktop);
	}
}

/* Cím felül, alatta kártya+szöveg sor */
.bemutatkozas-section__inner {
	max-width: 1232px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px; /* mobile */
}

@media (min-width: 1200px) {
	.bemutatkozas-section__inner {
		gap: 40px;
	}
}

/* Kártya + szöveg flex sor */
.bemutatkozas-section__cols {
	display: flex;
	flex-direction: column;
	gap: 24px; /* mobile */
}

@media (min-width: 768px) {
	.bemutatkozas-section__cols {
		gap: 32px;
	}
}

@media (min-width: 1200px) {
	.bemutatkozas-section__cols {
		flex-direction: row;
		align-items: center;
		gap: 37px; /* Figma: card right x:720, text left x:757 → 37px */
	}
}

/* ── CÍM + DEKORÁCIÓ ── */
/* Figma: American Typewriter → Lora, 700, 70px, line-height:1em, CENTER */
.bemutatkozas-section__header {
	text-align: center;
}

.bizalmat-section__quote {
	font-family: var(--font-display);
	font-size: clamp(26px, 6vw, 70px);
	font-weight: 700;
	line-height: 1.1em;
	color: var(--color-text);
	margin: 0 0 10px; /* Figma: ~10px gap szöveg és dekoráció között */
}

/* "egyedi koncepciókat" — #EE4C72 magenta */
.bizalmat-section__quote-highlight {
	color: var(--color-primary);
}

/* Figma: 737×33px kétvonalas dekoráció — centered */
.bizalmat-section__decoration {
	display: block;
	margin: 0 auto;
	max-width: 737px;
	width: 100%;
	height: auto;
}

/* ── BAL KÁRTYA ── */
/* Figma: 616×525px, #F0F0F0, border-radius:40px, border:1px #000, hard shadow */
.bemutatkozas-section__card {
	background: var(--color-card-bg);
	border: 1px solid #000000;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-hard);
	padding: 24px 20px; /* mobile */
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.bemutatkozas-section__card {
		padding: 32px 28px; /* tablet */
	}
}

@media (min-width: 1200px) {
	.bemutatkozas-section__card {
		padding: 46px 38px; /* Figma: desktop */
		width: 616px;
	}
}

/* Figma: American Typewriter → Lora, 700, 45px, line-height:1.333em */
.bemutatkozas-section__card-heading,
.bemutatkozas-section__text {
	text-align: left;
}

.bemutatkozas-section__card-heading {
	font-family: var(--font-display);
	font-size: clamp(22px, 3.5vw, 45px);
	font-weight: 700;
	line-height: 1.333em;
	color: var(--color-text);
	margin: 0 0 16px; /* mobile */
}

@media (min-width: 1200px) {
	.bemutatkozas-section__card-heading {
		margin: 0 0 32px; /* Figma desktop */
	}
}

/* Figma: DIN Alternate → Barlow Condensed, 700, 24px, line-height:2.292em (~55px sor) */
.bemutatkozas-section__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bemutatkozas-section__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-body);
	font-size: 18px; /* mobile */
	font-weight: 700;
	line-height: 1.6em;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.bemutatkozas-section__list li {
		font-size: 20px;
		line-height: 1.8em;
	}
}

@media (min-width: 1200px) {
	.bemutatkozas-section__list li {
		gap: 16px; /* Figma: 41-25=16px */
		font-size: 24px;
		line-height: 2.292em;
	}
}

/* Figma: 25×25px csillag ikon, #70BFFF, stroke:1px #000, shadow:0 2px 0 #000 */
.bemutatkozas-section__list li img {
	flex-shrink: 0;
	width: 25px;
	height: 25px;
	filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 1));
}

/* ── JOBB SZÖVEGES OSZLOP ── */
/* Figma: 542×393px, DIN Alternate → Barlow Condensed 700 16px, line-height:1.875em
   align-self:center → (525–393)/2=66px felső offset a kártyától */
.bemutatkozas-section__text {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.875em;
	color: var(--color-text);
	flex-shrink: 0;
}

@media (min-width: 1200px) {
	.bemutatkozas-section__text {
		width: 542px;
		align-self: center;
	}
}

.bemutatkozas-section__text p + p {
	margin-top: 1.5em;
}

/* ==========================================================================
   MOTTÓ / IDÉZET BLOKK
   ========================================================================== */

.motto-section {
	background: var(--color-card-bg);
	text-align: center;
}

.motto-section__quote {
	border: none;
	padding: 0;
	margin: 0;
}

.motto-section__quote p {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
	margin: 0;
}

/* ==========================================================================
   TESTIMONIALS — Ügyfél visszajelzések
   Figma: y:1590–2079 | rózsaszín kártya (1232×489px) belül carousel + nyíl nav
   ========================================================================== */

/* Külső wrapper — oldalak padding */
.testimonials-section {
	padding: 32px var(--container-padding-mobile);
	background: var(--color-background);
}

@media (min-width: 768px) {
	.testimonials-section {
		padding: 32px var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.testimonials-section {
		padding: 32px var(--container-padding-desktop);
	}
}

/* Figma: 1232×489px, #B93F71, border-radius:40px, border:1px #000, hard shadow */
.testimonials-section__inner {
	max-width: 1232px;
	margin: 0 auto;
	background: var(--color-primary-dark);
	border: 1px solid #000000;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-hard);
	position: relative;
	overflow: hidden;
	padding: 24px 0 28px; /* mobile */
}

@media (min-width: 1200px) {
	.testimonials-section__inner {
		padding: 35px 0 40px; /* Figma desktop */
	}
}

/* Figma: dekoratív radial glow ellipszis (525×489px, 42.6% szélesség) */
.testimonials-section__inner::before {
	content: '';
	position: absolute;
	left: 28%;
	top: 0;
	width: 43%;
	height: 100%;
	background: radial-gradient( circle, rgba(238, 76, 114, 0.9) 0%, rgba(238, 76, 114, 0) 70% );
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
}

/* Figma: "Ügyfél visszajelzések" — American Typewriter → Lora, 700, 45px, #fff, center */
.testimonials-section__heading {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 45px);
	font-weight: 700;
	line-height: 1.222em;
	color: #ffffff;
	text-align: center;
	margin: 0 0 28px;
	position: relative;
	z-index: 1;
}

/* Figma: "visszajelzések" — #70BFFF (accent), kétvonalas SVG aláhúzással */
.testimonials-section__heading-highlight {
	color: var(--color-accent);
	position: relative;
	display: inline-block;
}

.testimonials-section__heading-highlight::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 20px;
	background: url( '../../images/visszajelzesek-underline.svg' ) no-repeat left center / 100% auto;
	pointer-events: none;
}

/* Carousel viewport — overflow hidden, de padding + negatív margin hogy
   a box-shadow (0px 5px 0px 0px) ne legyen levágva az overflow:hidden által.
   Az overflow:hidden a padding-edge-ig vág → 3px top + 7px bottom elég a
   border(1px) + shadow(5px) láttatásához. */
.testimonials-section__carousel-wrap {
	overflow: hidden;
	position: relative;
	z-index: 1;
	padding: 3px 16px 7px; /* mobile: kisebb oldal-padding */
	margin: -3px 0 -7px;
}

@media (min-width: 1200px) {
	.testimonials-section__carousel-wrap {
		padding: 3px 36px 7px; /* Figma: első kártya x=36px */
	}
}

/* Track — flex sor, transition a JS transform-hoz */
.testimonials-section__track {
	display: flex;
	flex-direction: row;
	gap: 20px; /* mobile */
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

@media (min-width: 1200px) {
	.testimonials-section__track {
		gap: 73px; /* Figma: kártyák között 73px (577-504) */
	}
}

/* Figma: 504×220px, #F0F0F0, border-radius:40px, border:1px #000, hard shadow */
.testimonials-section__item {
	flex: 0 0 260px; /* mobile alap */
	background: var(--color-card-bg);
	border: 1px solid #000000;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-hard);
	padding: 20px 18px; /* mobile */
}

@media (min-width: 768px) {
	.testimonials-section__item {
		flex: 0 0 504px;
		padding: 28px 36px; /* tablet */
	}
}

@media (min-width: 1200px) {
	.testimonials-section__item {
		padding: 35px 43px; /* Figma desktop */
	}
}

/* Figma: DIN Alternate → Barlow Condensed, 700, 16px, lineHeight:1.5625em */
.testimonials-section__quote {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5625em;
	color: var(--color-text);
	margin: 0;
}

/* Navigáció — [bal nyíl] [dots] [jobb nyíl], a pink kártya alján
   Figma: nav group 539px széles, centered (x=451–990 a 1232px kártyán) */
.testimonials-section__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 539px;
	max-width: 90%;
	margin: 32px auto 0;
	position: relative;
	z-index: 1;
}

/* Nyíl gombok */
.testimonials-section__btn {
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

.testimonials-section__btn:hover {
	opacity: 0.7;
}

/* Figma: 5 dot, ~10px, gap:8px; első dot #000 (aktív), többi #D9D9D9 */
.testimonials-section__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.testimonials-section__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D9D9D9;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.25s;
	flex-shrink: 0;
}

.testimonials-section__dot--active {
	background: #000000;
}

/* ==========================================================================
   ZÁRÓ CTA
   ========================================================================== */

.cta-section {
	background: var(--color-text);
	text-align: center;
}

.cta-section h2,
.cta-section .wp-block-heading {
	color: #ffffff;
	margin-bottom: 32px;
}

.cta-section .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #ffffff;
	color: var(--color-primary);
	border-color: #ffffff;
}