/*
 Theme Name: Вірую - Дочірня Тема
 Theme URI: https://viruyou.info
 Description: Спеціалізована дочірня тема для проекту Вірую, створена на основі Astra.
 Author: Ваш Ідентифікатор
 Author URI: https://viruyou.info
 Template: astra
 Version: 1.0.0
*/

/* ------------- Базові змінні ------------- */
:root{
  --vru-bg1: #f6f9fc;
  --vru-bg2: #eef4fb;
  --vru-card-bg: #ffffff;
  --vru-accent: linear-gradient(135deg,#6b4cff 0%,#8e44ff 100%);
  --vru-text: #12202b;
  --vru-muted: #5b6b78;
  --vru-shadow: 0 10px 28px rgba(16,24,40,0.08);
  --vru-radius: 14px;
  --vru-gap: 18px;
}

/* Скидання спадку стилів для нашого контейнера — дає передбачувану сітку */
.vru-container,
.vru-container * {
  box-sizing: border-box;
}

/* Сторінковий фон і контейнер */
.vru-container {
  width:100%;
  background: linear-gradient(180deg,var(--vru-bg1),var(--vru-bg2));
  padding: 48px 18px;
  display:flex;
  justify-content:center;
}

.vru-inner {
  max-width:1100px;
  width:100%;
  text-align:center;
}

/* Заголовок */
.vru-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size:34px;
  margin: 6px 0 6px;
  color:var(--vru-text);
  line-height:1.05;
}

.vru-subtitle {
  color:var(--vru-muted);
  font-size:16px;
  margin-bottom:28px;
}

/* Сітка — гарантовано 2 колонки на мобільному та більше на великих екранах */
.vru-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* завжди 2 в ряд */
  gap: var(--vru-gap);
  justify-items:center;
  align-items:stretch;
  margin: 0 auto;
}

/* Карта/кнопка */
.vru-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--vru-text);
  background:var(--vru-card-bg);
  border-radius:var(--vru-radius);
  box-shadow: var(--vru-shadow);
  padding:22px;
  width:100%;
  max-width:360px;
  /* робимо однакову висоту через aspect-ratio — зберігає однаковість незалежно від тексту */
  aspect-ratio: 4 / 3;
  transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease, background .25s ease;
  position:relative;
  overflow:hidden;
}

/* Акцентна полоска зверху (тонка) */
.vru-card::before {
  content: "";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background: var(--vru-accent);
}

/* Іконка */
.vru-card .vru-icon {
  width:68px;
  height:68px;
  margin-bottom:12px;
  display:inline-block;
  transition: transform .2s ease;
}

/* Заголовок кнопки */
.vru-card .vru-label {
  font-weight:700;
  font-size:1.02rem;
  line-height:1.15;
  text-align:center;
  padding: 0 6px;
  color:var(--vru-text);
  display:block;
}

/* Опис (за бажанням можна додати) */
.vru-card .vru-desc {
  font-size:0.92rem;
  color:var(--vru-muted);
  margin-top:8px;
}

/* Hover / фокус */
.vru-card:hover,
.vru-card:focus {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(16,24,40,0.12);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}
.vru-card:hover .vru-icon,
.vru-card:focus .vru-icon {
  transform: scale(1.08) rotate(-3deg);
}

/* Забезпечуємо, щоб назви різної довжини не міняли розмір картки */
.vru-label { white-space:normal; word-wrap:break-word; }

/* Адаптація: буквально гарантовано 2 в ряд на дуже вузьких екранах */
@media (max-width:520px){
  .vru-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
  .vru-card { aspect-ratio: 1.2 / 1; padding:16px; }
  .vru-card .vru-icon { width:54px; height:54px; margin-bottom:8px; }
  .vru-label { font-size:0.95rem; }
}

/* Додаткові корективи, якщо Astra задає надто агресивні стилі */
/* підвищуємо специфічність */
.page .vru-container,
.single .vru-container,
.vru-container { 
  /* лишній простір для сумісності з різними макетами Astra */
  padding-left:16px;
  padding-right:16px;
}

/* Дрібні візуальні поліпшення */
.vru-note { margin-top:18px; color:var(--vru-muted); font-size:0.95rem; }
/* ===== vru — чисті кнопки (only buttons) ===== */
.vru-only-grid {
  max-width:980px;
  margin:30px auto;
  padding:12px;
  box-sizing:border-box;
}

/* дві картки в ряд завжди */
.vru-only-grid .vru-grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* гарантовано 2 в ряд */
  gap:18px;
  align-items:stretch;
  justify-items:center;
}

/* однакова картка */
.vru-only-grid .vru-card {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: #0f1724;
  background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(16,24,40,0.08);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease;
  /* фіксуємо висоту, щоб усі однакові */
  aspect-ratio: 4 / 3;
  min-height:140px;
}

/* акцентна тонка смужка зверху */
.vru-only-grid .vru-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:6px;
  background: linear-gradient(90deg,#6b4cff,#8e44ff);
}

/* обгортка іконки (коло) */
.vru-only-grid .vru-icon-wrap{
  width:86px;
  height:86px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0)) , linear-gradient(135deg,#6b4cff 0%, #8e44ff 100%);
  box-shadow: 0 6px 18px rgba(107,76,255,0.15);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* сам svg/png */
.vru-only-grid .vru-icon{
  width:48px;
  height:48px;
  display:block;
}

/* підпис — лише текст назви на кнопці */
.vru-only-grid .vru-label{
  display:block;
  font-weight:700;
  font-size:1.02rem;
  color:#0f1724;
  text-align:center;
  line-height:1.12;
  padding:0 8px;
  word-wrap:break-word;
}

/* hover/focus */
.vru-only-grid .vru-card:hover,
.vru-only-grid .vru-card:focus {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(16,24,40,0.12);
}
.vru-only-grid .vru-card:hover .vru-icon-wrap,
.vru-only-grid .vru-card:focus .vru-icon-wrap {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 30px rgba(107,76,255,0.18);
}

/* адаптація: якщо екран дуже вузький, все одно 2 в ряд, з трохи меншою висотою */
@media (max-width: 520px){
  .vru-only-grid .vru-grid { gap:12px; }
  .vru-only-grid .vru-card { aspect-ratio: 1.1 / 1; min-height:120px; padding:14px; }
  .vru-only-grid .vru-icon-wrap { width:64px; height:64px; margin-bottom:10px; }
  .vru-only-grid .vru-icon { width:36px; height:36px; }
  .vru-only-grid .vru-label { font-size:0.92rem; }
}

/* ще сильніша специфічність якщо Astra щось перебиває */
body .vru-only-grid .vru-card { /* no-op to increase specificity */ }