/**
 * Global layout utilities.
 *
 * Mobile first breakpoints:
 * - base: 0-1024px
 * - lg:   1025px+
 * - xl:   1441px+
 *
 * Spacing utilities reuse presets registered in theme.json.
 */

@layer utilities {
    /* Display */
    .d-none { display: none !important; }
    .d-block { display: block !important; }
    .d-inline-block { display: inline-block !important; }
    .d-flex { display: flex !important; }
    .d-inline-flex { display: inline-flex !important; }
    .d-grid { display: grid !important; }

    :where(.d-flex, .d-inline-flex, .d-grid) > * {
        margin-block: 0 !important;
    }

    /* Flex direction and wrapping */
    .flex-row { flex-direction: row !important; }
    .flex-row-reverse { flex-direction: row-reverse !important; }
    .flex-column { flex-direction: column !important; }
    .flex-column-reverse { flex-direction: column-reverse !important; }
    .flex-wrap { flex-wrap: wrap !important; }
    .flex-nowrap { flex-wrap: nowrap !important; }
    .flex-grow-0 { flex-grow: 0 !important; }
    .flex-grow-1 { flex-grow: 1 !important; }
    .flex-shrink-0 { flex-shrink: 0 !important; }

    /* Main axis */
    .justify-content-start { justify-content: flex-start !important; }
    .justify-content-center { justify-content: center !important; }
    .justify-content-end { justify-content: flex-end !important; }
    .justify-content-between { justify-content: space-between !important; }
    .justify-content-around { justify-content: space-around !important; }
    .justify-content-evenly { justify-content: space-evenly !important; }

    /* Cross axis */
    .align-items-start { align-items: flex-start !important; }
    .align-items-center { align-items: center !important; }
    .align-items-end { align-items: flex-end !important; }
    .align-items-stretch { align-items: stretch !important; }
    .align-items-baseline { align-items: baseline !important; }

    .align-self-start { align-self: flex-start !important; }
    .align-self-center { align-self: center !important; }
    .align-self-end { align-self: flex-end !important; }
    .align-self-stretch { align-self: stretch !important; }
    .align-self-auto { align-self: auto !important; }

    /* Gap: values come from theme.json */
    .gap-0 { gap: 0 !important; }
    .gap-20 { gap: var(--wp--preset--spacing--20) !important; }
    .gap-30 { gap: var(--wp--preset--spacing--30) !important; }
    .gap-40 { gap: var(--wp--preset--spacing--40) !important; }
    .gap-50 { gap: var(--wp--preset--spacing--50) !important; }
    .gap-60 { gap: var(--wp--preset--spacing--60) !important; }
    .gap-70 { gap: var(--wp--preset--spacing--70) !important; }

    /* Grid */
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

    /* Sizing and order */
    .w-100 { width: 100% !important; }
    .w-auto { width: auto !important; }
    .h-100 { height: 100% !important; }
    .order-first { order: -1 !important; }
    .order-last { order: 999 !important; }

    /* Desktop: 1025px+ */
    @media (min-width: 1025px) {
        .d-lg-none { display: none !important; }
        .d-lg-block { display: block !important; }
        .d-lg-inline-block { display: inline-block !important; }
        .d-lg-flex { display: flex !important; }
        .d-lg-inline-flex { display: inline-flex !important; }
        .d-lg-grid { display: grid !important; }

        :where(.d-lg-flex, .d-lg-inline-flex, .d-lg-grid) > * {
            margin-block: 0 !important;
        }

        .flex-lg-row { flex-direction: row !important; }
        .flex-lg-row-reverse { flex-direction: row-reverse !important; }
        .flex-lg-column { flex-direction: column !important; }
        .flex-lg-column-reverse { flex-direction: column-reverse !important; }
        .flex-lg-wrap { flex-wrap: wrap !important; }
        .flex-lg-nowrap { flex-wrap: nowrap !important; }

        .justify-content-lg-start { justify-content: flex-start !important; }
        .justify-content-lg-center { justify-content: center !important; }
        .justify-content-lg-end { justify-content: flex-end !important; }
        .justify-content-lg-between { justify-content: space-between !important; }
        .justify-content-lg-around { justify-content: space-around !important; }
        .justify-content-lg-evenly { justify-content: space-evenly !important; }

        .align-items-lg-start { align-items: flex-start !important; }
        .align-items-lg-center { align-items: center !important; }
        .align-items-lg-end { align-items: flex-end !important; }
        .align-items-lg-stretch { align-items: stretch !important; }
        .align-items-lg-baseline { align-items: baseline !important; }

        .gap-lg-0 { gap: 0 !important; }
        .gap-lg-20 { gap: var(--wp--preset--spacing--20) !important; }
        .gap-lg-30 { gap: var(--wp--preset--spacing--30) !important; }
        .gap-lg-40 { gap: var(--wp--preset--spacing--40) !important; }
        .gap-lg-50 { gap: var(--wp--preset--spacing--50) !important; }
        .gap-lg-60 { gap: var(--wp--preset--spacing--60) !important; }
        .gap-lg-70 { gap: var(--wp--preset--spacing--70) !important; }

        .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

        .order-lg-first { order: -1 !important; }
        .order-lg-last { order: 999 !important; }
    }

    /* Large desktop: 1441px+ */
    @media (min-width: 1441px) {
        .d-xl-none { display: none !important; }
        .d-xl-block { display: block !important; }
        .d-xl-inline-block { display: inline-block !important; }
        .d-xl-flex { display: flex !important; }
        .d-xl-inline-flex { display: inline-flex !important; }
        .d-xl-grid { display: grid !important; }

        :where(.d-xl-flex, .d-xl-inline-flex, .d-xl-grid) > * {
            margin-block: 0 !important;
        }

        .flex-xl-row { flex-direction: row !important; }
        .flex-xl-row-reverse { flex-direction: row-reverse !important; }
        .flex-xl-column { flex-direction: column !important; }
        .flex-xl-column-reverse { flex-direction: column-reverse !important; }
        .flex-xl-wrap { flex-wrap: wrap !important; }
        .flex-xl-nowrap { flex-wrap: nowrap !important; }

        .justify-content-xl-start { justify-content: flex-start !important; }
        .justify-content-xl-center { justify-content: center !important; }
        .justify-content-xl-end { justify-content: flex-end !important; }
        .justify-content-xl-between { justify-content: space-between !important; }
        .justify-content-xl-around { justify-content: space-around !important; }
        .justify-content-xl-evenly { justify-content: space-evenly !important; }

        .align-items-xl-start { align-items: flex-start !important; }
        .align-items-xl-center { align-items: center !important; }
        .align-items-xl-end { align-items: flex-end !important; }
        .align-items-xl-stretch { align-items: stretch !important; }
        .align-items-xl-baseline { align-items: baseline !important; }

        .gap-xl-0 { gap: 0 !important; }
        .gap-xl-20 { gap: var(--wp--preset--spacing--20) !important; }
        .gap-xl-30 { gap: var(--wp--preset--spacing--30) !important; }
        .gap-xl-40 { gap: var(--wp--preset--spacing--40) !important; }
        .gap-xl-50 { gap: var(--wp--preset--spacing--50) !important; }
        .gap-xl-60 { gap: var(--wp--preset--spacing--60) !important; }
        .gap-xl-70 { gap: var(--wp--preset--spacing--70) !important; }

        .grid-cols-xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
        .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .grid-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
        .grid-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

        .order-xl-first { order: -1 !important; }
        .order-xl-last { order: 999 !important; }
    }
}