/*
 * Buscando a Memo — Blog Styles
 *
 * @package BuscandoAMemo
 * @version 2.0.0
 *
 * Loaded on non-front-page templates (see bam_blog_assets() in functions.php).
 * Consumes CSS custom properties from style.css (:root).
 * Sections: Blog Index, Post Card, Single, Sidebar, Archive, Page, 404, Pagination.
 */

/* =========================================================================
   1. BLOG INDEX
   ========================================================================= */

.bam-blog__header {
  margin-bottom: 48px;
}

.bam-blog__eyebrow {
  max-width: 100%;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--memo-deep-orange);
  margin-bottom: 8px;
}

.bam-blog__title {
  max-width: 100%;
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--deep-ocean);
  margin: 0;
}

/* =========================================================================
   2. POST CARD (index + archive)
   ========================================================================= */

.bam-post-list__cards {
  gap: 32px;
}

.bam-post-card {
  gap: 24px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid rgba(6, 27, 53, 0.1);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(6, 27, 53, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bam-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 27, 53, 0.12);
}

.bam-post-card__thumb {
  flex-shrink: 0;
  width: 200px;
  margin: 0;
}

.bam-post-card__thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.bam-post-card__body {
  flex: 1;
  min-width: 0;
}

.bam-post-title a {
  color: var(--deep-ocean);
  text-decoration: none;
}

.bam-post-title a:hover {
  color: var(--memo-orange);
}

.bam-post-excerpt {
  color: #3a4a5a;
  line-height: 1.7;
}

.bam-post-meta {
  font-size: 0.85rem;
  color: var(--deep-ocean);
}

.bam-post-meta .wp-block-post-date {
  font-weight: 600;
}

.bam-post-author {
  opacity: 0.7;
}

/* =========================================================================
   3. SINGLE POST — two-column layout
   ========================================================================= */

.bam-layout {
  margin-top: 0;
}

.bam-article {
  background: #ffffff;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 16px;
  border: 1px solid rgba(6, 27, 53, 0.1);
}

.bam-single__back-link a {
  color: var(--deep-ocean);
  font-weight: 600;
}

.bam-single__back-link a:hover {
  color: var(--memo-orange);
}

.bam-single__cats a {
  color: var(--memo-deep-orange);
  text-decoration: none;
  background: rgba(247, 147, 30, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
}

.bam-single__cats a:hover {
  color: #ffffff;
  background: var(--memo-deep-orange);
}

.bam-single__title {
  color: var(--deep-ocean);
  margin-top: 12px;
}

.bam-single__meta {
  color: var(--deep-ocean);
  font-size: 0.9rem;
}

.bam-single__featured img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.bam-post-content {
  line-height: 1.8;
  color: #2a3a4a;
}

.bam-post-content a:not([class*="wc-block-cart"]) {
  color: var(--ocean-blue);
}

.bam-post-content h2,
.bam-post-content h3,
.bam-post-content h4 {
  color: var(--deep-ocean);
  margin-top: 1.6em;
}

/* =========================================================================
   4. SIDEBAR
   ========================================================================= */

.bam-sidebar {
  background: #ffffff;
  border: 1px solid rgba(6, 27, 53, 0.1);
  border-radius: 16px;
  position: sticky;
  top: 88px;
}

.bam-sidebar__title {
  font-family: 'Lilita One', cursive;
  font-size: 1.25rem;
  color: var(--deep-ocean);
  margin: 0 0 20px;
  padding: 18px;
  border-bottom: 2px solid var(--memo-gold);
}

.bam-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 18px 18px;
}

.bam-sidebar-post-list {
  gap: 16px;
}

.bam-sidebar-post {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(6, 27, 53, 0.08);
}

.bam-sidebar-post:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.bam-sidebar-post__thumb {
  flex-shrink: 0;
  width: 56px;
  margin: 0;
}

.bam-sidebar-post__thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
}

.bam-sidebar-post__title a {
  color: var(--deep-ocean);
  text-decoration: none;
  font-weight: 600;
}

.bam-sidebar-post__title a:hover {
  color: var(--memo-orange);
}

/* =========================================================================
   5. ARCHIVE
   ========================================================================= */

.bam-archive__header {
  margin-bottom: 48px;
}

.bam-archive__title {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--deep-ocean);
  margin: 0 0 8px;
}

.bam-archive__description {
  color: #3a4a5a;
  line-height: 1.7;
  margin: 0;
}

/* =========================================================================
   6. PAGE
   ========================================================================= */

.bam-page__header {
  margin-bottom: 32px;
}

.bam-page__title {
  font-family: 'Lilita One', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--deep-ocean);
  margin: 0;
}

/* =========================================================================
   7. 404
   ========================================================================= */

.bam-404__inner {
  background: #ffffff;
  text-align: center;
  border: 1px solid rgba(6, 27, 53, 0.1);
  border-radius: 16px;
}

.bam-404__code {
  font-family: 'Lilita One', cursive;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  color: var(--memo-orange);
  margin: 0;
}

.bam-404__title {
  font-family: 'Lilita One', cursive;
  color: var(--deep-ocean);
  margin: 16px 0 12px;
}

.bam-404__text {
  color: #3a4a5a;
  line-height: 1.7;
  margin: 0 0 24px;
}

.bam-404__action {
  margin: 0;
}

.bam-404__action .wp-element-button {
  display: inline-block;
  background: var(--memo-deep-orange);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.bam-404__action .wp-element-button:hover {
  background: var(--memo-orange);
}

/* =========================================================================
   8. PAGINATION & POST NONE
   ========================================================================= */

.bam-pagination {
  justify-content: center;
  gap: 8px;
}

.bam-pagination .wp-block-query-pagination-previous,
.bam-pagination .wp-block-query-pagination-next,
.bam-pagination .wp-block-query-pagination-numbers a {
  color: var(--deep-ocean);
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.bam-pagination .wp-block-query-pagination-numbers a:hover {
  background: rgba(247, 147, 30, 0.15);
  color: var(--memo-deep-orange);
}

.bam-pagination .wp-block-query-pagination-numbers .current {
  background: var(--memo-orange);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
}

.bam-post-none {
  color: #3a4a5a;
  text-align: center;
  padding: 24px;
}

/* =========================================================================
   RESPONSIVE — 768px (tablet) and 480px (mobile)
   ========================================================================= */

@media (max-width: 768px) {
  .bam-layout {
    flex-direction: column;
  }

  .bam-single__main,
  .bam-single__rail {
    flex-basis: 100% !important;
  }

  .bam-sidebar {
    position: static;
    margin-top: 32px;
  }

  .bam-post-card {
    flex-direction: column;
    padding: 16px;
  }

  .bam-post-card__thumb {
    width: 100%;
  }

  .bam-post-card__thumb img {
    height: auto;
    max-height: 240px;
  }

  .bam-article {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .bam-post-card__thumb img {
    max-height: 180px;
  }

  .bam-pagination {
    flex-direction: column;
    align-items: center;
  }

  .bam-blog,
  .bam-single,
  .bam-archive,
  .bam-page,
  .bam-404 {
    padding-top: 96px;
  }
}