/* ============================================================
   Blog index + archives — body.blog / body.archive:not(.woocommerce)
   Gurdy's Corner post listing: responsive card grid on the
   rust canvas. Card = featured image on top, then title, meta,
   excerpt, read-more.
   ============================================================ */

body.blog, body.archive:not(.woocommerce) {
  --bc-brown:       #412818;
  --bc-brown-soft:  #5a3a25;
  --bc-card:        #fffdf9;
  --bc-cream:       #faf3e8;
  --bc-gold:        #b8860b;
  --bc-gold-bright: #d4a017;
  --bc-line:        rgba(65, 40, 24, 0.14);
}

/* ── Canvas ───────────────────────────────────────────────── */
body.blog, body.archive:not(.woocommerce) {
  background: #c4824c !important;
  background-image: radial-gradient(
    ellipse at center, transparent 40%,
    rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0.4) 100%
  ) !important;
  background-attachment: fixed !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
body.blog .site-content,
body.archive:not(.woocommerce) .site-content {
  background-color: transparent;
}

/* ── Card grid ────────────────────────────────────────────── */
body.blog .site-main,
body.archive:not(.woocommerce) .site-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  align-items: stretch;
}

/* ── Hero image banner + intro (span all columns) ─────────── */
body.blog .bc-blog-hero,
body.blog .bc-blog-intro {
  grid-column: 1 / -1;
}
body.blog .bc-blog-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(220px, 30vw, 360px);
  padding: clamp(30px, 5vw, 60px);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(40, 22, 12, 0.24);
  background-image:
    linear-gradient(rgba(40, 22, 12, 0.28), rgba(40, 22, 12, 0.46)),
    url('https://birdiechaser.com/wp-content/uploads/2026/05/Gurdys-Corner-Hero-2.webp');
  background-size: cover;
  background-position: center;
}
body.blog .bc-blog-hero-title {
  font-family: var(--font-heading), 'Libre Baskerville', serif;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);
}
body.blog .bc-blog-intro {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  background: var(--bc-card);
  border: 1px solid var(--bc-line);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(40, 22, 12, 0.18);
  padding: clamp(26px, 4vw, 48px) clamp(24px, 5vw, 56px);
}
body.blog .bc-intro-figure {
  flex: 0 0 clamp(160px, 22vw, 230px);
  text-align: center;
}
body.blog .bc-intro-copy {
  flex: 1 1 auto;
  min-width: 0;
}
body.blog .bc-intro-h2 {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 28px;
  line-height: 1.14;
  color: var(--bc-brown);
  margin: 0 0 0.5em;
}
body.blog .bc-intro-copy p {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--bc-brown-soft);
  margin: 0 0 1em;
}
body.blog .bc-intro-copy p:last-child {
  margin-bottom: 0;
}

