/* ==========================================================================
   ef-custom-css-*  —  basic responsive layout utility classes for CMS HtmlBox editors
   ==========================================================================

   HOW TO USE
   Add this file to a box's "Style" field in the CMS so it loads on the page:
       /bundles/portalsimplebox/css/custom.css
   Then combine classes freely on the same element, Tailwind-style.

   NAMING / BREAKPOINTS
   - No suffix   = desktop value (default, always applied)
   - "-tablet"   = override applied at <= 1220px  (@media max-width: 1220px)
   - "-mobile"   = override applied at <= 800px   (@media max-width: 800px)

   Examples
   - "0 padding on desktop, 16px on mobile":
       <div class="ef-custom-css-px-0 ef-custom-css-px-16-mobile">

   - "row on desktop, column on mobile, with a 24px gap":
       <div class="ef-custom-css-flex ef-custom-css-flex-row ef-custom-css-flex-column-mobile ef-custom-css-gap-24">

   IMPORTANT: the "-mobile" media query block below stays AFTER the "-tablet"
   block. All these classes are single, equal-specificity selectors, so on
   small screens BOTH the tablet and mobile blocks match the same element —
   whichever block appears LAST in the file wins. This mirrors the same
   technique already used across other SimpleBoxBundle CSS files (see
   popular-category.css: its 1220px block is written before its 800px block).
   ========================================================================== */


/* ==========================================================================
   BASE (desktop) — always applied unless overridden below
   ========================================================================== */

/* --- Spacing (8px grid: 0 8 16 24 32 48 96) --- */

.ef-custom-css-p-0 { padding: 0px; }
.ef-custom-css-p-8 { padding: 8px; }
.ef-custom-css-p-16 { padding: 16px; }
.ef-custom-css-p-24 { padding: 24px; }
.ef-custom-css-p-32 { padding: 32px; }
.ef-custom-css-p-48 { padding: 48px; }
.ef-custom-css-p-96 { padding: 96px; }

.ef-custom-css-px-0 { padding-left: 0px; padding-right: 0px; }
.ef-custom-css-px-8 { padding-left: 8px; padding-right: 8px; }
.ef-custom-css-px-16 { padding-left: 16px; padding-right: 16px; }
.ef-custom-css-px-24 { padding-left: 24px; padding-right: 24px; }
.ef-custom-css-px-32 { padding-left: 32px; padding-right: 32px; }
.ef-custom-css-px-48 { padding-left: 48px; padding-right: 48px; }
.ef-custom-css-px-96 { padding-left: 96px; padding-right: 96px; }

.ef-custom-css-py-0 { padding-top: 0px; padding-bottom: 0px; }
.ef-custom-css-py-8 { padding-top: 8px; padding-bottom: 8px; }
.ef-custom-css-py-16 { padding-top: 16px; padding-bottom: 16px; }
.ef-custom-css-py-24 { padding-top: 24px; padding-bottom: 24px; }
.ef-custom-css-py-32 { padding-top: 32px; padding-bottom: 32px; }
.ef-custom-css-py-48 { padding-top: 48px; padding-bottom: 48px; }
.ef-custom-css-py-96 { padding-top: 96px; padding-bottom: 96px; }

.ef-custom-css-m-0 { margin: 0px; }
.ef-custom-css-m-8 { margin: 8px; }
.ef-custom-css-m-16 { margin: 16px; }
.ef-custom-css-m-24 { margin: 24px; }
.ef-custom-css-m-32 { margin: 32px; }
.ef-custom-css-m-48 { margin: 48px; }
.ef-custom-css-m-96 { margin: 96px; }

.ef-custom-css-mx-0 { margin-left: 0px; margin-right: 0px; }
.ef-custom-css-mx-8 { margin-left: 8px; margin-right: 8px; }
.ef-custom-css-mx-16 { margin-left: 16px; margin-right: 16px; }
.ef-custom-css-mx-24 { margin-left: 24px; margin-right: 24px; }
.ef-custom-css-mx-32 { margin-left: 32px; margin-right: 32px; }
.ef-custom-css-mx-48 { margin-left: 48px; margin-right: 48px; }
.ef-custom-css-mx-96 { margin-left: 96px; margin-right: 96px; }

