/*
 Theme Name:   Bricks Child Theme (BEM Rewrite)
 Theme URI:    https://bricksbuilder.io/
 Description:  BEM-structured version of the original CSS.
 Author:       Bricks + BEM
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {	
	--font-display: 'Humane', sans-serif; 
  	--font-main: 'Delight', sans-serif;    
	
    --text-m: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
    --text-l: clamp(5.6rem, calc(5.93vw + 3.7rem), 12rem);
    --text-xl: clamp(4rem, calc(18.52vw + -1.93rem), 24rem);
    --text-2xl: clamp(12rem, calc(37.04vw + 0.15rem), 52rem);
	
	--space-2xs: clamp(0.8rem, calc(0vw + 0.8rem), 0.8rem);
    --space-xs: clamp(1rem, calc(0.19vw + 0.94rem), 1.2rem);
    --space-s: clamp(1.6rem, calc(0.74vw + 1.36rem), 2.4rem);
    --space-m: clamp(2rem, calc(1.11vw + 1.64rem), 3.2rem);
    --space-l: clamp(2.4rem, calc(1.48vw + 1.93rem), 4rem);
    --space-xl: clamp(3.2rem, calc(2.22vw + 2.49rem), 5.6rem);
    --space-2xl: clamp(4rem, calc(2.22vw + 3.29rem), 6.4rem);
    --space-3xl: clamp(5.6rem, calc(3.7vw + 4.42rem), 9.6rem);
    --space-4xl: clamp(8rem, calc(7.41vw + 5.63rem), 16rem);
    --space-5xl: clamp(10rem, calc(12.96vw + 5.85rem), 24rem);
	
	--color-bg-primary: #dcf2f1;
	--color-text-primary: #1a1a1a;
	--color-text-primary--50: rgba(26,26,26,0.5);
	--color-accent: #e8ff00;
	--color-accent-secondary: #8d3a63;	
}

/*==========GENERAL==========*/
.u-pos-relative {
  position: relative;
}

.u-pos-absolute {
  position: absolute;
}

.u-overflow-hidden {
  overflow: hidden;
}

.u-full-width {
  width: 100%;
}

.u-display--block {
	display: block;
}

.u-flex--right {
  display: flex;
  justify-content: flex-end; /* Tlačí obsah doprava */
  width: 100%;
}

/*max width*/
.u-max-w--560 {
	width: 100%;
	max-width: 64rem;
}

.u-max-w--640 {
	width: 100%;
	max-width: 64rem;
}

.u-max-w--720 {
	width: 100%;
	max-width: 72rem;
}

/*==========LAYOUT==========*/
.l-section--light {
	padding-top: var(--space-4xl);
	padding-bottom: var(--space-4xl);
}

