/* Joga */

/* Hero: photo pinned to the top (as on the original site) */
.yoga-hero .mb-hero__img { object-position: 50% 0; }

/* ---------- Ciało i duch (arched photos slider) ---------- */
.yoga-intro__wrap { display: flex; flex-direction: column; gap: 50px; }
.yoga-intro__head { display: flex; align-items: flex-end; gap: 75px; width: 100%; }
.yoga-intro__content { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; width: 85%; }
.yoga-intro__title { display: flex; flex-direction: column; gap: 10px; }
.yoga-intro__l1 { color: var(--mb-brown); font-size: 60px; font-weight: 400; }
.yoga-intro__l2 { color: var(--mb-brown); font-size: 60px; font-weight: 500; }
.yoga-intro__l3 { color: var(--mb-gold); font-size: 55px; font-weight: 500; }
.yoga-intro__text { max-width: 800px; }
.yoga-intro__text--bold { font-weight: 700; }
.yoga-intro__nav { display: flex; flex-direction: column; align-items: flex-end; width: 15%; }

.yoga-slider {
    --yoga-gap: 26px;
    --yoga-card: 450px;
    width: 100%;
    overflow: hidden;
}
.yoga-slider__track {
    display: flex;
    align-items: flex-start;
    gap: var(--yoga-gap);
    width: max-content;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.yoga-photo { flex: 0 0 var(--yoga-card); width: var(--yoga-card); overflow: hidden; border-radius: 999px 999px 32px 32px; }
.yoga-photo img { width: 100%; height: auto; }

@media (max-width: 1600px) {
    .yoga-intro__head { gap: 50px; }
    .yoga-intro__l1 { font-size: 40px; }
    .yoga-intro__l2, .yoga-intro__l3 { font-size: 35px; }
}
@media (max-width: 1249px) {
    .yoga-intro__content { gap: 15px; width: 80%; }
    .yoga-intro__nav { width: 30%; }
    .yoga-intro__l1 { font-size: 35px; }
}
@media (max-width: 1180px) {
    .yoga-slider { --yoga-gap: 20px; --yoga-card: 410px; }
}
@media (max-width: 967px) {
    .yoga-intro__wrap { gap: 25px; }
    .yoga-intro__head { flex-direction: column; gap: 25px; }
    .yoga-intro__content, .yoga-intro__nav { width: 100%; }
    .yoga-intro__l2 { font-size: 20px; }
    .yoga-intro__l3 { font-size: 25px; }
}
@media (max-width: 767px) {
    .yoga-slider { --yoga-gap: 14px; --yoga-card: 78vw; }
    .yoga-photo { border-radius: 999px 999px 26px 26px; }
}
@media (max-width: 514px) {
    .yoga-intro__wrap { padding-top: 25px; }
    .yoga-intro__l1 { font-size: 30px; }
    .yoga-intro__l2 { font-size: 25px; }
    .yoga-intro__l3 { font-size: 20px; }
}
@media (max-width: 420px) {
    .yoga-slider { --yoga-card: 84vw; }
}
@media (prefers-reduced-motion: reduce) {
    .yoga-slider__track { transition: none; }
}

/* ---------- Dlaczego joga? ---------- */
.yoga-why { background-image: var(--yoga-why-bg, none); background-size: cover; background-repeat: no-repeat; }
.yoga-why__wrap { display: flex; flex-direction: column; align-items: center; gap: 25px; }
.yoga-why__title { color: var(--mb-brown); font-size: 60px; font-weight: 400; }
.yoga-why__list { display: flex; align-items: stretch; justify-content: center; gap: 30px; width: 100%; }
.yoga-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 340px;
    margin-top: 116px;
    padding: 126px 48px 34px;
    border: 1px solid rgba(190, 166, 111, .16);
    border-radius: 29px;
    background: var(--mb-sand);
    box-shadow: 0 18px 36px rgba(76, 49, 31, .08), 0 4px 12px rgba(76, 49, 31, .035), inset 0 1px 0 rgba(255, 255, 255, .75);
    text-align: center;
}
.yoga-card__icon {
    position: absolute;
    top: -126px;
    left: 50%;
    width: 250px;
    height: 250px;
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}
.yoga-card__title { max-width: 420px; margin: 0 auto 12px; color: #4b2c1e; font-family: var(--mb-serif); font-size: clamp(23px, 1.82vw, 28px); font-weight: 600; line-height: 1.12; letter-spacing: -0.35px; }
.yoga-card__text { max-width: 350px; margin: 0 auto; color: #9a8173; font-size: 14px; line-height: 1.34; }

@media (min-width: 1500px) {
    .yoga-card { min-height: 345px; margin-top: 120px; padding: 128px 58px 34px; }
    .yoga-card__icon { top: -130px; width: 258px; height: 258px; }
    .yoga-card__title { font-size: 29px; }
}
@media (max-width: 1600px) {
    .yoga-why__title { font-size: 40px; }
}
@media (max-width: 1249px) {
    .yoga-why { background-position: 50% 0; }
    .yoga-why__wrap { gap: 15px; }
    .yoga-why__title { font-size: 35px; }
}
@media (max-width: 1200px) {
    .yoga-why__list { padding: 0 22px; }
    .yoga-card { min-height: 340px; margin-top: 104px; padding: 116px 34px 32px; }
    .yoga-card__icon { top: -114px; width: 226px; height: 226px; }
    .yoga-card__title { font-size: clamp(18px, 2vw, 22px); }
}
@media (max-width: 900px) {
    .yoga-why__list { flex-wrap: wrap; gap: 18px; padding: 12px 20px 34px; }
    .yoga-card { flex: 1 1 calc(50% - 9px); min-height: 335px; margin-top: 96px; padding: 110px 30px 32px; }
    .yoga-card__icon { top: -106px; width: 210px; height: 210px; }
}
@media (max-width: 640px) {
    .yoga-why__list { flex-direction: column; gap: 18px; padding: 10px 18px 38px; }
    .yoga-card { flex: 1 1 auto; width: 100%; min-height: 325px; margin-top: 96px; padding: 110px 26px 31px; border-radius: 28px; }
    .yoga-card__title { font-size: 22px; line-height: 1.13; }
    .yoga-card__text { max-width: 330px; font-size: 14px; }
}
@media (max-width: 514px) {
    .yoga-why__wrap { padding-top: 30px; padding-bottom: 30px; }
}
@media (max-width: 390px) {
    .yoga-card { margin-top: 88px; padding: 102px 20px 30px; }
    .yoga-card__icon { top: -98px; width: 194px; height: 194px; }
    .yoga-card__title { font-size: 20px; }
    .yoga-card__text { font-size: 13.5px; }
}

/* ---------- Sala jogi ---------- */
.yoga-hall__grid { display: flex; align-items: center; gap: 50px; width: 100%; }
.yoga-hall__media { width: 50%; }
.yoga-hall__img { width: 100%; border-radius: 10px; }
.yoga-hall__content { display: flex; flex-direction: column; align-items: flex-end; width: 50%; }
.yoga-hall__inner { display: flex; flex-direction: column; align-items: flex-end; gap: 40px; }
.yoga-hall__title { color: var(--mb-brown); font-size: 60px; font-weight: 500; text-align: right; }
.yoga-hall__text { max-width: 550px; color: var(--mb-brown); font-size: 20px; font-weight: 600; text-align: right; }
.yoga-hall__text--end { font-size: 18px; }
.yoga-hall__more { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; margin-top: 30px; }
.yoga-hall__muted { color: var(--mb-muted); font-size: 18px; text-align: right; }
@media (max-width: 1600px) {
    .yoga-hall__wrap { padding-top: 50px; padding-bottom: 50px; }
    .yoga-hall__title { font-size: 45px; }
    .yoga-hall__text, .yoga-hall__text--end { max-width: 450px; font-size: 15px; }
    .yoga-hall__muted { font-size: 15px; }
}
@media (max-width: 1249px) {
    .yoga-hall__wrap { padding-top: 30px; padding-bottom: 30px; }
    .yoga-hall__inner { gap: 15px; }
    .yoga-hall__title { font-size: 35px; }
    .yoga-hall__text, .yoga-hall__text--end { max-width: 400px; font-size: 14px; }
    .yoga-hall__muted { font-size: 14px; }
}
@media (max-width: 967px) {
    .yoga-hall__grid { flex-direction: column; gap: 25px; }
    .yoga-hall__media, .yoga-hall__content { width: 100%; }
    .yoga-hall__text, .yoga-hall__text--end { max-width: 100%; font-size: 15px; }
    .yoga-hall__muted { font-size: 15px; }
    .yoga-hall__more { margin-top: 15px; }
}
@media (max-width: 514px) {
    .yoga-hall__wrap { padding-top: 25px; }
    .yoga-hall__inner { align-items: center; }
    .yoga-hall__title { font-size: 27px; text-align: center; }
    .yoga-hall__text, .yoga-hall__muted { text-align: center; }
    .yoga-hall__text--end { font-size: 13px; }
}

/* ---------- Zajęcia z Julią Cmok + cennik ---------- */
.yoga-teacher__grid { display: flex; align-items: center; gap: 50px; width: 100%; }
.yoga-teacher__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 50%; }
.yoga-teacher__title { color: var(--mb-brown); font-size: 60px; font-weight: 400; }
.yoga-teacher__texts { display: flex; flex-direction: column; gap: 20px; }
.yoga-teacher__text { color: var(--mb-brown); font-size: 17px; font-weight: 500; }
.yoga-teacher__text--muted { color: var(--mb-muted); }
.yoga-teacher__btn { width: 100%; margin-top: 30px; padding: 10px 25px; border-radius: 33px; color: #fff; font-size: 18px; line-height: 1.5; }
.yoga-prices { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; padding: 0 40px; }
.yoga-prices__title { color: var(--mb-brown); font-family: var(--mb-sans); font-size: 22px; font-weight: 600; line-height: 1.3; }
.yoga-prices__list { display: flex; flex-direction: column; gap: 20px; }
.yoga-prices__row { color: var(--mb-muted); font-size: 18px; font-weight: 500; }
.yoga-prices__row strong { font-weight: 700; }
.yoga-teacher__media { width: 50%; }
.yoga-teacher__img { width: 100%; border-radius: 10px; }
@media (max-width: 1600px) {
    .yoga-teacher__title { font-size: 40px; }
    .yoga-teacher__text { font-size: 15px; }
    .yoga-teacher__btn { font-size: 16px; }
    .yoga-prices__title, .yoga-prices__row { font-size: 15px; }
}
@media (max-width: 1249px) {
    .yoga-teacher__wrap { padding-top: 50px; padding-bottom: 50px; }
    .yoga-teacher__content { gap: 10px; }
    .yoga-teacher__title { font-size: 35px; }
    .yoga-teacher__text { font-size: 13px; }
    .yoga-teacher__btn { margin-top: 20px; padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
    .yoga-prices { gap: 10px; }
    .yoga-prices__list { gap: 10px; }
    .yoga-prices__title, .yoga-prices__row { font-size: 14px; }
}
@media (max-width: 967px) {
    .yoga-teacher__grid { flex-direction: column-reverse; gap: 25px; }
    .yoga-teacher__content, .yoga-teacher__media { width: 100%; }
    .yoga-prices { padding: 0 0 0 20px; }
}
@media (max-width: 514px) {
    .yoga-teacher__wrap { padding-top: 25px; }
    .yoga-teacher__title { font-size: 30px; }
    .yoga-teacher__btn { font-size: 11px; }
    .yoga-prices { padding-left: 0; }
}