/**
 * WOS Design System - Frontend Block Styles
 * Comprehensive styles for all Puck page builder blocks
 *
 * Blocks styled:
 * - Hero Block (.wos-block-hero)
 * - Heading Block (.wos-block-heading)
 * - Text Block (.wos-block-text)
 * - Button Block (.wos-block-button)
 * - Image Block (.wos-block-image)
 * - Columns Block (.wos-block-columns)
 * - Spacer Block (.wos-block-spacer)
 * - Card Block (.wos-block-card)
 * - Product Grid Block (.wos-block-product-grid)
 *
 * CSS Variables used (from design system):
 * - Typography: --wos-text-*, --wos-font-primary, --wos-heading-weight, --wos-body-weight, --wos-leading
 * - Spacing: --wos-space-*, --wos-section-*, --wos-grid-gap
 * - Colors: --wos-primary-*, --wos-secondary-*, --wos-text, --wos-text-light, --wos-text-muted, --wos-bg, --wos-bg-alt, --wos-border
 * - Layout: --wos-content-width, --wos-wide-width, --wos-narrow-width
 * - Effects: --wos-radius-*, --wos-shadow-*, --wos-transition
 */

/* ============================================
   1. HERO BLOCK
   Full-width hero section with background, title, subtitle, and CTA
   ============================================ */

.wos-block-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--wos-section-m) var(--wos-space-l);
  background-color: var(--wos-secondary-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

/* Background overlay for better text readability */
.wos-block-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 1;
}

.wos-block-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wos-content-width);
  margin-inline: auto;
}

.wos-block-hero__title {
  margin: 0 0 var(--wos-space-m);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-5xl);
  font-weight: var(--wos-heading-weight);
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.wos-block-hero__subtitle {
  margin: 0 0 var(--wos-space-l);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-xl);
  font-weight: var(--wos-body-weight);
  line-height: var(--wos-leading);
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
}

/* Center alignment for subtitle */
.wos-block-hero[style*="text-align: center"] .wos-block-hero__subtitle {
  margin-inline: auto;
}

/* Right alignment for subtitle */
.wos-block-hero[style*="text-align: right"] .wos-block-hero__subtitle {
  margin-left: auto;
}

.wos-block-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wos-space-s) var(--wos-space-xl);
  background-color: var(--wos-primary-500);
  color: #ffffff;
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-lg);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--wos-radius-m);
  box-shadow: var(--wos-shadow-m);
  transition: all var(--wos-transition);
  cursor: pointer;
}

.wos-block-hero__button:hover {
  background-color: var(--wos-primary-600);
  transform: translateY(-2px);
  box-shadow: var(--wos-shadow-l);
}

.wos-block-hero__button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.wos-block-hero__button:active {
  transform: translateY(0);
}

/* Hero responsive */
@media (max-width: 1024px) {
  .wos-block-hero {
    min-height: 350px;
    padding: var(--wos-section-s) var(--wos-space-m);
  }

  .wos-block-hero__title {
    font-size: var(--wos-text-4xl);
  }

  .wos-block-hero__subtitle {
    font-size: var(--wos-text-lg);
  }
}

@media (max-width: 768px) {
  .wos-block-hero {
    min-height: 300px;
    padding: var(--wos-space-2xl) var(--wos-space-m);
    text-align: center !important;
  }

  .wos-block-hero__title {
    font-size: var(--wos-text-3xl);
  }

  .wos-block-hero__subtitle {
    font-size: var(--wos-text-md);
    margin-inline: auto;
  }

  .wos-block-hero__button {
    width: 100%;
    padding: var(--wos-space-m) var(--wos-space-l);
  }
}

@media (max-width: 480px) {
  .wos-block-hero {
    min-height: 250px;
    padding: var(--wos-space-xl) var(--wos-space-s);
  }

  .wos-block-hero__title {
    font-size: var(--wos-text-2xl);
  }

  .wos-block-hero__subtitle {
    font-size: var(--wos-text-sm);
  }

  .wos-block-hero__button {
    font-size: var(--wos-text-md);
  }
}


/* ============================================
   2. HEADING BLOCK
   Heading styles for h1-h4 with alignment support
   ============================================ */

.wos-block-heading {
  margin: 0;
  padding: 0;
  font-family: var(--wos-font-primary);
  font-weight: var(--wos-heading-weight);
  line-height: 1.2;
  color: var(--wos-text);
}