.l-section--dark {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

/*==========TEXTS==========*/
.text--italic {
  font-style: italic;
}

.text--uppercase {
  text-transform: uppercase;
}

.text--right {
  text-align: right;
}

.text--left {
  text-align: left;
}

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

.text--bold {
  font-weight: 700;
}

.text--lh1 {
	line-height: 1;
}


BODY {
	font-family: var(--font-main);
	font-size: var(--text-m);
	line-height: 1.5;
}

.text--l, .text--xl, .text--2xl {
	font-family: var(--font-display);
}

.text--l {
  	font-size: var(--text-l);
	line-height: 1;
	font-weight: 400;
}

.text--xl {
  	font-size: var(--text-xl);
	line-height: 1;
}

.text--2xl {
    font-size: var(--text-2xl);
	line-height: .7;
}

.text--light {
	color: var(--color-bg-primary);
}

/*==========COLORS==========*/
.color-bg--primary {
  color: var(--color-bg-primary);
}

.color-text--primary {
  color: var(--color-text-primary);
}

.color-accent {
  color: var(--color-accent);
}

.color-accent--secondary {
  color: var(--color-accent-secondary);
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-accent-secondary); /* Tvoje fialová */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

/*==========GRID==========*/
.grid {
  display: grid;
  width: 100%;
}

.grid--2-cols { grid-template-columns: repeat(2, 1fr); }
.grid--3-cols { grid-template-columns: repeat(3, 1fr); }
.grid--4-cols { grid-template-columns: repeat(4, 1fr); }
.grid--5-cols { grid-template-columns: repeat(5, 1fr); }
.grid--6-cols { grid-template-columns: repeat(6, 1fr); }
.grid--7-cols { grid-template-columns: repeat(7, 1fr); }
.grid--8-cols { grid-template-columns: repeat(8, 1fr); }
.grid--9-cols { grid-template-columns: repeat(9, 1fr); }
.grid--10-cols { grid-template-columns: repeat(10, 1fr); }
.grid--11-cols { grid-template-columns: repeat(11, 1fr); }
.grid--12-cols { grid-template-columns: repeat(12, 1fr); }

.gap--s { grid-gap: var(--space-s); }
.gap--m { grid-gap: var(--space-m); }
.gap--l { grid-gap: var(--space-l); }
.gap--xl { grid-gap: var(--space-xl); }

.col-gap--s { grid-column-gap: var(--space-s); }
.col-gap--l { grid-column-gap: var(--space-l); }

.row-gap--s { grid-row-gap: var(--v--space-s); }
.row-gap--m { grid-row-gap: var(--v--space-m); }
.row-gap--l { grid-row-gap: var(--v--space-l); }
.row-gap--xl { grid-row-gap: var(--v--space-xl); }
.row-gap--2xl { grid-row-gap: var(--v--space-2xl); }
.row-gap--3xl { grid-row-gap: var(--v--space-3xl); }
.row-gap--4xl { grid-row-gap: var(--v--space-4xl); }

.grid--stretch {
  align-items: stretch;
}

.col-span--2 { grid-column: auto / span 2; }
.col-span--3 { grid-column: auto / span 3; }
.col-span--4 { grid-column: auto / span 4; }
.col-span--5 { grid-column: auto / span 5; }
.col-span--6 { grid-column: auto / span 6; }
.col-span--7 { grid-column: auto / span 7; }
.col-span--8 { grid-column: auto / span 8; }
.col-span--9 { grid-column: auto / span 9; }
.col-span--10 { grid-column: auto / span 10; }
.col-span--11 { grid-column: auto / span 11; }
.col-span--12 { grid-column: auto / span 12; }

.col-start--2 { grid-column-start: 2; }
.col-start--3 { grid-column-start: 3; }
.col-start--4 { grid-column-start: 4; }
.col-start--5 { grid-column-start: 5; }
.col-start--6 { grid-column-start: 6; }
.col-start--7 { grid-column-start: 7; }
.col-start--8 { grid-column-start: 8; }
.col-start--9 { grid-column-start: 9; }
.col-start--10 { grid-column-start: 10; }
.col-start--11 { grid-column-start: 11; }
.col-start--12 { grid-column-start: 12; }

.row-span--2 { grid-row: auto / span 2; }
.row-span--3 { grid-row: auto / span 3; }
.row-span--4 { grid-row: auto / span 4; }
.row-span--5 { grid-row: auto / span 5; }

.row-start--2 { grid-row-start: 2; }
.row-start--3 { grid-row-start: 3; }
.row-start--4 { grid-row-start: 4; }

.grid--rows-equal { grid-auto-rows: 1fr; }

@media (max-width: 991px) {
  .grid--l-1-col { grid-template-columns: 1fr; }
  .grid--l-2-cols { grid-template-columns: repeat(2, 1fr); }
  .col-span--l-1 { grid-column: auto / span 1; }
  .col-span--l-2 { grid-column: auto / span 2; }
	.col-start--l-2 { grid-column-start: 2; }
  .row-start--l-1 { grid-row-start: 1; }
  .row-start--l-2 { grid-row-start: 2; }
  .row-start--l-3 { grid-row-start: 3; }
  .row-span--l-1 { grid-row: auto / span 1; }
  .grid--rows-equal { grid-auto-rows: auto; }
}

@media (max-width: 767px) {
  .grid--m-1-col { grid-template-columns: 1fr; }
  .grid--m-2-cols { grid-template-columns: repeat(2, 1fr); }
  .grid--m-4 { grid-template-columns: repeat(4, 1fr); }
  .grid--m-5 { grid-template-columns: repeat(5, 1fr); }
  .grid--m-7 { grid-template-columns: repeat(7, 1fr); }
  .col-span--m-1 { grid-column: auto / span 1; }
  .col-span--m-3 { grid-column: auto / span 3; }
  .col-span--m-5 { grid-column: auto / span 5; }
  .col-start--m-2 { grid-column-start: 2; }
  .row-start--m-1 { grid-row-start: 1; }
  .row-start--m-2 { grid-row-start: 2; }
}

@media (max-width: 478px) {
  .grid--s-1 { grid-template-columns: 1fr; }
  .grid--s-2 { grid-template-columns: repeat(2, 1fr); }
  .col-span--s-1 { grid-column: auto / span 1; }
  .col-start--s-1 { grid-column-start: 1; }
  .row-gap--s-xl { grid-row-gap: var(--v--space-xl); }
  .row-gap--s-3xl { grid-row-gap: var(--v--space-3xl); }
  .row-start--s-2 { grid-row-start: 2; }
}

.center-items {
	justify-items: center;
}

/*==========SPACING==========*/

/* --- MARGIN BOTTOM --- */
.mb--2xs { margin-bottom: var(--space-2xs); }
.mb--xs { margin-bottom: var(--space-xs); }
.mb--s { margin-bottom: var(--space-s); }
.mb--m { margin-bottom: var(--space-m); }
.mb--l { margin-bottom: var(--space-l); }
.mb--xl { margin-bottom: var(--space-xl); }
.mb--2xl { margin-bottom: var(--space-2xl); }
.mb--3xl { margin-bottom: var(--space-3xl); }
.mb--4xl { margin-bottom: var(--space-4xl); }
.mb--5xl { margin-bottom: var(--space-5xl); }

/* --- PADDING FULL --- */
.p--s { padding: var(--space-s); }
.p--m { padding: var(--space-m); }
.p--l { padding: var(--space-l); }
.p--xl { padding: var(--space-xl); }

/* --- PADDING TOP --- */
.pt--2xs { padding-top: var(--space-2xs); }
.pt--xs { padding-top: var(--space-xs); }
.pt--s { padding-top: var(--space-s); }
.pt--m { padding-top: var(--space-m); }
.pt--l { padding-top: var(--space-l); }
.pt--xl { padding-top: var(--space-xl); }
.pt--2xl { padding-top: var(--space-2xl); }
.pt--3xl { padding-top: var(--space-3xl); }
.pt--4xl { padding-top: var(--space-4xl); }

/* --- PADDING BOTTOM --- */
.pb--xs { padding-bottom: var(--space-xs); }
.pb--s { padding-bottom: var(--space-s); }
.pb--m { padding-bottom: var(--space-m); }
.pb--l { padding-bottom: var(--space-l); }
.pb--xl { padding-bottom: var(--space-xl); }
.pb--2xl { padding-bottom: var(--space-2xl); }
.pb--3xl { padding-bottom: var(--space-3xl); }
.pb--4xl { padding-bottom: var(--space-4xl); }


/* --- PADDING SIDES (R, L, X) --- */
.pr--s { padding-right: var(--space-s); }
.pl--s { padding-left: var(--space-s); }

.px--s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px--m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px--l { padding-left: var(--space-l); padding-right: var(--space-l); }
.px--xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* --- PADDING Y (Vertical) --- */
.py--xs  { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }


/* Mobile Portrait (max 478px) */
@media (max-width: 478px) {
  .mb-s--s { margin-bottom: var(--space-s); }
  .mt-s--s { margin-top: var(--space-s); }
  .m-s--none { margin: 0; }  
  .px-s--none { padding-left: 0; padding-right: 0; }
}

/* Tablet (max 991px) */
@media (max-width: 991px) {
  .px-m--none { padding-left: 0; padding-right: 0; }
}


/*==========BORDERS==========*/
.border-b--dark {
	border-bottom: 1px solid var(--color-text-primary);
}

.border-b--dark--50 {
	border-bottom: 1px solid var(--color-text-primary--50);
}

.border-b--light {
	border-bottom: 1px solid var(--color-bg-primary);
}


/*ODTUD DOLU JE TREBA UPRAVIT*/



/*==========BUTTONS & LINKS==========*/
.btn-primary, #fluentform_3 .ff-btn-submit {
	color: var(--color-text-primary);
	background-color: var(--color-accent);
	padding: var(--space-xs) var(--space-l);
	min-height: 5.6rem;
	align-self: flex-start;
	border: 2px solid var(--color-text-primary);
	filter: drop-shadow(.8rem .8rem var(--color-text-primary));
	justify-content: center;
	transition: filter 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#fluentform_3 .ff-btn-submit {
	border-radius:0;	
}

