/*This is a template style for Harmovia homepages
  -- ROOT --
  Този блок дефинира глобални CSS променливи (custom properties).
  Използват се за централизирано управление на цветове, сенки, разстояния и други стойности.
  Промяната на една стойност тук ще се отрази навсякъде, където се използва съответната променлива.
*/
:root {
  --hmv-text: #111827; /* gray-900 */
  --hmv-text-muted: #4b5563; /* gray-600 */
  --hmv-text-links: #0830a6;
  --hmv-bg-top: #ffffff;
  --hmv-bg-bottom: #f3f4f6; /* gray-100 */
  --hmv-card-bg: #ffffff;
  --hmv-shadow: 0 4px 8px rgba(0,0,0,.08);
  --hmv-shadow-lg: 0 8px 20px rgba(0,0,0,.30);
  --hmv-radius: 18px;
  --hmv-gap: 1.25rem; /* 20px */
}

/*
  -- WRAPPER --
  Основният контейнер, който "опакова" цялото съдържание.
  Ограничава максималната му ширина, за да изглежда добре на големи екрани,
  и го центрира хоризонтално в рамките на статията.
*/
.hmv-wrap {
  width: 100%;
  max-width: 75rem; /* ~1200px */
  text-align: center;
  margin: 0 auto;
}

/*
  -- TITLE --
  Стилове за главното заглавие (<h1>).
  Използва 'clamp' за адаптивен размер на шрифта, който се мащабира
  спрямо ширината на екрана.
*/
.hmv-title {
  font-size: clamp(1.75rem, 2vw + 0.7rem, 2rem);
  font-weight: 800;
  margin: 0 0 1rem 0;
  line-height: 1.15;
  color: var(--hmv-text);
}

/*
  -- LEAD PARAGRAPH --
  Стилове за уводния параграф, който се намира под заглавието.
  Прави го малко по-голям от основния текст и с по-светъл цвят.
*/
.hmv-lead {
  font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem);
  color: var(--hmv-text-muted);
  margin: 0 0 2rem 0;
}

/*
  -- GRID CONTAINER --
  Това е контейнерът, който подрежда картите.
  Използва CSS Grid, за да ги позиционира. Първоначално са в една колона.
*/
.hmv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hmv-gap);
  width: 100%;
  max-width: 64rem; /* ~1024x */
  margin: 0 auto;
}

/*
  -- RESPONSIVE GRID --
  Това е Media Query, което променя подредбата на картите при по-големи екрани.
  Когато ширината на екрана е 768px или повече, картите се подреждат в две колони.
*/
@media (min-width: 768px) {
  .hmv-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/*
  -- CARD STYLING --
  Основният стил за всяка една от картите.
  Дефинира фон, заоблени ъгли, сянка, вътрешни отстояния и ефекти при преход.
*/
.hmv-card {
  background: var(--hmv-card-bg);
  border-radius: var(--hmv-radius);
  box-shadow: var(--hmv-shadow);
  padding: 1.25rem; /* 20px */
  text-align: left;
  transition: box-shadow .25s ease, transform .25s ease;
  cursor: pointer;
}

/*
  -- CARD HOVER EFFECT --
  Дефинира визуалния ефект, когато потребителят постави мишката върху карта.
  Сянката става по-изразена и картата леко се "повдига".
*/
.hmv-card:hover {
  box-shadow: var(--hmv-shadow-lg);
  transform: translateY(-2px);
}

/*
  -- CARD TITLE --
  Стилове за заглавието (<h2>) вътре във всяка карта.
*/
.hmv-card h2 {
  font-size: 1.50rem;
  margin: 0 0 .5rem 0;
  color: var(--hmv-text);
}

/*
  -- CARD PARAGRAPH --
  Стилове за описателния текст (<p>) вътре във всяка карта.
*/
.hmv-card p {
  margin: 0;
  color: var(--hmv-text-muted);
  line-height: 1.6;
}
/*
  -- СТИЛОВЕ ЗА СНИМКА В КАРТА --
  Този клас оформя изображението, така че да пасне
  в дизайна на картата.
*/
.hmv-card-image {
  width: 100%; /* Разпъва снимката по цялата ширина на картата */
  height: auto; /* Запазва пропорциите на снимката */
  margin-bottom: 1rem; /* Добавя разстояние между снимката и заглавието */
  border-radius: 12px; /* Заобля ъглите на снимката, за да пасне на картата */
}
/*
  -- СТИЛОВЕ ЗА КЛИКАЕМА КАРТА --
*/

/* 1. Казваме на картата да служи като основа за позициониране. */
.hmv-card {
  position: relative;
}

/* 2. Стилизираме самия линк. */
.hmv-card-anchor {
  text-decoration: none; /* Премахваме подчертаването */
  color: inherit; /* Линкът наследява цвета на заглавието */
}

/* 3. Това е "магията": създаваме невидим слой върху линка,
      който се разпъва и покрива цялата карта. */
.hmv-card-anchor::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*
  -- СТИЛ ЗА ЦВЯТ НА ЛИНК ПРИ HOVER --
  Задаваме цвят, който е част от нашата палитра,
  за да има ясна индикация, но без да е твърде натрапчиво.
*/
.hmv-card-anchor:hover {
  color: var(--hmv-text-links); /* <--- ПРОМЯНАТА Е ТУК */
  text-decoration: none;
}

/* Font Awesome font-display fix - safe from Joomla updates */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: optional;
  src: url('https://harmovia.eu/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2?v=4a6591') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('https://harmovia.eu/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2?v=4a6591') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('https://harmovia.eu/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2?v=4a6591') format('woff2');
}