/* Define custom CSS variables */
:root {
    --m9-soumais-break-huge: 1440px;
    --m9-soumais-break-wide: 1280px;
    --m9-soumais-break-xlarge: 1080px;
    --m9-soumais-break-large: 960px;
    --m9-soumais-break-medium: 782px;
    --m9-soumais-break-small: 600px;
    --m9-soumais-break-mobile: 480px;
    --m9-soumais-break-zoomed-in: 280px;
}
/* Nota: media query não aceita variáveis (ex.: var(--m9-soumais-break-mobilegg))*/
/* Base: All elements are visible unless overridden */

/* === HIDE CLASSES (from breakpoint and up) === */
@media (min-width: 280px) {
  .m9-soumais-hide-zoomed-in { display: none !important; }
}
@media (min-width: 480px) {
  .m9-soumais-hide-mobile { display: none !important; }
}
@media (min-width: 600px) {
  .m9-soumais-hide-small { display: none !important; }
}
@media (min-width: 782px) {
  .m9-soumais-hide-medium { display: none !important; }
}
@media (min-width: 960px) {
  .m9-soumais-hide-large { display: none !important; }
}
@media (min-width: 1080px) {
  .m9-soumais-hide-xlarge { display: none !important; }
}
@media (min-width: 1280px) {
  .m9-soumais-hide-wide { display: none !important; }
}
@media (min-width: 1440px) {
  .m9-soumais-hide-huge { display: none !important; }
}

/* === SHOW CLASSES (start hidden, revert at breakpoint) === */
.m9-soumais-show-zoomed-in,
.m9-soumais-show-mobile,
.m9-soumais-show-small,
.m9-soumais-show-medium,
.m9-soumais-show-large,
.m9-soumais-show-xlarge,
.m9-soumais-show-wide,
.m9-soumais-show-huge {
    display: none !important;
}

@media (min-width: 280px) {
    .m9-soumais-show-zoomed-in { display: revert !important; }
}
@media (min-width: 480px) {
    .m9-soumais-show-mobile { display: revert !important; }
}
@media (min-width: 600px) {
    .m9-soumais-show-small { display: revert !important; }
}
@media (min-width: 782px) {
    .m9-soumais-show-medium { display: revert !important; }
}
@media (min-width: 960px) {
    .m9-soumais-show-large { display: revert !important; }
}
@media (min-width: 1080px) {
    .m9-soumais-show-xlarge { display: revert !important; }
}
@media (min-width: 1280px) {
    .m9-soumais-show-wide { display: revert !important; }
}
@media (min-width: 1440px) {
    .m9-soumais-show-huge { display: revert !important; }
}

/* Default order for desktop and larger screens */
.m9-soumais-header-block-a { order: 1; }
.m9-soumais-header-block-b { order: 2; }
.m9-soumais-header-block-c { order: 3; }

/* Mobile override */
@media (max-width: 768px) {
    .m9-soumais-header-block-a { order: 1; }
    .m9-soumais-header-block-c { order: 2; }
    .m9-soumais-header-block-b { order: 3; }
}
