/* Blog hub (rachnaye.com/blog) redesign — featured hero, category chips, grid + sidebar.
   Headings: Montserrat (already loaded sitewide). Body copy: Mukta (loaded in master.blade.php
   specifically for this page — see the comment there). Accent: #ff5c3e, the site's existing
   primary CTA color (style.css), reused here rather than introducing a second accent. */

/* This page's markup is always `<section class="blog-hub container">` (blog.blade.php,
   write-for-blog.blade.php) — `.blog-hub.container` (two classes) deliberately outranks
   .container's own single-class padding rule in style.css regardless of load order. That's load-
   bearing here: this file's <link> is pushed via @stack('specific-css'), which master.blade.php
   renders BEFORE style.css's own <link> (not after, as every other "specific-css loads last and
   wins" page on this site assumes) — a plain same-specificity .blog-hub rule actually LOSES the
   cascade to .container's 15px gutter once style.css loads after it, which is exactly why the
   first attempt at this had no visible effect at all. */
.blog-hub.container {
  /* .container (style.css) already centers a max-width box, but its own side gutter is only
     15px (half of --bs-gutter-x: 30px) — not enough room on a wide screen. A real side margin,
     independent of (and overriding) the container's own responsive gutter. */
  padding: 32px 56px 64px;
  /* The sitewide base rule is `body, html { text-align: center; }` (style.css/custom.css) —
     every other page on this site explicitly overrides it on its own content; this page needs
     the same override, set once here so it cascades to every child below instead of being
     patched selector-by-selector. */
  text-align: left;
  /* `main.blog-main-wrap` has no top clearance of its own under the sitewide fixed header
     (.main-head-wrap, position:fixed, style.css) — the OLD blog page got its clearance from
     `section.blog-main-two-col-layout { margin-top: 6em; }` (blog-main.css), a class this
     redesign's markup no longer uses. Same value, carried over here so the hero doesn't render
     underneath the header. */
  margin-top: 6em;
}

.blog-hero-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 36px;
  background: #1c1c1c;
  min-height: 320px;
}

.blog-hero-img {
  width: 100%;
  /* A fixed px height here (460px) didn't match the blog admin's own documented upload size
     (750x400px, blogs-add.blade.php) — at a typical hero width, that forced a much taller crop
     than the image actually needed, cutting off a large chunk of whatever was uploaded (e.g. the
     top of a title baked into the image itself). Matching the admin's own ratio instead means the
     full image shows at any viewport width, cropping only to the extent the upload itself isn't
     exactly 750:400. */
  aspect-ratio: 1.875 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Floating card over the bottom-left of the hero image — not a full-bleed gradient overlay */
.blog-hero-card {
  display: block;
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: 560px;
  background: rgba(247, 243, 234, 0.94);
  backdrop-filter: blur(2px);
  border-radius: 16px;
  padding: 26px 30px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.blog-hero-card:hover {
  transform: translateY(-2px);
}

.blog-hero-tag {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #ff5c3e;
  margin-bottom: 10px;
}

.blog-hero-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  color: #1c1c1c;
  margin: 0 0 10px;
}

.blog-hero-dek {
  font-family: "Mukta", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5c5c5c;
  margin: 0 0 14px;
}

.blog-hero-cta {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1c1c1c;
}

.blog-hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}

/* Chips — horizontally scrollable with nav arrows when the category list overflows */
.blog-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.blog-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
  min-width: 0;
}

.blog-chips::-webkit-scrollbar {
  display: none;
}

.blog-chip-nav {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
}

.blog-chip-nav:hover {
  border-color: #ff5c3e;
  color: #ff5c3e;
}

.blog-count {
  margin-left: auto;
}