h1.wos-block-heading {
  font-size: var(--wos-text-4xl);
  margin-bottom: var(--wos-space-l);
}

h2.wos-block-heading {
  font-size: var(--wos-text-3xl);
  margin-bottom: var(--wos-space-m);
}

h3.wos-block-heading {
  font-size: var(--wos-text-2xl);
  margin-bottom: var(--wos-space-m);
}

h4.wos-block-heading {
  font-size: var(--wos-text-xl);
  margin-bottom: var(--wos-space-s);
}

/* Heading responsive */
@media (max-width: 1024px) {
  h1.wos-block-heading {
    font-size: var(--wos-text-3xl);
  }

  h2.wos-block-heading {
    font-size: var(--wos-text-2xl);
  }

  h3.wos-block-heading {
    font-size: var(--wos-text-xl);
  }

  h4.wos-block-heading {
    font-size: var(--wos-text-lg);
  }
}

@media (max-width: 768px) {
  h1.wos-block-heading {
    font-size: var(--wos-text-2xl);
    margin-bottom: var(--wos-space-m);
  }

  h2.wos-block-heading {
    font-size: var(--wos-text-xl);
  }

  h3.wos-block-heading {
    font-size: var(--wos-text-lg);
  }

  h4.wos-block-heading {
    font-size: var(--wos-text-md);
  }
}


/* ============================================
   3. TEXT BLOCK
   Paragraph and text content styles
   ============================================ */

.wos-block-text {
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-md);
  font-weight: var(--wos-body-weight);
  line-height: var(--wos-leading);
  color: var(--wos-text-light);
}

.wos-block-text p {
  margin: 0 0 var(--wos-space-m);
}

.wos-block-text p:last-child {
  margin-bottom: 0;
}

/* Links within text */
.wos-block-text a {
  color: var(--wos-primary-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--wos-transition);
}

.wos-block-text a:hover {
  color: var(--wos-primary-700);
  text-decoration-thickness: 2px;
}

/* Text responsive */
@media (max-width: 768px) {
  .wos-block-text {
    font-size: var(--wos-text-sm);
  }
}


/* ============================================
   4. BUTTON BLOCK
   Button with variants (primary, secondary, outline) and sizes
   ============================================ */

.wos-block-button-wrapper {
  display: block;
  padding: var(--wos-space-xs) 0;
}

.wos-block-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wos-space-xs);
  padding: var(--wos-space-s) var(--wos-space-l);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-md);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--wos-radius-m);
  cursor: pointer;
  transition: all var(--wos-transition);
  white-space: nowrap;
}

.wos-block-button:focus-visible {
  outline: 2px solid var(--wos-primary-500);
  outline-offset: 2px;
}

/* Primary variant */
.wos-block-button--primary {
  background-color: var(--wos-primary-500);
  border-color: var(--wos-primary-500);
  color: #ffffff;
  box-shadow: var(--wos-shadow-s);
}

.wos-block-button--primary:hover {
  background-color: var(--wos-primary-600);
  border-color: var(--wos-primary-600);
  transform: translateY(-2px);
  box-shadow: var(--wos-shadow-m);
}

.wos-block-button--primary:active {
  transform: translateY(0);
  box-shadow: var(--wos-shadow-s);
}

/* Secondary variant */
.wos-block-button--secondary {
  background-color: var(--wos-secondary-100);
  border-color: var(--wos-secondary-200);
  color: var(--wos-secondary-800);
}

.wos-block-button--secondary:hover {
  background-color: var(--wos-secondary-200);
  border-color: var(--wos-secondary-300);
  transform: translateY(-1px);
}

.wos-block-button--secondary:active {
  transform: translateY(0);
}

/* Outline variant */
.wos-block-button--outline {
  background-color: transparent;
  border-color: var(--wos-primary-500);
  color: var(--wos-primary-600);
}

.wos-block-button--outline:hover {
  background-color: var(--wos-primary-500);
  color: #ffffff;
  transform: translateY(-1px);
}

.wos-block-button--outline:active {
  transform: translateY(0);
}

/* Size variants */
.wos-block-button--small {
  padding: var(--wos-space-xs) var(--wos-space-m);
  font-size: var(--wos-text-sm);
  border-radius: var(--wos-radius-s);
}

