/* cms-blocks.css — WO-WD-003. Styles shared by every CMS block. Loaded */
/* alongside main.css from base.html. Keep selectors scoped under .block / */
/* [class^="block-"] so they never leak into the non-CMS page chrome.      */

/* -------- common wrapper -------- */

.block {
  --block-container-max: 1200px;
  box-sizing: border-box;
}

.block-full-bleed { width: 100%; max-width: none; }

.block-hide-desktop { display: none; }
@media (max-width: 64rem) {
  .block-hide-desktop { display: initial; }
  .block-hide-tablet  { display: none; }
}
@media (max-width: 48rem) {
  .block-hide-tablet  { display: initial; }
  .block-hide-mobile  { display: none; }
}

/* -------- text -------- */

.block-text .text-body {
  max-width: 65ch;
  margin: 0 auto;
  line-height: 1.6;
}
.block-text .text-body[data-max-width="narrow"] { max-width: 45ch; }
.block-text .text-body[data-max-width="full"]   { max-width: none; }
.block-text .text-body[data-align="center"] { text-align: center; margin-left: auto; margin-right: auto; }
.block-text .text-body[data-align="right"]  { text-align: right; }

/* -------- hero -------- */

.block-hero .hero {
  position: relative;
  display: flex;
  align-items: center;
  color: inherit;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem);
}
.block-hero .hero-sm { min-height: 240px; }
.block-hero .hero-md { min-height: 420px; }
.block-hero .hero-lg { min-height: 640px; }
.block-hero .hero-inner { max-width: 48rem; }
.block-hero .hero[data-align="center"] { justify-content: center; text-align: center; }
.block-hero .hero[data-align="center"] .hero-inner { margin: 0 auto; }
.block-hero .hero[data-align="right"]  { justify-content: flex-end; text-align: right; }
.block-hero h1 { font-size: clamp(1.75rem, 4vw, 3rem); margin: 0 0 .5em; }
.block-hero .hero-sub { font-size: 1.125rem; margin: 0 0 1.25em; opacity: .92; }

