/**
 * Page Designer — Universal Hide-on-Device CSS  (data-pd-hide-{d,t,m})
 *
 * Companion stylesheet for pd_hide_tbtn.js. Hides any component whose
 * data-pd-hide-{d,t,m}="1" matches the active viewport. Breakpoints
 * mirror PD's GrapesJS device manager:
 *   Desktop  > 992px
 *   Tablet   481–992px
 *   Mobile   ≤ 480px
 *
 * Specificity (0,1,0) is enough to beat block-level inline `display`
 * declarations on components that don't already inline `display`. For
 * the rare component that DOES inline display, the `.gjs-frame` GrapesJS
 * canvas iframe context ranks higher in source order, so this rule
 * still wins via cascade order without needing !important.
 *
 * Also adds a CANVAS visual treatment so authors editing in Desktop
 * mode can see which components are hidden on tablet/mobile — they're
 * dimmed + diagonally-striped. The treatment only fires when the
 * canvas device-class on the iframe body matches.
 */

@media (min-width: 992.01px) {
    [data-pd-hide-d="1"] { display: none; }
}
@media (min-width: 480.01px) and (max-width: 992px) {
    [data-pd-hide-t="1"] { display: none; }
}
@media (max-width: 480px) {
    [data-pd-hide-m="1"] { display: none; }
}

/* ── Toolbar-button visual state ──────────────────────────────────────
 * GrapesJS toolbar buttons are rendered as <span class="gjs-toolbar-..."
 * data-command="..."> elements. We tag ours via data-pd-hide-tbtn so
 * the CSS hooks won't bleed onto other toolbar buttons. */
[data-pd-hide-tbtn] i { font-size: 12px; }
[data-pd-hide-tbtn].pd-hide-tbtn-off,
[data-pd-hide-tbtn-dev].pd-hide-tbtn-off {
    opacity: 0.35;
    text-decoration: line-through;
}
[data-pd-hide-tbtn]:hover,
[data-pd-hide-tbtn-dev]:hover {
    background: rgba(137, 180, 250, 0.20);
}