.wos-block-button--medium {
  padding: var(--wos-space-s) var(--wos-space-l);
  font-size: var(--wos-text-md);
}

.wos-block-button--large {
  padding: var(--wos-space-m) var(--wos-space-xl);
  font-size: var(--wos-text-lg);
  border-radius: var(--wos-radius-l);
}

/* Button responsive */
@media (max-width: 768px) {
  .wos-block-button--large {
    padding: var(--wos-space-s) var(--wos-space-l);
    font-size: var(--wos-text-md);
  }
}

@media (max-width: 480px) {
  .wos-block-button {
    width: 100%;
  }
}


/* ============================================
   5. IMAGE BLOCK
   Image with size variants and caption
   ============================================ */

.wos-block-image {
  display: block;
  margin: 0 0 var(--wos-space-m);
  padding: 0;
}

.wos-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wos-radius-m);
  object-fit: cover;
}

/* Size variants */
.wos-block-image--medium {
  max-width: var(--wos-narrow-width);
  margin-inline: auto;
}

.wos-block-image--wide {
  max-width: var(--wos-content-width);
  margin-inline: auto;
}

.wos-block-image--full {
  max-width: 100%;
  margin-left: calc(-1 * var(--wos-space-m));
  margin-right: calc(-1 * var(--wos-space-m));
  width: calc(100% + var(--wos-space-m) * 2);
}

.wos-block-image--full img {
  border-radius: 0;
}

/* Placeholder state */
.wos-block-image__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: var(--wos-bg-alt);
  border: 2px dashed var(--wos-border);
  border-radius: var(--wos-radius-m);
  color: var(--wos-text-muted);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
}

/* Caption */
.wos-block-image figcaption {
  margin-top: var(--wos-space-s);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
  color: var(--wos-text-muted);
  text-align: center;
  font-style: italic;
}

/* Image responsive */
@media (max-width: 768px) {
  .wos-block-image--full {
    margin-left: calc(-1 * var(--wos-space-s));
    margin-right: calc(-1 * var(--wos-space-s));
    width: calc(100% + var(--wos-space-s) * 2);
  }
}


/* ============================================
   6. COLUMNS BLOCK
   Multi-column layout with dropzones
   ============================================ */

.wos-block-columns {
  display: grid;
  width: 100%;
}

/* Column count variants */
.wos-block-columns--2 {
  grid-template-columns: repeat(2, 1fr);
}

.wos-block-columns--3 {
  grid-template-columns: repeat(3, 1fr);
}

.wos-block-columns--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Gap variants */
.wos-block-columns--gap-small {
  gap: var(--wos-space-s);
}

.wos-block-columns--gap-medium {
  gap: var(--wos-space-m);
}

.wos-block-columns--gap-large {
  gap: var(--wos-space-xl);
}

/* Individual column */
.wos-block-column {
  min-height: 100px;
  background-color: transparent;
}

/* Editor placeholder styling */
.wos-block-column:empty::before {
  content: 'Drop content here';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background-color: var(--wos-bg-alt);
  border: 2px dashed var(--wos-border);
  border-radius: var(--wos-radius-m);
  color: var(--wos-text-muted);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
}

/* Columns responsive */
@media (max-width: 1024px) {
  .wos-block-columns--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wos-block-columns--gap-large {
    gap: var(--wos-space-m);
  }
}

@media (max-width: 768px) {
  .wos-block-columns--2,
  .wos-block-columns--3,
  .wos-block-columns--4 {
    grid-template-columns: 1fr;
  }

  .wos-block-columns--gap-small,
  .wos-block-columns--gap-medium,
  .wos-block-columns--gap-large {
    gap: var(--wos-space-l);
  }
}


/* ============================================
   7. SPACER BLOCK
   Vertical spacing with size variants
   ============================================ */

.wos-block-spacer {
  display: block;
  width: 100%;
}

/* Size variants */
.wos-block-spacer--small {
  height: var(--wos-space-l);
}

.wos-block-spacer--medium {
  height: var(--wos-space-xl);
}

.wos-block-spacer--large {
  height: var(--wos-space-2xl);
}

.wos-block-spacer--xlarge {
  height: var(--wos-section-s);
}

