/* Blog-only styles. All selectors are scoped to editorial templates. */
.vs360-blog,
.vs360-post {
  color: var(--vs360-color-text);
  overflow-wrap: anywhere;
  padding-block: 1rem 0;
}

.vs360-blog__breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 0.625rem;
  margin-block: 0.5rem 1.25rem;
}

.vs360-blog__breadcrumb a {
  color: var(--vs360-color-primary);
}

.vs360-blog__hero {
  align-items: center;
  background: linear-gradient(115deg, #f8f7ff, #f2f5f7);
  border: 1px solid #ebe9f7;
  border-radius: 1rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.85fr);
  min-block-size: 16rem;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.vs360-blog__hero h1,
.vs360-post h1 {
  color: var(--vs360-color-primary);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  margin: 0.5rem 0;
}

.vs360-blog__hero p:not(.vs360-blog__eyebrow) {
  color: var(--vs360-color-muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0;
  max-inline-size: 38rem;
}

.vs360-blog__eyebrow,
.vs360-blog-chip {
  color: var(--vs360-color-secondary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.vs360-blog-chip {
  background: #e8f7ed;
  border-radius: 999px;
  display: inline-flex;
  line-height: 1.2;
  padding: 0.35rem 0.65rem;
  text-decoration: none;
}

.vs360-blog__hero-art {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: center;
  min-block-size: 12rem;
}

.vs360-blog__hero-art span {
  background: linear-gradient(145deg, #fff, #d9d9e2);
  border-radius: 1rem 1rem 0.35rem 0.35rem;
  box-shadow: var(--vs360-shadow-md);
  display: block;
  inline-size: 28%;
}

.vs360-blog__hero-art span:first-child { block-size: 10rem; transform: rotate(-6deg); }
.vs360-blog__hero-art span:nth-child(2) { block-size: 8rem; border-radius: 50%; }
.vs360-blog__hero-art span:last-child { block-size: 6.5rem; border-radius: 45% 45% 1rem 1rem; }

.vs360-blog-search {
  margin-block: 1.25rem;
}

.vs360-blog-search label {
  color: var(--vs360-color-primary);
  display: block;
  font-weight: 700;
  margin-block-end: 0.4rem;
}

.vs360-blog-search > div {
  display: flex;
  gap: 0.5rem;
}

.vs360-blog-search input[type="search"] {
  border: 1px solid var(--vs360-color-border);
  border-radius: 0.5rem;
  flex: 1;
  min-block-size: 44px;
  min-inline-size: 0;
  padding-inline: 0.9rem;
}

.vs360-blog-search button,
.vs360-blog-button {
  align-items: center;
  background: var(--vs360-color-secondary);
  border: 0;
  border-radius: 0.5rem;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-block-size: 44px;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
}

.vs360-blog-featured {
  border: 1px solid var(--vs360-color-border);
  border-radius: 1rem;
  box-shadow: var(--vs360-shadow-sm);
  margin-block: 1.25rem;
  overflow: hidden;
}

.vs360-blog-featured article {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.9fr);
}

.vs360-blog-featured__media,
.vs360-article-card__media {
  background: var(--vs360-color-light);
  display: block;
  overflow: hidden;
}

.vs360-blog-featured__media img {
  aspect-ratio: 16 / 9;
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.vs360-blog-featured__body {
  align-self: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.vs360-blog-featured__body h2,
.vs360-blog-latest > h2,
.vs360-post-related > h2 {
  color: var(--vs360-color-primary);
  line-height: 1.2;
}

.vs360-blog-featured__body h2 a,
.vs360-article-card h3 a {
  color: inherit;
  text-decoration: none;
}

.vs360-article-meta {
  align-items: center;
  color: var(--vs360-color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.45rem 1rem;
  margin-block: 1rem;
}

.vs360-article-meta > * + *::before {
  content: "•";
  margin-inline-end: 0.6rem;
}

.vs360-blog-categories {
  display: flex;
  gap: 0.65rem;
  margin-block: 1.25rem;
  overflow-x: auto;
  padding: 0.2rem 0 0.65rem;
  scrollbar-width: thin;
}

.vs360-blog-categories a {
  align-items: center;
  border: 1px solid var(--vs360-color-border);
  border-radius: 0.5rem;
  color: var(--vs360-color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: 1.25rem;
  text-decoration: none;
}

.vs360-blog-categories a[aria-current="page"] {
  background: var(--vs360-color-primary);
  border-color: var(--vs360-color-primary);
  color: #fff;
}

.vs360-blog-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vs360-article-card {
  border: 1px solid var(--vs360-color-border);
  border-radius: 0.75rem;
  box-shadow: var(--vs360-shadow-sm);
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
}

.vs360-article-card__media img,
.vs360-article-card__media .vs360-blog-image-fallback {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  object-fit: cover;
}

.vs360-blog-image-fallback {
  align-items: center;
  background: linear-gradient(135deg, var(--vs360-color-primary), #302696 58%, var(--vs360-color-secondary));
  color: #fff;
  display: flex;
  justify-content: center;
  min-block-size: 12rem;
}

.vs360-blog-image-fallback span {
  border: 2px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  font-size: 2.5rem;
  font-weight: 800;
  padding: 1rem 1.4rem;
}

.vs360-article-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
}

.vs360-article-card h3 {
  color: var(--vs360-color-primary);
  font-size: 1.125rem;
  line-height: 1.25;
  margin: 0.65rem 0 0.4rem;
}

.vs360-article-card p {
  color: var(--vs360-color-muted);
  font-size: 0.9rem;
  margin: 0;
}

.vs360-article-card .vs360-article-meta { margin-block-start: auto; padding-block-start: 0.75rem; }
.vs360-article-card__more { color: var(--vs360-color-primary); font-weight: 800; min-block-size: 44px; padding-block: 0.65rem; }

.vs360-blog .navigation.pagination { margin-block: 1.5rem; }
.vs360-blog .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.vs360-blog .page-numbers { align-items: center; border: 1px solid var(--vs360-color-border); border-radius: 0.4rem; color: var(--vs360-color-primary); display: inline-flex; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding: 0.5rem; text-decoration: none; }
.vs360-blog .page-numbers.current { background: var(--vs360-color-secondary); border-color: var(--vs360-color-secondary); color: #fff; }

.vs360-blog-empty { background: var(--vs360-color-light); border-radius: 1rem; padding: clamp(1.5rem, 4vw, 3rem); text-align: center; }

.vs360-blog-shop-cta {
  align-items: center;
  background: linear-gradient(120deg, var(--vs360-color-primary), #191278);
  border-radius: 1rem;
  color: #fff;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.2fr 0.8fr;
  margin-block: 2rem 1rem;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.vs360-blog-shop-cta h2 { color: #fff; margin-block: 0 0.5rem; }
.vs360-blog-shop-cta__logo {
  align-items: center;
  display: flex;
  justify-content: center;
}

.vs360-blog-shop-cta__logo-image {
  background: #fff;
  border: 4px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  block-size: clamp(9rem, 16vw, 13rem);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 22%);
  inline-size: clamp(9rem, 16vw, 13rem);
  object-fit: contain;
}

/* The shared benefits markup is reused without loading home/shop styles. */
.vs360-blog .vs360-home-benefits {
  background: #fff;
  border: 1px solid var(--vs360-color-border);
  border-radius: 0.75rem;
  margin-block: 1.25rem;
}

.vs360-blog .vs360-benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vs360-blog .vs360-benefit {
  align-items: center;
  color: var(--vs360-color-primary);
  display: flex;
  font-size: 0.875rem;
  gap: 0.6rem;
  min-block-size: 64px;
  min-inline-size: 0;
  padding: 0.75rem;
}

.vs360-blog .vs360-benefit + .vs360-benefit {
  border-inline-start: 1px solid var(--vs360-color-border);
}

.vs360-blog .vs360-benefit svg {
  block-size: 30px;
  fill: none;
  flex: 0 0 30px;
  inline-size: 30px;
  max-block-size: 30px;
  max-inline-size: 30px;
  stroke: var(--vs360-color-secondary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.vs360-post { max-inline-size: 76rem; }
.vs360-post__header { margin: 2rem auto; max-inline-size: 60rem; text-align: center; }
.vs360-post__excerpt { color: var(--vs360-color-muted); font-size: 1.2rem; }
.vs360-post__header .vs360-article-meta { justify-content: center; }
.vs360-post__featured { margin: 0 auto 2rem; max-inline-size: 68rem; }
.vs360-post__featured img { border-radius: 1rem; inline-size: 100%; max-block-size: 42rem; object-fit: contain; }
.vs360-post__layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) 10rem; margin-inline: auto; max-inline-size: 68rem; }
.vs360-post__content { font-size: 1.0625rem; line-height: 1.75; min-inline-size: 0; }
.vs360-post__content h2,
.vs360-post__content h3 { color: var(--vs360-color-primary); line-height: 1.25; margin-block-start: 2em; }
.vs360-post__content img { border-radius: 0.5rem; }
.vs360-post__content blockquote { border-inline-start: 4px solid var(--vs360-color-secondary); color: var(--vs360-color-muted); margin-inline: 0; padding: 0.75rem 1.25rem; }
.vs360-post__content table { border-collapse: collapse; inline-size: 100%; }
.vs360-post__content :where(td, th) { border: 1px solid var(--vs360-color-border); padding: 0.75rem; text-align: start; }
.vs360-post__content :where(iframe, video, embed, object) { max-inline-size: 100%; }
.vs360-post__content .wp-block-table { overflow-x: auto; }
.vs360-post__share { align-self: start; display: flex; flex-direction: column; gap: 0.35rem; position: sticky; top: 1rem; }
.vs360-post__share :where(a, button) { align-items: center; background: #fff; border: 1px solid var(--vs360-color-border); border-radius: 0.4rem; color: var(--vs360-color-primary); display: flex; font: inherit; min-block-size: 44px; padding: 0.5rem; text-decoration: none; }
.vs360-post-nav { border-block: 1px solid var(--vs360-color-border); display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-block: 2rem; padding-block: 1rem; }
.vs360-post-nav div:last-child { text-align: end; }
.vs360-post-nav a,
.vs360-post__back { color: var(--vs360-color-primary); display: inline-flex; font-weight: 700; min-block-size: 44px; padding-block: 0.65rem; }
.vs360-post-related { margin-block: 2rem; }

@media (hover: hover) {
  .vs360-article-card { transition: box-shadow 160ms ease, transform 160ms ease; }
  .vs360-article-card:hover { box-shadow: var(--vs360-shadow-md); transform: translateY(-2px); }
}

@media (max-width: 63.9375rem) {
  .vs360-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs360-post__layout { grid-template-columns: 1fr; }
  .vs360-post__share { flex-direction: row; flex-wrap: wrap; position: static; }
}

@media (max-width: 47.9375rem) {
  .vs360-blog,
  .vs360-post { inline-size: min(100% - 2rem, var(--vs360-container-lg)); padding-block-end: max(4.5rem, env(safe-area-inset-bottom)); }
  .vs360-blog__hero { grid-template-columns: 1fr; min-block-size: auto; padding: 1.25rem; }
  .vs360-blog__hero-art { min-block-size: 7rem; }
  .vs360-blog__hero-art span:first-child { block-size: 6rem; }
  .vs360-blog__hero-art span:nth-child(2) { block-size: 5rem; }
  .vs360-blog__hero-art span:last-child { block-size: 4rem; }
  .vs360-blog-featured article { grid-template-columns: 1fr; }
  .vs360-blog-featured__body { padding: 1.25rem; }
  .vs360-blog-grid { grid-template-columns: 1fr; }
  .vs360-blog-shop-cta { grid-template-columns: 1fr; }
  .vs360-blog-shop-cta__logo-image { block-size: 7.5rem; inline-size: 7.5rem; }
  .vs360-blog .vs360-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs360-blog .vs360-benefit + .vs360-benefit { border-inline-start: 0; }
  .vs360-blog .vs360-benefit:nth-child(even) { border-inline-start: 1px solid var(--vs360-color-border); }
  .vs360-blog .vs360-benefit:nth-child(n+3) { border-block-start: 1px solid var(--vs360-color-border); }
  .vs360-article-meta { align-items: flex-start; flex-direction: column; }
  .vs360-article-meta > * + *::before { display: none; }
  .vs360-post__header .vs360-article-meta { align-items: center; }
  .vs360-post-nav { grid-template-columns: 1fr; }
  .vs360-post-nav div:last-child { text-align: start; }
  .vs360-post__content { font-size: 1rem; }
}

@media (max-width: 23.4375rem) {
  .vs360-blog-search > div { flex-direction: column; }
  .vs360-blog-search button { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vs360-article-card { transition: none; }
}

@media print {
  .vs360-post__share,
  .vs360-post-nav,
  .vs360-post-related,
  .vs360-post__back,
  .vs360-footer,
  .vs360-site-header { display: none !important; }
}