.btn-primary:hover, #fluentform_3 .ff-btn-submit:hover {
    transform: translate(.8rem, .8rem);
    filter: drop-shadow(0 0 var(--color-text-primary));
}


.ff-default .ff_btn_style:focus, .ff-default .ff_btn_style:hover {
	opacity: 1;
}

/*menu links*/
/* Základní odkaz */
.nav-sketch {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
}

/* Nastavení SVG linky - ASYMETRICKÉ UMÍSTĚNÍ */
.nav-sketch__svg {
    position: absolute;
    top: 73%; 
    left: -23%; 
    /* Nastavení fixní velikosti, aby se to neroztáhlo na 100% */
    width: 100%; /* Roztažení na šířku slova, ALE díky preserveAspectRatio se oblouček posune */
    height: 18px; /* Výška SVG kontejneru */
    
    pointer-events: none;
    fill: none;
    stroke: var(--color-accent-secondary);
    stroke-width: 2px;
}

.nav-sketch__svg path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.2s cubic-bezier(0.1, 1, 0.3, 1);
}

.nav-sketch:hover .nav-sketch__svg path {
    stroke-dashoffset: 0;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.4, 1);
}


/*footer mail link*/
.footer-mail-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.footer-mail-link__text {
	font-family: var(--font-display);
	font-size: var(--text-l);
	text-transform: uppercase;
	line-height:1;
}

