/* /var/www/relyn/static_src/css/blog.css */

/* BLOG SECTION */
.blog-section {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.blog-shell {
  position: relative;
  width: 100%;
  max-width: 1920px;

  /* ✅ remove extra blank space under boxes (auto height) */
  min-height: auto;

  /* ✅ Desktop tokens */
  --blog-kicker: 20px;
  --blog-title: 48px;
  --blog-title-lh: 62px;

  --blog-card-w: 380px;
  --blog-card-h: 400px;
  --blog-gap: 54px;

  --blog-card-r: 10px;
  --blog-media-pad: 21px;

  --blog-img-w: 337.78px;
  --blog-img-h: 210.53px;
  --blog-img-r: 10px;

  --blog-card-title: 20px;
  --blog-card-title-lh: 26px;

  --blog-author-img: 42.22px;
  --blog-author-name: 16px;
  --blog-date: 14px;

  /* ✅ premium nav tokens */
  --blog-nav: 56px;
  --blog-nav-icon: 22px;

  /* ✅ spacing */
  --blog-carousel-top: 88px;
  --blog-bottom-pad: 90px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 24px var(--blog-bottom-pad);
  box-sizing: border-box;
  overflow: hidden;
}

/* ✅ Background blur layer */
.blog-blur-layer {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);

  /* ✅ UPDATED: wider blur coverage */
  width: min(2200px, 140vw);
  height: 500px;

  background:
    radial-gradient(circle at 30% 35%, rgba(99, 62, 178, 0.55), transparent 62%),
    radial-gradient(circle at 70% 55%, rgba(166, 151, 224, 0.30), transparent 66%),
    radial-gradient(circle at 45% 75%, rgba(99, 62, 178, 0.35), transparent 62%);

  filter: blur(90px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

/* Header */
.blog-header {
  position: relative;
  z-index: 1;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 77px;
  box-sizing: border-box;
}

.blog-kicker {
  margin: 0;
  font-size: var(--blog-kicker);
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.02em;
}

.blog-title {
  margin: 22px 0 0;

  font-size: var(--blog-title);
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
  line-height: var(--blog-title-lh);
}

/* Carousel wrapper */
.blog-carousel {
  position: relative;
  z-index: 1;

  width: 100%;
  margin-top: var(--blog-carousel-top);

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

  box-sizing: border-box;
}

/* Viewport (shows 3 cards only) */
.blog-viewport {
  width: calc((var(--blog-card-w) * 3) + (var(--blog-gap) * 2));
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}

/* Track */
.blog-track {
  display: flex;
  width: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Each slide holds 3 cards */
.blog-slide {
  display: grid;
  grid-template-columns: repeat(3, var(--blog-card-w));
  column-gap: var(--blog-gap);

  width: calc((var(--blog-card-w) * 3) + (var(--blog-gap) * 2));
  flex: 0 0 auto;

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

  padding: 0;
  box-sizing: border-box;
}

/* Card */
.blog-card {
  width: var(--blog-card-w);
  height: var(--blog-card-h);
  border-radius: var(--blog-card-r);

  background: #FFFFFF;
  color: #111111;

  box-sizing: border-box;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(99, 62, 178, 0.06);

  overflow: hidden;

  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(99, 62, 178, 0.10);
}

/* Image area */
.blog-card-media {
  padding-top: var(--blog-media-pad);
  padding-left: var(--blog-media-pad);
  padding-right: var(--blog-media-pad);
  box-sizing: border-box;
}

.blog-card-img {
  width: var(--blog-img-w);
  height: var(--blog-img-h);
  border-radius: var(--blog-img-r);
  display: block;
  object-fit: cover;
}

/* Title under image */
.blog-card-title {
  margin: 26px 0 0;
  padding-left: var(--blog-media-pad);
  padding-right: var(--blog-media-pad);

  font-size: var(--blog-card-title);
  font-weight: 700;
  color: #633EB2;
  text-align: left;
  line-height: var(--blog-card-title-lh);

  box-sizing: border-box;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 52px;
}

/* Meta row: author left, date right */
.blog-card-meta {
  margin-top: 40px;

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

  padding-left: var(--blog-media-pad);
  padding-right: var(--blog-media-pad);

  box-sizing: border-box;
}

.blog-card-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.blog-author-img {
  width: var(--blog-author-img);
  height: var(--blog-author-img);
  border-radius: 999px;
  display: block;
  object-fit: cover;
}

.blog-author-name {
  font-size: var(--blog-author-name);
  font-weight: 600;
  line-height: 20px;
  color: #633EB2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.blog-card-date {
  font-size: var(--blog-date);
  font-weight: 600;
  color: #272E67;
  white-space: nowrap;
}

/* =========================================================
   ✅ NAV BUTTONS (SAME PREMIUM STYLE AS PREVIOUS SECTION)
   - glass base
   - gradient ring
   - soft glow
   ========================================================= */

.blog-nav {
  width: var(--blog-nav);
  height: var(--blog-nav);
  border-radius: 999px;

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

  position: relative;
  isolation: isolate;

  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.16);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(99, 62, 178, 0.12);

  color: rgba(255, 255, 255, 0.98);
  cursor: pointer;
  user-select: none;

  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

.blog-nav::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(166, 151, 224, 0.70) 0%,
    rgba(99, 62, 178, 0.85) 45%,
    rgba(166, 151, 224, 0.55) 100%
  );
  z-index: 0;
  opacity: 0.95;
  pointer-events: none;

  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
  mask: radial-gradient(circle, transparent 63%, #000 64%);
}

.blog-nav::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(99, 62, 178, 0.35), transparent 62%);
  filter: blur(10px);
  z-index: 0;
  opacity: 0.75;
  pointer-events: none;
}

