/*
Theme Name: ХОІППО
Theme URI: https://hoippo.km.ua
Author: Custom Build
Author URI: https://hoippo.km.ua
Description: Тема WordPress для Хмельницького обласного інституту післядипломної педагогічної освіти. Темно-синій + золотий фірмовий стиль, картки новин, подій, освітніх програм та публікацій.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hoippo
*/

/* =========================================================
   0. VARIABLES
========================================================= */
:root{
  /* Figma design tokens */
  --primary: #1A3A6B;          /* основний синій */
  --secondary: #0F2044;        /* темно-синій (хедер/футер) */
  --accent: #C9921A;           /* золотий акцент */
  --background: #F7F5F0;       /* фон сторінки */
  --muted: #EAE7E0;            /* приглушений фон */
  --foreground: #0F1C38;       /* колір тексту */
  --muted-foreground: #6B7280;
  --border-color: #D5D0C8;
  --radius: 2px;

  /* Aliases used across the theme */
  --navy: var(--primary);
  --navy-2: #22437A;
  --navy-3: #2D5290;
  --navy-deep: var(--secondary);
  --gold: var(--accent);
  --gold-dark: #A87812;
  --cream: var(--background);
  --white: #ffffff;
  --ink: var(--foreground);
  --gray: var(--muted-foreground);
  --gray-light: var(--muted);
  --border: var(--border-color);
  --font-display: "Playfair Display", Georgia, serif;
  --font-serif: var(--font-display);
  --font-sans: "Inter", system-ui, sans-serif;
  --container: 1280px;
}

/* =========================================================
   1. RESET / BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--background);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family: var(--font-serif); margin:0 0 .5em; font-weight:700; color: var(--ink); line-height:1.2; }
p{ margin:0 0 1em; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.italic-accent{ font-style: italic; color: var(--gold); font-family: var(--font-serif); }
.eyebrow{
  display:inline-block;
  font-size: 13px;
  font-weight:700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
.section{ padding: 64px 0; }
.section--cream{ background: var(--cream); }
.section--navy{ background: var(--secondary); color: var(--white); }
.section--navy h2, .section--navy h3{ color: var(--white); }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.section-head h2{ font-size: clamp(28px, 3vw, 38px); margin:0; }
.link-arrow{
  color: var(--gold-dark);
  font-weight:700;
  white-space:nowrap;
  border-bottom: 1px solid transparent;
}
.link-arrow:hover{ border-color: var(--gold-dark); }
.section--navy .link-arrow{ color: var(--gold); }

.btn{
  border-radius: var(--radius);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 15px 30px;
  font-weight:700;
  font-size: 15px;
  border: 2px solid transparent;
  transition: all .2s ease;
}
.btn--gold{ background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover{ background: var(--gold-dark); }
.btn--outline{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--outline:hover{ border-color: var(--white); }
.btn--navy{ background: var(--navy); color: var(--white); }
.btn--navy:hover{ background: var(--navy-2); }

/* =========================================================
   2. TOP BAR
========================================================= */
.topbar{
  background: var(--navy-deep);
  color: rgba(255,255,255,.85);
  font-size: 13px;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar-social{ display:flex; align-items:center; gap: 20px; }
.topbar-social a{ display:inline-flex; align-items:center; gap:6px; color: rgba(255,255,255,.9); }
.topbar-social a:hover{ color: var(--gold); }
.topbar-lang{ margin-right: 4px; font-weight:700; letter-spacing:.05em; }

/* =========================================================
   3. HEADER / NAV
========================================================= */
.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 40;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  border-radius: var(--radius);
  width:56px; height:56px;
  background: var(--navy);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight:700;
  flex-shrink:0;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-text .brand-name{
  font-family: var(--font-sans);
  font-weight:700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing:0;
  max-width: 460px;
}
.brand-text .brand-sub{ font-size: 13px; color: var(--gray); line-height:1.3; max-width: 320px; }

.primary-nav{ display:flex; align-items:center; gap:4px; }
.primary-nav ul{ display:flex; align-items:center; gap: 4px; }
.primary-nav > ul > li{ position:relative; }
.primary-nav a{
  display:flex; align-items:center; gap:6px;
  padding: 10px 14px;
  font-weight:600;
  font-size: 15px;
  color: var(--ink);
  white-space:nowrap;
}
.primary-nav > ul > li > a::after{
  content:"";
  width:7px; height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  margin-left:2px;
  opacity:.55;
}
.primary-nav > ul > li:not(.menu-item-has-children) > a::after{ display:none; }
.primary-nav a:hover{ color: var(--navy); }

/* Underline that follows the cursor: shows under whichever top-level item is
   hovered, and stays under the current/active page. Sits a bit below the
   link (not glued to its own padding box) and reaches toward the header's
   bottom edge, in dark navy. */
.primary-nav > ul > li > a{ position:relative; }
.primary-nav > ul > li > a::before{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:-15px;
  height:3px;
  background: var(--navy);
  opacity:0;
  transform: scaleX(.85);
  transition: opacity .18s ease, transform .18s ease;
}
.primary-nav > ul > li > a:hover::before{
  opacity:1;
  transform: scaleX(1);
}
.primary-nav > ul > li > a:hover{
  color: var(--navy);
}
/* Inside dropdowns the underline isn't needed — background highlight instead */
.primary-nav .sub-menu li:hover > a,
.primary-nav .sub-menu li.current-menu-item > a,
.primary-nav .sub-menu li.current_page_item > a{
  background: var(--cream);
  color: var(--navy);
}
.primary-nav .sub-menu li > a::before{ display:none; }
.primary-nav .sub-menu{
  display:none;
  position:absolute;
  top: calc(100% + 10px); left:0;
  background: var(--white);
  border:1px solid var(--border);
  box-shadow: 0 12px 24px rgba(20,33,61,.12);
  min-width: 240px;
  padding: 8px 0;
  z-index: 50;
}
/* Invisible bridge so moving the cursor down into the dropdown doesn't lose hover.
   Covers exactly the 10px gap above, only where a dropdown actually exists. */
.primary-nav > ul > li.menu-item-has-children::after,
.primary-nav > ul > li.page_item_has_children::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:10px;
}
.primary-nav li:hover > .sub-menu{ display:block; }
.primary-nav .sub-menu a{ padding: 10px 18px; font-weight:500; }
.primary-nav .sub-menu a::after{ display:none; }
.primary-nav .sub-menu li:hover > a{ background: var(--cream); }