.block-hero .btn {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.block-hero .btn-primary   { background: #0b5fff; color: #fff; }
.block-hero .btn-secondary { background: #e5e7eb; color: #111; }
.block-hero .btn-ghost     { background: transparent; color: currentColor; border: 2px solid currentColor; }

/* -------- image -------- */

.block-image .img-fig { margin: 0; text-align: center; }
.block-image .img-fig img { max-width: 100%; height: auto; display: inline-block; }
.block-image .img-fig[data-rounded="true"] img { border-radius: 12px; }
.block-image .img-fig[data-aspect="16:9"] img { aspect-ratio: 16/9; object-fit: cover; }
.block-image .img-fig[data-aspect="4:3"]  img { aspect-ratio: 4/3;  object-fit: cover; }
.block-image .img-fig[data-aspect="1:1"]  img { aspect-ratio: 1/1;  object-fit: cover; }
.block-image figcaption { margin-top: .5rem; font-size: .875rem; color: #555; }

/* -------- spacer -------- */

.block-spacer { height: var(--space-desktop, 32px); }
@media (max-width: 48rem) {
  .block-spacer { height: var(--space-mobile, 16px); }
}

/* -------- columns (the load-bearing one) -------- */

.block-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap, 1rem);
}
.block-columns > .col { grid-column: span var(--span, 12); min-width: 0; }
.block-columns[data-gap="sm"] { --col-gap: 0.5rem; }
.block-columns[data-gap="md"] { --col-gap: 1rem;   }
.block-columns[data-gap="lg"] { --col-gap: 2rem;   }
.block-columns[data-valign="top"]     { align-items: start;  }
.block-columns[data-valign="center"]  { align-items: center; }
.block-columns[data-valign="stretch"] { align-items: stretch;}
@media (max-width: 48rem) {
  .block-columns[data-stack="true"] { grid-template-columns: 1fr; }
  .block-columns[data-stack="true"] > .col { grid-column: span 1; }
}

/* -------- commerce blocks (WO-WD-004) -------- */

.cms-empty {
  padding: 1.5rem;
  border: 1px dashed #c7c7d1;
  border-radius: 8px;
  color: #666;
  text-align: center;
  font-style: italic;
}

.cms-product-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr));
}
.cms-product-grid { --cols-desktop: attr(data-cols-desktop type(<integer>), 4); } /* progressive */
.cms-product-grid[data-cols-desktop="1"] { grid-template-columns: 1fr; }
.cms-product-grid[data-cols-desktop="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-product-grid[data-cols-desktop="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-product-grid[data-cols-desktop="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-product-grid[data-cols-desktop="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cms-product-grid[data-cols-desktop="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 64rem) {
  .cms-product-grid[data-cols-tablet="1"] { grid-template-columns: 1fr; }
  .cms-product-grid[data-cols-tablet="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-product-grid[data-cols-tablet="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .cms-product-grid[data-cols-mobile="1"] { grid-template-columns: 1fr; }
  .cms-product-grid[data-cols-mobile="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cms-product-carousel { position: relative; }
.cms-product-carousel .cms-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / var(--slides, 4));
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: .5rem;
}
.cms-product-carousel[data-slides-per-view="1"] { --slides: 1; }
.cms-product-carousel[data-slides-per-view="2"] { --slides: 2; }
.cms-product-carousel[data-slides-per-view="3"] { --slides: 3; }
.cms-product-carousel[data-slides-per-view="4"] { --slides: 4; }
.cms-product-carousel[data-slides-per-view="5"] { --slides: 5; }
.cms-product-carousel .cms-carousel-slide { scroll-snap-align: start; min-width: 0; }
.cms-product-carousel .cms-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255, 255, 255, .9); border: 1px solid #ddd;
  cursor: pointer; z-index: 2;
}
.cms-product-carousel .cms-carousel-arrow--prev { left: -.75rem; }
.cms-product-carousel .cms-carousel-arrow--next { right: -.75rem; }
@media (max-width: 48rem) {
  .cms-product-carousel .cms-carousel-track { grid-auto-columns: 80%; }
}

.cms-featured-product { display: grid; gap: 1.5rem; padding: 1rem; }
.cms-featured-product .cms-featured-image img { width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.cms-featured-product .cms-featured-copy h2 { margin: 0 0 .25em; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.cms-featured-product .cms-featured-copy .cms-featured-brand { color: #666; font-size: .875rem; }
.cms-featured-product .cms-featured-specs { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.cms-featured-product .cms-featured-specs th { text-align: left; padding: .35rem .75rem .35rem 0; color: #555; font-weight: 500; }
.cms-featured-product .cms-featured-specs td { padding: .35rem 0; }
.cms-featured-split, .cms-featured-large {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.cms-featured-compact .cms-featured-specs { display: none; }
@media (max-width: 48rem) {
  .cms-featured-split, .cms-featured-large { grid-template-columns: 1fr; }
}

.cms-category-tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cms-category-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.25rem; border: 1px solid #e3e3e8; border-radius: 10px;
  text-decoration: none; color: inherit; text-align: center;
  transition: border-color .15s, transform .15s;
}
.cms-category-tile:hover { border-color: #0b5fff; transform: translateY(-2px); }
.cms-category-tile__icon { width: 48px; height: 48px; margin-bottom: .5rem; }
.cms-category-tile__name { font-weight: 600; }
.cms-category-tile__count { color: #666; font-size: .8125rem; margin-top: .25rem; }
.cms-category-tiles[data-style="minimal"] .cms-category-tile { border: none; padding: .5rem; }

.cms-brand-logos {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;
}
.cms-brand-logos[data-style="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.cms-brand-logos .cms-brand-logo { max-height: 48px; max-width: 120px; object-fit: contain; }
.cms-brand-logos[data-grayscale="true"] .cms-brand-logo { filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.cms-brand-logos[data-grayscale="true"] .cms-brand-logo:hover { filter: none; opacity: 1; }
.cms-brand-name { color: #666; font-weight: 600; font-size: .9rem; }

/* -------- marketing blocks (WO-WD-005) -------- */

.block-newsletter .newsletter { padding: 1rem; }
.block-newsletter .newsletter form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.block-newsletter .newsletter--stacked form { flex-direction: column; max-width: 420px; }
.block-newsletter .newsletter--banner { background: #f6f7f9; padding: 1.5rem; border-radius: 10px; }
.block-newsletter input[type="email"] {
  flex: 1 1 240px;
  padding: .55rem .75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}
.block-newsletter button {
  padding: .55rem 1.25rem;
  border: 0;
  border-radius: 6px;
  background: #0b5fff;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.block-newsletter .newsletter-ok { color: #0a7d1a; font-weight: 600; }
.block-newsletter .newsletter-err { color: crimson; }

.block-testimonials { padding: 1rem 0; }
.block-testimonials h2 { text-align: center; margin-bottom: 1rem; }
.block-testimonials .testimonials--cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.block-testimonials .testimonials--quote-bubble { max-width: 720px; margin: 0 auto; }
.block-testimonials .testimonial {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  background: #fff;
}
.block-testimonials .testimonials--quote-bubble .testimonial {
  border: none;
  background: transparent;
  font-size: 1.125rem;
}
.block-testimonials .avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto .5rem;
  border-radius: 50%;
  background: #e4e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #333;
  overflow: hidden;
}
.block-testimonials .avatar img { width: 100%; height: 100%; object-fit: cover; }
.block-testimonials blockquote {
  margin: .5rem 0;
  font-style: italic;
  quotes: '\201C' '\201D';
}
.block-testimonials blockquote::before { content: open-quote; }
.block-testimonials blockquote::after { content: close-quote; }
.block-testimonials figcaption { color: #555; text-align: center; font-size: .9rem; }

.block-faq { max-width: 720px; margin: 0 auto; }
.block-faq h2 { margin-bottom: 1rem; }
.block-faq details {
  border-bottom: 1px solid #ececec;
  padding: .75rem 0;
}
.block-faq summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
}
.block-faq summary::-webkit-details-marker { display: none; }
.block-faq summary::before {
  content: '+';
  display: inline-block;
  width: 1.25em;
  color: #0b5fff;
  font-weight: 700;
}
.block-faq details[open] summary::before { content: '−'; }
.block-faq .faq-answer {
  padding: .5rem 0 .25rem 1.25em;
  color: #333;
  line-height: 1.55;
}

/* -------- deferred leafs (WO-WD-003b) -------- */

.block-video .video { position: relative; max-width: 960px; margin: 0 auto; }
.block-video .video iframe,
.block-video .video video {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
  background: #000;
}

.block-cta .cta { padding: 1.5rem; border-radius: 10px; text-align: left; }
.block-cta .cta[data-align="center"] { text-align: center; }
.block-cta .cta[data-align="right"]  { text-align: right; }
.block-cta .cta h2 { margin: 0 0 .5em; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.block-cta .cta p  { margin: 0 0 1rem; line-height: 1.5; }
.block-cta .cta .btn {
  display: inline-block;
  padding: .65rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.block-cta .cta .btn-primary   { background: #0b5fff; color: #fff; }
.block-cta .cta .btn-secondary { background: #e5e7eb; color: #111; }
.block-cta .cta .btn-ghost     { background: transparent; color: currentColor; border: 2px solid currentColor; }