/* ============================================
   Podology Specialist Styles - Page Specific
   ============================================ */

/* Import Core Styles */
@import url('variables.css?v=b7df9c0');
@import url('reset.css?v=b7df9c0');
@import url('base.css?v=b7df9c0');
@import url('layout.css?v=b7df9c0');
@import url('components.css?v=b7df9c0');

/* ============================================
   Hero Section
   ============================================ */

.hero {
    background-color: var(--bg-off-white);
    padding: 60px 0;
}

/* Цвет мобильной карточки берётся с самого баннера — его печатает
   tools/hero-from-ref.js при сборке картинки. */
.hero.hero--bg-image { --hero-card-bg: #e9f0fa; }

/* Блоки sm-perks, sm-trust и le-geo — общие, живут в components.css. */

/* ============================================
   Видеозаметки студентов
   ============================================ */

/* Ролики вертикальные (9:16), поэтому ряд из четырёх, а не из двух. */
.pd-reels {
    margin-bottom: 56px;
}

.pd-reels__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.pd-reel {
    margin: 0;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-placeholder);
}

.pd-reel iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .pd-reels__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}