/* ==========================================================================
   BLOG INDEX
   --------------------------------------------------------------------------
   Editorial two-column layout: a card grid with a sticky sidebar of topics,
   an about panel and the most-read posts. Same structure the rest of the site
   uses for its content pages - plum hero, blush page ground, white cards.

   Colours come from the brand tokens (brand-colour.css) so the pink/plum
   palette stays defined in one place. Headings use the display serif; every
   piece of UI text stays on the body sans, matching brand-typography.css.
   ========================================================================== */

:root {
  --blog-plum: #4a2231;
  --blog-plum-mid: #5e3040;
  --blog-accent: #c93a63;
  --blog-accent-soft: #e8829f;
  --blog-blush: #fdf4f7;
  --blog-ink: #2d2028;
  --blog-muted: #6b5c65;
  --blog-faint: #9a8892;
  --blog-line: #ecdfe5;
  --blog-card-bg: #ffffff;
  --blog-ease: cubic-bezier(.2, .8, .2, 1);
  --blog-shadow: 0 10px 30px rgba(74, 34, 49, 0.08);
  --blog-shadow-lift: 0 20px 44px rgba(74, 34, 49, 0.16);
}

/* The blog sits inside base.html's .container <main>, so the page ground is
   pulled out to the full viewport the same way .content-hero does. */
.blog-page {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--blog-blush);
  color: var(--blog-ink);
}

/* ---------- Hero ---------- */
.blog-header {
  background: linear-gradient(135deg, var(--blog-plum-mid) 0%, var(--blog-plum) 100%);
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}

.blog-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 58, 99, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.blog-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

/* Breadcrumb - light text on the plum hero, mirroring the BreadcrumbList schema */
.blog-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 0.8rem;
}

.blog-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.72);
}

.blog-breadcrumb li + li::before {
  content: '\203A';
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.95rem;
  line-height: 1;
}

.blog-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-breadcrumb li[aria-current="page"] {
  color: #fff;
  font-weight: 600;
}

.blog-hero-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
  margin: 0;
}

.blog-hero-lede {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  max-width: 40rem;
  margin: 0;
}

.blog-hero-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- Hero search ---------- */
.blog-hero-search {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm, 14px);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(74, 34, 49, 0.12);
}

.blog-hero-search:hover,
.blog-hero-search:focus-within {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.blog-search-wrapper {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  gap: 12px;
}

.blog-search-icon {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
}

.blog-search-icon:hover {
  color: #fff;
}

.blog-hero-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  width: 340px;
  max-width: 60vw;
}

.blog-hero-search input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Mobile topic picker (the sidebar's stand-in below 768px) ---------- */
.blog-topics-mobile {
  display: none;
  position: relative;
}

.blog-topics-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 26px;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill, 999px);
  color: #fff;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blog-topics-btn:hover,
.blog-topics-btn:focus,
.blog-topics-mobile.open .blog-topics-btn {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.blog-topics-arrow {
  font-size: 0.7rem;
  opacity: 0.85;
  transition: transform 0.3s ease;
}

.blog-topics-mobile.open .blog-topics-arrow {
  transform: rotate(180deg);
}

.blog-topics-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border-radius: var(--radius-md, 18px);
  box-shadow: 0 12px 40px rgba(74, 34, 49, 0.22);
  z-index: 100;
  overflow: hidden;
  padding: 6px 0;
  animation: blogTopicsDrop 0.25s ease-out;
}

@keyframes blogTopicsDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.blog-topics-mobile.open .blog-topics-menu {
  display: block;
}

.blog-topics-item {
  display: block;
  padding: 12px 20px;
  margin: 0 6px;
  border-radius: var(--radius-xs, 10px);
  color: var(--blog-ink);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.blog-topics-item:hover {
  background: var(--blog-blush);
  color: var(--blog-accent);
  text-decoration: none;
}

.blog-topics-item.active {
  background: var(--blog-plum);
  color: #fff;
  font-weight: 600;
}

/* ---------- Page body ---------- */
.blog-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px 56px;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.blog-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.blog-section-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blog-plum);
  margin: 0 0 4px;
}