.ef-custom-css-my-0 { margin-top: 0px; margin-bottom: 0px; }
.ef-custom-css-my-8 { margin-top: 8px; margin-bottom: 8px; }
.ef-custom-css-my-16 { margin-top: 16px; margin-bottom: 16px; }
.ef-custom-css-my-24 { margin-top: 24px; margin-bottom: 24px; }
.ef-custom-css-my-32 { margin-top: 32px; margin-bottom: 32px; }
.ef-custom-css-my-48 { margin-top: 48px; margin-bottom: 48px; }
.ef-custom-css-my-96 { margin-top: 96px; margin-bottom: 96px; }

.ef-custom-css-gap-0 { gap: 0px; }
.ef-custom-css-gap-8 { gap: 8px; }
.ef-custom-css-gap-16 { gap: 16px; }
.ef-custom-css-gap-24 { gap: 24px; }
.ef-custom-css-gap-32 { gap: 32px; }
.ef-custom-css-gap-48 { gap: 48px; }
.ef-custom-css-gap-96 { gap: 96px; }

/* --- Flex / layout --- */

.ef-custom-css-flex { display: flex; }
.ef-custom-css-flex-row { flex-direction: row; }
.ef-custom-css-flex-column { flex-direction: column; }
.ef-custom-css-flex-wrap { flex-wrap: wrap; }
.ef-custom-css-flex-nowrap { flex-wrap: nowrap; }
.ef-custom-css-flex-1 { flex: 1 1 0%; }

.ef-custom-css-items-start { align-items: flex-start; }
.ef-custom-css-items-center { align-items: center; }
.ef-custom-css-items-end { align-items: flex-end; }
.ef-custom-css-items-stretch { align-items: stretch; }

.ef-custom-css-justify-start { justify-content: flex-start; }
.ef-custom-css-justify-center { justify-content: center; }
.ef-custom-css-justify-end { justify-content: flex-end; }
.ef-custom-css-justify-between { justify-content: space-between; }
.ef-custom-css-justify-around { justify-content: space-around; }

/* --- Container / width --- */

.ef-custom-css-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}

.ef-custom-css-w-full { width: 100%; }

/* --- Visibility ---
   Hidden on desktop by default; shown again by the tablet override below.
   (Its "-mobile" counterpart needs no base rule — it's visible by default
   and only gets hidden in the mobile media query.) */
.ef-custom-css-hidden-desktop { display: none; }


/* ==========================================================================
   TABLET override — @media (max-width: 1220px)
   ========================================================================== */