/* Spacer responsive */
@media (max-width: 768px) {
  .wos-block-spacer--small {
    height: var(--wos-space-m);
  }

  .wos-block-spacer--medium {
    height: var(--wos-space-l);
  }

  .wos-block-spacer--large {
    height: var(--wos-space-xl);
  }

  .wos-block-spacer--xlarge {
    height: var(--wos-space-2xl);
  }
}


/* ============================================
   8. CARD BLOCK
   Card with image, content, and CTA button
   ============================================ */

.wos-block-card {
  display: flex;
  flex-direction: column;
  background-color: var(--wos-bg);
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-l);
  overflow: hidden;
  box-shadow: var(--wos-shadow-s);
  transition: all var(--wos-transition);
}

.wos-block-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wos-shadow-l);
  border-color: var(--wos-primary-200);
}

/* Card image */
.wos-block-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--wos-bg-alt);
}

.wos-block-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wos-transition-slow);
}

.wos-block-card:hover .wos-block-card__image img {
  transform: scale(1.05);
}

/* Card content */
.wos-block-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--wos-space-l);
}

.wos-block-card__title {
  margin: 0 0 var(--wos-space-s);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-xl);
  font-weight: var(--wos-heading-weight);
  line-height: 1.3;
  color: var(--wos-text);
}

.wos-block-card__description {
  margin: 0 0 var(--wos-space-m);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
  font-weight: var(--wos-body-weight);
  line-height: var(--wos-leading);
  color: var(--wos-text-light);
  flex-grow: 1;
}

.wos-block-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wos-space-s) var(--wos-space-m);
  background-color: transparent;
  border: 2px solid var(--wos-primary-500);
  border-radius: var(--wos-radius-m);
  color: var(--wos-primary-600);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--wos-transition);
  align-self: flex-start;
}

.wos-block-card__button:hover {
  background-color: var(--wos-primary-500);
  color: #ffffff;
}

.wos-block-card__button:focus-visible {
  outline: 2px solid var(--wos-primary-500);
  outline-offset: 2px;
}

/* Card without image */
.wos-block-card:not(:has(.wos-block-card__image)) .wos-block-card__content {
  padding-top: var(--wos-space-xl);
}

/* Card responsive */
@media (max-width: 768px) {
  .wos-block-card__content {
    padding: var(--wos-space-m);
  }

  .wos-block-card__title {
    font-size: var(--wos-text-lg);
  }

  .wos-block-card__button {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================
   9. PRODUCT GRID BLOCK
   Grid layout for WooCommerce products
   ============================================ */

.wos-block-product-grid {
  display: grid;
  gap: var(--wos-grid-gap);
  width: 100%;
}

/* Column variants */
.wos-block-product-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.wos-block-product-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.wos-block-product-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Placeholder state (for editor) */
.wos-block-product-grid__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--wos-space-xl);
  background-color: var(--wos-bg-alt);
  border: 2px dashed var(--wos-border);
  border-radius: var(--wos-radius-l);
  text-align: center;
  grid-column: 1 / -1;
}

.wos-block-product-grid__placeholder p {
  margin: 0 0 var(--wos-space-xs);
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-lg);
  font-weight: 600;
  color: var(--wos-text-muted);
}

.wos-block-product-grid__placeholder small {
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
  color: var(--wos-text-muted);
}

/* Product item styling (for rendered products) */
.wos-block-product-grid__item {
  display: flex;
  flex-direction: column;
  background-color: var(--wos-bg);
  border: 1px solid var(--wos-border);
  border-radius: var(--wos-radius-l);
  overflow: hidden;
  transition: all var(--wos-transition);
}

.wos-block-product-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--wos-shadow-m);
  border-color: var(--wos-primary-200);
}

.wos-block-product-grid__item-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--wos-bg-alt);
}

.wos-block-product-grid__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wos-transition-slow);
}

.wos-block-product-grid__item:hover .wos-block-product-grid__item-image img {
  transform: scale(1.05);
}

.wos-block-product-grid__item-content {
  display: flex;
  flex-direction: column;
  gap: var(--wos-space-xs);
  padding: var(--wos-space-m);
}

.wos-block-product-grid__item-title {
  margin: 0;
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wos-text);
}

.wos-block-product-grid__item-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--wos-transition);
}

.wos-block-product-grid__item-title a:hover {
  color: var(--wos-primary-600);
}