.blog-muted {
  color: var(--blog-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Cards ---------- */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-md, 18px);
  overflow: hidden;
  box-shadow: var(--blog-shadow);
  transition: transform 0.3s var(--blog-ease), border-color 0.3s var(--blog-ease), box-shadow 0.3s var(--blog-ease);
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--blog-accent-soft);
  box-shadow: var(--blog-shadow-lift);
}

/* Pink strip along the top edge, so an image-free card still reads as branded */
.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blog-accent-soft);
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s var(--blog-ease);
}

.blog-card:hover::before {
  opacity: 1;
}

.blog-card-image {
  overflow: hidden;
  line-height: 0;
}

.blog-card-image a {
  display: block;
}

.blog-card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s var(--blog-ease);
}

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

.blog-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  flex: 1;
  padding: 28px 26px;
}

/* The whole card is one click target. The stretched overlay hangs off the title
   link, and the line-clamp sits on the inner span rather than the link itself,
   so overflow clipping can never crop that overlay away. */
.blog-card-link {
  display: block;
  text-decoration: none;
}

.blog-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blog-faint);
}

.blog-card-cat {
  position: relative;
  z-index: 2;
  color: var(--blog-accent);
  text-decoration: none;
}

.blog-card-cat:hover {
  color: var(--blog-plum);
  text-decoration: underline;
}

.blog-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blog-faint);
}

.blog-title {
  font-family: var(--font-display, Georgia, serif);
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--blog-plum);
}

.blog-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--blog-ease);
}

.blog-card:hover .blog-title a {
  color: var(--blog-accent);
}

/* Two-line clamp with a reserved height, so cards in a row line up */
.blog-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.22em * 2);
}

.blog-excerpt {
  margin: 0;
  color: var(--blog-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-md, 18px);
}

.blog-no-posts h3 {
  font-family: var(--font-display, Georgia, serif);
  color: var(--blog-plum);
  margin: 0 0 10px;
}

.blog-no-posts p {
  color: var(--blog-muted);
  margin: 0 0 20px;
}

.blog-btn {
  display: inline-block;
  background: var(--blog-accent-soft);
  color: var(--brand-plum-ink, #4a2231);
  padding: 11px 22px;
  border-radius: var(--radius-pill, 999px);
  font-weight: 700;
  border: 0;
  text-decoration: none;
  transition: all 0.25s ease;
}

.blog-btn:hover {
  background: var(--blog-accent);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Sidebar ---------- */
/* --nav-total is navbar.css's single source of truth for the header height, so
   resizing the header moves this with it rather than leaving the panel pinned
   half under the bar. See the note on .blog-post-sidebar in blog-detail.css:
   sticky is currently inert site-wide because <body> carries overflow-x: hidden.
   The offset here is already right for when that is cleared. */
.blog-aside {
  position: sticky;
  top: calc(var(--nav-total, 85px) + 1rem);
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-panel {
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-md, 18px);
  padding: 24px;
  box-shadow: var(--blog-shadow);
}

.blog-panel h3 {
  font-family: var(--font-body, 'Poppins', sans-serif);
  margin: 0 0 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blog-accent);
}

.blog-filter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blog-chip {
  display: block;
  padding: 11px 16px;
  border-radius: var(--radius-xs, 10px);
  background: var(--blog-blush);
  border: 1px solid var(--blog-line);
  color: var(--blog-muted);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s var(--blog-ease);
}

.blog-chip:hover {
  background: #fbe9ef;
  border-color: var(--blog-accent-soft);
  color: var(--blog-accent);
  text-decoration: none;
}

.blog-chip.active {
  background: var(--blog-plum);
  border-color: var(--blog-plum);
  color: #fff;
  font-weight: 700;
}

.blog-panel-about {
  text-align: center;
}

.blog-panel-about p {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--blog-muted);
}

