/*! ==========================================================================
   DESIGN SYSTEM CSS
   Utility classes and component system
   ========================================================================== */

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

/* Grid System */
.grid {
    display: grid;
    contain: layout style;
    transform: translateZ(0);
}

.grid--2col { grid-template-columns: repeat(2, 1fr); }
.grid--3col { grid-template-columns: repeat(3, 1fr); }
.grid--4col { grid-template-columns: repeat(4, 1fr); }
.grid--content-media { grid-template-columns: 1.25fr 1fr; }
.grid--media-content { grid-template-columns: 1fr 1.25fr; }
.grid--sidebar-main { grid-template-columns: 1fr 2fr; }
.grid--main-sidebar { grid-template-columns: 2fr 1fr; }

.grid--2col,
.grid--content-media,
.grid--media-content,
.grid--sidebar-main,
.grid--main-sidebar{ 
    gap: var(--spacing-lg); 
}

.grid--3col,
.grid--4col { 
    gap: var(--spacing-sm); 
}

/* Container System */
.container-sm,
.container-md,
.container-lg {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }

/* Flexbox Alignment Utilities */
.is-center { justify-content: center; }
.is-right { justify-content: flex-end; }

/* Flex Layout */
.flex {
    display: flex;
}

/* Flex Column Layout */
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

/* Grid Alignment Utilities */
.items-center { align-items: center; }
.items-start { align-items: start; }
.items-end { align-items: end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-start { justify-content: start; }
.justify-end { justify-content: end; }

/* Gap Utilities */
.gap-xxs { gap: var(--spacing-xxs); }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Stretch Link (clickable card pattern) */
.stretch-link { position: relative; }
.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.stretch-link a:is(:hover, :focus) { outline: none; }

/* ==========================================================================
   POSITIONING UTILITIES
   ========================================================================== */

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

/* Z-index layers */
.z-base { 
    position: relative; 
    z-index: 1; 
}
.z-elevated { 
    position: relative; 
    z-index: 2; 
}
.z-overlay { 
    position: relative; 
    z-index: 10; 
}

/* ==========================================================================
   CARD SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Card
   -------------------------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    contain: layout style paint;
    will-change: transform;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Card Body
   -------------------------------------------------------------------------- */

.card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-xxs);
    padding: var(--spacing-sm) 0;
    flex: 1;
}

/* --------------------------------------------------------------------------
   Card Title
   -------------------------------------------------------------------------- */

