/* =========================================================
   BLOG — JUST MOVE
   Colors:
   Orange #D9823B
   Blue   #0ea5e9
========================================================= */

html,
body {
  background: #000;
}


body {
  margin: 0;
  padding: 0;
}

.header {
  background: rgba(0, 0, 0, 0.92);
  color: #fff;

  border-bottom: 1px solid transparent;

  border-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #D9823B 25%,
      #0ea5e9 75%,
      transparent 100%
    ) 1;

  box-shadow:
    inset 0 -4px 10px rgba(217, 130, 59, 0.05),
    inset 0 -4px 12px rgba(14, 165, 233, 0.05),
    0 3px 12px rgba(217, 130, 59, 0.12),
    0 4px 16px rgba(14, 165, 233, 0.10);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}




/* =========================================================
   BLOG LIST PAGE
========================================================= */

.blog-page {
  position: relative !important;
  display: block !important;

  width: 100%;
  min-height: 100vh;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  align-items: initial !important;
  justify-content: initial !important;

  color: #fff;

  background:
    radial-gradient(
      circle at 4% 14%,
      rgba(217,130,59,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 94% 26%,
      rgba(14,165,233,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #050707 0%,
      #020303 60%,
      #000 100%
    );
}


.blog-shell {
  position: relative;
  z-index: 2;

  width: min(1240px, calc(100% - 48px));

  margin: 0 auto;

  padding: 82px 0 110px;
}


/* =========================================================
   BLOG HEADER
========================================================= */

.blog-header {
  max-width: 820px;

  margin: 0 0 38px;
  padding: 0;
}


.blog-label {
  display: inline-block;

  margin: 0 0 14px;

  font-family: Electrolize, sans-serif;
  font-size: .9rem;
  font-weight: 600;

  letter-spacing: .18em;
  text-transform: uppercase;

  color: #D9823B;

  text-shadow:
    0 0 18px rgba(217,130,59,.18);
}


.blog-header h1 {
  max-width: 780px;

  margin: 0 0 22px;

  font-family: Electrolize, sans-serif;

  font-size: clamp(2.7rem, 5.3vw, 4.9rem);
  font-weight: 500;

  line-height: 1.02;
  letter-spacing: -.025em;

  color: #fff;

  text-shadow:
    0 5px 30px rgba(0,0,0,.35);
}


.blog-header p {
  max-width: 700px;

  margin: 0;

  font-family: Montserrat, sans-serif;

  font-size: 1.12rem;
  line-height: 1.8;

  color: #aeb8c3;
}


/* =========================================================
   ORANGE + BLUE DIVIDER
========================================================= */

.blog-accent-line {
  width: 100%;
  height: 1px;

  margin: 0 0 50px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(217,130,59,.8) 22%,
      rgba(14,165,233,.75) 72%,
      transparent 100%
    );

  box-shadow:
    0 0 8px rgba(217,130,59,.25),
    0 0 10px rgba(14,165,233,.2);
}


/* =========================================================
   BLOG GRID
========================================================= */

.blog-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 30px;

  align-items: stretch;
}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.085);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    ),
    rgba(8,12,13,.94);

  box-shadow:
    0 18px 45px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    border-color .4s ease,
    box-shadow .4s ease;
}


/* card glow */

.blog-card::before {
  content: "";

  position: absolute;

  right: -120px;
  bottom: -130px;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(14,165,233,.14),
      transparent 68%
    );

  opacity: .35;

  pointer-events: none;

  transition:
    opacity .4s ease,
    transform .5s ease;
}


.blog-card:nth-child(even)::before {
  background:
    radial-gradient(
      circle,
      rgba(217,130,59,.15),
      transparent 68%
    );
}


/* light sweep */

.blog-card::after {
  content: "";

  position: absolute;

  top: -30%;
  left: -70%;

  width: 35%;
  height: 170%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.055),
      transparent
    );

  transform: rotate(12deg);

  pointer-events: none;

  transition:
    left .85s cubic-bezier(.16,1,.3,1);
}


.blog-card:hover {
  transform: translateY(-8px);

  border-color: rgba(14,165,233,.34);

  box-shadow:
    0 24px 55px rgba(0,0,0,.48),
    0 0 30px rgba(14,165,233,.09),
    0 0 24px rgba(217,130,59,.06);
}


.blog-card:hover::before {
  opacity: .9;
  transform: scale(1.22);
}