.header-search{ display:flex; align-items:center; gap:18px; }
.header-search button{
  background:none; border:none; color: var(--navy); padding:6px;
  display:flex; align-items:center;
}
.header-search .menu-toggle{ display:none; background:none; border:none; padding:8px; }
.menu-toggle .bar{ display:block; width:26px; height:2px; background:var(--navy); margin:5px 0; border-radius:1px; }

/* =========================================================
   4. HERO
========================================================= */
.hero{
  position:relative;
  color: var(--white);
  background: var(--navy-deep);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  opacity:.35;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(15,32,68,.92) 20%, rgba(15,32,68,.55) 75%);
}
.hero-inner{
  position:relative;
  padding: 90px 0 70px;
  max-width: 820px;
}
.hero-badge{
  display:inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight:700;
  font-size:13px;
  letter-spacing:.12em;
  padding: 8px 18px;
  margin-bottom: 26px;
}
.hero h1{
  color: var(--white);
  font-size: clamp(34px, 5vw, 56px);
  margin-bottom: 8px;
}
.hero h1 em{
  display:block;
  font-style:italic;
  color: var(--gold);
  font-weight:600;
}
.hero p{
  font-size: 18px;
  color: rgba(255,255,255,.85);
  max-width: 620px;
  margin: 22px 0 32px;
}
.hero-actions{ display:flex; gap: 16px; flex-wrap:wrap; }

/* =========================================================
   5. STATS BAR
========================================================= */
.stats-bar{ background: var(--navy); }
.stats-bar .container{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat{
  text-align:center;
  padding: 34px 12px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.stat:first-child{ border-left:none; }
.stat-num{
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--gold);
  font-weight:700;
}
.stat-label{
  font-size: 13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: rgba(255,255,255,.8);
  margin-top:6px;
}

/* =========================================================
   6. QUICK LINKS
========================================================= */
.quicklinks{ background: var(--background); border-bottom: 1px solid var(--border); }
.quicklinks .container{
  display:grid;
  grid-template-columns: repeat(var(--ql-cols, 4), 1fr);
  gap: 0;
}
.quicklink{
  background: var(--white);
  display:flex; align-items:center; gap:14px;
  padding: 28px 22px;
  border: 1px solid var(--border);
  margin: 24px -1px 24px 0;
  font-weight:700;
  font-size: 16px;
  color: var(--navy);
  transition: box-shadow .2s ease, transform .2s ease;
}
.quicklink:hover{ box-shadow: 0 10px 20px rgba(20,33,61,.1); transform: translateY(-2px); }
.quicklink .emoji{ font-size: 26px; line-height:1; }

/* =========================================================
   7. NEWS
========================================================= */
.news-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
.news-featured{ border:1px solid var(--border); background: var(--white); }
.news-featured img{ aspect-ratio: 16/10; object-fit:cover; width:100%; }
.news-featured .news-body{ padding: 24px 28px 30px; }
.news-tag{
  display:inline-block;
  background: var(--navy);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding: 6px 14px;
  margin: -46px 0 18px 20px;
  position:relative;
}
.news-date{ color: var(--gray); font-size: 14px; margin-bottom: 6px; }
.news-featured h3{ font-size: 26px; margin-bottom:4px; }
.news-side{ display:flex; flex-direction:column; gap: 20px; }
.news-item{
  border:1px solid var(--border);
  background: var(--white);
  display:flex;
  gap: 18px;
  padding: 22px;
}
.news-item .date-block{
  flex-shrink:0;
  text-align:center;
  width: 56px;
}
.news-item .date-num{ font-family: var(--font-serif); font-size:28px; font-weight:700; color: var(--gold-dark); line-height:1; }
.news-item .date-mon{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--gray); }
.news-item .cat-badge{
  display:inline-block;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding: 4px 10px;
  margin-bottom:8px;
}
.news-item h4{ font-size:17px; margin-bottom:6px; }
.news-item p{ font-size:14px; color: var(--gray); margin:0; }

/* =========================================================
   8. PROGRAMS (navy cards)
========================================================= */
.programs-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.15);
}
.program-card{
  background: var(--secondary);
  padding: 34px 26px;
}
.program-card .emoji{ font-size: 34px; margin-bottom:22px; display:block; }
.program-card h3{ color:var(--white); font-size:20px; margin-bottom:12px; }
.program-card p{ color: rgba(255,255,255,.7); font-size:14.5px; margin-bottom: 18px; }

/* =========================================================
   9. CALENDAR
========================================================= */
.calendar-wrap{ display:grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items:start; }
.calendar-intro p{ color: var(--gray); font-size:16px; margin: 16px 0 26px; max-width: 360px; }
.event-row{
  display:flex; gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.event-row:last-child{ border-bottom: 1px solid var(--border); }
.event-row .date-block{ width:56px; flex-shrink:0; }
.event-row .date-num{ font-family: var(--font-serif); font-size: 30px; font-weight:700; color: var(--navy); line-height:1; }
.event-row .date-mon{ font-size:11px; text-transform:uppercase; color: var(--gray); letter-spacing:.05em; }
.event-badge{
  display:inline-block; background: var(--muted); color: var(--muted-foreground);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 10px; margin-bottom:8px;
}
.event-row h4{ font-size: 18px; margin-bottom:6px; }
.event-row .meta{ font-size:14px; color: var(--gray); }

/* =========================================================
   10. SUPPORT (war) SECTION
========================================================= */
.support-head{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-end; margin-bottom: 34px;}
.support-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding: 8px 16px;
  margin-bottom: 18px;
}
.support-head p{ color: rgba(255,255,255,.75); max-width: 420px; font-size:15.5px; }
.support-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: rgba(255,255,255,.12); }
.support-card{ background: rgba(255,255,255,.07); padding: 30px 24px; }
.support-card .emoji{ font-size:30px; margin-bottom:16px; display:block; }
.support-card h4{ color:var(--white); font-size:17px; margin-bottom:8px; }
.support-card p{ color: rgba(255,255,255,.7); font-size:14px; margin:0; }