.blog-nav:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(99, 62, 178, 0.18);
}

.blog-nav:active {
  transform: translateY(0);
  filter: brightness(1.00);
}

.blog-nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.70);
  outline-offset: 4px;
}

.blog-nav.is-disabled {
  opacity: 0.40;
  pointer-events: none;
  filter: none;
}

.blog-nav-icon {
  position: relative;
  z-index: 1;

  width: calc(var(--blog-nav-icon) + 6px);
  height: calc(var(--blog-nav-icon) + 6px);

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

.blog-nav-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Position nav at edges of the visible 3-card area */
.blog-nav-prev {
  margin-right: 18px;
}

.blog-nav-next {
  margin-left: 18px;
}

/* Smooth motion */
.has-js .blog-track {
  transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .has-js .blog-track {
    transition: none;
  }

  .blog-card,
  .blog-nav {
    transition: none;
  }
}

/* =========================================================
   LAPTOP + TABLET (LANDSCAPE)
   ✅ same as desktop (3 in a row), just smaller
   ✅ reduce box/image/font sizes
   ✅ reduce extra space under boxes
   ========================================================= */
@media (max-width: 1400px) and (min-width: 821px) {
  .blog-shell {
    /* ✅ smaller typography but same positions */
    --blog-kicker: 16px;
    --blog-title: 38px;
    --blog-title-lh: 50px;

    /* ✅ smaller cards but keep 3 per view */
    --blog-card-w: 320px;
    --blog-card-h: 356px;
    --blog-gap: 36px;

    --blog-media-pad: 18px;

    --blog-img-w: 284px;
    --blog-img-h: 178px;
    --blog-img-r: 10px;

    --blog-card-title: 17px;
    --blog-card-title-lh: 23px;

    --blog-author-img: 36px;
    --blog-author-name: 14px;
    --blog-date: 12px;

    --blog-nav: 50px;
    --blog-nav-icon: 20px;

    /* ✅ reduce space under boxes (only affects bottom blank) */
    --blog-bottom-pad: 64px;
  }

  .blog-card-title {
    min-height: 46px;
  }

  .blog-card-meta {
    margin-top: 28px;
  }

  .blog-author-name {
    max-width: 150px;
  }
}

/* =========================================================
   TABLET + MOBILE (PORTRAIT)
   ✅ REDUCED CARD WIDTH (your request)
   ✅ show 1 box per view (each card = one step)
   ✅ keep spacing between cards (horizontal gap)
   ✅ add vertical breathing
   ✅ move nav buttons under the card area
   ========================================================= */
@media (max-width: 920px) {
  .blog-shell {
    --blog-title: 32px;
    --blog-title-lh: 44px;

    /* ✅ narrower card for portrait */
    --blog-card-w: 300px;
    --blog-card-h: 350px;

    /* ✅ slightly tighter paddings/fonts */
    --blog-media-pad: 16px;

    --blog-card-title: 15px;
    --blog-card-title-lh: 21px;

    --blog-author-img: 34px;
    --blog-author-name: 13px;
    --blog-date: 12px;

    /* ✅ spacing between cards */
    --blog-gap: 18px;

    /* ✅ nav slightly smaller */
    --blog-nav: 48px;
    --blog-nav-icon: 19px;

    /* ✅ reduce bottom blank */
    --blog-bottom-pad: 60px;
  }

  /* ✅ make carousel stack: viewport first, then buttons below */
  .blog-carousel {
    flex-wrap: wrap;
  }

  .blog-viewport {
    order: 1;
    width: min(var(--blog-card-w), 92vw);

    /* ✅ vertical + horizontal breathing */
    padding: 10px 10px 20px;
    box-sizing: border-box;
  }

  /* ✅ portrait mode: flatten slides so each card is an item in the track */
  .blog-slide {
    display: contents;
  }

  .blog-track {
    /* ✅ cards become a horizontal rail */
    display: flex;
    align-items: stretch;
    gap: var(--blog-gap);
    width: auto;
  }

  .blog-card {
    flex: 0 0 auto;
    width: min(var(--blog-card-w), 92vw);
    height: var(--blog-card-h);
  }

  /* ✅ scale image with the reduced width */
  .blog-card-img {
    width: calc(min(var(--blog-card-w), 92vw) - (var(--blog-media-pad) * 2));
    height: auto;
    aspect-ratio: 337.78 / 210.53;
  }

  .blog-card-title {
    margin-top: 16px;
    min-height: 42px;
  }

  .blog-card-meta {
    margin-top: 18px;
  }

  /* ✅ buttons under the viewport (same premium style, centered) */
  .blog-nav {
    order: 2;
    margin: 10px 8px 0;
  }

  .blog-nav-prev {
    margin-right: 10px;
  }

  .blog-nav-next {
    margin-left: 10px;
  }
}

/* =========================================================
   SMALL MOBILE
   ✅ even narrower so it fits comfortably
   ========================================================= */
@media (max-width: 420px) {
  .blog-shell {
    --blog-title: 28px;
    --blog-title-lh: 40px;

    /* ✅ even narrower card */
    --blog-card-w: 272px;
    --blog-card-h: 328px;

    --blog-media-pad: 14px;

    --blog-card-title: 14px;
    --blog-card-title-lh: 20px;

    --blog-author-img: 32px;
    --blog-author-name: 12.5px;
    --blog-date: 12px;

    --blog-gap: 16px;

    --blog-nav: 46px;
    --blog-nav-icon: 18px;

    --blog-bottom-pad: 56px;
  }

  .blog-viewport {
    padding: 10px 10px 18px;
  }

  .blog-card-meta {
    margin-top: 16px;
  }

  .blog-author-name {
    max-width: 132px;
  }
}