/*
Theme Name: UNIT School
Theme URI: https://unitschool.com.ua
Author: UNIT School
Description: Блоковая тема онлайн IT-школы UNIT с полной поддержкой редактора сайта.
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: unit-school
*/

:root {
  --unit-red: #f20d24;
  --unit-red-dark: #c90017;
  --unit-ink: #09090b;
  --unit-surface: #151518;
  --unit-paper: #f4f1ec;
  --unit-white: #fff;
  --unit-muted: #68666a;
  --unit-line: rgba(9,9,11,.14);
  --unit-radius: 24px;
  --unit-shadow: 0 24px 70px rgba(9,9,11,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--unit-paper);
  color: var(--unit-ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.wp-site-blocks { overflow: clip; }
.wp-site-blocks > * { margin-block-start: 0; }
.unit-container { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }

.unit-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: 78px;
  padding: 0 max(24px, calc((100vw - 1220px) / 2));
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(9,9,11,.95);
  color: #fff;
  backdrop-filter: blur(16px);
}
.unit-header .wp-block-site-logo img { width: 150px; max-height: 50px; object-fit: contain; object-position: left center; }
.unit-header .wp-block-navigation { font-size: 13px; font-weight: 800; }
.unit-header .wp-block-navigation a { color: #d2d2d5; }
.unit-header .wp-block-navigation a:hover { color: #fff; }
.unit-header .wp-block-button__link,
.unit-button .wp-block-button__link {
  border-radius: 999px;
  background: var(--unit-red);
  color: #fff;
  font-weight: 900;
}
.unit-header .wp-block-button__link { padding: 15px 24px; font-size: 12px; }

.unit-hero {
  position: relative;
  min-height: 720px;
  padding: 86px max(24px, calc((100vw - 1220px) / 2));
  overflow: hidden;
  background: var(--unit-ink);
  color: #fff;
}
.unit-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 64px 64px;
}
.unit-hero > .wp-block-group__inner-container,
.unit-hero-grid { position: relative; z-index: 1; }
.unit-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(440px,.9fr); gap: 64px; align-items: center; }
.unit-hero-grid > * { min-width: 0; }
.unit-kicker {
  margin: 0 0 20px;
  color: var(--unit-red);
  font-family: Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.unit-hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(64px,7.2vw,112px);
  line-height: .89;
  letter-spacing: -.065em;
}
.unit-hero h1 strong { color: var(--unit-red); font-weight: inherit; }
.unit-hero-copy { max-width: 660px; margin: 30px 0 0; color: #c7c7ca; font-size: 18px; line-height: 1.65; }
.unit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.unit-actions .wp-block-button__link { min-height: 52px; padding: 17px 25px; }
.unit-button-outline .wp-block-button__link { border: 1px solid #49494f; background: transparent; }
.unit-age-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.unit-age-row span { padding: 9px 15px; border: 1px solid #39393e; border-radius: 999px; color: #d5d5d8; font: 11px Consolas,monospace; }
.unit-hero-visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 32px;
  background: radial-gradient(circle at 50% 0,rgba(242,13,36,.2),transparent 55%),#111114;
  box-shadow: 0 38px 90px rgba(0,0,0,.48);
}
.unit-terminal { position: absolute; inset: 90px 42px 80px; padding: 68px 32px 32px; border: 1px solid #3a3a40; border-radius: 20px; background: #09090b; }
.unit-terminal::before { position: absolute; top: 0; right: 0; left: 0; height: 44px; content: "●  ●  ●    unit_project.js"; padding: 14px 18px; border-bottom: 1px solid #303036; color: #8e8e94; font: 10px Consolas,monospace; }
.unit-terminal code { color: #fff; font: 16px/1.8 Consolas,monospace; }
.unit-terminal b { color: var(--unit-red); }
.unit-terminal mark { background: transparent; color: #bcd8ff; }
.unit-visual-badge { position: absolute; right: 28px; bottom: 25px; padding: 10px 14px; border-radius: 999px; background: rgba(242,13,36,.14); color: #ff6070; font: 10px Consolas,monospace; }

.unit-section { padding-block: 110px; }
.unit-section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.45fr); gap: 60px; align-items: end; margin-bottom: 54px; }
.unit-section-heading h2 { max-width: 850px; margin: 0; font-size: clamp(48px,6vw,84px); line-height: .95; letter-spacing: -.055em; }
.unit-section-heading > p { margin: 0; color: var(--unit-muted); line-height: 1.7; }

.unit-course-grid { display: grid; grid-template-columns: repeat(var(--unit-course-columns,3),minmax(0,1fr)); gap: 16px; }
.unit-course-card { display: flex; min-width: 0; min-height: 650px; flex-direction: column; overflow: hidden; border: 2px solid var(--unit-red); border-radius: 24px; background: #fff; }
.unit-course-card__image { aspect-ratio: 1; overflow: hidden; background: #eee9e2; }
.unit-course-card__image img { width: 100%; height: 100%; object-fit: cover; }
.unit-course-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.unit-course-card__meta { margin-bottom: 12px; color: var(--unit-red); font: 10px Consolas,monospace; letter-spacing: .14em; text-transform: uppercase; }
.unit-course-card h3 { margin: 0 0 14px; font-size: 31px; line-height: 1; letter-spacing: -.04em; }
.unit-course-card p { margin: 0; color: var(--unit-muted); line-height: 1.6; }
.unit-course-card__footer { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 26px; border-top: 1px solid var(--unit-line); font-size: 12px; font-weight: 900; }
.unit-course-card__link { margin-top: 18px; font-size: 12px; font-weight: 900; }
.unit-course-card__link::after { content: " ↗"; }

.unit-dark { background: var(--unit-ink); color: #fff; }
.unit-methods { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.unit-methods h2 { margin: 0; font-size: clamp(54px,6vw,86px); line-height: .92; letter-spacing: -.055em; }
.unit-methods h2 strong { color: var(--unit-red); font-weight: inherit; }
.unit-method-list { display: grid; }
.unit-method { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid #303036; }
.unit-method span { color: var(--unit-red); font: 11px Consolas,monospace; }
.unit-method h3 { margin: 0 0 7px; font-size: 26px; }
.unit-method p { margin: 0; color: #a9a9ae; line-height: 1.6; }

.unit-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.unit-info-card { min-height: 270px; padding: 30px; border: 1px solid var(--unit-line); border-radius: var(--unit-radius); background: #fff; }
.unit-info-card span { color: var(--unit-red); font: 10px Consolas,monospace; }
.unit-info-card h3 { margin: 64px 0 12px; font-size: 29px; letter-spacing: -.035em; }
.unit-info-card p { margin: 0; color: var(--unit-muted); line-height: 1.65; }

.unit-consult { padding: 100px max(24px,calc((100vw - 1220px)/2)); background: var(--unit-red); color: #fff; }
.unit-consult-grid { display: grid; grid-template-columns: 1fr .7fr; gap: 70px; align-items: center; }
.unit-consult h2 { margin: 0; font-size: clamp(58px,7vw,96px); line-height: .9; letter-spacing: -.06em; }
.unit-form { display: grid; gap: 13px; }
.unit-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.unit-form input,.unit-form select,.unit-form textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; font: inherit; }
.unit-form option { color: #111; }
.unit-form input::placeholder,.unit-form textarea::placeholder { color: rgba(255,255,255,.72); }
.unit-form button { min-height: 54px; border: 0; border-radius: 999px; background: #fff; color: var(--unit-ink); font-weight: 900; cursor: pointer; }
.unit-form-status { min-height: 22px; margin: 0; font-size: 13px; }
.unit-hp { position: absolute!important; left: -9999px!important; }

.unit-faq details { padding: 23px 0; border-bottom: 1px solid var(--unit-line); }
.unit-faq summary { cursor: pointer; font-size: 21px; font-weight: 900; }
.unit-faq p { max-width: 760px; color: var(--unit-muted); line-height: 1.7; }

.unit-course-hero { padding: 88px max(24px,calc((100vw - 1220px)/2)); background: var(--unit-ink); color: #fff; }
.unit-course-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,1fr); gap: 64px; align-items: center; }
.unit-course-hero h1 { margin: 0; font-size: clamp(64px,7vw,108px); line-height: .9; letter-spacing: -.06em; }
.unit-course-hero .wp-block-post-excerpt { margin-top: 30px; color: #b8b8bc; font-size: 17px; line-height: 1.7; }
.unit-course-hero .wp-block-post-featured-image { overflow: hidden; border-radius: 32px; box-shadow: 0 35px 80px rgba(0,0,0,.45); }
.unit-course-hero .wp-block-post-featured-image img { aspect-ratio: 1; object-fit: cover; }
.unit-course-content { padding-block: 90px; }
.unit-course-content > * { width: min(920px,calc(100% - 40px)); margin-inline: auto; }
.unit-course-content h2 { margin-top: 70px; font-size: clamp(40px,5vw,64px); line-height: .95; letter-spacing: -.045em; }
.unit-course-content p,.unit-course-content li { color: var(--unit-muted); font-size: 17px; line-height: 1.75; }

.unit-team-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.unit-teacher { overflow: hidden; border: 1px solid var(--unit-line); border-radius: 24px; background: #fff; }
.unit-teacher figure { margin: 0; }
.unit-teacher img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.unit-teacher > .wp-block-group { padding: 20px; }
.unit-teacher h3 { margin: 0 0 7px; font-size: 25px; }
.unit-teacher p { margin: 0; color: var(--unit-muted); }

.unit-about-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 70px; align-items: center; }
.unit-about-hero { min-height: 650px; }
.unit-about-hero h1 { font-size: clamp(58px,6.2vw,94px); }
.unit-smile { position: relative; min-height: 390px; overflow: hidden; border: 1px solid #3a3a40; border-radius: 32px; background: radial-gradient(circle at 50% 45%,rgba(242,13,36,.25),transparent 34%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#111114; background-size: auto,34px 34px,34px 34px,auto; }
.unit-smile-eye { position: absolute; top: 42%; width: 16px; height: 16px; border-radius: 50%; background: var(--unit-red); }
.unit-smile-eye:nth-child(1) { left: 43%; }
.unit-smile-eye:nth-child(2) { right: 43%; }
.unit-smile-mouth { position: absolute; top: 49%; left: 50%; width: 76px; height: 38px; transform: translateX(-50%); border-bottom: 5px solid var(--unit-red); border-radius: 0 0 70px 70px; }
.unit-smile i { position: absolute; padding: 12px; border: 1px solid #46464c; border-radius: 12px; color: var(--unit-red); font: normal 12px Consolas,monospace; }
.unit-smile i:nth-of-type(1) { top: 30px; left: 36px; }
.unit-smile i:nth-of-type(2) { top: 42px; right: 42px; }
.unit-smile i:nth-of-type(3) { right: 32px; bottom: 34px; }

.unit-footer { padding: 70px max(24px,calc((100vw - 1220px)/2)) 32px; background: var(--unit-ink); color: #fff; }
.unit-footer .wp-block-site-logo img { width: 160px; }
.unit-footer a { color: #c7c7ca; font-size: 13px; font-weight: 800; }
.unit-footer-bottom { margin-top: 54px; padding-top: 22px; border-top: 1px solid #2d2d31; color: #77777d; font-size: 11px; }

@media (max-width: 1020px) {
  .unit-header { position: fixed; right: 0; left: 0; }
  body { padding-top: 78px; }
  .unit-hero-grid,.unit-course-hero-grid { grid-template-columns: 1fr; }
  .unit-hero-visual { width: min(100%,720px); margin-inline: auto; }
  .unit-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unit-methods { grid-template-columns: 1fr; }
  .unit-team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unit-about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 68px; }
  body { padding-top: 68px; }
  .unit-container { width: calc(100% - 28px); }
  .unit-header { min-height: 68px; padding-inline: 14px; }
  .unit-header .wp-block-site-logo img { width: 120px; }
  .unit-header > .wp-block-buttons { display: none; }
  .unit-header .wp-block-navigation { margin-left: auto; }
  .unit-header .wp-block-navigation__responsive-container-open { color: #fff; }
  .unit-header .wp-block-navigation__responsive-container.is-menu-open { padding: 84px 24px 28px; background: var(--unit-ink); color: #fff; }
  .unit-hero { min-height: 0; padding: 56px 14px 70px; }
  .unit-hero-grid { gap: 42px; }
  .unit-hero h1 { max-width: 100%; font-size: clamp(46px,14vw,62px); overflow-wrap: normal; }
  .unit-hero-copy { font-size: 16px; }
  .unit-actions { display: grid; }
  .unit-actions .wp-block-button { width: 100%; }
  .unit-actions .wp-block-button__link { width: 100%; }
  .unit-age-row { display: grid; grid-template-columns: repeat(2,1fr); }
  .unit-age-row span { text-align: center; }
  .unit-hero-visual { width: 100%; max-width: 100%; min-height: 330px; border-radius: 24px; }
  .unit-terminal { inset: 46px 18px 55px; padding: 56px 18px 18px; }
  .unit-terminal code { font-size: 11px; }
  .unit-section { padding-block: 76px; }
  .unit-section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
  .unit-section-heading h2 { font-size: 48px; }
  .unit-course-grid,.unit-cards,.unit-team-grid { grid-template-columns: 1fr; }
  .unit-course-card { min-height: 0; }
  .unit-methods h2 { font-size: 50px; }
  .unit-consult { padding: 72px 14px; }
  .unit-consult-grid { grid-template-columns: 1fr; gap: 38px; }
  .unit-consult h2 { font-size: 58px; }
  .unit-form-row { grid-template-columns: 1fr; }
  .unit-course-hero { padding: 58px 14px 70px; }
  .unit-course-hero-grid { gap: 38px; }
  .unit-course-hero h1 { font-size: 56px; }
}

@media (prefers-reduced-motion: no-preference) {
  .unit-course-card { transition: transform .2s ease,box-shadow .2s ease; }
  .unit-course-card:hover { transform: translateY(-6px); box-shadow: var(--unit-shadow); }
}