/* ==========================================================================
   SLID Media — Головна сторінка
   Стилі перенесені з Figma: iFbFpxME72YfNJuEA2n13x / node 290-2277
   ========================================================================== */

/* -------------------------------------------------------------------------
   Дизайн-токени (з Figma globalVars)
   -------------------------------------------------------------------------
   Кольори:
     #FFFFFF — білий фон (fill_I5V3U3)
     #000000 — чорний текст (fill_BAGKE4)
     #FC5731 — акцентний помаранчевий (fill_3C34BD)
     #DCDCDC — роздільник (fill_5BCRFN)
     #F5F5F5 — фон категорійного nav (fill_PX660V)
   Шрифти:
     "Forma DJR Cyrillic Text" — заголовки, логотип
     "Montserrat" — тіло тексту, навігація
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   CSS VARIABLES - Тепер підключаються через tokens.css
   ------------------------------------------------------------------------- */

.slid-card__full-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Ensure parents are relative in all contexts */
.slid-card, 
.slid-card__link {
  position: relative !important;
}

/* Aggressive reset for any focus outlines inside the card */
.slid-card *, 
.slid-card *:focus, 
.slid-card *:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* -------------------------------------------------------------------------
   HEADER (Header-2levels)
   Figma: layout_2LH8N8 — width:1024, height:72
          layout_LQ09O6 — width:1024, height:44
   ------------------------------------------------------------------------- */