/* ── Spinning Gurdy (coin-flip, same as Meet Gurdy) ───────── */
body.blog .bc-flip {
  display: inline-block;
  width: 100%;
  max-width: 230px;
  perspective: 1000px;
  animation: bcGurdyBob 3.2s ease-in-out infinite;
  cursor: pointer;
}
body.blog .bc-flip-inner {
  display: block;
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.blog .bc-flip:hover .bc-flip-inner,
body.blog .bc-flip:focus-within .bc-flip-inner {
  transform: rotateY(180deg);
}
body.blog .bc-flip-face {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fbe7c7 70%, #f3d8a4 100%);
  border: 5px solid var(--bc-gold);
  box-shadow: 0 14px 34px rgba(40, 22, 12, 0.32), 0 0 0 10px rgba(251, 232, 198, 0.4);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body.blog .bc-flip-front {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
body.blog .bc-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
body.blog .bc-flip-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 50%;
}
@keyframes bcGurdyBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}
@media (prefers-reduced-motion: reduce) {
  body.blog .bc-flip { animation: none; }
}
/* leftover WooCommerce filter chips don't belong on the blog */
body.blog .wpc-custom-selected-terms,
body.archive:not(.woocommerce) .wpc-custom-selected-terms,
body.blog .wpc-filter-chips-list,
body.archive:not(.woocommerce) .wpc-filter-chips-list,
body.blog .inside-article > footer.entry-meta,
body.archive:not(.woocommerce) .inside-article > footer.entry-meta,
body.blog .cat-links,
body.archive:not(.woocommerce) .cat-links {
  display: none;
}
/* page header + pagination span the full width */
body.blog .site-main > .page-header,
body.archive:not(.woocommerce) .site-main > .page-header,
body.blog .site-main > nav,
body.archive:not(.woocommerce) .site-main > nav,
body.blog .site-main > .paging-navigation,
body.archive:not(.woocommerce) .site-main > .paging-navigation {
  grid-column: 1 / -1;
}

/* ── Archive page header (category/tag) ───────────────────── */
body.blog .page-header,
body.archive:not(.woocommerce) .page-header {
  background: var(--bc-card);
  border: 1px solid var(--bc-line);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(40, 22, 12, 0.18);
  padding: clamp(26px, 4vw, 44px) clamp(28px, 5vw, 52px);
}
body.blog .page-header .page-title,
body.archive:not(.woocommerce) .page-header .page-title {
  font-family: var(--font-heading), 'Libre Baskerville', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  color: var(--bc-brown);
  margin: 0;
  letter-spacing: -0.01em;
}
body.blog .page-header .taxonomy-description,
body.archive:not(.woocommerce) .page-header .taxonomy-description {
  font-family: var(--font-body), 'Outfit', sans-serif;
  color: var(--bc-brown-soft);
  margin: 0.6em 0 0;
}

/* ── Post card ────────────────────────────────────────────── */
body.blog .site-main > article,
body.archive:not(.woocommerce) .site-main > article {
  margin: 0;
}
body.blog .site-main > article > .inside-article,
body.archive:not(.woocommerce) .site-main > article > .inside-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bc-card);
  border: 1px solid var(--bc-line);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(40, 22, 12, 0.22);
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.blog .site-main > article > .inside-article:hover,
body.archive:not(.woocommerce) .site-main > article > .inside-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(40, 22, 12, 0.28);
}

/* featured image → top of card */
body.blog .post-image,
body.archive:not(.woocommerce) .post-image {
  order: -1;
  margin: 0;
}
body.blog .post-image img,
body.archive:not(.woocommerce) .post-image img {
  display: block;
  width: 100%;
  height: auto; /* show full 1200x630 — no crop (all images same ratio = same height) */
}

/* text block padding (no wrapper, so pad the elements) */
body.blog .entry-title,
body.archive:not(.woocommerce) .entry-title,
body.blog .entry-meta,
body.archive:not(.woocommerce) .entry-meta,
body.blog .entry-summary,
body.archive:not(.woocommerce) .entry-summary {
  padding-left: clamp(18px, 2vw, 26px);
  padding-right: clamp(18px, 2vw, 26px);
}

body.blog .entry-title,
body.archive:not(.woocommerce) .entry-title {
  font-family: var(--font-heading), 'Libre Baskerville', serif;
  font-size: 1.4rem;
  line-height: 1.18;
  margin: 0;
  padding-top: 18px;
}
body.blog .entry-title a,
body.archive:not(.woocommerce) .entry-title a {
  color: var(--bc-brown);
  text-decoration: none;
}
body.blog .entry-title a:hover,
body.archive:not(.woocommerce) .entry-title a:hover {
  color: var(--bc-gold);
}

body.blog .entry-meta,
body.archive:not(.woocommerce) .entry-meta {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--bc-brown-soft);
  opacity: 0.8;
  margin: 0.5em 0 0;
}

body.blog .entry-summary,
body.archive:not(.woocommerce) .entry-summary {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bc-brown-soft);
  margin: 0.9em 0 0;
  padding-bottom: clamp(20px, 2.5vw, 28px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body.blog .entry-summary p,
body.archive:not(.woocommerce) .entry-summary p {
  margin: 0 0 1.1em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read more → full-width gold button on its own row, pinned to card bottom */
body.blog .bc-read-more,
body.archive:not(.woocommerce) .bc-read-more {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: #2d1810;
  text-decoration: none;
  background: linear-gradient(180deg, #e8c14e 0%, #d4a017 55%, #b8860b 100%);
  padding: 13px 18px;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(45, 24, 16, 0.24);
  transition: transform 0.15s ease, filter 0.15s ease;
}
body.blog .bc-read-more:hover,
body.archive:not(.woocommerce) .bc-read-more:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: #2d1810;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.blog .site-main,
  body.archive:not(.woocommerce) .site-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  body.blog .site-main,
  body.archive:not(.woocommerce) .site-main {
    grid-template-columns: 1fr;
  }
  body.blog .bc-blog-intro {
    flex-direction: column;
    text-align: center;
  }
  body.blog .bc-intro-figure {
    flex: none;
  }
}