/*!
 * True Makeup Theme — utilities.css
 *
 * Hand-written utility classes that look Tailwind-y but aren't.
 * The theme was originally scaffolded with a Tailwind build step
 * and the class names stuck around in the Twig templates long
 * after the build step was removed. Rather than sweep every
 * template to rename them, we shim them here as plain CSS so
 * the templates keep rendering without a bundler.
 *
 * Organised by concern in the same order the templates use them:
 *
 *   - Positioning
 *   - Sizing (width, height, aspect ratios, max-width)
 *   - Display + flex + grid
 *   - Gap + padding + margin
 *   - Typography + colours + opacity
 *   - Effects (transform, transition, filter)
 *   - Gradient helpers
 *   - Hover + group-hover + focus pseudo-classes
 *
 * Every selector below is referenced from at least one .twig
 * file — run `grep -l "classname" views/` to find callers.
 */


/* ─── Positioning ─────────────────────────────────────── */

.absolute           { position: absolute; }
.relative           { position: relative; }
.fixed              { position: fixed; }

.inset-0            { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0          { right: 0; left: 0; }

.top-0              { top: 0; }
.top-4              { top: 1rem; }
.top-\[65px\]       { top: 65px; }
.top-full           { top: 100%; }

.left-0             { left: 0; }
.left-4             { left: 1rem; }
.bottom-0           { bottom: 0; }


/* ─── Sizing ──────────────────────────────────────────── */

.w-full             { width: 100%; }
.w-20               { width: 5rem; }

.h-full             { height: 100%; }
.h-\[1px\]          { height: 1px; }
.h-\[300px\]        { height: 300px; }
.h-\[614px\]        { height: 614px; }
.h-\[60vh\]         { height: 60vh; }
.h-\[85vh\]         { height: 85vh; }
.h-\[90vh\]         { height: 90vh; }

.min-h-\[60vh\]     { min-height: 60vh; }
.min-w-\[300px\]    { min-width: 300px; }

.max-w-full         { max-width: 100%; }
.max-w-none         { max-width: none; }
.max-w-md           { max-width: 28rem; }
.max-w-lg           { max-width: 32rem; }
.max-w-2xl          { max-width: 42rem; }
.max-w-4xl          { max-width: 56rem; }
.max-w-6xl          { max-width: 72rem; }
.max-w-7xl          { max-width: 80rem; }

.aspect-video       { aspect-ratio: 16 / 9; }
.aspect-square      { aspect-ratio: 1 / 1; }
.aspect-\[3\/4\]    { aspect-ratio: 3 / 4; }
.aspect-\[4\/5\]    { aspect-ratio: 4 / 5; }


/* ─── Display, flex, grid ─────────────────────────────── */

.block              { display: block; }
.inline-block       { display: inline-block; }
.flex               { display: flex; }
.grid               { display: grid; }
.hidden             { display: none; }

.flex-col           { flex-direction: column; }
.flex-row           { flex-direction: row; }
.flex-wrap          { flex-wrap: wrap; }
.flex-1             { flex: 1 1 0%; }

.items-start        { align-items: flex-start; }
.items-center       { align-items: center; }
.items-end          { align-items: flex-end; }

.justify-start      { justify-content: flex-start; }
.justify-center     { justify-content: center; }
.justify-end        { justify-content: flex-end; }
.justify-between    { justify-content: space-between; }

.grid-cols-1        { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4        { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-2         { grid-column: span 2 / span 2; }
.row-span-2         { grid-row: span 2 / span 2; }


/* ─── Gap + padding + margin ──────────────────────────── */

.gap-0              { gap: 0; }
.gap-4              { gap: 1rem; }
.gap-6              { gap: 1.5rem; }
.gap-8              { gap: 2rem; }
.gap-10             { gap: 2.5rem; }
.gap-12             { gap: 3rem; }
.gap-20             { gap: 5rem; }
.gap-x-12           { column-gap: 3rem; }
.gap-y-16           { row-gap:    4rem; }

.p-6                { padding: 1.5rem; }
.p-8                { padding: 2rem;   }
.p-10               { padding: 2.5rem; }

.px-3               { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4               { padding-left: 1rem;    padding-right: 1rem;    }
.px-6               { padding-left: 1.5rem;  padding-right: 1.5rem;  }
.px-8               { padding-left: 2rem;    padding-right: 2rem;    }
.px-12              { padding-left: 3rem;    padding-right: 3rem;    }

.py-1               { padding-top: 0.25rem;  padding-bottom: 0.25rem;  }
.py-1\.5            { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-3               { padding-top: 0.75rem;  padding-bottom: 0.75rem;  }
.py-4               { padding-top: 1rem;     padding-bottom: 1rem;     }
.py-6               { padding-top: 1.5rem;   padding-bottom: 1.5rem;   }
.py-8               { padding-top: 2rem;     padding-bottom: 2rem;     }
.py-10              { padding-top: 2.5rem;   padding-bottom: 2.5rem;   }
.py-12              { padding-top: 3rem;     padding-bottom: 3rem;     }
.py-16              { padding-top: 4rem;     padding-bottom: 4rem;     }
.py-20              { padding-top: 5rem;     padding-bottom: 5rem;     }
.py-24              { padding-top: 6rem;     padding-bottom: 6rem;     }
.py-32              { padding-top: 8rem;     padding-bottom: 8rem;     }

.pb-1               { padding-bottom: 0.25rem; }
.pb-8               { padding-bottom: 2rem;    }
.pt-2               { padding-top:    0.5rem;  }
.pt-\[65px\]        { padding-top:    65px;    }
.pt-\[106px\]       { padding-top:    106px;   }

.mx-auto            { margin-left: auto; margin-right: auto; }
.ml-auto            { margin-left: auto; }
.mb-1               { margin-bottom: 0.25rem;  }
.mb-2               { margin-bottom: 0.5rem;   }
.mb-3               { margin-bottom: 0.75rem;  }
.mb-4               { margin-bottom: 1rem;     }
.mb-6               { margin-bottom: 1.5rem;   }
.mb-8               { margin-bottom: 2rem;     }
.mb-10              { margin-bottom: 2.5rem;   }
.mb-12              { margin-bottom: 3rem;     }
.mb-16              { margin-bottom: 4rem;     }
.mt-auto            { margin-top: auto; }


/* ─── Overflow + whitespace ───────────────────────────── */

.overflow-hidden    { overflow: hidden;     }
.overflow-x-auto    { overflow-x: auto;     }
.whitespace-nowrap  { white-space: nowrap;  }


/* ─── Typography — size, weight, style, case ────────── */

.text-xs            { font-size: 0.75rem;  line-height: 1rem; }
.text-sm            { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg            { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl            { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl           { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl           { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl           { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl           { font-size: 3rem;     line-height: 1; }
.text-6xl           { font-size: 3.75rem;  line-height: 1; }
.text-7xl           { font-size: 4.5rem;   line-height: 1; }
.text-8xl           { font-size: 6rem;     line-height: 1; }
.text-\[10px\]      { font-size: 10px; }

.font-normal        { font-weight: 400; }
.font-medium        { font-weight: 500; }
.font-bold          { font-weight: 700; }

.italic             { font-style: italic; }
.uppercase          { text-transform: uppercase; }

.text-left          { text-align: left;   }
.text-center        { text-align: center; }
.text-right         { text-align: right;  }

.leading-tight      { line-height: 1.25;  }
.leading-relaxed    { line-height: 1.625; }
.leading-\[1\.1\]   { line-height: 1.1;   }

.tracking-tighter    { letter-spacing: -0.05em; }
.tracking-widest     { letter-spacing:  0.1em;  }
.tracking-\[0\.2em\] { letter-spacing:  0.2em;  }
.tracking-\[0\.3em\] { letter-spacing:  0.3em;  }
.tracking-\[0\.4em\] { letter-spacing:  0.4em;  }

.line-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* ─── Colours — text + background + border ─────────── */

.text-white              { color: #ffffff; }
.text-white\/40          { color: rgba(255, 255, 255, 0.4); }
.text-white\/60          { color: rgba(255, 255, 255, 0.6); }
.text-white\/70          { color: rgba(255, 255, 255, 0.7); }
.text-white\/80          { color: rgba(255, 255, 255, 0.8); }
.text-white\/90          { color: rgba(255, 255, 255, 0.9); }

.text-primary                  { color: var(--color-primary); }
.text-on-surface               { color: var(--color-on-surface); }
.text-on-surface\/80           { color: rgba(62, 47, 45, 0.8); }
.text-on-surface-variant       { color: var(--color-on-surface-variant); }
.text-on-surface-variant\/70   { color: rgba(109, 91, 89, 0.7); }
.text-on-background            { color: var(--color-on-background); }

.bg-white                { background-color: #ffffff; }
.bg-black                { background-color: #000000; }
.bg-black\/10            { background-color: rgba(0, 0, 0, 0.1); }
.bg-black\/20            { background-color: rgba(0, 0, 0, 0.2); }
.bg-black\/30            { background-color: rgba(0, 0, 0, 0.3); }
.bg-black\/40            { background-color: rgba(0, 0, 0, 0.4); }
.bg-black\/60            { background-color: rgba(0, 0, 0, 0.6); }
.bg-black\/70            { background-color: rgba(0, 0, 0, 0.7); }

.bg-primary\/20          { background-color: rgba(140, 77, 72, 0.2); }
.bg-surface              { background-color: var(--color-surface); }
.bg-surface\/90          { background-color: rgba(255, 248, 247, 0.9); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-background           { background-color: var(--color-background); }
.bg-on-surface\/90       { background-color: rgba(62, 47, 45, 0.9); }

.bg-\[\#F1D5D2\]                 { background-color: #F1D5D2; }
.bg-\[var\(--ep-surface\)\]      { background-color: var(--ep-surface); }

.border                  { border-width: 1px; border-style: solid; border-color: currentColor; }
.border-b                { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: currentColor; }
.border-t                { border-top-width: 1px; border-top-style: solid; border-top-color: currentColor; }
.border-y                {
    border-top-width:    1px;
    border-bottom-width: 1px;
    border-top-style:    solid;
    border-bottom-style: solid;
    border-top-color:    currentColor;
    border-bottom-color: currentColor;
}
.border-none             { border: none; }

.border-black                    { border-color: #000000; }
.border-white\/10                { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/40                { border-color: rgba(255, 255, 255, 0.4); }
.border-primary\/20              { border-color: rgba(140, 77, 72, 0.2); }
.border-outline-variant\/10      { border-color: rgba(195, 173, 170, 0.1); }
.border-outline-variant\/30      { border-color: rgba(195, 173, 170, 0.3); }

.opacity-60         { opacity: 0.6; }
.opacity-90         { opacity: 0.9; }


/* ─── Effects, transitions, transforms ───────────────── */

.antialiased        { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.grayscale          { filter: grayscale(1); }
.drop-shadow-sm     { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }

.transition-all        { transition-property: all;                                              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-opacity    { transition-property: opacity;                                          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors     { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-transform  { transition-property: transform; transition-duration: 150ms;            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.duration-300       { transition-duration: 300ms;  }
.duration-500       { transition-duration: 500ms;  }
.duration-700       { transition-duration: 700ms;  }
.duration-1000      { transition-duration: 1000ms; }

.translate-y-full   { transform: translateY(100%); }
.scale-105          { transform: scale(1.05); }
.scale-110          { transform: scale(1.1);  }


/* ─── Linear gradient composition ────────────────────── */

.bg-gradient-to-t   { background-image: linear-gradient(to top,   var(--ep-gradient-stops)); }
.bg-gradient-to-r   { background-image: linear-gradient(to right, var(--ep-gradient-stops)); }

.from-black\/60     { --ep-gradient-from: rgba(0, 0, 0, 0.6); --ep-gradient-stops: var(--ep-gradient-from), var(--ep-gradient-to, rgba(0, 0, 0, 0)); }
.from-black\/70     { --ep-gradient-from: rgba(0, 0, 0, 0.7); --ep-gradient-stops: var(--ep-gradient-from), var(--ep-gradient-to, rgba(0, 0, 0, 0)); }
.via-transparent    { --ep-gradient-to:   transparent;              --ep-gradient-stops: var(--ep-gradient-from), transparent,              var(--ep-gradient-to, rgba(0, 0, 0, 0)); }
.via-black\/20      { --ep-gradient-to:   rgba(0, 0, 0, 0.2);       --ep-gradient-stops: var(--ep-gradient-from), rgba(0, 0, 0, 0.2),       var(--ep-gradient-to, rgba(0, 0, 0, 0)); }
.to-transparent     { --ep-gradient-to:   transparent; }


/* ─── Z-index + cursor + decoration ──────────────────── */

.z-0                { z-index:  0; }
.z-10               { z-index: 10; }
.z-40               { z-index: 40; }
.z-50               { z-index: 50; }

.cursor-pointer     { cursor: pointer; }
.line-through       { text-decoration-line: line-through; }


/* ─── Scroll snapping ────────────────────────────────── */

.snap-x             { scroll-snap-type: x var(--ep-scroll-snap-strictness); --ep-scroll-snap-strictness: proximity; }
.snap-mandatory     { --ep-scroll-snap-strictness: mandatory; }
.snap-center        { scroll-snap-align: center; }


/* ─── Hover / group-hover / focus ─────────────────────── */

.hover\:opacity-90:hover         { opacity: 0.9; }
.hover\:text-primary:hover       { color: var(--color-primary); }
.hover\:text-white:hover         { color: #ffffff; }
.hover\:scale-105:hover          { transform: scale(1.05); }
.hover\:scale-110:hover          { transform: scale(1.1); }
.hover\:bg-on-surface\/90:hover  { background-color: rgba(62, 47, 45, 0.9); }
.hover\:grayscale-0:hover        { filter: grayscale(0); }
.hover\:translate-y-0:hover      { transform: translateY(0); }
.hover\:underline:hover          { text-decoration-line: underline; }

.group:hover .group-hover\:scale-105         { transform: scale(1.05); }
.group:hover .group-hover\:text-primary      { color: var(--color-primary); }
.group:hover .group-hover\:bg-black\/40      { background-color: rgba(0, 0, 0, 0.4); }
.group:hover .group-hover\:translate-y-0     { transform: translateY(0); }
.group:hover .group-hover\:block             { display: block; }

.focus\:ring-1:focus              { outline: 1px solid var(--color-primary);             outline-offset: 0; }
.focus\:ring-primary\/30:focus    { outline: 1px solid rgba(140, 77, 72, 0.3);           outline-offset: 0; }