/* =========================================================
   ARTICLES PAGE
   ROVELLE / LESKLEPODLAHY.SK
========================================================= */


/* =========================================================
   HERO
========================================================= */

.articles-hero {
  position: relative;

  min-height: 245px;

  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(7, 15, 20, .97) 0%,
      rgba(7, 15, 20, .89) 37%,
      rgba(7, 15, 20, .34) 67%,
      rgba(7, 15, 20, .10) 100%
    ),
    url("../assets/blog-hero.jpg")
    center right / cover no-repeat;
}


.articles-hero-inner {
  min-height: 245px;

  display: flex;
  align-items: center;
}


.articles-hero-copy {
  width: 100%;
  max-width: 610px;

  padding: 34px 0;
}


.articles-eyebrow {
  display: block;

  margin-bottom: 9px;

  color: #c89842;

  font-size: 10px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.articles-hero h1 {
  margin: 0 0 13px;

  color: #fff;

  font-size: clamp(34px, 4vw, 49px);
  line-height: .98;

  font-weight: 700;

  letter-spacing: -.035em;
}


.articles-hero p {
  max-width: 580px;

  margin: 0;

  color: rgba(255, 255, 255, .84);

  font-size: 13px;
  line-height: 1.58;
}



/* =========================================================
   DIRECTORY
========================================================= */

.articles-directory {
  padding: 22px 0 30px;

  background: #fff;
}



/* =========================================================
   TOOLBAR
========================================================= */

.articles-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 10px;
}


.articles-filters {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;

  flex-wrap: wrap;
}


.article-filter {
  min-height: 34px;

  padding: 0 14px;

  border: 1px solid #dddcd9;
  border-radius: 4px;

  background: #fff;

  color: #252a2e;

  font-family: inherit;

  font-size: 9px;
  line-height: 1;

  font-weight: 600;

  cursor: pointer;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease;
}


.article-filter:hover {
  border-color: #b88936;

  color: #a87827;
}


.article-filter.active {
  border-color: #c89a48;

  background:
    linear-gradient(
      135deg,
      #d3aa5a,
      #b9832e
    );

  color: #fff;
}



/* =========================================================
   SEARCH
========================================================= */

.articles-search {
  position: relative;

  width: 230px;

  flex: 0 0 230px;
}


.articles-search i {
  position: absolute;

  left: 12px;
  top: 50%;

  transform: translateY(-50%);

  color: #7e858a;

  font-size: 11px;

  pointer-events: none;
}


.articles-search input {
  width: 100%;

  height: 35px;

  padding: 0 12px 0 33px;

  border: 1px solid #dedede;
  border-radius: 4px;

  outline: 0;

  background: #fafafa;

  color: #202428;

  font-family: inherit;

  font-size: 10px;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.articles-search input::placeholder {
  color: #aaa;
}


.articles-search input:focus {
  border-color: #b88936;

  background: #fff;

  box-shadow:
    0 0 0 3px rgba(184, 137, 54, .08);
}



/* =========================================================
   ARTICLES
========================================================= */

.articles-list {
  width: 100%;
}


.article-row {
  border-bottom: 1px solid #dedede;
}


.article-row:first-child {
  border-top: 1px solid #e5e5e5;
}


.article-row[hidden] {
  display: none;
}


.article-row-link {
  min-height: 108px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 35px;

  padding: 15px 7px 14px 0;

  color: inherit;

  transition:
    padding-left .22s ease,
    background .22s ease;
}


.article-row-copy {
  min-width: 0;

  max-width: 1000px;
}


.article-category {
  display: block;

  margin-bottom: 4px;

  color: #b88936;

  font-size: 9px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: .035em;

  text-transform: uppercase;
}


.article-row h2 {
  margin: 0 0 4px;

  color: #141a1e;

  font-size: 18px;
  line-height: 1.17;

  font-weight: 700;

  letter-spacing: -.015em;

  transition: color .2s ease;
}


.article-row p {
  max-width: 900px;

  margin: 0;

  color: #707478;

  font-size: 11px;
  line-height: 1.42;
}


.article-row-arrow {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #bf8c34;

  font-size: 14px;

  transition:
    transform .2s ease,
    color .2s ease;
}


.article-row-link:hover {
  padding-left: 8px;
}


.article-row-link:hover h2 {
  color: #a87827;
}


.article-row-link:hover .article-row-arrow {
  color: #11171b;

  transform: translateX(4px);
}



/* =========================================================
   NO RESULTS
========================================================= */

.articles-no-results {
  padding: 65px 20px;

  text-align: center;
}


.articles-no-results i {
  margin-bottom: 15px;

  color: #b88936;

  font-size: 29px;
}


.articles-no-results h3 {
  margin: 0 0 7px;

  color: #11171b;

  font-size: 20px;
  font-weight: 700;
}


.articles-no-results p {
  margin: 0;

  color: #777;

  font-size: 12px;
}



/* =========================================================
   CTA
========================================================= */

.articles-cta {
  color: #fff;

  background: #08151d;
}


.articles-cta-grid {
  min-height: 165px;

  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;
}


.articles-cta-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 25px 50px 25px 0;
}


.articles-cta-copy h2 {
  margin: 0 0 8px;

  color: #fff;

  font-size: 27px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: -.025em;
}


.articles-cta-copy p {
  max-width: 470px;

  margin: 0 0 14px;

  color: rgba(255, 255, 255, .74);

  font-size: 11px;
  line-height: 1.5;
}


.articles-cta-button {
  width: fit-content;

  min-height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  padding: 0 16px;

  border-radius: 3px;

  background:
    linear-gradient(
      135deg,
      #d2a758,
      #b8842f
    );

  color: #fff;

  font-size: 9px;
  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.articles-cta-button:hover {
  color: #fff;

  transform: translateY(-1px);

  box-shadow:
    0 7px 18px rgba(0, 0, 0, .20);
}


.articles-cta-image {
  min-height: 165px;

  overflow: hidden;
}


.articles-cta-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

  .articles-toolbar {
    align-items: stretch;
    flex-direction: column;
  }


  .articles-search {
    width: 100%;

    flex-basis: auto;
  }


  .article-row-copy {
    max-width: calc(100% - 30px);
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .articles-hero {
    min-height: 310px;

    background:
      linear-gradient(
        90deg,
        rgba(7, 15, 20, .97) 0%,
        rgba(7, 15, 20, .85) 65%,
        rgba(7, 15, 20, .42) 100%
      ),
      url("../assets/blog-hero.jpg")
      63% center / cover no-repeat;
  }


  .articles-hero-inner {
    min-height: 310px;
  }


  .articles-hero h1 {
    font-size: 37px;
  }


  .articles-filters {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    width: 100%;
  }


  .article-filter {
    width: 100%;

    min-height: 40px;

    padding: 0 8px;
  }


  .article-row-link {
    min-height: 125px;

    gap: 12px;

    padding:
      17px 2px
      17px 0;
  }


  .article-row h2 {
    font-size: 16px;
  }


  .article-row p {
    font-size: 10px;
  }


  .article-row-arrow {
    width: 30px;

    flex-basis: 30px;
  }


  .articles-cta-grid {
    grid-template-columns: 1fr;
  }


  .articles-cta-copy {
    padding:
      30px 0;
  }


  .articles-cta-image {
    min-height: 210px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .articles-filters {
    grid-template-columns: 1fr 1fr;
  }


  .article-row h2 {
    font-size: 15px;
  }


  .article-row p {
    font-size: 9.5px;
  }

}