@media screen and (max-width: 1220px) {

    /* --- Spacing --- */
    .ef-custom-css-p-0-tablet { padding: 0px; }
    .ef-custom-css-p-8-tablet { padding: 8px; }
    .ef-custom-css-p-16-tablet { padding: 16px; }
    .ef-custom-css-p-24-tablet { padding: 24px; }
    .ef-custom-css-p-32-tablet { padding: 32px; }
    .ef-custom-css-p-48-tablet { padding: 48px; }
    .ef-custom-css-p-96-tablet { padding: 96px; }

    .ef-custom-css-px-0-tablet { padding-left: 0px; padding-right: 0px; }
    .ef-custom-css-px-8-tablet { padding-left: 8px; padding-right: 8px; }
    .ef-custom-css-px-16-tablet { padding-left: 16px; padding-right: 16px; }
    .ef-custom-css-px-24-tablet { padding-left: 24px; padding-right: 24px; }
    .ef-custom-css-px-32-tablet { padding-left: 32px; padding-right: 32px; }
    .ef-custom-css-px-48-tablet { padding-left: 48px; padding-right: 48px; }
    .ef-custom-css-px-96-tablet { padding-left: 96px; padding-right: 96px; }

    .ef-custom-css-py-0-tablet { padding-top: 0px; padding-bottom: 0px; }
    .ef-custom-css-py-8-tablet { padding-top: 8px; padding-bottom: 8px; }
    .ef-custom-css-py-16-tablet { padding-top: 16px; padding-bottom: 16px; }
    .ef-custom-css-py-24-tablet { padding-top: 24px; padding-bottom: 24px; }
    .ef-custom-css-py-32-tablet { padding-top: 32px; padding-bottom: 32px; }
    .ef-custom-css-py-48-tablet { padding-top: 48px; padding-bottom: 48px; }
    .ef-custom-css-py-96-tablet { padding-top: 96px; padding-bottom: 96px; }

    .ef-custom-css-m-0-tablet { margin: 0px; }
    .ef-custom-css-m-8-tablet { margin: 8px; }
    .ef-custom-css-m-16-tablet { margin: 16px; }
    .ef-custom-css-m-24-tablet { margin: 24px; }
    .ef-custom-css-m-32-tablet { margin: 32px; }
    .ef-custom-css-m-48-tablet { margin: 48px; }
    .ef-custom-css-m-96-tablet { margin: 96px; }

    .ef-custom-css-mx-0-tablet { margin-left: 0px; margin-right: 0px; }
    .ef-custom-css-mx-8-tablet { margin-left: 8px; margin-right: 8px; }
    .ef-custom-css-mx-16-tablet { margin-left: 16px; margin-right: 16px; }
    .ef-custom-css-mx-24-tablet { margin-left: 24px; margin-right: 24px; }
    .ef-custom-css-mx-32-tablet { margin-left: 32px; margin-right: 32px; }
    .ef-custom-css-mx-48-tablet { margin-left: 48px; margin-right: 48px; }
    .ef-custom-css-mx-96-tablet { margin-left: 96px; margin-right: 96px; }

    .ef-custom-css-my-0-tablet { margin-top: 0px; margin-bottom: 0px; }
    .ef-custom-css-my-8-tablet { margin-top: 8px; margin-bottom: 8px; }
    .ef-custom-css-my-16-tablet { margin-top: 16px; margin-bottom: 16px; }
    .ef-custom-css-my-24-tablet { margin-top: 24px; margin-bottom: 24px; }
    .ef-custom-css-my-32-tablet { margin-top: 32px; margin-bottom: 32px; }
    .ef-custom-css-my-48-tablet { margin-top: 48px; margin-bottom: 48px; }
    .ef-custom-css-my-96-tablet { margin-top: 96px; margin-bottom: 96px; }

    .ef-custom-css-gap-0-tablet { gap: 0px; }
    .ef-custom-css-gap-8-tablet { gap: 8px; }
    .ef-custom-css-gap-16-tablet { gap: 16px; }
    .ef-custom-css-gap-24-tablet { gap: 24px; }
    .ef-custom-css-gap-32-tablet { gap: 32px; }
    .ef-custom-css-gap-48-tablet { gap: 48px; }
    .ef-custom-css-gap-96-tablet { gap: 96px; }

    /* --- Flex direction override --- */
    .ef-custom-css-flex-row-tablet { flex-direction: row; }
    .ef-custom-css-flex-column-tablet { flex-direction: column; }

    /* --- Container padding (matches .widget-container tablet padding) --- */
    .ef-custom-css-container { padding-left: 32px; padding-right: 32px; }

    /* --- Visibility: show the "hidden on desktop" element again --- */
    .ef-custom-css-hidden-desktop { display: flex; }
}


/* ==========================================================================
   MOBILE override — @media (max-width: 800px)
   Written AFTER the tablet block on purpose — see note at top of file.
   ========================================================================== */
