/* ============================================
   INTERIOR DESIGN SERVICES - DESIGN SYSTEM STRUCTURE
   ============================================ */

/* Component Wrapper - Handles max-width for Interior Design Services */
.asl-component-wrapper.asl-interior-design-wrapper {
    max-width: var(--max-width-container) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Apply full-width breakout to ALL screen sizes */
body .asl-interior-design-section {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}


/* Main Section - Design System Variables */
.asl-interior-design-section {
    width: 100%;
    padding: var(--padding-desktop) var(--padding-sides-desktop) !important;
    background: var(--color-mist) !important;
    position: relative;
    box-sizing: border-box;
}

/* White Background Modifier */
.asl-interior-design-section--white {
    background: var(--color-white) !important;
}

/* Tablet Section Padding */
@media (max-width: 1024px) {
    .asl-interior-design-section {
        padding: var(--padding-tablet) var(--padding-sides-desktop) !important;
    }
}

/* Mobile Section Padding */
@media (max-width: 768px) {
    .asl-interior-design-section {
        padding: var(--padding-mobile) var(--padding-sides-mobile) !important;
    }
}

/* ========================================
   HEADER SECTION - Design System
   ======================================== */

.asl-interior-design-header {
    text-align: center;
    margin-bottom: var(--gap-large);
}

/* H2 Title - Design System Variables */
.asl-interior-design-title {
    font-family: var(--font-body) !important;
    font-size: var(--font-h2) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: var(--line-height-h2) !important;
    letter-spacing: var(--letter-spacing-h2) !important;
    color: var(--color-navy) !important;
    margin: var(--margin-h2) !important;
    margin-bottom: 24px !important;
}

/* Mobile H2 */
@media (max-width: 768px) {
    .asl-interior-design-title {
        font-size: var(--font-h2-mobile) !important;
    }
}

/* Subtitle/Description - Design System Variables */
.asl-interior-design-description {
    font-family: var(--font-body) !important;
    font-size: var(--font-body) !important;
    font-weight: var(--weight-regular) !important;
    line-height: var(--line-height-body) !important;
    letter-spacing: var(--letter-spacing-body) !important;
    color: var(--color-charcoal) !important;
    max-width: var(--max-width-content) !important;
    margin: 0 auto;
}

/* Mobile Body Text */
@media (max-width: 768px) {
    .asl-interior-design-description {
        font-size: var(--font-body-mobile) !important;
    }
}

/* ========================================
   MAIN CONTENT CONTAINER
   ======================================== */

.asl-interior-design-wrapper .asl-interior-design-container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    width: 100%;
}

/* Two-Column Grid */
.asl-interior-design-wrapper .asl-interior-design-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-medium);
}

/* Tablet: Single Column */
@media (max-width: 1024px) {
    .asl-interior-design-wrapper .asl-interior-design-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-small);
    }
}

/* Mobile: Single Column with smaller gap */
@media (max-width: 768px) {
    .asl-interior-design-wrapper .asl-interior-design-grid {
        gap: 24px;
    }
}

/* ========================================
   CARD STYLING
   ======================================== */

/* Base Card */
.asl-interior-design-wrapper .asl-interior-design-card {
    background: var(--color-white);
    border-radius: var(--border-radius-large);
    padding: var(--gap-medium);
    border: var(--border-width) solid var(--color-border);
    position: relative;
    transition: var(--transition-fast);
}

/* Card Hover Effect */
.asl-interior-design-wrapper .asl-interior-design-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

/* Personalized Card (Right) - Featured */
.asl-interior-design-wrapper .asl-interior-design-card--personalized {
    background: linear-gradient(135deg, var(--color-cream) 0%, #F5F0E8 100%);
    border-color: var(--color-gold);
}

/* Mobile Card Padding */
@media (max-width: 768px) {
    .asl-interior-design-wrapper .asl-interior-design-card {
        padding: var(--gap-small);
    }
}

/* ========================================
   RECOMMENDED BADGE
   ======================================== */

.asl-interior-design-wrapper .asl-interior-design-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-gold);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--letter-spacing-caption);
    padding: 6px 16px;
    border-radius: 0 var(--border-radius-large) 0 var(--border-radius-medium);
}

/* ========================================
   CARD TITLE (H3)
   ======================================== */

.asl-interior-design-wrapper .asl-interior-design-card-title {
    font-family: var(--font-body) !important;
    font-size: var(--font-h3) !important;
    font-weight: var(--weight-medium) !important;
    line-height: var(--line-height-h3) !important;
    letter-spacing: var(--letter-spacing-h3) !important;
    color: var(--color-navy) !important;
    margin: 0 0 24px 0 !important;
    padding-top: 0;
}

/* Add padding to personalized card title to account for badge */
.asl-interior-design-wrapper .asl-interior-design-card--personalized .asl-interior-design-card-title {
    padding-top: 12px;
}

/* Mobile H3 */
@media (max-width: 768px) {
    .asl-interior-design-wrapper .asl-interior-design-card-title {
        font-size: var(--font-h3-mobile) !important;
        margin-bottom: 20px !important;
    }
}

/* ========================================
   LIST STYLING
   ======================================== */

/* Reset list styles */
.asl-interior-design-wrapper .asl-interior-design-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* List Items */
.asl-interior-design-wrapper .asl-interior-design-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-body);
    font-size: var(--font-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
    color: var(--color-charcoal);
}

/* Mobile List Item Text */
@media (max-width: 768px) {
    .asl-interior-design-wrapper .asl-interior-design-list-item {
        font-size: var(--font-body-mobile);
    }
}

/* ========================================
   CHECKMARK ICON
   ======================================== */

.asl-interior-design-wrapper .asl-interior-design-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Essential Card Icon Color */
.asl-interior-design-wrapper .asl-interior-design-card--essential .asl-interior-design-icon {
    color: var(--color-gold);
}

/* Personalized Card Icon Color */
.asl-interior-design-wrapper .asl-interior-design-card--personalized .asl-interior-design-icon {
    color: var(--color-terracotta);
}

/* ========================================
   CALLOUT BOX (Ideal For)
   ======================================== */

.asl-interior-design-wrapper .asl-interior-design-callout {
    margin-top: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--border-radius-medium);
    border-left: 4px solid var(--color-terracotta);
}

/* Callout Text */
.asl-interior-design-wrapper .asl-interior-design-callout-text {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-charcoal);
    margin: 0;
    font-style: italic;
}

/* Callout Label (strong) */
.asl-interior-design-wrapper .asl-interior-design-callout-text strong {
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    font-style: normal;
}

/* Mobile Callout */
@media (max-width: 768px) {
    .asl-interior-design-wrapper .asl-interior-design-callout {
        margin-top: 20px;
        padding: 16px;
    }
    
    .asl-interior-design-wrapper .asl-interior-design-callout-text {
        font-size: 14px;
    }
}