.blog-card:hover::after {
  left: 135%;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.blog-image-link {
  position: relative;

  display: block;

  overflow: hidden;

  text-decoration: none;
}


.blog-image {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #090d0d;
}


.blog-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.02),
      rgba(0,0,0,.22)
    );

  pointer-events: none;

  transition: opacity .4s ease;
}


.blog-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.85)
    brightness(.88);

  transform: scale(1.01);

  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    filter .5s ease;
}


.blog-card:hover .blog-image img {
  transform: scale(1.065);

  filter:
    saturate(1.05)
    brightness(1);
}


.blog-image-placeholder {
  display: flex;

  width: 100%;
  height: 100%;

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

  font-family: Electrolize, sans-serif;
  font-size: 1rem;

  letter-spacing: .18em;

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

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(217,130,59,.13),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(14,165,233,.13),
      transparent 40%
    ),
    #090d0e;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.blog-card-body {
  position: relative;
  z-index: 2;

  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 27px 27px 29px;
}


.blog-meta {
  margin: 0 0 12px;

  font-family: Montserrat, sans-serif;
  font-size: .74rem;
  font-weight: 700;

  letter-spacing: .12em;
  text-transform: uppercase;

  color: #D9823B;
}


.blog-card-title {
  margin: 0 0 16px;

  font-family: Electrolize, sans-serif;

  font-size: clamp(1.4rem, 2vw, 1.75rem);
  font-weight: 500;

  line-height: 1.22;
}


.blog-card-title a {
  color: #fff;

  text-decoration: none;

  transition: color .3s ease;
}


.blog-card-title a:hover {
  color: #e8f7ff;
}


.blog-excerpt {
  margin: 0 0 26px;

  font-family: Montserrat, sans-serif;

  font-size: .96rem;
  line-height: 1.72;

  color: #9eaab5;
}


/* =========================================================
   READ MORE
========================================================= */

.read-more {
  display: inline-flex;

  align-items: center;

  gap: 11px;

  width: fit-content;

  margin-top: auto;

  font-family: Montserrat, sans-serif;

  font-size: .88rem;
  font-weight: 700;

  letter-spacing: .035em;

  color: #fff;

  text-decoration: none;

  transition: color .3s ease;
}


.read-more svg {
  width: 20px;
  height: 20px;

  color: #0ea5e9;

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


.read-more:hover {
  color: #D9823B;
}


.read-more:hover svg {
  color: #D9823B;

  transform: translateX(7px);
}


/* =========================================================
   EMPTY BLOG
========================================================= */

.blog-empty {
  grid-column: 1 / -1;

  padding: 60px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;

  text-align: center;

  background: rgba(255,255,255,.025);
}


.blog-empty h2 {
  font-family: Electrolize, sans-serif;

  color: #fff;
}


.blog-empty p {
  font-family: Montserrat, sans-serif;

  color: #9eaab5;
}


/* =========================================================
   SINGLE BLOG POST
========================================================= */

.single-post-page {
  position: relative !important;
  display: block !important;

  width: 100%;
  min-height: 100vh;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  align-items: initial !important;
  justify-content: initial !important;

  color: #fff;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(217,130,59,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 35%,
      rgba(14,165,233,.11),
      transparent 34%
    ),
    linear-gradient(
      to bottom,
      #050707,
      #010202 70%,
      #000
    );
}


.single-post {
  position: relative;
  z-index: 2;

  width: min(850px, calc(100% - 44px));

  margin: 0 auto;

  padding: 72px 0 110px;
}


