/* ============================================
   LAYOUT & SPACING UTILITIES
   Extended layout and spacing classes

   Contains:
   - Container utilities (.container)
   - Extended max-width utilities (max-w-*)
   - Extended height utilities (h-*)
   - Extended width utilities (w-*)
   - Extended spacing utilities (m-*, p-*)
   - Gap utilities (gap-*)
   - Position utilities
   - Display utilities

   NOTE: This file contains utilities NOT in utility-classes-1.css
   to avoid duplication and keep files organized
   ============================================ */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Extended max-width utilities not in utility-classes-1.css */
.max-w-xs { max-width: 20rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-sm { max-width: 24rem; }

/* Extended height utilities not in utility-classes-1.css */
.h-auto { height: auto; }
.h-6 { height: 1.5rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-24 { height: 6rem; }
.h-48 { height: 12rem; }

/* Extended width utilities not in utility-classes-1.css */
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.w-32 { width: 8rem; }

/* Extended min-height utilities */
.min-h-\[400px\] {
    min-height: 400px;
}

.min-h-\[500px\] {
    min-height: 500px;
}

/* Aspect ratio */
/* Removed unused aspect-ratio classes - project uses inline styles instead */

/* ==============================================
   EXTENDED SPACING UTILITIES (not in utility-classes-1.css)
   ============================================== */

/* Extended padding utilities */
.p-10 { padding: 2.5rem; }
.p-16 { padding: 4rem; }

.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-24 { padding-left: 6rem; padding-right: 6rem; }
.px-32 { padding-left: 8rem; padding-right: 8rem; }
.px-40 { padding-left: 10rem; padding-right: 10rem; }

.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }

.pb-8 { padding-bottom: 2rem; }
.pb-32 { padding-bottom: 8rem; }
.pb-64 { padding-bottom: 16rem; }
.pb-80 { padding-bottom: 20rem; }
.pb-96 { padding-bottom: 24rem; }

/* Extended margin utilities */
.mb-3 { margin-bottom: 0.75rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-24 { margin-bottom: 6rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }
.mt-0\.5 { margin-top: 0.125rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-12 { margin-left: 3rem; }
.-mt-4 { margin-top: -1rem; }

/* Extended gap utilities */
.gap-6 { gap: 1.5rem; }
.gap-16 { gap: 4rem; }

/* Extended space utilities */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-16 > * + * { margin-top: 4rem; }

/* ==============================================
   EXTENDED FLEXBOX & GRID (not in utility-classes-1.css)
   ============================================== */

.inline-flex {
    display: inline-flex;
}

.flex-grow {
    flex-grow: 1;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* ==============================================
   EXTENDED POSITIONING (not in utility-classes-1.css)
   ============================================== */

.fixed {
    position: fixed;
}

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

.top-0 { top: 0; }
.top-4 { top: 1rem; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.left-6 { left: 1.5rem; }
.right-0 { right: 0; }
.right-4 { right: 1rem; }
.top-50\% { top: 50%; }

.pointer-events-none {
    pointer-events: none;
}

.z-0 { z-index: 0; }
.z-2 { z-index: 2; }
.z-10 { z-index: 10; }
.z-1000 { z-index: 1000; }

/* ==============================================
   EXTENDED DISPLAY (not in utility-classes-1.css)
   ============================================== */

.overflow-x-hidden {
    overflow-x: hidden;
}

/* ==============================================
   EXTENDED BORDERS (not in utility-classes-1.css)
   ============================================== */

.border-t {
    border-top-width: 1px;
}

.border-white\/15 {
    border-color: rgba(255, 255, 255, 0.15);
}

.border-white\/40 {
    border-color: rgba(255, 255, 255, 0.4);
}

.border-white {
    border-color: #fff;
}

.border-red-500 {
    border-color: #ef4444;
}

.border-red-500\/30 {
    border-color: rgba(239, 68, 68, 0.3);
}

.border-red-500\/40 {
    border-color: rgba(239, 68, 68, 0.4);
}

.border-purple-500\/30 {
    border-color: rgba(139, 92, 246, 0.3);
}

.border-purple-500\/40 {
    border-color: rgba(139, 92, 246, 0.4);
}

.rounded-8 {
    border-radius: 0.5rem;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

/* ==============================================
   EXTENDED BACKGROUNDS (not in utility-classes-1.css)
   ============================================== */

.bg-gray-800 {
    background-color: #1f2937;
}

.bg-gray-900 {
    background-color: #111827;
}

.bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.5);
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

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

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.to-black {
    --tw-gradient-to: black;
}

.via-white\/20 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.2), var(--tw-gradient-to, transparent);
}

.via-neutral-900\/20 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(23, 23, 23, 0.2), var(--tw-gradient-to, transparent);
}

.from-neutral-900 {
    --tw-gradient-from: #171717;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(23, 23, 23, 0));
}

/* Backdrop blur */
.backdrop-blur-xl {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Background attachment */
.bg-fixed {
    background-attachment: fixed;
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

/* ==============================================
   EXTENDED TYPOGRAPHY (not in utility-classes-1.css)
   ============================================== */

.text-black {
    color: #000;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-neutral-300 {
    color: #d4d4d4;
}

.text-neutral-400 {
    color: #a3a3a3;
}

.text-neutral-500 {
    color: #737373;
}

.text-neutral-700 {
    color: #404040;
}

.text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}

.text-white\/90 {
    color: rgba(255, 255, 255, 0.9);
}

.text-red-300 {
    color: #fca5a5;
}

.text-red-400 {
    color: #f87171;
}

.text-red-500 {
    color: #ef4444;
}

.text-green-300 {
    color: #86efac;
}

.text-purple-300 {
    color: #d8b4fe;
}

.text-purple-400 {
    color: #c084fc;
}

/* Extended font sizes */
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.text-8xl {
    font-size: 6rem;
    line-height: 1;
}

.text-9xl {
    font-size: 8rem;
    line-height: 1;
}

/* Extended font weights */
.font-normal {
}

.font-medium {
}

.font-semibold {
}

.font-black {
}

/* Extended letter spacing */
.tracking-widest {
    letter-spacing: 0.1em;
}

.leading-tight {
    line-height: 1.25;
}

.leading-relaxed {
    line-height: 1.625;
}

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

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

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

/* ==============================================
   SHADOWS
   ============================================== */

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-white\/50 {
    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.5);
}

/* ==============================================
   TRANSFORMS & TRANSITIONS
   ============================================== */

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.-translate-y-1:hover {
    transform: translateY(-0.25rem);
}

.-translate-y-1\.5:hover {
    transform: translateY(-0.375rem);
}

.-translate-y-2:hover {
    transform: translateY(-0.5rem);
}

.translate-x-2:hover {
    transform: translateX(0.5rem);
}

.translate-x-4:hover {
    transform: translateX(1rem);
}

.translate-x-8:hover {
    transform: translateX(2rem);
}

.scale-105:hover {
    transform: scale(1.05);
}

.scale-110:hover {
    transform: scale(1.1);
}

.-translate-x-1\/2 {
    transform: translateX(-50%);
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

/* Removed unused transform hover classes - project uses inline styles instead */

/* ==============================================
   INTERACTIVE STATES
   ============================================== */

.cursor-pointer {
    cursor: pointer;
}

.hover\:text-white:hover {
    color: #fff;
}

.hover\:text-neutral-300:hover {
    color: #d4d4d4;
}

.hover\:bg-white\/90:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hover\:bg-gray-300:hover {
    background-color: #d1d5db;
}

.hover\:border-white\/30:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.hover\:border-white\/50:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.hover\:border-white\/60:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:border-white\/50:focus {
    border-color: rgba(255, 255, 255, 0.5);
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.group:hover .group-hover\:w-4 {
    width: 1rem;
}

.group:hover .group-hover\:mr-2 {
    margin-right: 0.5rem;
}

.group:hover .group-hover\:tracking-wider {
    letter-spacing: 0.05em;
}

.group:hover .group-hover\:translate-x-2 {
    transform: translateX(0.5rem);
}

.resize-none {
    resize: none;
}

/* ==============================================
   OBJECT FIT
   ============================================== */

.object-cover {
    object-fit: cover;
}

/* ==============================================
   FILTERS
   ============================================== */

.grayscale {
    filter: grayscale(100%);
}