/* pages.css — hero, bento, pin-секція навчання, факти, FAQ, сторінкові блоки */

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero-copy h1{font-size:clamp(34px,5.4vw,64px);margin-bottom:20px}
.hero-copy h1 .word{display:inline-block;overflow:hidden;vertical-align:top}
.hero-copy h1 .word span{display:inline-block}
.hero-copy .lede{margin-bottom:30px}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:34px}
.hero-badge{margin-bottom:22px}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.hero-stats .item b{display:block;font-family:var(--ff-head);font-size:24px}
.hero-stats .item span{font-size:12.5px;color:var(--text-dim)}

.hero-media{position:relative}
.hero-frame{
  position:relative;border-radius:var(--radius-xl);padding:10px;overflow:hidden;
  box-shadow:0 0 0 1px var(--border), var(--shadow);
}
.hero-frame::before{
  content:'';position:absolute;inset:-40%;z-index:0;
  background:conic-gradient(from 0deg, var(--accent), var(--amber), var(--accent));
  animation:spin 9s linear infinite;opacity:.55;filter:blur(30px);
}
.hero-frame-inner{position:relative;z-index:1;border-radius:calc(var(--radius-xl) - 8px);overflow:hidden;aspect-ratio:4/5;background:center/cover no-repeat url('../../shared/assets/photos/photo-hero-bg.jpg')}
.hero-frame video,.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame-glow{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,14,20,.85));z-index:2;pointer-events:none}
.hero-iso-chip{position:absolute;left:-18px;bottom:-18px;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px}
.hero-iso-chip img{width:36px;height:36px;border-radius:8px;object-fit:cover}
.hero-iso-chip b{display:block;font-family:var(--ff-head);font-size:13px}
.hero-iso-chip span{font-size:11px;color:var(--text-dim)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.hero-frame::before{display:none}.hero-frame{padding:0}}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--text-dim),transparent);animation:scrollcue 1.8s ease-in-out infinite}
@keyframes scrollcue{0%{opacity:0;transform:scaleY(.3);transform-origin:top}50%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.3);transform-origin:bottom}}

