.intro-instructor__media {
    width: 20rem;
    height: 24rem;
}

.intro-instructor__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.about-mosaic__tile { opacity: 0; transform: translateY(1.5rem); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease; }
.about-mosaic.is-visible .about-mosaic__tile { opacity: 1; transform: none; }

.about-mosaic__caption { font-size: .875rem; line-height: 1.25rem; }
.about-mosaic__link i { transition: transform 250ms ease; }
.about-mosaic__link:hover i { transform: translateX(.25rem); }

.about-mosaic__area { aspect-ratio: 5 / 2; cursor: crosshair; touch-action: pan-y; }
.about-mosaic__area svg, .about-mosaic__mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-mosaic__area text { font-size: 12px; font-weight: 700; }
.about-mosaic__mini { height: 4.5rem; }

.about-mosaic__draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.about-mosaic__fade { opacity: 0; transition: opacity 900ms ease 900ms; }
.about-mosaic__col { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 900ms cubic-bezier(.2, .8, .2, 1); }
.about-mosaic__seg { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms cubic-bezier(.2, .8, .2, 1); }
.about-mosaic__arc { transition: stroke-dashoffset 1500ms cubic-bezier(.2, .8, .2, 1) 300ms; }
.about-mosaic__needle { transition: transform 1500ms cubic-bezier(.3, 1.3, .4, 1) 300ms; }
.about-mosaic__pulse { transform-box: fill-box; transform-origin: center; animation: about-mosaic-pulse 2.2s ease-out infinite; }
.about-mosaic__cursor { opacity: 0; transition: opacity 200ms ease; }
.about-mosaic__area.is-hover .about-mosaic__cursor { opacity: 1; }

.is-drawn .about-mosaic__draw { stroke-dashoffset: 0; }
.is-drawn .about-mosaic__fade { opacity: 1; }
.is-drawn .about-mosaic__col, .is-drawn .about-mosaic__seg { transform: none; }

@keyframes about-mosaic-pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .about-mosaic__tile, .about-mosaic__draw, .about-mosaic__fade, .about-mosaic__col, .about-mosaic__seg, .about-mosaic__arc, .about-mosaic__needle { transition: none; }
    .about-mosaic__tile { opacity: 1; transform: none; }
    .about-mosaic__pulse { animation: none; opacity: 0; }
}

.about-mosaic__tip, .about-mosaic__dot { opacity: 0; pointer-events: none; transition: opacity 200ms ease; white-space: nowrap; }
.about-mosaic__dot { width: 1rem; height: 1rem; }
.about-mosaic__area.is-hover .about-mosaic__tip, .about-mosaic__area.is-hover .about-mosaic__dot { opacity: 1; }

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.about-mosaic[hidden], .about-mosaic [hidden], .about-mosaic .hidden.d-none { display: none !important; }

/* value + unit suffix stay inside their card: smaller suffix, long words may break */
.about-mosaic__suffix { font-size: .55em; margin-left: .1em; }
.about-mosaic :has(> .about-mosaic__suffix) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* v23 — Bootstrap branch: same rhythm as Tailwind gap-lg + grid columns */
.numbered-step-grid-timeline__bs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .numbered-step-grid-timeline__bs-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .numbered-step-grid-timeline__bs-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Parity with Tailwind max-w-2xl on header block */
.numbered-step-grid-timeline__area-bw {
    max-width: 42rem;
}

.numbered-step-grid-timeline__min-shrink {
  min-width: 0;
}

/* values-storybook — zigzag alternation, organic blob shapes, hover motion */
/* Layout/transform/animation only — no colors here, theme colors applied via tw: */

@media (min-width: 768px) {
    .values-storybook__item:nth-child(even) {
        flex-direction: row-reverse;
    }
}

.values-storybook__blob-wrap {
    width: 8rem;
    height: 8rem;
    transition: transform 250ms ease;
}

@media (min-width: 640px) {
    .values-storybook__blob-wrap {
        width: 10rem;
        height: 10rem;
    }
}

.values-storybook__item:hover .values-storybook__blob-wrap {
    transform: scale(1.06);
}

.values-storybook__blob {
    position: absolute;
    inset: 0;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

.values-storybook__item:nth-child(even) .values-storybook__blob {
    border-radius: 58% 42% 37% 63% / 59% 56% 44% 41%;
}

.values-storybook__list {
    transition: transform 200ms ease;
}

.members-dual-ring__portrait {
    width: 6rem;
    height: 6rem;
}

.members-dual-ring__min-shrink {
  min-width: 0;
}

/* Карточка цитати — hover scale для обох фреймворків */
.quote-item-hover {
  transition: transform 0.3s ease;
}

.quote-item-hover:hover {
  transform: scale(1.05);
}