/* ====== Base / Reset ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, html { height: 100%; font-family: 'Segoe UI', sans-serif; }
body { overflow-x: hidden; } /* предотвратява хор. скрол от full-bleed */

/* ====== Header / Branding ====== */
.header { background: #cabaf454; }
@media (min-width: 1024px) {
  .site-brand img { max-height: 160px; padding-right: 20px; }
  .region-primary-menu .menu a { font-size: 1.3em; }
}

/* ====== Типография и дребни елементи ====== */
b, strong { font-weight: bold; }
.slider td { padding: 0 15px; border: 2px solid #fff; }
#drupalorg-site-status {
  background: #d32101; color: #fff; padding: .5em; text-align: center; position: relative;
  box-shadow: 0 2px 2px 1px rgba(68,68,68,.5); z-index: 1; font-size: 1.4em;
}
#drupalorg-site-status a { color: #fff; text-decoration: underline; }
#block-nava-content img {/* padding-bottom: 30px; */}

/* ====== Гъвкави секции ====== */
.features, .services { display: flex; gap: 1rem; flex-wrap: wrap; }
.feature, .service {
  flex: 1 0 300px; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; border-radius: 6px; transition: all .4s ease;
}
.feature { background: #fff; box-shadow: var(--shadow-border); }
.service { background: var(--color-secondary-light); border-bottom: 4px solid var(--color-primary); }

/* Икони */
[class=ficon], [class^=ficon-], [class*=" ficon-"] {
  display: inline-block; font-family: "thex" !important; font-weight: 400;
  font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1;
  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
}

/* ====== Responsive iFrame ====== */
.responsive-iframe-container { position: relative; padding-top: 0; height: 0; overflow: hidden; }
.responsive-iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (min-width: 550px) { .responsive-iframe-container { padding-bottom: 75%; } }
@media (max-width: 550px) { .responsive-iframe-container { padding-bottom: 150%; } }

/* ====== Видео галерия ====== */
.video-section { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.video-card {
  flex: 1 1 300px; max-width: 100%; box-sizing: border-box;
  border: 1px solid #ccc; padding: 15px; border-radius: 10px; background: #f9f9f9;
}
.video-card iframe { width: 100%; height: 200px; border-radius: 5px; }
.video-description { margin-top: 10px; font-size: 14px; line-height: 1.5; text-align: center; }

/* ===================================================================
   HERO (Видео като background) — FULL-BLEED без странични празнини
   =================================================================== */

/* Контейнер на HERO (вътрешен слой) */
.hero {
  position: relative;
  min-height: clamp(420px, 70vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* Външната секция да е full-bleed, дори да е в .container */
.section-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(hero.jpg) no-repeat center center / cover;
}

/* Слой 0: контейнер за видеото */
#hero1 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.7; /* <-- само един път */
}

/* Самото видео – да запълва изцяло */
#hero1 video, #hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
#hero1 video { opacity: 0.65; }

/* Слой 1: overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
  pointer-events: none;
}

/* Слой 2: съдържание */
.hero-content { position: relative; z-index: 2; padding-inline: 1rem; }
.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 5rem;
  color: #FFA500;
  text-shadow: 6px 6px 6px rgba(0,0,0,.7);
  font-weight: bold;
  animation: fadeInUp 1s ease-out forwards;
}
.hero-content p {
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,.6);
  margin-bottom: 5rem;
  animation: fadeIn 1.5s ease-out forwards;
}
.hero-content p em strong { color: #fff !important; margin-bottom: 10rem; }

/* Бутон */
.hero-button {
  display: inline-block;
  padding: .9rem 1.4rem;
  border-radius: .4rem;
  font-weight: 700;
  background: #ff9900;
  color: #fff;
  text-decoration: none;
  transition: background-color .3s ease;
}
.hero-button:hover { background: #e28100; }

/* Слой 3: YouTube бутон */
.hero-yt {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 3;
  width: clamp(44px, 6vw, 64px);
  height: clamp(44px, 6vw, 64px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-yt svg { width: 60%; height: 60%; display: block; fill: #ff0000; }
.hero-yt:hover, .hero-yt:focus {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
  background: rgba(255,255,255,.25);
}
.hero-yt:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 10px 26px rgba(0,0,0,.32);
}

/* Анимации */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ==========================================================
   CARDS (Views Responsive Grid) — FIX long titles / no overflow
   ========================================================== */

/* 0) Важното: позволяваме на flex/grid да свива съдържание */
.views-view-responsive-grid__item,
.views-view-responsive-grid__item-inner,
.views-view-responsive-grid__item-inner *{
  min-width: 0 !important;
}

/* 1) Картата “реже” всичко, което стърчи */
.views-view-responsive-grid__item-inner{
  overflow: hidden !important;
}

/* 2) service wrapper – стабилен flex */
.views-view-responsive-grid__item-inner .service{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* 3) линк със снимката */
.views-view-responsive-grid__item-inner .service > a{
  display: block !important;
}

/* 4) Заглавие: режем на 3 реда и чупим дълги думи */
.views-view-responsive-grid__item-inner .service h4{
  margin: 10px 0 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
  white-space: normal !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important; /* <-- ако искаш 2 реда: смени на 2 */
}

/* 5) Ако заглавието е линк – ограничаваме и него */
.views-view-responsive-grid__item-inner .service h4 a{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
  white-space: normal !important;
  text-decoration: none !important;
}

/* 6) Fallback за браузъри без line-clamp: пак да не “излиза” */
@supports not (-webkit-line-clamp: 3){
  .views-view-responsive-grid__item-inner .service h4,
  .views-view-responsive-grid__item-inner .service h4 a{
    display: block !important;
    max-height: calc(1.25em * 3); /* 3 реда */
    line-height: 1.25;
  }
}

/* 7) Дата/мета – да не раздува */
.views-view-responsive-grid__item-inner .service p{
  margin: 8px 0 0 !important;
}
/* === OPazi News: 2-column cards === */
.view-content{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* 1 column on mobile */
@media (max-width: 900px){
  .view-content{ grid-template-columns: 1fr; }
}

.view-content > .views-row{
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #ffffff1a;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;

  /* card layout */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  min-height: 180px;
}

/* title */
.view-content > .views-row h2.field-content{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.view-content > .views-row h2.field-content a:hover{
  text-decoration: underline;
}

/* image: make it look like a cover */
.view-content > .views-row > a{
  display: block;
  order: -1;                 /* image on top */
  border-radius: 12px;
  overflow: hidden;
}

.view-content > .views-row img.image-field{
  display: block;
  width: 100%;
  height: 190px;             /* consistent card height */
  object-fit: cover;
}

/* date line ("Публикувано: ...") */
.view-content > .views-row time{
  display: inline-block;
  font-size: 13px;
  opacity: .75;
}

/* excerpt */
.view-content > .views-row p{
  margin: 0;
  line-height: 1.45;
  opacity: .9;
  flex: 1;
}

/* optional: trim very long titles a bit */
@media (min-width: 901px){
  .view-content > .views-row h2.field-content{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* === Date separator styling === */
.view-content > .views-row time{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  display: block;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 6px;
}
#block-nava-content {
    margin: 0 0 150px 0;
}