/**
 * Blog styles.
 *
 * Plain CSS (not part of the Tailwind build) loaded only on the Blog page, the blog
 * CPT archive and single blogs (see vedanta_scripts() in functions.php). Every rule
 * is namespaced to .blog-landing-wrapper / .blog-single-wrapper so nothing here can
 * leak into other pages, and the Press rules in custom.css stay independent.
 */

/* ---------------- Blog landing (block-blog-list) ---------------- */

/* Card image: zoom only when hovering the card itself.
   <html class="group"> makes unscoped group-hover fire page-wide (same fix as Press). */
.blog-landing-wrapper .block-blog-list .group img.group-hover\:scale-105 {
  scale: 1;
}
.blog-landing-wrapper .block-blog-list .group:hover img.group-hover\:scale-105 {
  scale: 1.05;
}

/* Card categories: vedanta_render_pretitle() adds lg:mb-6 for section headings;
   on a card the title wrapper already provides the spacing. */
.blog-landing-wrapper .blog-card-categories {
  margin-bottom: 0;
}

/* Card title link */
.blog-landing-wrapper .block-blog-list h3 a {
  transition: opacity 0.3s ease;
}
.blog-landing-wrapper .block-blog-list h3 a:hover {
  opacity: 0.8;
}

/* Pagination: circular page buttons + active/hover states
   (size-8 / aria-disabled:* aren't compiled - same fix as Press) */
.blog-landing-wrapper .block-blog-list [aria-label="pagination"] a {
  width: 2rem;
  height: 2rem;
}
.blog-landing-wrapper .block-blog-list [aria-label="pagination"] a:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.blog-landing-wrapper .block-blog-list [aria-label="pagination"] a[aria-disabled="true"] {
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* ---------------- Blog single ---------------- */

/* Clear the fixed site header (74px mobile / 86px desktop); py-20 leaves the
   categories almost touching it on mobile. */
.blog-single-wrapper > article {
  padding-top: 8rem;
}

/* Header categories: the header's space-y-6 already spaces them from the title */
.blog-single-wrapper .blog-single-categories {
  margin-bottom: 0;
}

/* Contain floated (aligned) images */
.blog-single-wrapper .blog-single-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Headings: .rich-text renders every heading at text-2xl, give content a hierarchy */
.blog-single-wrapper .blog-single-content h2 {
  margin-top: 2.5rem;
  font-family: var(--font-nord);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
.blog-single-wrapper .blog-single-content h3 {
  margin-top: 2rem;
  font-size: 1.375rem;
  line-height: 1.35;
}
.blog-single-wrapper .blog-single-content h4,
.blog-single-wrapper .blog-single-content h5,
.blog-single-wrapper .blog-single-content h6 {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
}

/* Body copy */
.blog-single-wrapper .blog-single-content p,
.blog-single-wrapper .blog-single-content li {
  line-height: 1.7;
}
.blog-single-wrapper .blog-single-content li + li {
  margin-top: 0.5rem;
}
/* .rich-text sets strong to text-base (smaller than this text-lg copy on mobile) */
.blog-single-wrapper .blog-single-content strong,
.blog-single-wrapper .blog-single-content b {
  font-size: inherit;
}
.blog-single-wrapper .blog-single-content a {
  text-underline-offset: 4px;
  transition: opacity 0.3s ease;
}
.blog-single-wrapper .blog-single-content a:hover {
  opacity: 0.8;
}

.blog-single-wrapper .blog-single-content blockquote {
  padding-left: 1.5rem;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  font-style: italic;
}

.blog-single-wrapper .blog-single-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-single-wrapper .blog-single-content pre,
.blog-single-wrapper .blog-single-content code {
  font-size: 0.875em;
  background-color: rgba(255, 255, 255, 0.05);
}
.blog-single-wrapper .blog-single-content code {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
.blog-single-wrapper .blog-single-content pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.blog-single-wrapper .blog-single-content pre code {
  padding: 0;
  background-color: transparent;
}

/* Tables */
.blog-single-wrapper .blog-single-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.blog-single-wrapper .blog-single-content th,
.blog-single-wrapper .blog-single-content td {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.blog-single-wrapper .blog-single-content th {
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Images & captions (Classic Editor alignment classes).
   .rich-text forces every img to full width; aligned images keep their own size. */
.blog-single-wrapper .blog-single-content img.alignleft,
.blog-single-wrapper .blog-single-content img.alignright,
.blog-single-wrapper .blog-single-content img.aligncenter,
.blog-single-wrapper .blog-single-content img.alignnone {
  width: auto;
  max-width: 100%;
}
.blog-single-wrapper .blog-single-content .alignleft {
  float: left;
  max-width: 50%;
  margin: 0.5rem 1.5rem 1rem 0;
}
.blog-single-wrapper .blog-single-content .alignright {
  float: right;
  max-width: 50%;
  margin: 0.5rem 0 1rem 1.5rem;
}
.blog-single-wrapper .blog-single-content .aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.blog-single-wrapper .blog-single-content .wp-caption {
  max-width: 100%;
}
.blog-single-wrapper .blog-single-content .wp-caption img {
  width: 100%;
}
.blog-single-wrapper .blog-single-content .wp-caption-text,
.blog-single-wrapper .blog-single-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.6;
}

/* Gallery shortcode */
.blog-single-wrapper .blog-single-content .gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.blog-single-wrapper .blog-single-content .gallery-columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-single-wrapper .blog-single-content .gallery-columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.blog-single-wrapper .blog-single-content .gallery br {
  display: none;
}
.blog-single-wrapper .blog-single-content .gallery-item {
  margin: 0;
}
.blog-single-wrapper .blog-single-content .gallery-item img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Embeds */
.blog-single-wrapper .blog-single-content iframe,
.blog-single-wrapper .blog-single-content video {
  max-width: 100%;
}
.blog-single-wrapper .blog-single-content iframe[src*="youtube"],
.blog-single-wrapper .blog-single-content iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* FAQ accordion ([faq] / [faq_item] shortcodes, inc/shortcodes.php).
   Open/close is handled by the theme's accordion JS; these only adapt it to post content. */
.blog-single-wrapper .blog-faq {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.blog-single-wrapper .blog-faq .blog-faq-question {
  font-weight: 500;
  line-height: 1.5;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 767px) {
  .blog-single-wrapper .blog-single-content h2 {
    font-size: 1.5rem;
  }

  .blog-single-wrapper .blog-single-content h3 {
    font-size: 1.25rem;
  }

  /* Stack aligned images instead of wrapping text around them */
  .blog-single-wrapper .blog-single-content .alignleft,
  .blog-single-wrapper .blog-single-content .alignright {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }

  .blog-single-wrapper .blog-single-content .gallery,
  .blog-single-wrapper .blog-single-content .gallery-columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-single-wrapper .blog-faq .blog-faq-question {
    font-size: 1rem;
  }

  /* Keep tables full width: let long cell text wrap instead of overflowing */
  .blog-single-wrapper .blog-single-content th,
  .blog-single-wrapper .blog-single-content td {
    padding: 0.5rem 0.75rem;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1024px) {
  .blog-single-wrapper > article {
    padding-top: 10rem;
  }
}