.blog-back {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin: 0 0 40px;

  font-family: Montserrat, sans-serif;

  font-size: .9rem;
  font-weight: 600;

  color: #9ba6b0;

  text-decoration: none;

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


.blog-back:hover {
  color: #D9823B;

  transform: translateX(-4px);
}


.single-post-header {
  margin: 0 0 38px;
}


.single-post-date {
  margin: 0 0 15px;

  font-family: Montserrat, sans-serif;

  font-size: .8rem;
  font-weight: 700;

  letter-spacing: .13em;

  color: #D9823B;
}


.single-post h1 {
  margin: 0;

  font-family: Electrolize, sans-serif;

  font-size: clamp(2.5rem, 6vw, 4.6rem);
  font-weight: 500;

  line-height: 1.03;
  letter-spacing: -.025em;

  color: #fff;
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.single-post-content {
  font-family: Montserrat, sans-serif;

  font-size: 1.08rem;
  line-height: 1.9;

  color: #c0c8d0;
}


.single-post-content p {
  margin: 0 0 1.55em;
}


.single-post-content strong {
  color: #fff;
}


.single-post-content a {
  color: #0ea5e9;

  text-decoration: underline;
  text-decoration-color: rgba(14,165,233,.4);
  text-underline-offset: 4px;
}


.single-post-content a:hover {
  color: #D9823B;
}


.single-post-content h2,
.single-post-content h3 {
  font-family: Electrolize, sans-serif;

  color: #fff;
}


.single-post-content h2 {
  margin: 2.2em 0 .7em;

  font-size: 2rem;

  line-height: 1.15;
}


.single-post-content h3 {
  margin: 1.9em 0 .65em;

  font-size: 1.5rem;
}


.single-post-content img {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;

  margin: 38px auto;

  border-radius: 20px;

  box-shadow:
    0 18px 45px rgba(0,0,0,.35);
}


.single-post-content ul,
.single-post-content ol {
  margin: 24px 0;

  padding-left: 25px;
}


.single-post-content li {
  margin-bottom: 10px;
}


.single-post-content blockquote {
  margin: 40px 0;

  padding: 22px 28px;

  border-left: 3px solid #D9823B;
  border-radius: 0 16px 16px 0;

  background: rgba(255,255,255,.025);

  color: #b8c1ca;

  font-style: italic;

  box-shadow:
    inset 18px 0 35px rgba(217,130,59,.035);
}


.single-post-content table {
  width: 100%;

  margin: 30px 0;

  border-collapse: collapse;
}


.single-post-content th,
.single-post-content td {
  padding: 12px;

  border: 1px solid rgba(255,255,255,.10);
}


.single-post-content th {
  color: #fff;

  background: rgba(14,165,233,.07);
}


/* =========================================================
   TABLET — ALL RESPONSIVE RULES START HERE
========================================================= */

@media (max-width: 950px) {

  .blog-shell {
    width: calc(100% - 36px);

    padding: 65px 0 90px;
  }

  .blog-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 24px;
  }

}


/* =========================================================
   MOBILE — ALL MOBILE RULES IN ONE PLACE
========================================================= */

@media (max-width: 620px) {

  /* -----------------------------------------
     LIST PAGE
  ----------------------------------------- */

  .blog-page {
    display: block !important;

    min-height: 0;

    margin: 0 !important;
    padding: 0 !important;

    align-items: initial !important;
    justify-content: initial !important;
  }


  .blog-shell {
    width: calc(100% - 30px);

    min-height: 0;

    margin: 0 auto;

    padding:
      34px 0
      70px !important;
  }


  .blog-header {
    margin: 0 0 26px !important;
    padding: 0 !important;
  }


  .blog-label {
    margin-bottom: 12px;

    font-size: .73rem;
  }


  .blog-header h1 {
    margin-bottom: 18px;

    font-size: clamp(
      2rem,
      10vw,
      2.8rem
    );

    line-height: 1.04;
  }


  .blog-header p {
    font-size: .96rem;

    line-height: 1.65;
  }


  .blog-accent-line {
    margin-bottom: 30px;
  }


  .blog-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .blog-card {
    border-radius: 20px;
  }


  .blog-card:hover {
    transform: none;
  }


  .blog-card-body {
    padding: 22px;
  }


  .blog-card-title {
    font-size: 1.45rem;
  }


  .blog-excerpt {
    font-size: .92rem;

    line-height: 1.65;
  }


  /* -----------------------------------------
     SINGLE POST
  ----------------------------------------- */

  .single-post-page {
    display: block !important;

    min-height: 0;

    margin: 0 !important;
    padding: 0 !important;

    align-items: initial !important;
    justify-content: initial !important;
  }


  .single-post {
    width: calc(100% - 30px);

    min-height: 0;

    margin: 0 auto;

    padding:
      34px 0
      70px !important;
  }


  .blog-back {
    margin-bottom: 28px;

    font-size: .84rem;
  }


  .single-post-header {
    margin-bottom: 28px;
  }


  .single-post h1 {
    font-size: clamp(
      2.1rem,
      10vw,
      3rem
    );

    line-height: 1.05;
  }


  .single-post-content {
    font-size: .98rem;

    line-height: 1.78;
  }


  .single-post-content h2 {
    font-size: 1.65rem;
  }


  .single-post-content h3 {
    font-size: 1.35rem;
  }


  .single-post-content img {
    margin: 28px auto;

    border-radius: 16px;
  }


  .single-post-content blockquote {
    margin: 30px 0;

    padding: 18px 20px;
  }


  .blog-header,
  .blog-accent-line {
    display: none;
  }

  .blog-shell {
    width: calc(100% - 30px);
    margin: 0 auto;
    padding: 4
    0px 0 70px !important;
  }

}