/*
 * IVA Courses — стили главной страницы (front-page.php).
 * Загружается только на статической главной (is_front_page()).
 *
 * Переменные цветов/шрифтов, .container, .bg-white/.bg-dark/.bg-darkest,
 * .btn/.btn--fill/.btn--outline, .eyebrow, .section-title, .h1-text/.h2-text,
 * .hr/.hr-w/.hr-d — уже определены в общем assets/css/course.css (загружен
 * сайтвайд), здесь не дублируются.
 *
 * Разметка соответствует landing/main.html (wireframe), debug-классы
 * (.block/.bt/.settings-bar) заменены на нейтральный плейсхолдер — см.
 * .block.img-placeholder в assets/css/blog.css (тоже загружен сайтвайд
 * через блоки — здесь переопределять не нужно, тот же класс работает).
 */

.bg-black { background: var(--iva-black); }

.home-section { padding: 88px 0; }
.home-section--flush-top { padding-top: 0; }
.home-section--center { text-align: center; }
.section-desc { margin-top: 16px; font-size: 13px; line-height: 1.8; max-width: 560px; color: rgba(0,0,0,0.55); }
.section-desc.on-dark { color: rgba(255,255,255,0.55); }

/* ─── GRID HELPERS ─── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── HERO ─── */
.hero-bg { position: relative; background-size: cover; background-position: center; }
.hero-bg::before, .ov-bottom { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75)); }
.hero-bg:not([style*="background-image"]) { background: var(--iva-darker); }
/* padding-top/bottom only — .hero-bg-inner несёт класс .container, горизонтальный
   отступ должен остаться его (40/24/16px по брейкпоинтам, см. course.css).
   Раньше здесь стоял шорткат `padding: 96px 0 88px`, который обнулял
   горизонтальный отступ .container (0 в шорткате = left/right), из-за чего
   текст hero упирался в край экрана — заметнее всего на мобильном, где нет
   широких полей от max-width:1280px, которые маскируют это на десктопе. */
.hero-bg-inner { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 88px; }
.hero-content { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.h-tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.12); padding: 6px 12px; border-radius: 8px; }
.h-tag-label { opacity: 0.6; margin-right: 4px; }
.hero-content .h1-text { color: #fff; }
.hero-description { color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.8; max-width: 620px; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── О ИНСТИТУТЕ ─── */
.text-card { padding: 28px; border-radius: 14px; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); }
.text-card-body { font-size: 13px; line-height: 1.8; margin-top: 8px; color: rgba(0,0,0,0.7); }
.founder-note { margin-top: 16px; padding: 22px 28px; border-radius: 14px; background: rgba(0,0,0,0.02); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.founder-note-text { font-size: 13px; }

/* ─── ФОТОПОЛОСА / ВЫПУСКНИКИ ─── */
.photo-strip-cell { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; }
.photo-strip-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── ВЕБИНАР ─── */
.webinar-grid { align-items: center; }
.webinar-card { padding: 32px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); }
.webinar-dates { font-family: 'Bebas Neue', sans-serif; font-size: 34px; color: #fff; margin-top: 8px; }
.webinar-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.webinar-meta-value { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 4px; }
.webinar-price { color: var(--iva-red); font-weight: 700; }

/* ─── ПРОСТРАНСТВО ДО ПОСТУПЛЕНИЯ ─── */
.pre-admission-grid { gap: 48px; align-items: start; margin-bottom: 32px; }
.pre-admission-card { padding: 32px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); }
.pre-admission-card-btn { width: 100%; justify-content: center; margin-top: 16px; }
.dot-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.dot-row { display: flex; align-items: center; gap: 10px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--iva-red); flex-shrink: 0; }
.dot-row-text { font-size: 12px; color: rgba(255,255,255,0.7); }
.home-section .bg-white .dot-row-text,
.bg-white .dot-row-text { color: rgba(0,0,0,0.65); }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.metric-strip .metric-cell { padding: 22px 24px; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: none; display: flex; flex-direction: column; gap: 6px; }
.metric-strip .metric-cell:last-child { border-right: none; }
.metric-strip .metric-value { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: #fff; }
.metric-sub { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── МИССИЯ ─── */
.mission-box { max-width: 880px; margin: 0 auto; padding: 40px; text-align: left; }
.mission-statement { font-family: 'Bebas Neue', sans-serif; font-size: 32px; line-height: 1.28; margin-top: 8px; }
.mission-box .hr { margin: 20px 0; }

/* ─── НАШИ ПРОГРАММЫ ─── */
.program-card { display: block; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
.program-card-photo { aspect-ratio: 3/4; }
.program-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.program-card-body { padding: 20px; }
.program-card-subtitle { font-size: 11px; margin-top: 4px; color: rgba(255,255,255,0.5); }

/* ─── TAGLINE BANNERS ─── */
.tagline-banner { padding: 88px 0; text-align: center; }
.tagline-statement { max-width: 880px; margin: 0 auto; }
.tagline-banner .quote-attr { margin-top: 20px; }

/* ─── НУМЕРОВАННЫЕ КАРТОЧКИ (методология / ценности / факты основателя) ─── */
.numbered-card { padding: 22px; min-height: 180px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
.numbered-card--light { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
.numbered-card .card-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; margin-top: 4px; }
.numbered-card-desc { font-size: 11px; margin-top: 8px; color: rgba(0,0,0,0.55); }
.numbered-card:not(.numbered-card--light) .numbered-card-desc { color: rgba(255,255,255,0.5); }

/* ─── ЦИТАТА ОСНОВАТЕЛЯ ─── */
.quote-block { padding: 88px 0; text-align: center; }
.quote-text { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1.3; max-width: 780px; margin: 0 auto; color: #fff; }
.quote-attr { margin-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.5); }

/* ─── ОСНОВАТЕЛЬ ─── */
.founder-grid { display: grid; grid-template-columns: 0.8fr 1.5fr; gap: 48px; margin-top: 32px; }
.founder-photo { aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-role-title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; margin-top: 4px; }
.founder-facts { margin-top: 24px; }

/* ─── ФОРМА ЗАЯВКИ ─── */
.lead-grid { gap: 64px; align-items: center; }
.form-card { padding: 32px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 16px; }
.form-card .hr { margin: 0; }
.form-placeholder { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; padding: 24px 0; }

/* ─── FOOTER (используется сайтвайд, стили — см. конец assets/css/course.css) ─── */

/* ─── БРЕЙКПОИНТЫ ─── */
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.founder-grid { grid-template-columns: 1fr; }
	.founder-photo { max-width: 320px; }
}

@media (max-width: 768px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.pre-admission-grid, .lead-grid, .webinar-grid { grid-template-columns: 1fr; }
	.metric-strip { grid-template-columns: repeat(2, 1fr); }
	.metric-strip .metric-cell:nth-child(2n) { border-right: none; }
	.metric-strip .metric-cell { border-bottom: 1px solid rgba(255,255,255,0.1); }
	.home-section { padding: 56px 0; }
}

@media (max-width: 480px) {
	.hero-content { gap: 20px; }
	.h1-text { font-size: 30px; }
	.mission-statement, .quote-text { font-size: 24px; }
	.metric-strip { grid-template-columns: 1fr; }
	.metric-strip .metric-cell { border-right: none; }
	.tagline-statement { font-size: 22px; }
}