/* =========================================================
   11. PUBLICATIONS
========================================================= */
.pub-wrap{ display:grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items:start; }
.pub-intro p{ color:var(--gray); margin:16px 0 20px; max-width:320px; }
.pub-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pub-card{ border:1px solid var(--border); background: var(--white); }
.pub-top{ background: var(--navy); color:var(--white); padding: 30px 22px 26px; min-height: 150px; display:flex; flex-direction:column; justify-content:flex-end; position:relative;}
.pub-top.variant-2{ background: var(--navy-3); }
.pub-top.variant-3{ background: var(--gold); color: var(--navy-deep); }
.pub-year{
  position:absolute; top:18px; right:18px;
  background: rgba(255,255,255,.18);
  font-size:13px; font-weight:700;
  padding: 4px 10px;
}
.pub-top.variant-3 .pub-year{ background: rgba(27,41,81,.15); }
.pub-rule{ width:36px; height:2px; background: rgba(255,255,255,.5); margin-bottom:14px; }
.pub-top.variant-3 .pub-rule{ background: rgba(27,41,81,.4); }
.pub-top h4{ color:inherit; font-size:19px; margin:0; }
.pub-bottom{ padding: 16px 22px; font-size: 14px; color: var(--gray); }

/* =========================================================
   12. PARTNERS
========================================================= */
.partners{ background: var(--muted); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding: 44px 0; }
.partners .eyebrow{ display:block; text-align:center; margin-bottom: 22px; }
.partners-row{ display:flex; justify-content:center; align-items:center; gap: 46px; flex-wrap:wrap; }
.partners-row a, .partners-row span{ font-weight:700; color: var(--navy); font-size:16px; opacity:.75; }
.partners-row a:hover{ opacity:1; }

/* =========================================================
   13. FOOTER
========================================================= */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.75); }
.footer-top{ padding: 60px 0 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand-name{ font-family: var(--font-serif); font-size: 22px; color:var(--white); margin-bottom:16px; font-weight:700;}
.footer-col h5{ color: var(--white); font-family: var(--font-sans); font-size:15px; margin-bottom:18px; }
.footer-col ul li{ margin-bottom: 12px; }
.footer-col a:hover{ color: var(--gold); }
.footer-contact p{ margin:0 0 6px; font-size:14.5px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size: 13.5px;
}
.footer-bottom ul{ display:flex; gap: 24px; flex-wrap:wrap; }
.footer-bottom a:hover{ color: var(--gold); }

/* =========================================================
   14. GENERIC PAGE / SINGLE / ARCHIVE
========================================================= */
.page-hero{ background: var(--navy); color:var(--white); padding: 70px 0 50px; }
.page-hero h1{ color:var(--white); font-size: clamp(30px,4vw,44px); margin:0; }
.breadcrumbs{ font-size:13px; color: rgba(255,255,255,.6); margin-bottom:14px; }
.breadcrumbs a:hover{ color: var(--gold); }
.content-wrap{ padding: 56px 0; }
.entry-content{ max-width: 820px; }
.entry-content h2{ font-size:28px; margin-top:1.4em; }
.entry-content h3{ font-size:22px; margin-top:1.2em; }
.entry-content img{ margin: 24px 0; }
.entry-content a{ color: var(--gold-dark); text-decoration:underline; }
.entry-content ul, .entry-content ol{ margin: 0 0 1.2em 1.4em; list-style:revert; }
.entry-meta{ color: var(--gray); font-size:14px; margin-bottom: 20px; }
.archive-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.archive-card{ border:1px solid var(--border); }
.archive-card img{ aspect-ratio:16/10; object-fit:cover; }
.archive-card .news-body{ padding:20px 22px; }
.pagination{ display:flex; gap:10px; margin-top: 40px; }
.pagination a, .pagination span{ padding:10px 16px; border:1px solid var(--border); font-weight:600; }
.pagination .current{ background: var(--navy); color:var(--white); border-color:var(--navy); }
.search-form{ display:flex; gap:0; max-width: 480px; }
.search-form input[type="search"]{ flex:1; padding:12px 16px; border:1px solid var(--border); }
.search-form button{ background:var(--navy); color:var(--white); border:none; padding:0 20px; font-weight:700; }
.no-results{ padding: 40px 0; }

/* =========================================================
   15. MOBILE
========================================================= */
@media (max-width: 960px){
  .primary-nav{ display:none; }
  .header-search .menu-toggle{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .stats-bar .container{ grid-template-columns: repeat(2,1fr) !important; }
  .quicklinks .container, .programs-grid, .support-grid{ grid-template-columns: repeat(2,1fr); }
  .news-grid, .calendar-wrap, .pub-wrap{ grid-template-columns: 1fr; }
  .pub-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .archive-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .stats-bar .container{ grid-template-columns: 1fr !important; }
  .quicklinks .container, .programs-grid, .support-grid, .pub-grid, .footer-grid, .archive-grid{ grid-template-columns: 1fr; }
  .stat{ border-left:none; border-top: 1px solid rgba(255,255,255,.12); }
  .stat:first-child{ border-top:none; }
  .quicklink{ margin: 0; border-bottom:none; }
  .hero-inner{ padding: 60px 0 46px; }
  .site-header .container{ flex-wrap:wrap; }
  .brand-text .brand-sub{ display:none; }
  .footer-bottom{ flex-direction:column; }
}

/* Primary nav mobile drawer */
.nav-drawer-open .primary-nav{
  display:block;
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--white);
  border-top:1px solid var(--border);
  box-shadow:0 16px 24px rgba(20,33,61,.12);
  padding: 10px 24px 20px;
}
.nav-drawer-open .primary-nav > ul{ flex-direction:column; align-items:flex-start; gap:0; width:100%; }
.nav-drawer-open .primary-nav .sub-menu{ position:static; box-shadow:none; border:none; padding-left:14px; display:none; }
.nav-drawer-open .primary-nav li.open > .sub-menu{ display:block; }
.nav-drawer-open .primary-nav > ul > li{ width:100%; border-bottom:1px solid var(--border); }

/* Scrollbar (Figma): thin, visible only on hover */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--border-color); border-radius:3px; }
body:not(:hover)::-webkit-scrollbar-thumb{ background:transparent; }


/* =========================================================
   16. DROPDOWNS — вкладені меню відкриваються вбік (desktop)
========================================================= */
.primary-nav .sub-menu li{ position:relative; }
.primary-nav li:focus-within > .sub-menu{ display:block; }
@media (min-width: 961px){
  .primary-nav .sub-menu .sub-menu{
    top:-9px; left:100%;
    margin-left:-1px;
  }
  .primary-nav .sub-menu .sub-menu.is-flipped{ left:auto; right:100%; margin-left:0; margin-right:-1px; }
  .primary-nav > ul > li > .sub-menu.is-flipped{ left:auto; right:0; }
  .primary-nav .sub-menu a{ justify-content:space-between; white-space:normal; }
  .primary-nav .sub-menu .menu-item-has-children > a::after{
    display:block; content:"";
    width:6px; height:6px; flex-shrink:0;
    border-right:2px solid currentColor; border-top:2px solid currentColor;
    transform:rotate(45deg); opacity:.55;
  }
}