/* ===== BENTO ===== */
.bento{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:18px;
}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}}
.bento-tile{
  position:relative;border-radius:var(--radius-l);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;cursor:pointer;
}
.bento-tile.size-lg{grid-column:span 2;grid-row:span 2}
.bento-tile.size-md{grid-column:span 2}
@media (max-width:560px){.bento-tile.size-lg,.bento-tile.size-md{grid-column:span 1;min-height:230px}}
.bento-tile .bt-bg{position:absolute;inset:0;z-index:0}
.bento-tile .bt-bg img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.bento-tile:hover .bt-bg img{transform:scale(1.06)}
.bento-tile .bt-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,14,20,.15) 20%,rgba(6,8,13,.92));}
.bento-tile:not(.size-lg) .bt-shade{background:linear-gradient(160deg,rgba(61,139,255,.14),rgba(11,14,20,.55))}
.bento-tile .bt-icon{width:52px;height:52px;border-radius:14px;background:var(--surface-strong);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:2;color:var(--accent-2)}
.bento-tile .bt-icon svg,.bento-tile .bt-icon img{width:26px;height:26px}
.bento-tile .bt-icon img{filter:invert(1) brightness(1.5) saturate(0) contrast(1.1)}
.bento-tile h3{position:relative;z-index:2;font-size:19px;margin-bottom:8px;color:#fff}
.bento-tile.size-lg h3{font-size:26px}
.bento-tile p{position:relative;z-index:2;color:#c7ccd8;font-size:13.5px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease, opacity .3s ease, margin .4s ease}
.bento-tile:hover p{max-height:120px;opacity:1;margin-bottom:14px}
.bento-tile .bt-more{position:relative;z-index:2;font-size:12.5px;font-weight:700;color:var(--accent-2);display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .3s ease, transform .3s ease}
.bento-tile:hover .bt-more{opacity:1;transform:none}

/* ===== FACTS ===== */
/* .facts-grid — 8 фактів на головній (index.html): 4 кол. на десктопі, 2 на планшеті/мобільному — 8 ділиться націло скрізь */
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.facts-grid{grid-template-columns:1fr 1fr}}
/* .facts-grid-full — повна статистика на about.html: 9 фактів, тож 3 колонки (9÷3=3 рядки націло)
   на всіх брейкпоінтах ширше мобільного; на дуже вузьких екранах — 1 колонка (9 непарне для 2 кол.) */
.facts-grid.facts-grid-full{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.facts-grid.facts-grid-full{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.facts-grid.facts-grid-full{grid-template-columns:1fr}}
.fact-tile{padding:26px 22px;border-radius:var(--radius-m);text-align:left}
.fact-tile .counter{font-size:clamp(24px,3vw,34px);display:block;background:linear-gradient(135deg,var(--text),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fact-tile span{font-size:12.5px;color:var(--text-dim);display:block;margin-top:8px;line-height:1.45}

/* ===== PIN: як проходить навчання ===== */
.pin-section{position:relative}
.pin-viewport{height:100vh;overflow:hidden;position:relative;display:flex;align-items:center}
.pin-track{display:flex;gap:0;will-change:transform}
.pin-slide{
  flex:none;width:100vw;height:100%;display:flex;align-items:center;padding:0 8vw;position:relative;
}
.pin-slide-inner{display:grid;grid-template-columns:.5fr 1fr;gap:60px;align-items:center;max-width:1180px;margin:0 auto;width:100%}
@media (max-width:900px){.pin-slide-inner{grid-template-columns:1fr;gap:24px}}
.pin-num{font-family:var(--ff-head);font-size:clamp(90px,14vw,180px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--border-strong);opacity:.9}
.pin-slide.is-current .pin-num{-webkit-text-stroke:1.5px var(--accent);color:transparent}
.pin-slide h3{font-size:clamp(22px,2.6vw,34px);margin-bottom:14px}
.pin-slide p{color:var(--text-dim);max-width:56ch;font-size:15.5px}
.pin-progress{position:absolute;left:0;right:0;bottom:34px;display:flex;justify-content:center;gap:8px;z-index:3}
.pin-progress i{width:34px;height:4px;border-radius:4px;background:var(--surface-strong)}
.pin-progress i.is-active{background:linear-gradient(90deg,var(--accent),var(--amber))}
.pin-hint{position:absolute;right:8vw;bottom:34px;font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:8px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){
  .pin-viewport{height:auto}
  .pin-track{flex-direction:column;transform:none !important}
  .pin-slide{width:100%;height:auto;padding:40px 0}
  .pin-progress,.pin-hint{display:none}
}

/* ===== about-summary / split sections ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.split img{border-radius:var(--radius-l)}
.about-photo-wrap{position:relative;border-radius:var(--radius-l);overflow:hidden}
.about-photo-wrap .iso-float{position:absolute;left:18px;bottom:18px;padding:12px 16px;border-radius:14px;display:flex;gap:10px;align-items:center}

.director-card{display:flex;gap:16px;align-items:center;padding:20px;border-radius:var(--radius-m);margin-top:22px}
.director-card .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;color:#fff;font-size:20px;flex:none}
.director-card b{display:block;font-size:14.5px}
.director-card span{font-size:12.5px;color:var(--text-dim)}

/* ===== gallery ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{border-radius:14px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;position:relative}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45))}

/* ===== FAQ page header ===== */
.page-hero{padding:calc(var(--header-h) + 56px) 0 40px;position:relative}
.page-hero h1{font-size:clamp(28px,4.6vw,46px)}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--text-dim);font-size:13px;margin-bottom:18px}
.crumbs a:hover{color:var(--accent-2)}

/* homepage news+seminars split — завжди рівно 4 новини (2×2), тож звичайний grid без дірок */
.home-feed-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px}
/* .news-grid.home-news-grid (компаунд-селектор — вища специфічність за .news-grid) завжди grid,
   бо на головній рівно 4 новини (2×2) незалежно від того, що .news-grid нижче в файлі стає flex */
.news-grid.home-news-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.home-seminars-col{display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){
  .home-feed-grid{grid-template-columns:1fr}
  .news-grid.home-news-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){.news-grid.home-news-grid{grid-template-columns:1fr}}

/* filters row (news) */
.filters-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:32px}
/* .news-grid — стрічка news.html: кількість карток змінна (усі/новини/семінари + фільтри),
   тож замість grid (де неповний останній ряд лишає діру праворуч) — flex-wrap з центруванням:
   картки завжди тієї ж ширини колонки, а неповний останній ряд центрується, без дірок */
.news-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.news-grid > *{flex:0 1 calc((100% - 44px)/3)}
@media (max-width:980px){.news-grid > *{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:640px){.news-grid > *{flex-basis:100%}}

/* contacts */
.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.contact-cards{grid-template-columns:1fr}}
.contact-card{padding:22px;border-radius:var(--radius-m)}
.contact-card h4{font-size:14px;margin-bottom:10px;color:var(--accent-2)}
.contact-card a{display:block;font-size:14.5px;margin-bottom:4px}
.map-frame{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--border);height:380px}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9)}
:root[data-theme="light"] .map-frame iframe{filter:none}

/* news-item */
.article-head{max-width:820px}
.article-body{max-width:760px;font-size:16.5px;color:var(--text-dim)}
.article-body p{margin-bottom:1.2em}
.share-row{display:flex;gap:10px;align-items:center;margin-top:28px}

/* documents */
.docs-block{margin-bottom:44px}
.docs-block h3{font-size:18px;margin-bottom:16px}
.doc-list{display:flex;flex-direction:column;gap:10px}

/* not-found style tiny sections */
.info-note{padding:18px 20px;border-radius:14px;font-size:13.5px;color:var(--text-dim)}