.slid-header {
  width: 100%;
  background-color: var(--slid-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Верхня navbar */
.slid-header__navbar--top {
  height: 72px;
  /* layout_2LH8N8 height */
}

.slid-header__container,
.slid-footer__container {
  max-width: var(--slid-container-fluid);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Логотип */
.slid-header__logo-link,
.slid-footer__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--slid-black);
  margin: 0;
}

.slid-header__logo-box,
.slid-footer__logo-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slid-header__logo-icon,
.slid-footer__logo-icon {
  flex-shrink: 0;
}

.slid-header__logo-text,
.slid-footer__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.slid-header__logo-title,
.slid-footer__logo-title {
  font-family: var(--slid-font-heading);
  font-weight: 700;
  font-size: 42px;
  color: var(--slid-black);
  text-transform: lowercase;
  letter-spacing: -0.5px;
}

.slid-header__logo-subtitle,
.slid-footer__logo-subtitle {
  font-family: var(--slid-font-heading);
  font-weight: 400;
  font-size: 10px;
  /* style_TNE7YA fontSize≈10 */
  color: var(--slid-black);
  text-transform: lowercase;
}

/* Верхнє навігаційне меню */
.slid-header__nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.slid-header__nav-link {
  display: block;
  padding: 0 20px;
  /* layout_MDMXT1 padding */
  font-family: var(--slid-font-body);
  font-weight: 500;
  font-size: 16px;
  /* Body small(uppercase) fontSize:16 */
  line-height: 55px;
  /* 3.4375em * 16 = 55px */
  text-transform: uppercase;
  color: var(--slid-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.slid-header__nav-link:hover {
  color: var(--slid-accent);
}

/* Контроли (пошук + бургер) */
.slid-header__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Figma mob gap: 10px */
}

.slid-header__search-btn,
.slid-header__burger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slid-header__burger {
  flex-direction: column;
  gap: 3px;
  display: none;
  /* тільки mobile */
}

.slid-header__burger span {
  display: block;
  width: 19px;
  height: 2px;
  background-color: var(--slid-black);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Категорійна navbar (рівень 2) */
.slid-header__navbar--categories {
  height: 44px;
  /* layout_LQ09O6 height:44 */
}

.slid-header__category-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.slid-header__category-item {
  display: flex;
}

.slid-header__category-link {
  display: flex;
  align-items: center;
  padding: 0 20px;
  /* layout_3F1W47 padding */
  font-family: var(--slid-font-body);
  font-weight: 600;
  /* Body (semibold) fontWeight:600 */
  font-size: 18px;
  /* Body (semibold) fontSize:18 */
  text-align: center;
  color: var(--slid-black);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.slid-header__category-item--active .slid-header__category-link {
  color: var(--slid-accent);
  /* fill_3C34BD → #FC5731 */
  border-bottom-color: var(--slid-accent);
}

.slid-header__category-link:hover {
  color: var(--slid-accent);
}

/* Мобільне меню */
.slid-header__mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--slid-white);
  border-top: 1px solid var(--slid-divider);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 99;
  padding: 22px 0;
}

.slid-header__mobile-menu--open {
  display: flex;
}

.slid-header__mobile-nav,
.slid-header__mobile-secondary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.slid-header__mobile-secondary {
  margin-top: 18px;
}

.slid-header__mobile-link {
  font-family: var(--slid-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--slid-black);
  text-decoration: none;
  padding: 4px 10px;
  display: block;
  text-align: center;
}

.slid-header__mobile-link.active {
  color: var(--slid-accent);
}

.slid-header__mobile-link--category {
  font-family: var(--slid-font-heading);
  font-size: 18px;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   MAIN PAGE LAYOUT
   Figma: layout_XCL2PI — column, gap:36px, padding:44px 0
   ------------------------------------------------------------------------- */
.slid-main-page {
  display: flex;
  flex-direction: column;
  background-color: var(--slid-white);
  font-family: var(--slid-font-body);
}

.slid-main-page__content {
  /* Removed flex: 1 to prevent excessive gap to footer */
}
/* --- Динамічні блоки (банер, алерти) --- */
.slid-main-page__banner,
.slid-main-page__alert-wrapper {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.slid-main-page__banner:empty,
.slid-main-page__alert-wrapper:empty,
.slid-main-page__banner:not(:has(*)),
.slid-main-page__alert-wrapper:not(:has(*)),
.slid-main-page__banner:has(> *:empty),
.slid-main-page__banner:not(:has(img[src]:not([src=""]))) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slid-main-page__wrapper {
  max-width: var(--slid-container-fluid);
  margin: 0 auto;
  padding: 44px 0;
  /* Figma Desktop padding: 44px 0 — symmetric top and bottom */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Заголовок секції */
.slid-main-page__section-title {
  font-family: var(--slid-font-heading);
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: var(--slid-black) !important;
  margin: 0 !important;
  /* Figma Desktop gap: 36px is handled by parent container's gap */
  text-align: left;
}

/* -------------------------------------------------------------------------
   ARTICLE GRID
   Figma: layout_8J9HDT — row, wrap:true, gap:24px, width:1024
   ------------------------------------------------------------------------- */
.slid-article-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px;
  width: 100%;
}

/* Рядок малих карток — тепер сітка 2 в ряд з динамічним гепом */
.slid-article-grid__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--slid-gap-card);
  row-gap: 40px;
}

/* SlidCard та ShowMore стилі винесені в components/slid-card.css */
.slid-main-page__wrapper > .slid-main-page__show-more-wrapper {
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   FOOTER (Footer-oneline)
   Figma: layout_RCMHGR — column, alignItems:center
   ------------------------------------------------------------------------- */
.slid-footer {
  width: 100%;
  background-color: var(--slid-white);
}

/* Верхня панель футера */
.slid-footer__topbar {
  padding: 10px 0;
}

.slid-footer__topbar .slid-footer__container {
  height: auto;
  padding: 10px 16px;
}

/* Навігація футера */
.slid-footer__nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.slid-footer__nav-item {
  display: flex;
}

.slid-footer__nav-link {
  display: block;
  padding: 0 20px;
  font-family: var(--slid-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 55px;
  text-transform: uppercase;
  color: var(--slid-black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.slid-footer__nav-link:hover {
  color: var(--slid-accent);
}

/* Соціальні мережі */
.slid-footer__socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.slid-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.slid-footer__social-link:hover {
  opacity: 0.6;
}

/* Нижня панель футера */
.slid-footer__bottombar {
  padding: 10px 0;
}

.slid-footer__bottombar .slid-footer__container {
  height: auto;
  padding: 10px 16px;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.slid-footer__description,
.slid-footer__privacy-link {
  font-family: var(--slid-font-body);
  font-weight: 500;
  font-size: 10px;
  /* Description fontSize:10 */
  line-height: 1.2;
  color: var(--slid-black);
  text-align: center;
  margin: 0;
}


.slid-footer__privacy-link {
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.slid-footer__privacy-link:hover {
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   RESPONSIVE — Mobile (≤ 768px)
   Figma: main-page-mob-360 — width:360
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   RESPONSIVE — Scaling
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .slid-header__container,
  .slid-footer__container {
    max-width: 100%;
  }
}

/* Екрани 720–859 px */
@media (min-width: 720px) and (max-width: 859px) {
  :root {
    --slid-container-fluid: var(--slid-container-tablet);
  }
  .slid-article-grid__cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile (< 860px) */
@media (max-width: 859px) {
  .slid-main-page__wrapper {
    padding: 0 10px 36px;
  }
}

/* Планшетна та мобільна сітка (< 720px) */
@media (max-width: 719px) {
  .slid-header__nav-menu,
  .slid-header__navbar--categories {
    display: none;
  }

  .slid-header__burger {
    display: flex;
  }

  .slid-header__navbar--top {
    height: 44px;
  }

  .slid-main-page__section-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
  }

  .slid-article-grid {
    gap: 24px;
  }
  .slid-article-grid__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Екран 400–719 px */
@media (min-width: 400px) and (max-width: 719px) {
  :root {
    --slid-container-fluid: 100%;
  }
}

/* Екран 360–400 px */
@media (max-width: 399px) {
  :root {
    --slid-container-fluid: 100%;
  }
  .slid-main-page__wrapper {
    padding: 0 10px 36px;
  }
}

/* REFRESH_MARKER_12345 */