/* =========================================================
   17. СТОРІНКА ПАМ'ЯТІ — АНАТОЛІЙ НАЗАРЕНКО
========================================================= */
.memorial{ --mem-font: "Cormorant Garamond", "Playfair Display", Georgia, serif; }
.memorial .page-hero{ text-align:center; padding:72px 0 56px; background: var(--secondary); }
.memorial .page-hero .breadcrumbs{ text-align:left; }
.memorial .page-hero h1{ font-family:var(--mem-font); font-weight:500; font-style:italic; font-size:clamp(40px,6vw,68px); letter-spacing:.01em; }
.memorial .page-hero .eyebrow{ color:var(--gold); letter-spacing:.2em; }
.memorial .page-hero .mem-rule{ width:56px; height:1px; background:var(--gold); margin:26px auto 0; }
.memorial .content-wrap{ padding:64px 0 88px; }
.person-wrap{ display:grid; grid-template-columns:240px minmax(0,640px); gap:64px; justify-content:center; align-items:start; }
.person-photo{ aspect-ratio:4/5; background:var(--muted); border:1px solid var(--gold); outline:1px solid var(--border-color); outline-offset:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; color:var(--gray); font-size:13px; }
.person-photo img{ width:100%; height:100%; object-fit:cover; margin:0; filter:grayscale(1) contrast(1.03); }
.person-years{ font-family:var(--mem-font); font-size:26px; letter-spacing:.06em; color:var(--gold-dark); margin:0 0 6px; }
.person-remember{ font-family:var(--mem-font); font-style:italic; font-size:22px; margin:0 0 28px; color:var(--gray); }
.person-quote{ margin:0 0 32px; padding:0 0 0 24px; border-left:2px solid var(--gold); font-family:var(--mem-font); font-style:italic; font-size:27px; line-height:1.4; }
.memorial .person-text, .memorial .entry-content{ max-width:none; text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; font-size:18px; line-height:1.75; }
.memorial .person-text{ margin:0 0 1.2em; }
.memorial .entry-content > *:first-child{ margin-top:0; }
@media (max-width: 800px){ .person-wrap{ grid-template-columns:1fr; gap:40px; justify-items:center; } .person-photo{ width:220px; } .person-wrap > div:last-child{ width:100%; } }