.card__title {
    margin: 0;
    font-size: var(--font-size-regular);
    line-height: var(--line-height-head);
    color: var(--text-strong);
}
.card__title a {
    color: var(--text-strong);
    text-decoration: none;
}
.card__title a:is(:hover,:focus,:focus-visible,:active) {
    color: var(--text-strong);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Card Meta
   -------------------------------------------------------------------------- */

.card__meta {
    margin: 0;
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Card Image
   -------------------------------------------------------------------------- */

.card__img {
	transition: transform 0.3s ease;
	will-change: transform;
}

.card:hover .card__img {
	transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Card Badges
   -------------------------------------------------------------------------- */

.card__badge {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.card__badge--primary { 
    top: var(--spacing-xs); 
    right: var(--spacing-xs); 
}

.card__badge--secondary { 
    top: var(--spacing-xs); 
    left: var(--spacing-xs); 
}

/* --------------------------------------------------------------------------
   Card Buttons
   -------------------------------------------------------------------------- */

.card:hover .button--link {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Horizontal Card Variant
   -------------------------------------------------------------------------- */
.card--horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.card--horizontal .card__body { padding: var(--spacing-lg); }
.card--horizontal .card__title { font-size: var(--font-size-xl); }

/* ==========================================================================
   IMAGE UTILITIES
   ========================================================================== */

/* Standard image wrapper */
.img-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    contain: layout;
}

/* Background image variant (for section backgrounds) */
.img-wrapper--background {
    position: absolute;
    inset: 0;
    border-radius: 0;
    overflow: hidden;
}

.img-wrapper--background::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #00000080;
    pointer-events: none;
}

.img-wrapper--bordered {
    border: var(--border-width) solid var(--border-color-medium);
}

.img-wrapper--card { border-radius: 0; }

/* Aspect ratio utilities */
.img-wrapper--square { aspect-ratio: 1 / 1; }
.img-wrapper--16x9 { aspect-ratio: 16 / 9; }
.img-wrapper--8x6 { aspect-ratio: 8 / 6; }
.img-wrapper--3x2 { aspect-ratio: 3 / 2; }
.img-wrapper--2x3 { aspect-ratio: 2 / 3; }

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

/* Padding Utilities */
.padding-0 { padding: 0rem; }
.padding-xxs { padding: var(--spacing-xxs); }
.padding-xs { padding: var(--spacing-xs); }
.padding-sm { padding: var(--spacing-sm); }
.padding-md { padding: var(--spacing-md); }
.padding-lg { padding: var(--spacing-lg); }
.padding-xl { padding: var(--spacing-xl); }
.padding-xxl { padding: var(--spacing-xxl); }
.padding-xxxl { padding: var(--spacing-xxxl); }

/* Directional Padding */
.padding-global {
    padding-left: var(--padding-global);
    padding-right: var(--padding-global);
}

.padding-horizontal { padding-block: 0; }
.padding-vertical { padding-inline: 0; }

.padding-top {
    padding-bottom: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
}

.padding-right {
    padding-bottom: 0rem;
    padding-left: 0rem;
    padding-top: 0rem;
}

.padding-bottom {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 0rem;
}

.padding-left {
    padding-bottom: 0rem;
    padding-right: 0rem;
    padding-top: 0rem;
}

/* Margin Utilities */
.margin-0 { margin: 0rem; }
.margin-xxs { margin: var(--spacing-xxs); }
.margin-xs { margin: var(--spacing-xs); }
.margin-sm { margin: var(--spacing-sm); }
.margin-md { margin: var(--spacing-md); }
.margin-lg { margin: var(--spacing-lg); }
.margin-xl { margin: var(--spacing-xl); }
.margin-xxl { margin: var(--spacing-xxl); }
.margin-xxxl { margin: var(--spacing-xxxl); }

/* Directional Margin */
.margin-horizontal { margin-block: 0; }
.margin-vertical { margin-inline: 0; }

.margin-top {
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-right: 0rem;
}

.margin-right {
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-top: 0rem;
}

.margin-bottom {
    margin-left: 0rem;
    margin-right: 0rem;
    margin-top: 0rem;
}

.margin-left {
    margin-bottom: 0rem;
    margin-right: 0rem;
    margin-top: 0rem;
}

/* Section Spacing */
.section-sm { padding-block: var(--section-sm); }
.section-md { padding-block: var(--section-md); }
.section-lg { padding-block: var(--section-lg); }
.section-xl { padding-block: var(--section-xl); }
.section-xxl { padding-block: var(--section-xxl); }

/* Special Section Styles */
.section-bordered {
    padding-inline: var(--spacing-lg);
    border-inline: var(--border-width) solid var(--border-color-light);
}

/* ==========================================================================
   BACKGROUND & BORDER UTILITIES
   ========================================================================== */

/* Background Utilities (semantic) */
.bg-light { background: var(--bg-light);}
.bg-base { background: var(--bg-base);}
.bg-shade { background: var(--bg-shade);}
.bg-dark { background: var(--bg-dark); color: var(--text-inverse); }

/* Link variant on dark backgrounds */
.link-alt { color: var(--text-inverse); }
.link-alt:hover { color: var(--text-inverse); }
.link-alt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Heading color in dark sections */
.bg-dark :is(h1, h2, h3, h4, h5, h6),
.bg-dark :is(.heading--h1, .heading--h2, .heading--h3, .heading--h4, .heading--h5, .heading--h6),
.text-inverse :is(h1, h2, h3, h4, h5, h6),
.text-inverse :is(.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6)  {
  color: var(--text-inverse);
}

.bg-shade a:not([class*="button"]):not(.card__body a) {
  color: var(--link-contrast);
}

.bg-shade a:not([class*="button"]):not(.card__body a):hover{
  color: var(--link-contrast-hover);
}

/* Borders */
.border        { border: var(--border-width) solid var(--border-color-medium); }
.border-top    { border-top:    var(--border-width) solid var(--border-color-medium); }
.border-right  { border-right:  var(--border-width) solid var(--border-color-medium); }
.border-bottom { border-bottom: var(--border-width) solid var(--border-color-medium); }
.border-left   { border-left:   var(--border-width) solid var(--border-color-medium); }

.border-horizontal { border-inline: var(--border-width) solid var(--border-color-medium); }
.border-vertical   { border-block:  var(--border-width) solid var(--border-color-medium); }

.border-light  { border-color: var(--border-color-light); }
.border-dark   { border-color: var(--border-color-dark); }

/* Border Radius — new utilities */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Divider */
.divider-horizontal {
  height: var(--border-width);
  background-color: var(--border-color-dark);
  width: 100%;
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

/* Text Alignment */
.text-align-center { text-align: center; }
.text-align-right  { text-align: right; }

/* Text Color (semantic) */
.text-strong    { color: var(--text-strong); }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-inverse   { color: var(--text-inverse); }

/* Text Weight */
.text-weight-normal { font-weight: var(--font-weight-normal); }
.text-weight-medium { font-weight: var(--font-weight-medium); }
.text-weight-bold   { font-weight: var(--font-weight-bold); }

/* Text Style Utilities (keep only stylistic behaviors) */
.text-style-allcaps { text-transform: uppercase; letter-spacing: .02em; }
.text-style-italic  { font-style: italic; }
.text-style-link    { text-decoration: underline; }
.text-style-nowrap       { white-space: nowrap; }
.text-style-strikethrough{ text-decoration: line-through; }

.text-style-tagline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: var(--font-weight-medium);
}

.text-style-tagline::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--primary-500);
    border-radius: 50%;
    border: 2px solid var(--primary-200);
}

.text-style-quote {
    font-size: var(--font-size-lg);
    border-left: 0.1875rem solid var(--link);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Line Clamping */
.text-style-2lines,
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.text-style-2lines { line-clamp: 2; -webkit-line-clamp: 2; }
.text-style-3lines { line-clamp: 3; -webkit-line-clamp: 3; }
.text-style-expanded { display: block; line-clamp: unset; -webkit-line-clamp: unset; }

/* Lists */
.list-unstyled { list-style: none; margin-left: 0; padding-left: 0; }

/* Links */
a.no-ul { text-decoration: none; }

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */

/* Hidden state */
.fade-in,
.fade-in-up,
.fade-in-sequence,
.scale-in {
    opacity: 0;
    will-change: opacity, transform;
}

/* Fade In (opacity only) */
.fade-in { transition: opacity .8s cubic-bezier(.4,0,.2,1); }

/* Fade In Up (default) */
.fade-in-up,
.fade-in-sequence {
    transform: translate3d(0, 60px, 0);
    transition: opacity .6s cubic-bezier(.4,0,.2,1),
                transform .6s cubic-bezier(.4,0,.2,1);
}

/* Scale In (icons/badges) */
.scale-in {
    transform: scale3d(.9,.9,1);
    transition: opacity .5s cubic-bezier(.4,0,.2,1),
                transform .5s cubic-bezier(.4,0,.2,1);
}

/* Revealed state */
.fade-in.is-visible,
.fade-in-up.is-visible,
.fade-in-sequence.is-visible,
.scale-in.is-visible {
    opacity: 1;
    transform: translate3d(0,0,0) scale3d(1,1,1);
    will-change: auto;
}

/* ==========================================================================
   ICON UTILITIES
   ========================================================================== */

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translateZ(0);
}
.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

.icon svg {
    width: 100%;
    height: 100%;
    transform: translateZ(0);
}

/* ==========================================================================
   BUTTON SYSTEM
   ========================================================================== */

/* Base Button */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background-color: var(--neutral-800);
    color: var(--text-inverse);
    font-family: var(--gp-font--headings);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-headings);
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
    border: var(--border-width) solid var(--neutral-800);
    border-radius: var(--radius-md);
    padding: .825rem 1.5rem;
    cursor: pointer;
    margin-bottom: 0;
    contain: layout style;
    transform: translateZ(0);
    box-shadow: var(--shadow-sm);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.button:is(:hover, :focus) {
    background-color: var(--neutral-700);
    color: var(--text-inverse);
}
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Secondary (subtle) */
.button--secondary {
    background-color: var(--neutral-0);
    border-color: var(--border-color-dark);
    color: var(--text-strong);
}
.button--secondary:is(:hover,:focus) {
    background-color: var(--bg-base);
    color: var(--text-strong);
}