.footer-mail-link__svg {
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
    height: 20px;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    /* Pojistka, aby to, co je za viewBoxem (99+), bylo fakt uříznuté */
    overflow: hidden; 
}

.footer-mail-link__svg path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1; 
    transition: stroke-dashoffset 0.25s cubic-bezier(0.2, 1, 0.3, 1);
    
    /* DŮLEŽITÉ: Ujisti se, že tady NENÍ stroke-linecap: round; */
    stroke-linecap: butt; 
}

.footer-mail-link:hover .footer-mail-link__svg path {
    stroke-dashoffset: 0;
    /* Při hoveru ještě o chlup rychleji (0.2s) */
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.1, 1, 0.4, 1);
}


/*==========STYLING==========*/

.changing-text {
	font-weight: 700;
}

.steps, .services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-l);
	width: 100%;
}

/*services section*/
.services__row {
	grid-column: auto / span 2;
    grid-column-start: 2;
	display: grid;
  	grid-template-columns: 1fr 1fr;
  	column-gap: var(--space-l);
}

.services__titles {
	grid-column-start: 2;
}

.services__descriptions {
	position: relative;
	transition: height 0.4s ease; 
}

.services__title {
	font-family: var(--font-display);
	font-size: var(--text-l);
  	margin: 0;
  	line-height: 1; /* Aby lícoval s horní hranou popisu */
  	transition: opacity 0.3s ease;
	font-weight: 400;
	text-transform: uppercase;
	cursor:pointer;
	opacity: .5;
	margin-bottom: -.1em;
}

/* Aktivní titulek */
/*.services__row.is-active .services__title {
	opacity: 1;
}*/

.services__title.is-active {
    opacity: 1;
}

.services__content {
  	position: relative;
  	min-height: 1.2em; /* Pojistka, aby pravá strana nezmizela */
}

.services__desc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* ZRUŠIT: transition: opacity ... (pokud tam je) */
    will-change: transform, opacity;
}

/* --- MOBILNÍ VERZE (ROZPAD POD SEBE) --- */
@media (max-width: 991px) {
  .services__row {
	  display: block; /* Zrušíme grid, půjdou pod sebe */
      margin-bottom: var(--space-l);
  }
	
  .services__title {
      opacity: 1 !important; /* Na mobilu vše čitelné */
      margin-bottom: var(--space-xs);
  }

  .services__content {
      position: static; /* Zrušíme relativní pozici */
  }

  .services__desc {
      position: static; /* Text už není absolutní, ale teče v dokumentu */
      opacity: 1;
      visibility: visible;
    transform: none;
      margin-top: var(--space-xs); /* Mezera mezi názvem a textem */
  }
}

.services__title:hover,
.services__title.is-active {
    opacity: 1; /* Aktivní nebo pod myší svítí naplno */
}

/*steps section*/
.steps__item {
	grid-column: auto / span 2;
    grid-column-start: 2;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-l);	
	padding-top: var(--space-s);
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-text-primary--50);
}

.steps__number {
	font-family: var(--font-display);
	font-size: var(--text-l);
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: -0.15em;
}

.steps__note {
	grid-column: auto / span 2;
	grid-column-start: 2;
	width: 100%;
	max-width: 56rem;	
	margin-top: var(--space-s);
}

/*pricing section*/
.pricing:not(:last-child) {
	margin-bottom: var(--space-4xl);
}

.pricing__grid-top, .pricing__grid-bottom {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-l);
	width: 100%;	
}

.pricing__grid-top {
	padding-bottom: var(--space-s);
	border-bottom: 1px solid var(--color-bg-primary);
}

.pricing__header-wrapper {
	grid-column: auto / span 2;
	grid-column-start: 2;
}