.blog-chip {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-chip:hover {
  border-color: #ff5c3e;
  color: #ff5c3e;
}

.blog-chip.active {
  background: #1c1c1c;
  border-color: #1c1c1c;
  color: #fff;
}

.blog-count {
  font-family: "Mukta", sans-serif;
  font-size: 13px;
  color: #8a8a8a;
  white-space: nowrap;
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececec;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.blog-card-img {
  width: 100%;
  /* Same fix as the hero image (see .blog-hero-img) — matches the admin's own documented upload
     size (750x400px, blogs-add.blade.php) instead of an unrelated 16:10 ratio, which was cropping
     a visible chunk off every card's image. */
  aspect-ratio: 1.875 / 1;
  background: #f2f0ea;
  overflow: hidden;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.blog-card-tag {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #ff5c3e;
  margin-bottom: 8px;
}

.blog-card-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: #1c1c1c;
  margin: 0 0 8px;
}

.blog-card-dek {
  font-family: "Mukta", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #6b6b6b;
  margin: 0;
}

.blog-empty {
  font-family: "Mukta", sans-serif;
  color: #8a8a8a;
  grid-column: 1 / -1;
}

/* Sidebar — sticks in place while the main column scrolls (a tall grid/sidebar split naturally
   gives it room to do this: .blog-hub-layout already sets align-items:start, so this column's
   height is its own content, not stretched to match the grid, which is the one precondition
   position:sticky needs here). `top` clears the sitewide fixed header (.main-head-wrap) plus a
   little breathing room — it's an estimate of that header's real height, not a measured value;
   nudge it if the sidebar starts sticking a few pixels under/over the header in practice. */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
  align-self: start;
}

.blog-sidebar-card {
  background: #faf9f6;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 22px 22px 24px;
}

.blog-sidebar-heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c1c1c;
  margin: 0 0 16px;
}

.blog-sidebar-text {
  font-family: "Mukta", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b6b6b;
  margin: 0 0 16px;
}

/* Most Read */
.blog-most-read-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-most-read-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.blog-most-read-rank {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ff5c3e;
  flex-shrink: 0;
  width: 20px;
}

.blog-most-read-list a {
  text-decoration: none;
  display: block;
}

.blog-most-read-title {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #1c1c1c;
}

.blog-most-read-list a:hover .blog-most-read-title {
  color: #ff5c3e;
}

.blog-most-read-views {
  display: block;
  font-family: "Mukta", sans-serif;
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 2px;
}

.blog-empty-inline {
  font-family: "Mukta", sans-serif;
  font-size: 13px;
  color: #9a9a9a;
}

/* Newsletter + Write for the Blog forms/buttons */
.blog-input {
  width: 100%;
  font-family: "Mukta", sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.blog-input:focus {
  outline: none;
  border-color: #ff5c3e;
}

.blog-btn-primary {
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: #ff5c3e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.blog-btn-primary:hover {
  background: #e6471f;
}

.blog-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.blog-btn-outline {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1c1c1c;
  border: 1px solid #1c1c1c;
  border-radius: 8px;
  padding: 10px 18px;
  text-decoration: none;
  text-align: center;
}

.blog-btn-outline:hover {
  background: #1c1c1c;
  color: #fff;
}

.blog-form-msg {
  font-family: "Mukta", sans-serif;
  font-size: 12.5px;
  color: #d8392b;
  margin: 8px 0 0;
  min-height: 16px;
}

.blog-otp-hint {
  margin-bottom: 10px !important;
}

.blog-subscribe-success {
  font-family: "Mukta", sans-serif;
  font-size: 13.5px;
  color: #227a4e;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .blog-hub-layout {
    grid-template-columns: 1fr;
  }

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

  .blog-hero-title {
    font-size: 24px;
  }

  .blog-hero-card {
    max-width: calc(100% - 40px);
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 20px 22px;
  }
}

@media (max-width: 575px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-hero-wrap {
    border-radius: 14px;
  }

  .blog-hero-card {
    position: static;
    max-width: 100%;
    border-radius: 0 0 14px 14px;
    box-shadow: none;
    padding: 18px 18px 22px;
  }

  .blog-hero-title {
    font-size: 20px;
  }
}