/**
 * Feature Cards Block Styles
 * 
 * Styles for the VH: Feature Cards block in both editor and frontend
 */

/* Editor specific styles */
.card-settings h3 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
}

.card-settings hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px dashed #ddd;
}

/* Feature Cards Layout */
.vh-feature-cards,
.vh-feature-cards-editor {
    width: 100%;
    color: var(--feature-cards-text-color, #F2EEE5);
    margin-top: var(--margin-top-mobile, 0);
    margin-bottom: var(--margin-bottom-mobile, 0);
}

@media (min-width: 768px) {
    .vh-feature-cards,
    .vh-feature-cards-editor {
        margin-top: var(--margin-top-desktop, 0);
        margin-bottom: var(--margin-bottom-desktop, 0);
    }
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Reset default block margins on grid items */
.feature-cards-grid > .wp-block-vision-hall-feature-card-item {
    margin: 0;
}

/* Feature Card Item */
.feature-card-item {
    border: 1px solid var(--border-color, #FFFFFF1F);
    padding: 28px;
    background: transparent;
    transition: background-color 0.3s ease;
}

.feature-card-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.feature-cards-grid .feature-card-item {
    opacity: 0;
    visibility: hidden;
}

/* Overline */
.card-overline {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--feature-cards-text-color, #F2EEE5);
}

/* Title */
.card-title {
    font-family: 'Panama', serif;
    font-size: 30px;
    line-height: 0.9;
    margin: 0 0 40px 0;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--feature-cards-text-color, #F2EEE5);
}

/* Content */
.card-content {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--feature-cards-text-color, #F2EEE5);
}

.card-content p {
    margin: 0 0 20px 0;
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--feature-cards-text-color, #F2EEE5) !important;
}

.card-content p:last-child {
    margin-bottom: 0;
}

.card-content ul,
.card-content ol {
    margin: 0;
    padding-left: 20px;
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--feature-cards-text-color, #F2EEE5) !important;
}

.card-content li {
    margin: 0 0 8px 0;
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--feature-cards-text-color, #F2EEE5) !important;
}

/* Tablet breakpoint - 2 columns */
@media (min-width: 768px) {
    .feature-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop breakpoint - 3 columns with 3-3-2 pattern */
@media (min-width: 960px) {
    .feature-cards-grid {
        /* 6-column grid so we can make a 3-col layout (span 2) and
           a last row with 2 equal columns (span 3 + span 3) */
        grid-template-columns: repeat(6, 1fr);
    }
    
    .card-title {
        font-size: 44px;
    }
    
    /* Default: 3 columns (each item spans 2 of 6) */
    .feature-cards-grid > .wp-block-vision-hall-feature-card-item {
        grid-column: span 2;
    }

    /* Last row: 2 columns 50/50 (last two items span 3 of 6 each) */
    .feature-cards-grid > .wp-block-vision-hall-feature-card-item:nth-last-child(-n+2) {
        grid-column: span 3;
    }
}

/* Editor specific adjustments */
.vh-feature-cards-editor {
    margin: 20px 0;
}

.vh-feature-cards-editor .feature-card-item {
    min-height: 200px;
}

.vh-feature-cards-editor .card-content {
    margin-top: 20px;
}

/* Ensure InnerBlocks in editor have proper styling */
.vh-feature-cards-editor .card-content .block-editor-block-list__layout {
    margin: 0;
}

.vh-feature-cards-editor .card-content .wp-block {
    max-width: none;
    margin: 0;
}