/**
 * Padding Override Utilities
 * 
 * Custom utility classes for granular padding control in WordPress FSE blocks.
 * Use these classes in the "Additional CSS class(es)" field in the block editor.
 * 
 * Theme: Ollie CFP
 * File: assets/styles/spacing-padding-overrides.css
 * Last Updated: 2025-01-14
 * 
 * Usage Examples:
 * - .p-0 = Remove all padding
 * - .pt-2 = Add 2rem top padding
 * - .px-3 = Add 3rem horizontal padding
 * - .p-custom-sm = Add 0.5rem padding all sides
 * 
 * Scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6 (rem units)
 */

/* ============================================
   ALL SIDES PADDING
   ============================================ */

.p-0 { padding: 0 !important; }
.p-05 { padding: 0.5rem !important; }
.p-1 { padding: 1rem !important; }
.p-15 { padding: 1.5rem !important; }
.p-2 { padding: 2rem !important; }
.p-25 { padding: 2.5rem !important; }
.p-3 { padding: 3rem !important; }
.p-4 { padding: 4rem !important; }
.p-5 { padding: 5rem !important; }
.p-6 { padding: 6rem !important; }

/* ============================================
   TOP PADDING
   ============================================ */

.pt-0 { padding-top: 0 !important; }
.pt-05 { padding-top: 0.5rem !important; }
.pt-1 { padding-top: 1rem !important; }
.pt-15 { padding-top: 1.5rem !important; }
.pt-2 { padding-top: 2rem !important; }
.pt-25 { padding-top: 2.5rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pt-4 { padding-top: 4rem !important; }
.pt-5 { padding-top: 5rem !important; }
.pt-6 { padding-top: 6rem !important; }

/* ============================================
   RIGHT PADDING
   ============================================ */

.pr-0 { padding-right: 0 !important; }
.pr-05 { padding-right: 0.5rem !important; }
.pr-1 { padding-right: 1rem !important; }
.pr-15 { padding-right: 1.5rem !important; }
.pr-2 { padding-right: 2rem !important; }
.pr-25 { padding-right: 2.5rem !important; }
.pr-3 { padding-right: 3rem !important; }
.pr-4 { padding-right: 4rem !important; }
.pr-5 { padding-right: 5rem !important; }
.pr-6 { padding-right: 6rem !important; }

/* ============================================
   BOTTOM PADDING
   ============================================ */

.pb-0 { padding-bottom: 0 !important; }
.pb-05 { padding-bottom: 0.5rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pb-15 { padding-bottom: 1.5rem !important; }
.pb-2 { padding-bottom: 2rem !important; }
.pb-25 { padding-bottom: 2.5rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pb-4 { padding-bottom: 4rem !important; }
.pb-5 { padding-bottom: 5rem !important; }
.pb-6 { padding-bottom: 6rem !important; }

/* ============================================
   LEFT PADDING
   ============================================ */

.pl-0 { padding-left: 0 !important; }
.pl-05 { padding-left: 0.5rem !important; }
.pl-1 { padding-left: 1rem !important; }
.pl-15 { padding-left: 1.5rem !important; }
.pl-2 { padding-left: 2rem !important; }
.pl-25 { padding-left: 2.5rem !important; }
.pl-3 { padding-left: 3rem !important; }
.pl-4 { padding-left: 4rem !important; }
.pl-5 { padding-left: 5rem !important; }
.pl-6 { padding-left: 6rem !important; }

/* ============================================
   HORIZONTAL PADDING (Left + Right)
   ============================================ */

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-05 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-15 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-2 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-25 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.px-3 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-5 { padding-left: 5rem !important; padding-right: 5rem !important; }
.px-6 { padding-left: 6rem !important; padding-right: 6rem !important; }

/* ============================================
   VERTICAL PADDING (Top + Bottom)
   ============================================ */

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-05 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-15 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-25 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

/* ============================================
   RESPONSIVE PADDING OVERRIDES
   Mobile-first approach with tablet and desktop breakpoints
   ============================================ */

/* Tablet (768px and up) */
@media (min-width: 768px) {
	.p-md-0 { padding: 0 !important; }
	.p-md-1 { padding: 1rem !important; }
	.p-md-2 { padding: 2rem !important; }
	.p-md-3 { padding: 3rem !important; }
	.p-md-4 { padding: 4rem !important; }
	
	.pt-md-0 { padding-top: 0 !important; }
	.pt-md-2 { padding-top: 2rem !important; }
	.pt-md-3 { padding-top: 3rem !important; }
	.pt-md-4 { padding-top: 4rem !important; }
	
	.pb-md-0 { padding-bottom: 0 !important; }
	.pb-md-2 { padding-bottom: 2rem !important; }
	.pb-md-3 { padding-bottom: 3rem !important; }
	.pb-md-4 { padding-bottom: 4rem !important; }
	
	.pl-md-0 { padding-left: 0 !important; }
	.pl-md-2 { padding-left: 2rem !important; }
	.pl-md-3 { padding-left: 3rem !important; }
	.pl-md-4 { padding-left: 4rem !important; }
	
	.pr-md-0 { padding-right: 0 !important; }
	.pr-md-2 { padding-right: 2rem !important; }
	.pr-md-3 { padding-right: 3rem !important; }
	.pr-md-4 { padding-right: 4rem !important; }
	
	.px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-md-2 { padding-left: 2rem !important; padding-right: 2rem !important; }
	.px-md-3 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.px-md-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
	
	.py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-md-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
	.py-md-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.py-md-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
	.p-lg-0 { padding: 0 !important; }
	.p-lg-1 { padding: 1rem !important; }
	.p-lg-2 { padding: 2rem !important; }
	.p-lg-3 { padding: 3rem !important; }
	.p-lg-4 { padding: 4rem !important; }
	.p-lg-5 { padding: 5rem !important; }
	
	.pt-lg-0 { padding-top: 0 !important; }
	.pt-lg-3 { padding-top: 3rem !important; }
	.pt-lg-4 { padding-top: 4rem !important; }
	.pt-lg-5 { padding-top: 5rem !important; }
	
	.pb-lg-0 { padding-bottom: 0 !important; }
	.pb-lg-3 { padding-bottom: 3rem !important; }
	.pb-lg-4 { padding-bottom: 4rem !important; }
	.pb-lg-5 { padding-bottom: 5rem !important; }
	
	.pl-lg-0 { padding-left: 0 !important; }
	.pl-lg-3 { padding-left: 3rem !important; }
	.pl-lg-4 { padding-left: 4rem !important; }
	.pl-lg-5 { padding-left: 5rem !important; }
	
	.pr-lg-0 { padding-right: 0 !important; }
	.pr-lg-3 { padding-right: 3rem !important; }
	.pr-lg-4 { padding-right: 4rem !important; }
	.pr-lg-5 { padding-right: 5rem !important; }
	
	.px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-lg-3 { padding-left: 3rem !important; padding-right: 3rem !important; }
	.px-lg-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
	.px-lg-5 { padding-left: 5rem !important; padding-right: 5rem !important; }
	
	.py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-lg-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.py-lg-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
	.py-lg-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}

/* ============================================
   Team member viewport padding helper
   Keeps cards visually narrow on mobile/tablet and releases on desktop
   ============================================ */

.team-card-vw-pad {
	max-width: 240px;
	padding-left: clamp(1.5rem, 8vw, 4rem) !important;
	padding-right: clamp(1.5rem, 8vw, 4rem) !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.team-card-vw-pad {
		padding-left: clamp(2rem, 10vw, 6rem) !important;
		padding-right: clamp(2rem, 10vw, 6rem) !important;
	}
}

@media (min-width: 1024px) {
	.team-card-vw-pad {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ============================================
   SEMANTIC PADDING ALIASES
   Common use cases with descriptive names
   ============================================ */

.p-none { padding: 0 !important; }
.p-xs { padding: 0.5rem !important; }
.p-sm { padding: 1rem !important; }
.p-md { padding: 1.5rem !important; }
.p-lg { padding: 2rem !important; }
.p-xl { padding: 3rem !important; }
.p-2xl { padding: 4rem !important; }
.p-3xl { padding: 6rem !important; }

.px-content { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.p-card { padding: 1.5rem !important; }
.p-button { padding: 0.75rem 1.5rem !important; }

/* ============================================
   CUSTOM FLUID RESPONSIVE PADDING
   Category page title group wrap
   ============================================ */

/* Category Page Title Group - Fluid Responsive Padding
 * Horizontal: Desktop/Tablet (1024px+): 140px left & right
 *             Calculation: (1300 - 1020) / 2 = 140px
 *             Scales down fluidly with viewport
 *             Mobile minimum: 1.5rem (24px)
 *             Uses clamp() for smooth fluid scaling with accelerated reduction
 * Top: 2rem (32px)
 * Bottom: 152px (150px + 2rem)
 */
.px-category-title-fluid {
	padding-top: 2rem !important;
	padding-right: clamp(1rem, 2rem + 10vw, 140px) !important;
	padding-bottom: 152px !important;
	padding-left: clamp(1rem, 2rem + 10vw, 140px) !important;
}

@media (max-width: 600px) {
	.px-category-title-fluid {
		padding-right: 1rem !important;
		padding-left: 1rem !important;
	}
}

@media (min-width: 1024px) {
	.px-category-title-fluid {
		padding-right: 140px !important;
		padding-left: 140px !important;
	}
}

/* Product Page Title Group - Centered with Responsive Width
 * Desktop: 75% width, centered
 * Mobile: 90% width, centered
 * Fluid scaling between breakpoints
 * Uses clamp() for smooth width transition
 */
.product-title-centered-responsive {
	width: clamp(75%, 75% + 15vw, 90%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
}

.hero-viewport-center {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-title-frame {
	max-width: 400px;
	width: 80%;
	padding-inline: 10%;
	margin-inline: auto;
}