.wos-block-product-grid__item-price {
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-lg);
  font-weight: 700;
  color: var(--wos-primary-600);
}

.wos-block-product-grid__item-price del {
  font-size: var(--wos-text-sm);
  font-weight: 400;
  color: var(--wos-text-muted);
  margin-right: var(--wos-space-xs);
}

.wos-block-product-grid__item-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--wos-space-s);
  padding: var(--wos-space-s);
  background-color: var(--wos-primary-500);
  border: none;
  border-radius: var(--wos-radius-m);
  color: #ffffff;
  font-family: var(--wos-font-primary);
  font-size: var(--wos-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--wos-transition);
}

.wos-block-product-grid__item-button:hover {
  background-color: var(--wos-primary-600);
}

/* Product grid responsive */
@media (max-width: 1024px) {
  .wos-block-product-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .wos-block-product-grid--3,
  .wos-block-product-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wos-block-product-grid__item-content {
    padding: var(--wos-space-s);
  }

  .wos-block-product-grid__item-title {
    font-size: var(--wos-text-sm);
  }

  .wos-block-product-grid__item-price {
    font-size: var(--wos-text-md);
  }
}

@media (max-width: 480px) {
  .wos-block-product-grid--2,
  .wos-block-product-grid--3,
  .wos-block-product-grid--4 {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   10. GLOBAL BLOCK UTILITIES
   Additional utilities for all blocks
   ============================================ */

/* Animation utilities for blocks */
.wos-block-animate-in {
  animation: wos-block-fade-in 0.3s ease forwards;
}

@keyframes wos-block-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Block container wrapper */
.wos-block-wrapper {
  width: 100%;
  max-width: var(--wos-content-width);
  margin-inline: auto;
  padding-inline: var(--wos-space-m);
}

.wos-block-wrapper--wide {
  max-width: var(--wos-wide-width);
}

.wos-block-wrapper--narrow {
  max-width: var(--wos-narrow-width);
}

.wos-block-wrapper--full {
  max-width: 100%;
  padding-inline: 0;
}

/* Block section spacing */
.wos-block-section {
  padding-block: var(--wos-section-m);
}

.wos-block-section--s {
  padding-block: var(--wos-section-s);
}

.wos-block-section--l {
  padding-block: var(--wos-section-l);
}

.wos-block-section--xl {
  padding-block: var(--wos-section-xl);
}

/* Block background variants */
.wos-block-bg-default {
  background-color: var(--wos-bg);
}

.wos-block-bg-alt {
  background-color: var(--wos-bg-alt);
}

.wos-block-bg-primary {
  background-color: var(--wos-primary-500);
  color: #ffffff;
}

.wos-block-bg-secondary {
  background-color: var(--wos-secondary-100);
}

.wos-block-bg-dark {
  background-color: var(--wos-secondary-900);
  color: #ffffff;
}

/* Dark background text overrides */
.wos-block-bg-primary,
.wos-block-bg-dark {
  --wos-text: #ffffff;
  --wos-text-light: rgba(255, 255, 255, 0.85);
  --wos-text-muted: rgba(255, 255, 255, 0.7);
}

/* Responsive section spacing */
@media (max-width: 768px) {
  .wos-block-section {
    padding-block: var(--wos-section-s);
  }

  .wos-block-section--l {
    padding-block: var(--wos-section-m);
  }

  .wos-block-section--xl {
    padding-block: var(--wos-section-l);
  }
}


/* ============================================
   11. PRINT STYLES
   Optimize blocks for printing
   ============================================ */

@media print {
  .wos-block-hero {
    background-color: #f5f5f5 !important;
    background-image: none !important;
    color: #000 !important;
    min-height: auto !important;
  }

  .wos-block-hero::before {
    display: none;
  }

  .wos-block-hero__title,
  .wos-block-hero__subtitle {
    color: #000 !important;
    text-shadow: none !important;
  }

  .wos-block-hero__button,
  .wos-block-button,
  .wos-block-card__button,
  .wos-block-product-grid__item-button {
    border-color: #000 !important;
    color: #000 !important;
    background: none !important;
  }

  .wos-block-card,
  .wos-block-product-grid__item {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .wos-block-columns {
    display: block !important;
  }

  .wos-block-column {
    break-inside: avoid;
    margin-bottom: 1em;
  }

  .wos-block-spacer {
    display: none !important;
  }
}