/**
 * Copyright © 2025 WiMakeIT. All rights reserved.
 *
 * Wimakeit_PageBuilder — frontend stylesheet.
 *
 * Provides the device-visibility utilities and a few global rules that
 * the inline-styled blocks rely on but can't express inline (media
 * queries). Loaded by view/frontend/layout/default.xml.
 *
 * Breakpoints align with the Tailwind defaults so Hyvä themes share the
 * same thresholds as the Luma fallback.
 *   mobile : < 768px
 *   tablet : 768px – 1023px
 *   desktop: ≥ 1024px
 */

/* Per-device visibility — toggled by the cssClass injection in
   StateRenderer::applyCommonAttributes(). */
@media (max-width: 767px) {
    .wm-pb-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .wm-pb-hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
    .wm-pb-hide-desktop { display: none !important; }
}

/* Print: hide every block flagged as hide-print (future-proof, matches
   the Magezon feature set). */
@media print {
    .wm-pb-hide-print { display: none !important; }
}

/* ── Scroll-reveal animations ────────────────────────────────────────
   Wired by view/frontend/web/js/wm-pb-runtime.js::initScrollReveal()
   — an IntersectionObserver flips `.is-visible` on entry. Hyvä themes
   get the same rules from module-page-builder-hyva's module.css. */
[data-wm-anim] {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
[data-wm-anim="fade-in"]    { transform: none; }
[data-wm-anim="fade-up"]    { transform: translateY(24px); }
[data-wm-anim="fade-down"]  { transform: translateY(-24px); }
[data-wm-anim="fade-left"]  { transform: translateX(24px); }
[data-wm-anim="fade-right"] { transform: translateX(-24px); }
[data-wm-anim="zoom-in"]    { transform: scale(0.92); }
[data-wm-anim].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-wm-anim] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Typography presets (1.12.0) ─────────────────────────────────────
   Shared with the admin canvas (builder.css mirrors these rules). The
   typo preset is applied as `wm-pb-typo-<name>` on the block wrapper. */

.wm-pb-typo-display   { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.wm-pb-typo-h1        { font-size: clamp(2rem,   3vw + 1rem, 3.5rem); line-height: 1.1;  font-weight: 700; }
.wm-pb-typo-h2        { font-size: clamp(1.65rem, 2vw + 0.75rem, 2.5rem); line-height: 1.15; font-weight: 700; }
.wm-pb-typo-h3        { font-size: clamp(1.35rem, 1.2vw + 0.5rem, 1.875rem); line-height: 1.2; font-weight: 600; }
.wm-pb-typo-h4        { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.wm-pb-typo-lead      { font-size: 1.25rem; line-height: 1.55; font-weight: 400; }
.wm-pb-typo-body      { font-size: 1rem; line-height: 1.6; }
.wm-pb-typo-small     { font-size: 0.875rem; line-height: 1.5; }
.wm-pb-typo-caption   { font-size: 0.75rem; line-height: 1.45; opacity: 0.75; }
.wm-pb-typo-overline  { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

/* ── Responsive column spans (state v2 — Column.width is per-breakpoint) ──
   These mirror the Hyvä Tailwind utilities used in module-page-builder-hyva
   so a Luma storefront without the Hyvä build still gets the same
   responsive behaviour out of the box.

   The Row uses CSS Grid with `repeat(12, 1fr)` so column spans translate
   directly to grid-column. The base classes apply mobile-first; the md
   and lg overrides take precedence at their breakpoints. */

.wm-pb-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }

.wm-pb-col            { grid-column: span 12; min-width: 0; }
.wm-pb-col-1  { grid-column: span 1; }
.wm-pb-col-2  { grid-column: span 2; }
.wm-pb-col-3  { grid-column: span 3; }
.wm-pb-col-4  { grid-column: span 4; }
.wm-pb-col-5  { grid-column: span 5; }
.wm-pb-col-6  { grid-column: span 6; }
.wm-pb-col-7  { grid-column: span 7; }
.wm-pb-col-8  { grid-column: span 8; }
.wm-pb-col-9  { grid-column: span 9; }
.wm-pb-col-10 { grid-column: span 10; }
.wm-pb-col-11 { grid-column: span 11; }
.wm-pb-col-12 { grid-column: span 12; }

@media (min-width: 768px) {
    .wm-pb-col-md-1  { grid-column: span 1; }
    .wm-pb-col-md-2  { grid-column: span 2; }
    .wm-pb-col-md-3  { grid-column: span 3; }
    .wm-pb-col-md-4  { grid-column: span 4; }
    .wm-pb-col-md-5  { grid-column: span 5; }
    .wm-pb-col-md-6  { grid-column: span 6; }
    .wm-pb-col-md-7  { grid-column: span 7; }
    .wm-pb-col-md-8  { grid-column: span 8; }
    .wm-pb-col-md-9  { grid-column: span 9; }
    .wm-pb-col-md-10 { grid-column: span 10; }
    .wm-pb-col-md-11 { grid-column: span 11; }
    .wm-pb-col-md-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
    .wm-pb-col-lg-1  { grid-column: span 1; }
    .wm-pb-col-lg-2  { grid-column: span 2; }
    .wm-pb-col-lg-3  { grid-column: span 3; }
    .wm-pb-col-lg-4  { grid-column: span 4; }
    .wm-pb-col-lg-5  { grid-column: span 5; }
    .wm-pb-col-lg-6  { grid-column: span 6; }
    .wm-pb-col-lg-7  { grid-column: span 7; }
    .wm-pb-col-lg-8  { grid-column: span 8; }
    .wm-pb-col-lg-9  { grid-column: span 9; }
    .wm-pb-col-lg-10 { grid-column: span 10; }
    .wm-pb-col-lg-11 { grid-column: span 11; }
    .wm-pb-col-lg-12 { grid-column: span 12; }
}