/* Логотип-герб у шапці */
.brand-logo{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo img{ display:block; max-width:none; object-fit:contain; }
@media (max-width:640px){ .brand-logo img{ height:56px !important; } }

/* =========================================================
   18. МЕНЮ: підкреслення і випадаючий список до нижньої межі шапки
========================================================= */
.primary-nav > ul > li:hover > a::before,
.primary-nav > ul > li:focus-within > a::before,
.primary-nav > ul > li.current-menu-item > a::before,
.primary-nav > ul > li.current-menu-ancestor > a::before,
.primary-nav > ul > li.current-menu-parent > a::before{ opacity:1; transform:scaleX(1); }
@media (min-width: 961px){
  .site-header > .container:first-child{ align-items:stretch; padding-top:0; padding-bottom:0; }
  .brand{ padding:16px 0; }
  .header-search{ align-self:center; }
  .primary-nav{ align-self:stretch; }
  .primary-nav > ul{ align-items:stretch; }
  .primary-nav > ul > li{ display:flex; }
  .primary-nav > ul > li > a{ padding-top:0; padding-bottom:0; }
  /* підкреслення лягає точно на нижню межу шапки */
  .primary-nav > ul > li > a::before{ bottom:-1px; }
  /* список відкривається від нижньої межі шапки (одразу над синім) */
  .primary-nav > ul > li > .sub-menu{ top:calc(100% + 1px); }
  .primary-nav > ul > li.menu-item-has-children::after,
  .primary-nav > ul > li.page_item_has_children::after{ display:none; }
}

/* =========================================================
   19. СТОРІНКА З БІЧНОЮ ПАНЕЛЛЮ
========================================================= */
.content-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:64px; align-items:start; }
.no-sidebar .content-layout{ grid-template-columns:minmax(0,820px); }
.widget-area{ position:sticky; top:24px; display:grid; gap:24px; margin-top:0; }
.widget{ background:var(--white); border:1px solid var(--border); border-top:3px solid var(--gold); padding:22px 22px 24px; }
.widget > h5,
.widget > .widgettitle,
.widget .wp-block-heading{
  font-family:var(--font-serif); font-size:20px; line-height:1.25; font-weight:700; color:var(--navy);
  margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--border); position:relative;
}
.widget > h5::after{ content:""; position:absolute; left:0; bottom:-1px; width:44px; height:3px; background:var(--navy); }
.widget img{ display:block; width:100%; height:auto; margin:0 0 14px; }
.widget img:last-child{ margin-bottom:0; }
.widget a{ color:var(--navy); }
.widget a:hover{ color:var(--gold-dark); }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:10px 0; border-bottom:1px solid var(--border); line-height:1.4; }
.widget li:last-child{ border-bottom:0; padding-bottom:0; }
.widget li:first-child{ padding-top:0; }
/* Архіви (категорії тощо) з бічною панеллю: картки у 2 колонки */
.archive-main{ min-width:0; }
.content-layout .archive-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width: 640px){
  .content-layout .archive-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 960px){
  .content-layout{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .widget-area{ position:static; }
}

/* =========================================================
   20. МЕНЮ: ковзна риска знизу шапки + випадаючий список
   --dd-gap: відступ списку від нижнього краю шапки (px)
========================================================= */
@media (min-width: 961px){
  .site-header{ --dd-gap: 2px; }
  .primary-nav{ align-items:stretch; position:relative; }
  .primary-nav > ul > li > a::before{ display:none; }
  .nav-indicator{
    position:absolute; left:0; bottom:0;
    height:3px; width:0; background:var(--navy);
    opacity:0; pointer-events:none;
    transition: left .28s cubic-bezier(.3,.7,.2,1), width .28s cubic-bezier(.3,.7,.2,1), opacity .18s ease;
  }
  .nav-indicator.is-on{ opacity:1; }
  .primary-nav > ul > li > .sub-menu{ top: calc(100% + var(--dd-gap)); }
  /* невидимий місток, щоб курсор не «втрачав» пункт по дорозі до списку */
  .primary-nav > ul > li.menu-item-has-children::after,
  .primary-nav > ul > li.page_item_has_children::after{
    display:block; content:""; position:absolute; left:0; right:0; top:100%; height: var(--dd-gap);
  }
}
@media (max-width: 960px){ .nav-indicator{ display:none; } }

/* =========================================================
   21. КАРТКИ ПРОГРАМ: обкладинка зверху, акуратні метадані
========================================================= */
.program-card{ padding:0; display:flex; flex-direction:column; }
.program-cover{ display:block; aspect-ratio:16/10; overflow:hidden; background:#1a2d52; position:relative; }
.program-cover img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; transition:transform .5s ease; }
.program-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,32,64,0) 55%,rgba(18,32,64,.55)); pointer-events:none; }
.program-card:hover .program-cover img{ transform:scale(1.04); }
.program-cover__fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:64px; line-height:1; color:transparent; -webkit-text-stroke:1px var(--gold);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px),
    linear-gradient(135deg,#1c3260,#142548);
}
.program-body{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.program-card h3{ font-size:20px; line-height:1.3; margin-bottom:12px; }
.program-card h3 a{ color:inherit; }
.program-card h3 a:hover{ color:var(--gold); }
.program-meta{ margin:0 0 20px; display:grid; gap:10px; font-size:13.5px; }
.program-meta dt{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.program-meta dd{ margin:0; color:rgba(255,255,255,.85); }
.program-card .link-arrow{ margin-top:auto; }

/* =========================================================
   22. ПУБЛІКАЦІЇ: картки-посилання на PDF
========================================================= */
a.pub-card{ display:flex; flex-direction:column; color:inherit; transition:box-shadow .2s, transform .2s; }
a.pub-card:hover{ box-shadow:0 10px 28px rgba(18,32,64,.14); transform:translateY(-2px); }
.pub-card .pub-bottom{ display:flex; flex-direction:column; gap:14px; flex:1; }
.pub-sub{ display:block; }
.pub-open{ margin-top:auto; color:var(--gold-dark); font-weight:700; font-size:14.5px; }
a.pub-card:hover .pub-open, .pub-archive-link:hover .pub-open{ color:var(--navy); }

.pub-archive-card{ display:flex; }
.pub-archive-link{ display:flex; flex-direction:column; width:100%; color:inherit; }
.pub-archive-cover{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy); }
.pub-archive-cover.variant-2{ background:var(--navy-3); }
.pub-archive-cover.variant-3{ background:var(--gold); }
.pub-archive-cover img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; margin:0; transition:transform .4s ease; }
.pub-archive-link:hover .pub-archive-cover img{ transform:scale(1.03); }
.pub-archive-cover .pub-year{ background:rgba(18,32,64,.78); color:#fff; }
.pub-archive-body{ display:flex; flex-direction:column; gap:12px; padding:20px 22px 24px; flex:1; }
.pub-archive-body h3{ font-size:19px; line-height:1.3; margin:0; }
.pub-archive-body .pub-sub{ color:var(--gray); font-size:14px; }

/* --- 22б. Публікації в архіві: обкладинка A3 повністю, вільніші відступи --- */
.archive-card.pub-archive-card{ background:var(--white); }
.pub-archive-cover{ aspect-ratio:297/420; background:var(--muted); border-bottom:1px solid var(--border); }
.pub-archive-cover.variant-2, .pub-archive-cover.variant-3{ background:var(--muted); }
.archive-card .pub-archive-cover img{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; object-position:center; }
.pub-archive-link:hover .pub-archive-cover img{ transform:none; }
.pub-archive-body{ gap:16px; padding:26px 28px 30px; }
.pub-archive-body h3{ font-size:20px; line-height:1.35; margin:0; }
.pub-archive-body .pub-sub{ font-size:15px; line-height:1.6; }
.pub-archive-body .pub-open{ margin-top:auto; padding-top:18px; border-top:1px solid var(--border); }
.pub-card .pub-bottom{ gap:16px; padding:20px 22px 24px; line-height:1.55; }
.pub-card .pub-open{ padding-top:14px; border-top:1px solid var(--border); }

/* --- 23. Підтримка педагогів: клікабельні блоки і посилання на рубрику --- */
a.support-card{ display:flex; flex-direction:column; color:inherit; transition:background .2s; }
a.support-card:hover, a.support-card:focus-visible{ background:rgba(255,255,255,.13); }
a.support-card h4{ transition:color .2s; }
a.support-card:hover h4{ color:var(--gold); }
.support-card p{ margin-bottom:18px; }
.support-open{ margin-top:auto; color:var(--gold); font-weight:700; font-size:14px; }
.support-head p{ max-width:460px; }
.support-more{ display:inline-block; margin-left:6px; color:var(--gold); font-weight:700; white-space:nowrap; border-bottom:1px solid transparent; }
.support-more:hover{ border-bottom-color:var(--gold); }

/* --- 24. Публікації на головній: віяло обкладинок під текстом --- */
.pub-stack{ position:relative; height:340px; margin-top:44px; max-width:420px; }
.pub-stack__item{
  position:absolute; bottom:0; width:48%; aspect-ratio:297/420;
  background:var(--white); border:1px solid var(--border);
  box-shadow:0 14px 30px rgba(18,32,64,.18);
  transition:transform .35s cubic-bezier(.3,.7,.2,1), box-shadow .35s;
  transform-origin:bottom center;
}
.pub-stack__item img{ width:100%; height:100%; object-fit:contain; display:block; margin:0; }
.pub-stack__item.pos-1{ left:0;   z-index:1; transform:rotate(-7deg); }
.pub-stack__item.pos-2{ left:26%; z-index:2; transform:rotate(1deg) translateY(-14px); }
.pub-stack__item.pos-3{ left:52%; z-index:3; transform:rotate(8deg); }
.pub-stack--1 .pub-stack__item.pos-1{ left:12%; transform:rotate(-2deg); width:56%; }
.pub-stack--2 .pub-stack__item.pos-1{ left:4%; }
.pub-stack--2 .pub-stack__item.pos-2{ left:40%; }
.pub-stack__item:hover{ z-index:5; box-shadow:0 20px 40px rgba(18,32,64,.28); }
.pub-stack__item.pos-1:hover{ transform:rotate(-4deg) translateY(-12px); }
.pub-stack__item.pos-2:hover{ transform:rotate(0) translateY(-26px); }
.pub-stack__item.pos-3:hover{ transform:rotate(5deg) translateY(-12px); }
@media (max-width: 960px){ .pub-stack{ margin:36px auto 12px; } }
@media (prefers-reduced-motion: reduce){ .pub-stack__item{ transition:none; } }

/* --- 25. Міні-календар під текстом блока «Найближчі заходи» --- */
.mini-cal{ margin-top:40px; max-width:360px; background:var(--white); border:1px solid var(--border); border-top:3px solid var(--gold); padding:20px 22px 18px; }
.mini-cal__head{ display:flex; align-items:baseline; gap:8px; margin-bottom:14px; font-family:var(--font-serif); font-size:22px; color:var(--navy); }
.mini-cal__head span{ color:var(--gray); font-size:15px; font-family:var(--font-sans); }
.mini-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.mini-cal__dow{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); padding-bottom:6px; }
.mini-cal__day{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; font-size:14px; color:var(--navy); border-radius:50%; position:relative; }
.mini-cal__day.is-today{ box-shadow:inset 0 0 0 1.5px var(--navy); font-weight:700; }
.mini-cal__day.has-event{ background:var(--navy); color:#fff; font-weight:700; transition:background .2s, transform .2s; }
a.mini-cal__day.has-event:hover{ background:var(--gold-dark); transform:scale(1.08); }
.mini-cal__legend{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--gray); }
.mini-cal__legend i{ width:10px; height:10px; border-radius:50%; background:var(--navy); display:inline-block; }

