/* ==========================================================
   news-page.css
   Стилі для сторінки «Новини та акції» (Сімпа)
   Використовує CSS-змінні та базові класи з основного styles.css
   ========================================================== */


/* === HERO ================================================ */
.news-hero {
  padding: 50px 0 30px;
  position: relative;
}
.news-hero .breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
  margin-bottom: 22px; flex-wrap: wrap;
}
.news-hero .breadcrumbs a { color: var(--muted); transition: color .2s; }
.news-hero .breadcrumbs a:hover { color: var(--rose-deep); }
.news-hero .breadcrumbs .sep { opacity: 0.4; }
.news-hero .breadcrumbs .current { color: var(--ink); font-weight: 600; }

.news-hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 800px;
}
.news-hero h1 em {
  font-style: italic;
  color: var(--rose);
}
.news-hero .subtitle {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 8px;
}


/* === Список новин (заміна .panel-group accordion) ======== */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.news-list:empty::before {
  content: 'Поки що тут порожньо — слідкуйте за оновленнями.';
  display: block;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 15px;
}


/* === Картка новини (заміна .panel.panel-default) ========= */
.panel-default {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.panel-default:hover {
  border-color: var(--rose-soft);
  box-shadow: 0 12px 28px -16px rgba(31,26,38,0.15);
}
.panel-default.is-open {
  border-color: var(--rose);
  box-shadow: var(--shadow-card);
}

/* Заголовок-кнопка */
.panel-heading {
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.panel-heading:hover { background: var(--cream); }
.panel-heading > a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  text-decoration: none;
  color: var(--ink);
}
.panel-heading > a::before {
  content: '';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose-pale);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d97208' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color .25s;
}
.panel-default.is-open .panel-heading > a::before {
  background-color: var(--rose);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}
.panel-title {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
/* Chevron справа */
.panel-heading > a::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a4856' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .25s;
}
.panel-default.is-open .panel-heading > a::after {
  transform: rotate(180deg);
}


/* === Тіло новини (collapse) ============================== */
.panel-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.panel-default.is-open .panel-collapse {
  max-height: 4000px; /* достатньо великий для більшості новин */
}

.panel-body {
  padding: 8px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Bootstrap-сітку col-md-* з шаблону новини знеймліваємо у звичайний flow + grid для зображень */
.panel-body .col-md-12,
.panel-body .col-md-6 {
  width: 100%;
  padding: 0;
  float: none;
}

/* Текст новини — стилізуємо контент */
.panel-body .col-md-12 {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
}
.panel-body .col-md-12 p { margin-bottom: 12px; }
.panel-body .col-md-12 p:last-child { margin-bottom: 0; }
.panel-body .col-md-12 strong { color: var(--ink); }
.panel-body .col-md-12 a {
  color: var(--rose-deep);
  border-bottom: 1px dashed currentColor;
  transition: color .2s;
}
.panel-body .col-md-12 a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.panel-body .col-md-12 ul,
.panel-body .col-md-12 ol {
  margin: 8px 0 12px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-body .col-md-12 h1,
.panel-body .col-md-12 h2,
.panel-body .col-md-12 h3,
.panel-body .col-md-12 h4 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 16px 0 10px;
  line-height: 1.2;
}
.panel-body .col-md-12 h2 { font-size: 24px; }
.panel-body .col-md-12 h3 { font-size: 20px; }
.panel-body .col-md-12 h4 { font-size: 18px; }

/* Iframe (Facebook-пости, YouTube тощо) — респонсив-обгортка */
.panel-body iframe {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 12px;
}
/* FB-пости та подібні часто мають фіксовану ширину 500 і висоту — на mobile робимо чесний 100% */
.panel-body p:has(> iframe) {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Картинки новин — група col-md-6 формує grid 2-в-ряд */
.panel-body .pad__b {
  margin-bottom: 0; /* перевизначаємо bootstrap */
}
/* Створюємо grid-обгортку через :has — якщо є col-md-6.pad__b сусіди, групуємо їх */
.panel-body .pad__b img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  display: block;
  cursor: zoom-in;
  transition: transform .35s, box-shadow .35s;
  box-shadow: 0 6px 16px -8px rgba(31,26,38,0.15);
}
.panel-body .pad__b img:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(217,114,8,0.3);
}

/* Якщо у новині кілька зображень — використовуємо grid через wrapper.
   Bootstrap col-md-6 не дає нативного grid, тому додаємо клас .news-images
   у JS, який групує підряд .pad__b елементи. */
.news-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}


/* === Пагінація =============================================
   Працює зі стандартною Bootstrap-розміткою, яку генерує
   get_i18n_search_results():
     <div class="col-md-12">
       <nav aria-label="Page navigation">
         <ul class="pagination">
           <li><a href="..."><span>&lt;&lt;</span></a></li>
           <li class="active"><a href="#">2<span class="sr-only">(current)</span></a></li>
           <li><a href="...">3</a></li>
         </ul>
       </nav>
     </div>
   ========================================================= */
.pagination {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 48px 0 0;
  padding: 0;
}
/* Обгортка від get_i18n_search_results — приводимо до нормального flow */
.news-list ~ nav,
.news-list + .col-md-12,
.news-list .col-md-12 {
  width: 100%;
  padding: 0;
  float: none;
}

.pagination li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.pagination li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
  line-height: 1;
}
.pagination li a:hover {
  border-color: var(--rose);
  color: var(--rose-deep);
  background: var(--rose-pale);
  transform: translateY(-1px);
}
/* Стрілки (<<, <, >, >>) виводяться як <span> всередині <a> — робимо їх трохи більшими */
.pagination li a > span[aria-hidden="true"] {
  font-size: 16px;
  line-height: 1;
}

/* Активна сторінка */
.pagination li.active a,
.pagination li.active a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  cursor: default;
  transform: none;
}

/* Bootstrap-screen-reader-only (текст "(current)") — приховуємо візуально, лишаючи доступним */
.pagination .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Тонке полегшення на мобільному — менші кнопки і вирівнювання */
@media (max-width: 480px) {
  .pagination {
    gap: 4px;
    margin-top: 36px;
  }
  .pagination li a {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 13.5px;
    border-radius: 10px;
  }
}


/* === Lightbox для зображень новин ======================== */
.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,15,22,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  cursor: zoom-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.news-lightbox.open { display: flex; }
.news-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  cursor: default;
  background: #fff;
}
.news-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  transition: transform .25s;
  z-index: 2;
}
.news-lightbox-close:hover { transform: rotate(90deg) scale(1.05); }


/* === Адаптив ============================================= */
@media (max-width: 1060px) {
  .panel-heading > a { padding: 20px 22px; gap: 16px; }
  .panel-title { font-size: 19px; }
  .panel-body { padding: 6px 22px 24px; }
}

@media (max-width: 640px) {
  .news-hero { padding: 24px 0 12px; }
  .panel-heading > a { padding: 18px 16px; gap: 12px; }
  .panel-heading > a::before { width: 32px; height: 32px; background-size: 16px; }
  .panel-heading > a::after { width: 24px; height: 24px; }
  .panel-title { font-size: 17px; }
  .panel-body { padding: 4px 18px 22px; }
  .news-images {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .news-lightbox { padding: 50px 12px; }
  .news-lightbox-close { top: 14px; right: 14px; width: 42px; height: 42px; }
}