.pricing__title {
	font-family: var(--font-display);
	font-size: var(--text-l);
  	margin: 0;
  	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
}

.pricing__desc {
	width: 100%;
	max-width: 56rem;
}

.pricing__grid-bottom {
	padding-top: var(--space-s);
}

.pricing__list ul {
	list-style: none;
  	padding: 0;
  	margin: 0;
}

.pricing__list ul li {
  	position: relative;
  	padding-left: 2.4rem; /* Mezera pro čtvereček */
	margin-bottom: var(--space-2xs); /* Rozestup mezi řádky */
  	line-height: 1.4;
}

.pricing__list ul li::before {
  	content: "";
  	position: absolute;
  	left: 0;
  	top: 0.6em; 
  	width: 8px;
  	height: 8px;
  	background-color: var(--color-accent);
}

.pricing__services-wrap {
	display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
	margin-bottom: var(--space-xl);
}

.pricing__service {
	display: inline-block;
	background-color: var(--color-accent-secondary);
	border: 1px solid var(--color-bg-primary);
	padding: var(--space-2xs);
	filter: drop-shadow(.4rem .4rem var(--color-bg-primary));
	border-radius: 40px;
	line-height: 1;
}

.honza, .tomas {
	position: relative;
	width: 100%;
}

.honza__img-wrapper, .tomas__img-wrapper {
	position: relative;
	min-height: 16rem;
}
.honza__img-wrapper { margin-top: var(--space-xl); }
.tomas__img-wrapper { margin-bottom: var(--space-xl); }

.honza__img-clip, .tomas__img-clip {
	position: absolute;
	width: 100%;
	aspect-ratio: 3 / 1;
	min-height: 16rem;
	overflow: hidden;
	transition: aspect-ratio 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.honza__img-clip { bottom: 10%; }
.tomas__img-clip { top: 0; }

.honza__img, .tomas__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(2.7);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.honza__img { 
	object-position: center 50%;
	transform-origin: center 50%;
}

.tomas__img { 
	object-position: center 30%;
	transform-origin: center 30%;
}

.honza__img-wrapper:hover .honza__img-clip,
.tomas__img-wrapper:hover .tomas__img-clip {
	aspect-ratio: 3 / 4;
}
.honza__img-wrapper:hover .honza__img,
.tomas__img-wrapper:hover .tomas__img {
	transform: scale(1);
	/*object-position: center;*/
}


.testimoinals--item {
	display: flex;
	flex-direction: column;
	align-items: space-between;
	padding: var(--v--space-m);
	border: 1px solid var(--v--color--secondary-40);
}

.testimoinals--text {
	margin-bottom: var(--v--space-m);
}

/*teaching area*/
.image-wrapper {
	position: relative;
  	width: 100%;
	display: grid;
}

.image-area {
	grid-area: 1 / 1 / -1 / -1;
  	object-fit: cover;
	aspect-ratio: 4 / 3;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	transition: opacity 0.3s ease;
  	position: relative;
  	z-index: 0;
}

.image-visible {
	opacity: 1;
  	z-index: 1;
}

.image-small {
	display:none;
	aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
	.image-small {
		display:block;
	}
}

.area-mark {
	background-color: #D5896F;
	width: 0px;
	opacity: 0;
	transition: width .2s ease-in-out, opacity .2s ease-in-out;
}

.area-title {
	transition: padding-left .2s ease-in-out;	
}

.area-title {
	border-left-width: 0px;
	border-left-color: #D5896F;
	border-left-style: solid;
}

.area-title-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.area-icon {
	transition: transform .3s ease-in-out;
}


.area:hover .area-icon {
	transform: translate3d(8px, 0, 0);
}

.area:hover .area-title {
	padding-left: var(--v--space-m);
}

.area:hover .area-mark {
	width: 5px;
	opacity: 1;
}


/*==========CUSTOMIZING==========*/
#brxe-lovimt .splide__arrow--next, #brxe-lovimt .splide__arrow--prev,
#brxe-xbuwbm .splide__arrow--next, #brxe-xbuwbm .splide__arrow--prev {
	transition: background-color .3s ease-in-out;
}

#brxe-lovimt .splide__arrow--next:hover, #brxe-lovimt .splide__arrow--prev:hover,
#brxe-xbuwbm .splide__arrow--next:hover, #brxe-xbuwbm .splide__arrow--prev:hover {
	background-color: #D5896F;
}

#fluentform_3_success {
	border: 0;
	box-shadow: unset;
	color: var(--v--color--primary);
}