/* --- 26. Календар зі звітами та планами заходів (PDF) --- */
.mini-cal__day.is-future{ color:rgba(18,32,64,.38); }
.mini-cal__head{ flex-wrap:wrap; }
.mini-cal__plan{ margin-left:auto; font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--gold-dark); }
.mini-cal__plan:hover{ color:var(--navy); }
.plans{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.plans__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:14px; color:var(--navy); }
.plans__years{ display:inline-flex; gap:4px; }
.plans__year{ border:1px solid var(--border); background:none; padding:3px 10px; font:inherit; font-size:13px; font-weight:600; color:var(--gray); cursor:pointer; }
.plans__year.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.plans__years-single{ font-size:13px; font-weight:600; color:var(--gray); }
.plans__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.plans__grid[hidden]{ display:none; }
.plans__chip{ display:flex; align-items:center; justify-content:center; gap:4px; padding:9px 0; font-size:13px; font-weight:600; border:1px dashed var(--border); color:rgba(18,32,64,.38); }
.plans__chip.is-on{ border:1px solid var(--navy); color:var(--navy); background:var(--white); transition:background .2s,color .2s; }
.plans__chip.is-on span{ font-size:11px; color:var(--gold-dark); }
a.plans__chip.is-on:hover{ background:var(--navy); color:#fff; }
a.plans__chip.is-on:hover span{ color:var(--gold); }
.plans__chip.is-current{ box-shadow:0 0 0 2px var(--gold); }
.archive-plans{ margin-bottom:40px; }
.archive-plans .plans{ max-width:520px; margin:0; padding:20px 22px; background:var(--white); border:1px solid var(--border); border-top:3px solid var(--gold); }

/* --- 27. Компактний блок «Заходи»: кнопка внизу списку, менший календар --- */
.calendar-intro p{ margin:16px 0 0; }
.calendar-more{ margin-top:32px; }
.mini-cal{ margin-top:28px; max-width:340px; padding:16px 18px 14px; }
.mini-cal__head{ margin-bottom:8px; font-size:20px; }
.mini-cal__grid{ gap:2px; }
.mini-cal__dow{ padding-bottom:2px; font-size:10.5px; }
.mini-cal__day{ aspect-ratio:auto; width:32px; height:32px; margin:0 auto; font-size:13px; }
.mini-cal__legend{ margin-top:10px; font-size:12px; }
.plans{ margin-top:14px; padding-top:12px; }
.plans__head{ margin-bottom:8px; font-size:13px; }
.plans__pdf{ margin-left:4px; padding:1px 6px; font-size:10px; letter-spacing:.06em; background:var(--navy); color:#fff; vertical-align:1px; }
.plans__grid{ grid-template-columns:repeat(6,1fr); gap:4px; }
.plans__chip{ padding:6px 0; font-size:12px; }
.plans__chip.is-on span{ display:none; }
.plans__chip.is-on{ font-weight:700; }
.archive-plans .plans__grid{ grid-template-columns:repeat(6,1fr); }

/* --- 28. Шапка: меню ближче до логотипа, колір риски --- */
.site-header{ --nav-line:#C9921A; }
.nav-indicator{ background:var(--nav-line); }
@media (min-width: 961px){
  .site-header > .container:first-child{ justify-content:flex-start; gap:0; }
  .primary-nav{ margin-left:clamp(28px,4vw,64px); margin-right:auto; }
  .primary-nav > ul{ gap:6px; }
  .primary-nav > ul > li > a{ padding-left:16px; padding-right:16px; }
  .header-search{ margin-left:24px; }
}

/* --- 29. Іконки SVG замість емодзі --- */
.icon{ display:block; flex-shrink:0; }
.icon-text{ font-size:1.2em; line-height:1; }
.ql-icon{ color:var(--gold-dark); display:flex; }
.quicklink:hover .ql-icon{ color:var(--navy); }
.support-icon{ display:block; margin-bottom:16px; color:var(--gold); }
.program-cover__fallback .icon{ color:var(--gold); }

/* --- 30. Банер хостера у підвалі --- */
.footer-host{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px; border-top:1px solid rgba(255,255,255,.12); }
.footer-host__label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.footer-host__banner{ display:inline-flex; align-items:center; gap:16px; min-height:52px; padding:10px 20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#fff; transition:background .2s,border-color .2s; }
.footer-host__banner:hover{ background:rgba(255,255,255,.14); border-color:var(--gold); color:#fff; }
.footer-host__banner img{ display:block; height:30px; width:auto; max-width:200px; object-fit:contain; margin:0; }
.footer-host__name{ font-family:var(--font-serif); font-size:22px; font-weight:700; letter-spacing:.01em; }
.footer-host__tag{ font-size:13px; color:rgba(255,255,255,.7); padding-left:16px; border-left:1px solid rgba(255,255,255,.25); }
.footer-host__arrow{ color:var(--gold); font-weight:700; }
@media (max-width:640px){ .footer-host{ flex-direction:column; align-items:flex-start; } }

/* --- 31. Підвал: контакти + карта, без меню --- */
.footer-grid--map{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:56px; align-items:stretch; }
.footer-grid--map.no-map{ grid-template-columns:1fr; }
.footer-grid--map .footer-brand-name{ font-family:var(--font-serif); font-size:24px; line-height:1.3; color:#fff; margin-bottom:24px; }
.footer-contacts{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:14px; }
.footer-contacts li{ display:flex; align-items:flex-start; gap:12px; line-height:1.5; }
.footer-contacts .icon{ color:var(--gold); margin-top:2px; }
.footer-contacts a:hover{ color:var(--gold); }
.footer-route{ display:inline-block; padding:12px 22px; border:1px solid var(--gold); color:var(--gold); font-weight:700; transition:background .2s,color .2s; }
.footer-route:hover{ background:var(--gold); color:var(--navy-deep); }
.footer-map{ min-height:300px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); }
.footer-map iframe{ display:block; width:100%; height:100%; min-height:300px; border:0; filter:grayscale(.25) contrast(1.02); }
.footer-menus{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); }
@media (max-width:900px){ .footer-grid--map{ grid-template-columns:1fr; gap:32px; } .footer-menus{ grid-template-columns:1fr; } }

/* =========================================================
   32. ГАЛЕРЕЯ «У ФОКУСІ» — ряди за пропорціями фото (без обрізання) + перегляд
========================================================= */
.gallery-intro{ max-width:760px; margin-bottom:40px; }
.focus-grid{ --row:250px; display:flex; flex-wrap:wrap; gap:12px; }
.focus-item{ margin:0; flex-grow:calc(var(--r) * 100); flex-basis:calc(var(--r) * var(--row)); min-width:0; }
.focus-fill{ flex-grow:1000000; height:0; }
.focus-link{ position:relative; display:block; aspect-ratio:var(--r); overflow:hidden; background:var(--muted); cursor:zoom-in; }
.focus-link img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; margin:0; transition:transform .5s ease; }
.focus-link:hover img{ transform:scale(1.03); }
.focus-cap{ position:absolute; left:0; right:0; bottom:0; padding:38px 16px 12px; background:linear-gradient(180deg,rgba(18,32,64,0),rgba(18,32,64,.82)); color:#fff; font-size:13.5px; line-height:1.4; opacity:0; transition:opacity .3s; }
.focus-link:hover .focus-cap, .focus-link:focus-visible .focus-cap{ opacity:1; }
.gallery-empty{ padding:24px; border:1px dashed var(--border); color:var(--gray); }
@media (max-width:700px){ .focus-grid{ --row:150px; gap:8px; } .focus-cap{ opacity:1; font-size:12px; padding:26px 10px 8px; } }

/* перегляд окремого фото: не збільшується понад свій розмір */
.lb{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(10,18,36,.94); padding:56px 64px 72px; }
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%; }
.lb__img{ display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - 180px); object-fit:contain; margin:0; background:#111; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lb__cap{ margin-top:14px; max-width:720px; text-align:center; color:rgba(255,255,255,.88); font-size:15px; line-height:1.5; min-height:1.5em; }
.lb__count{ position:absolute; left:0; right:0; bottom:20px; text-align:center; color:rgba(255,255,255,.55); font-size:13px; letter-spacing:.08em; }
.lb__btn{ position:absolute; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer; transition:background .2s,border-color .2s; }
.lb__btn:hover, .lb__btn:focus-visible{ background:rgba(255,255,255,.2); border-color:var(--gold); }
.lb__close{ top:16px; right:16px; }
.lb__prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb__next{ right:12px; top:50%; transform:translateY(-50%); }
body.lb-open{ overflow:hidden; }
@media (max-width:700px){ .lb{ padding:56px 12px 64px; } .lb__prev, .lb__next{ top:auto; bottom:12px; transform:none; width:42px; height:42px; } .lb__prev{ left:12px; } .lb__next{ right:12px; } }
@media (prefers-reduced-motion:reduce){ .focus-link img{ transition:none; } }

/* --- 33. «У фокусі»: об'єктив, видошукач, темна «галерейна» стіна --- */
.gallery-page{ background:radial-gradient(900px 500px at 85% 0%, rgba(201,146,26,.14), transparent 60%), linear-gradient(180deg,#112145 0%,#0b1630 100%); color:#fff; }
.gallery-hero{ position:relative; overflow:hidden; padding:84px 0 72px; }
.gallery-hero__inner{ position:relative; z-index:2; }
.gallery-hero h1{ font-size:clamp(48px,7vw,92px); line-height:1.02; margin:6px 0 14px; color:#fff; }
.gallery-hero__sub{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.2vw,26px); color:rgba(255,255,255,.82); margin:0 0 28px; }
.gallery-hero__exif{ font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; color:var(--gold); margin:0; opacity:.9; }
.lens{ position:absolute; z-index:1; right:max(-8%, -90px); top:50%; width:min(52vw,600px); aspect-ratio:1; transform:translateY(-50%); filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.lens__blades{ transform-origin:300px 300px; animation:lens-turn 60s linear infinite; }
@keyframes lens-turn{ to{ transform:rotate(360deg); } }
/* кутові мітки видошукача */
.vf{ position:absolute; z-index:2; width:34px; height:34px; border:0 solid var(--gold); opacity:.85; }
.vf--tl{ top:26px; left:26px; border-top-width:2px; border-left-width:2px; }
.vf--tr{ top:26px; right:26px; border-top-width:2px; border-right-width:2px; }
.vf--bl{ bottom:26px; left:26px; border-bottom-width:2px; border-left-width:2px; }
.vf--br{ bottom:26px; right:26px; border-bottom-width:2px; border-right-width:2px; }
.gallery-page .content-wrap{ background:transparent; padding-top:28px; padding-bottom:96px; }
.gallery-page .gallery-intro{ color:rgba(255,255,255,.85); }
.gallery-page .gallery-intro a{ color:var(--gold); }
.gallery-page .gallery-empty{ color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.25); }
.gallery-page .focus-link{ background:#0a1328; outline:1px solid rgba(255,255,255,.08); }
.gallery-page .breadcrumbs, .gallery-page .breadcrumbs a{ color:rgba(255,255,255,.65); }

/* ефект «наведення на різкість»: решта кадрів м'яко розфокусується */
.focus-item{ transition:opacity .5s ease, filter .5s ease, transform .7s ease; }
@media (hover:hover){
  .focus-grid:hover .focus-item:not(:hover){ opacity:.5; filter:blur(2px) saturate(.55); }
}
/* поява: кадри «наводяться на різкість» при прокрутці */
.focus-anim .focus-item:not(.is-in){ opacity:0; filter:blur(14px); transform:scale(1.04); }
@media (max-width:900px){
  .gallery-hero{ padding:56px 0 52px; }
  .lens{ width:78vw; right:-28vw; opacity:.5; }
  .vf{ width:22px; height:22px; } .vf--tl,.vf--tr{ top:14px; } .vf--bl,.vf--br{ bottom:14px; } .vf--tl,.vf--bl{ left:14px; } .vf--tr,.vf--br{ right:14px; }
}
@media (prefers-reduced-motion:reduce){
  .lens__blades{ animation:none; }
  .focus-anim .focus-item:not(.is-in){ opacity:1; filter:none; transform:none; }
  .focus-grid:hover .focus-item:not(:hover){ filter:none; }
}

/* =========================================================
   34. ОБЛАСНА МЕТОДИЧНА СЛУЖБА — картки співробітників з фільтром
========================================================= */
.ms-intro{ max-width:780px; margin-bottom:36px; }
.ms-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-bottom:40px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.ms-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ms-chip{ border:1px solid var(--border); background:var(--white); color:var(--navy); padding:9px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.ms-chip span{ margin-left:6px; font-size:12px; color:var(--gray); font-weight:500; }
.ms-chip:hover{ border-color:var(--navy); }
.ms-chip.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ms-chip.is-active span{ color:rgba(255,255,255,.7); }
.ms-search{ display:flex; align-items:center; gap:10px; min-width:260px; padding:0 14px; border:1px solid var(--border); background:var(--white); color:var(--gray); }
.ms-search:focus-within{ border-color:var(--navy); }
.ms-search input{ flex:1; border:0; outline:0; background:none; padding:11px 0; font:inherit; font-size:14.5px; color:var(--navy); min-width:0; }
.ms-section{ margin-bottom:56px; }
.ms-section[hidden], .ms-card[hidden]{ display:none; }
.ms-title{ font-size:clamp(22px,2.6vw,30px); margin:0 0 28px; padding-bottom:12px; border-bottom:1px solid var(--border); position:relative; }
.ms-title::after{ content:""; position:absolute; left:0; bottom:-1px; width:56px; height:3px; background:var(--gold); }
.ms-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:44px 28px; }
.ms-card{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.ms-photo-wrap{ margin-bottom:20px; }
.ms-photo{ --ava:150px; display:block; width:var(--ava); height:var(--ava); box-sizing:border-box; border-radius:50%; object-fit:cover; object-position:center 25%; border:3px solid var(--gold); padding:6px; background:#fff; margin:0; transition:border-color .3s; }
.ms-card:hover .ms-photo{ border-color:var(--navy); }
.ms-photo--init{ display:flex; align-items:center; justify-content:center; background:var(--navy); color:var(--gold); font-family:var(--font-serif); font-size:44px; background-clip:content-box; }
.ms-name{ font-size:19px; line-height:1.3; margin:0 0 8px; overflow-wrap:anywhere; }
.ms-pos{ margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--gray); overflow-wrap:anywhere; }
.ms-contacts{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:8px; font-size:14px; min-width:0; max-width:100%; }
.ms-contacts li{ display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.ms-contacts .icon{ color:var(--gold-dark); }
.ms-contacts a{ color:var(--navy); overflow-wrap:anywhere; }
.ms-contacts a:hover{ color:var(--gold-dark); text-decoration:underline; }
.ms-empty{ padding:28px; border:1px dashed var(--border); color:var(--gray); text-align:center; }
@media (max-width:700px){ .ms-search{ width:100%; min-width:0; } .ms-grid{ grid-template-columns:repeat(2,1fr); gap:36px 16px; } .ms-photo{ --ava:120px; } .ms-name{ font-size:16.5px; } .ms-contacts{ font-size:12.5px; } }
@media (max-width:420px){ .ms-grid{ grid-template-columns:1fr; } .ms-photo{ --ava:140px; } }


/* =========================================================
   ПЕРІОДИЧНІ ВИДАННЯ (головна)
========================================================= */
.section--muted{ background: var(--muted); }
.periodicals{ scroll-margin-top: 20px; }
.periodicals-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.periodical-card{
  display:flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
}
.periodical-cover{
  flex: 0 0 38%;
  display:block;
  background: var(--secondary);
  position:relative;
  min-height: 260px;
}
.periodical-cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: top center;
  display:block;
}
.periodical-cover-ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.55);
}
.periodical-body{
  flex:1; min-width:0;
  padding: 28px 28px 26px;
  display:flex; flex-direction:column;
}
.periodical-body h3{ font-size: 24px; margin: 0 0 8px; }
.periodical-desc{ color: var(--gray); font-size: 14.5px; margin: 0 0 16px; }
.periodical-issue{
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: 20px;
}
.periodical-issue-label{
  display:block;
  font-size: 11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}
.periodical-issue-title{
  display:block;
  font-family: var(--font-display);
  font-size: 17px; line-height:1.35;
  color: var(--ink);
}
.periodical-actions{
  margin-top:auto;
  display:flex; align-items:center; flex-wrap:wrap;
  gap: 14px 22px;
}
.periodical-actions .btn{ padding: 12px 22px; }

@media (max-width: 960px){
  .periodicals-grid{ grid-template-columns: minmax(0,1fr); }
  .quicklinks .container .quicklink:last-child:nth-child(odd){ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .periodical-card{ flex-direction:column; }
  .periodical-cover{ flex:none; min-height:0; aspect-ratio: 4 / 3; }
  .periodical-body{ padding: 22px 20px; }
}


/* Фото в картках заходів */
.archive-card .card-img{ display:block; width:100%; aspect-ratio:1200/630; object-fit:cover; background:var(--muted); }
.archive-card .card-img--ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--secondary),var(--primary)); }
.archive-card .card-img--ph::after{ content:"Х"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif,Georgia,serif); font-weight:700; font-size:72px; color:rgba(255,255,255,.14); }


/* Зображення в картках — повністю, без обрізання (афіші, плакати).
   Вільні поля заповнює розмите те саме зображення. */
.fit{ display:block; position:relative; aspect-ratio:1200/630; overflow:hidden; background:var(--muted); }
.fit::before{ content:""; position:absolute; inset:-24px; background:var(--fit-bg) center/cover no-repeat; filter:blur(22px) saturate(1.1); opacity:.7; }
.news-featured .fit img,
.archive-card .fit img{ position:relative; display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; margin:0; background:transparent; }
.entry-content > img.wp-post-image,
.entry-content > .wp-post-image{ width:100%; height:auto; aspect-ratio:auto; object-fit:initial; }


/* План заходів на місяць — угорі картки, над календарем */
.mini-cal > .plans{ margin:0 0 16px; padding:0 0 14px; border-top:0; border-bottom:1px solid var(--border); }