.blog-panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 11px 20px;
  background: var(--blog-accent-soft);
  color: var(--brand-plum-ink, #4a2231);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  transition: all 0.25s var(--blog-ease);
}

.blog-panel-link:hover {
  background: var(--blog-accent);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.blog-panel-link i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.blog-panel-link:hover i {
  transform: translateX(4px);
}

/* Popular posts */
.blog-popular-list {
  display: flex;
  flex-direction: column;
}

.blog-popular-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--blog-line);
  text-decoration: none;
}

.blog-popular-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.blog-popular-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: rgba(201, 58, 99, 0.1);
  color: var(--blog-accent);
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
}

.blog-popular-title {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--blog-plum);
  transition: color 0.2s ease;
}

.blog-popular-item:hover .blog-popular-title {
  color: var(--blog-accent);
}

/* ---------- Pagination ---------- */
.blog-pagination-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.blog-page-btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-xs, 10px);
  color: var(--blog-plum);
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-page-btn-small:hover:not(.disabled) {
  background: var(--blog-accent-soft);
  border-color: var(--blog-accent-soft);
  color: var(--brand-plum-ink, #4a2231);
  transform: translateY(-1px);
}

.blog-page-btn-small.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.blog-page-info {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--blog-muted);
  padding: 0 6px;
  white-space: nowrap;
}

.blog-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius-xs, 10px);
  color: var(--blog-plum);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-page-btn:hover:not(.current) {
  background: var(--blog-accent-soft);
  border-color: var(--blog-accent-soft);
  color: var(--brand-plum-ink, #4a2231);
  transform: translateY(-2px);
}

.blog-page-btn.current {
  background: var(--blog-plum);
  border-color: var(--blog-plum);
  color: #fff;
}

/* ==========================================================================
   Responsive

   Sidebar sits 320px on the right at >=1201px, drops to a single reading
   column at 981-1200px (two cards beside a 320px rail truncate mid-phrase),
   moves below the cards at 769-980px, and is dropped for the mobile topic
   picker at <=768px.
   ========================================================================== */

@media (min-width: 981px) and (max-width: 1200px) {
  .blog-grid .blog-cards {
    grid-template-columns: 1fr;
  }
}

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

  .blog-aside {
    position: static;
    margin-top: 2rem;
  }

  .blog-card-image img {
    height: 180px;
  }
}

/* Tablet: the sidebar has dropped below, so the cards own the full width.
   Keep two across, centred, with three-line titles at a reserved height so
   the columns stay level. */
@media (min-width: 621px) and (max-width: 980px) {
  .blog-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: calc(1.22em * 3);
  }
}

/* Stacked sidebar has room to spread the topic rows into pills */
@media (min-width: 769px) and (max-width: 980px) {
  .blog-filter-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blog-chip {
    width: auto;
    padding: 10px 16px;
  }
}

@media (max-width: 768px) {
  .blog-topics-mobile {
    display: block;
  }

  .blog-header {
    overflow: visible;   /* the topics menu drops out of the hero */
    padding: 40px 0 44px;
  }

  .blog-aside {
    display: none;
  }

  .blog-wrap {
    padding: 24px 16px 44px;
  }

  .blog-header-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .blog-card-image img {
    height: 170px;
  }
}

/* Phones: one column, left-aligned - easier to scan than centred text */
@media (max-width: 620px) {
  .blog-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card-content {
    align-items: flex-start;
    text-align: left;
    padding: 22px 20px;
    gap: 12px;
  }

  .blog-card-meta {
    justify-content: flex-start;
    font-size: 0.66rem;
  }

  .blog-title {
    font-size: 1.15rem;
    line-height: 1.28;
  }

  /* Full-width cards have the room - let titles run to three lines and drop
     the reserved height, since there is no neighbouring card to align to. */
  .blog-title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: 0;
  }

  .blog-excerpt {
    font-size: 0.88rem;
  }

  .blog-hero-search input {
    width: 200px;
  }
}