@media screen and (max-width: 800px) {

    /* --- Spacing --- */
    .ef-custom-css-p-0-mobile { padding: 0px; }
    .ef-custom-css-p-8-mobile { padding: 8px; }
    .ef-custom-css-p-16-mobile { padding: 16px; }
    .ef-custom-css-p-24-mobile { padding: 24px; }
    .ef-custom-css-p-32-mobile { padding: 32px; }
    .ef-custom-css-p-48-mobile { padding: 48px; }
    .ef-custom-css-p-96-mobile { padding: 96px; }

    .ef-custom-css-px-0-mobile { padding-left: 0px; padding-right: 0px; }
    .ef-custom-css-px-8-mobile { padding-left: 8px; padding-right: 8px; }
    .ef-custom-css-px-16-mobile { padding-left: 16px; padding-right: 16px; }
    .ef-custom-css-px-24-mobile { padding-left: 24px; padding-right: 24px; }
    .ef-custom-css-px-32-mobile { padding-left: 32px; padding-right: 32px; }
    .ef-custom-css-px-48-mobile { padding-left: 48px; padding-right: 48px; }
    .ef-custom-css-px-96-mobile { padding-left: 96px; padding-right: 96px; }

    .ef-custom-css-py-0-mobile { padding-top: 0px; padding-bottom: 0px; }
    .ef-custom-css-py-8-mobile { padding-top: 8px; padding-bottom: 8px; }
    .ef-custom-css-py-16-mobile { padding-top: 16px; padding-bottom: 16px; }
    .ef-custom-css-py-24-mobile { padding-top: 24px; padding-bottom: 24px; }
    .ef-custom-css-py-32-mobile { padding-top: 32px; padding-bottom: 32px; }
    .ef-custom-css-py-48-mobile { padding-top: 48px; padding-bottom: 48px; }
    .ef-custom-css-py-96-mobile { padding-top: 96px; padding-bottom: 96px; }

    .ef-custom-css-m-0-mobile { margin: 0px; }
    .ef-custom-css-m-8-mobile { margin: 8px; }
    .ef-custom-css-m-16-mobile { margin: 16px; }
    .ef-custom-css-m-24-mobile { margin: 24px; }
    .ef-custom-css-m-32-mobile { margin: 32px; }
    .ef-custom-css-m-48-mobile { margin: 48px; }
    .ef-custom-css-m-96-mobile { margin: 96px; }

    .ef-custom-css-mx-0-mobile { margin-left: 0px; margin-right: 0px; }
    .ef-custom-css-mx-8-mobile { margin-left: 8px; margin-right: 8px; }
    .ef-custom-css-mx-16-mobile { margin-left: 16px; margin-right: 16px; }
    .ef-custom-css-mx-24-mobile { margin-left: 24px; margin-right: 24px; }
    .ef-custom-css-mx-32-mobile { margin-left: 32px; margin-right: 32px; }
    .ef-custom-css-mx-48-mobile { margin-left: 48px; margin-right: 48px; }
    .ef-custom-css-mx-96-mobile { margin-left: 96px; margin-right: 96px; }

    .ef-custom-css-my-0-mobile { margin-top: 0px; margin-bottom: 0px; }
    .ef-custom-css-my-8-mobile { margin-top: 8px; margin-bottom: 8px; }
    .ef-custom-css-my-16-mobile { margin-top: 16px; margin-bottom: 16px; }
    .ef-custom-css-my-24-mobile { margin-top: 24px; margin-bottom: 24px; }
    .ef-custom-css-my-32-mobile { margin-top: 32px; margin-bottom: 32px; }
    .ef-custom-css-my-48-mobile { margin-top: 48px; margin-bottom: 48px; }
    .ef-custom-css-my-96-mobile { margin-top: 96px; margin-bottom: 96px; }

    .ef-custom-css-gap-0-mobile { gap: 0px; }
    .ef-custom-css-gap-8-mobile { gap: 8px; }
    .ef-custom-css-gap-16-mobile { gap: 16px; }
    .ef-custom-css-gap-24-mobile { gap: 24px; }
    .ef-custom-css-gap-32-mobile { gap: 32px; }
    .ef-custom-css-gap-48-mobile { gap: 48px; }
    .ef-custom-css-gap-96-mobile { gap: 96px; }

    /* --- Flex direction override --- */
    .ef-custom-css-flex-row-mobile { flex-direction: row; }
    .ef-custom-css-flex-column-mobile { flex-direction: column; }

    /* --- Container padding (matches .widget-container mobile padding) --- */
    .ef-custom-css-container { padding-left: 16px; padding-right: 16px; }

    /* --- Visibility: hide the "hidden on mobile" element --- */
    .ef-custom-css-hidden-mobile { display: none; }
}