/* Outline */
.button--outline {
    background-color: transparent;
    border-color: var(--border-color-dark);
    color: var(--text-strong);
}
.button--outline:is(:hover,:focus) {
    background-color: var(--bg-light);
    color: var(--text-strong);
}

/* Primary On Dark */
.button--alt {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--neutral-0);
}
.button--alt:hover {
    background-color: var(--primary-500);
    color: var(--text-inverse);
}

/* Outline On Dark (inverse) */
.button--outline-alt {
    background-color: transparent;
    border-color: var(--text-inverse);
    color: var(--text-inverse);
}
.button--outline-alt:is(:hover,:focus) {
    background-color: var(--neutral-700);
}

/* Link-style buttons */
.button--link,
.button--link-alt {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--link);
    line-height: 1;
    text-decoration: underline !important;
    text-underline-offset: 5px;
    padding: .25rem 0;
}
.button--link:is(:hover,:focus) { color: var(--link-hover); }
.button--link-alt { color: var(--text-inverse); }
.button--link:is(:hover,:focus),
.button--link-alt:is(:hover,:focus) {
    text-decoration: none !important;
    background-color: transparent;
    box-shadow: none;
}

.button--link.button--sm {
    padding: 0.25rem 0;
    text-decoration: none !important;
}

.button--sm {
    font-size: var(--font-size-sm);
    padding: 0.5rem 1rem 0.35rem 1rem;
}

.button--icon {
    align-items: center;
    column-gap: 0.5em;
    display: inline-flex;
}


.button--icon svg {
    width: var(--icon-xs);
    height: var(--icon-xs);
    fill: currentColor;
    position: relative;
    top: -2px;
}

.button--icon.button--sm svg {
    top: -1px;
}

/* Button Group */
.button-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==========================================================================
   TAG SYSTEM
   ========================================================================== */

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-50);
    color: var(--primary-800);
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: normal;
    border: var(--border-width) solid var(--primary-800);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xxs);
    line-height: var(--line-height-head);
}
.tag--secondary {
    background-color: var(--accent-100);
    border-color: var(--accent-900);
    color: var(--accent-900);
}
.tag--outline {
    background-color: transparent;
    border-color: var(--border-color-dark);
    color: var(--text-strong);
}
.tag--text {
    background-color: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
}

/* ==========================================================================
   VISIBILITY UTILITIES
   ========================================================================== */

.hide { display: none; }

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1024px) { 
    .hide-tablet { display: none; } 
}

@media (max-width: 767px) {
    .grid--2col,
    .grid--3col,
    .grid--4col,
    .grid--content-media,
    .grid--media-content,
    .grid--sidebar-main,
    .grid--main-sidebar { 
        grid-template-columns: 1fr; 
    }

    .grid--treatments {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-order-first { order: -1; }
    .mobile-order-last  { order: 999; }
    
    .hide-mobile { display: none; }

    .section-bordered {
        border: none;
        padding-inline: 0;
    }

    .card--horizontal { 
        grid-template-columns: 1fr; 
    }

    .card--horizontal .card__body { 
        padding: var(--spacing-sm); 
    }
}

/* ==========================================================================
   MOTION PREFERENCES & ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-up,
    .fade-in-sequence,
    .scale-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    .grid, 
    .card, 
    .icon, 
    .button { 
        transform: none; 
        will-change: auto; 
    }
    
    .img-wrapper img, 
    .icon svg { 
        transform: none; 
    }
}