/**
 * Shared Layout Styles
 * 共享布局样式 - 网格、容器等
 */

/* === Base Styles === */
html { scroll-behavior: smooth; }

/* === Bento Grid === */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.bento-item-large { grid-column: span 8; }
.bento-item-small { grid-column: span 4; }
.bento-item-half { grid-column: span 6; }
.bento-item-third { grid-column: span 4; }

@media (max-width: 1024px) {
    .bento-item-large,
    .bento-item-small,
    .bento-item-half,
    .bento-item-third {
        grid-column: span 12;
    }
}

/* === Feature Grid === */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* === Hardware Carousel === */
.hardware-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hardware-carousel::-webkit-scrollbar {
    display: none;
}

.hardware-slide {
    flex: 0 0 auto;
    width: 400px;
    margin-right: 2rem;
    transition: all 0.4s ease;
}

.hardware-slide:hover {
    transform: scale(1.02);
}

/* === Drag Drop Demo === */
.drag-drop-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem;
}

.drag-item {
    background: #A78BFA;
    border-radius: 8px;
    padding: 1rem;
    color: white;
    text-align: center;
    cursor: move;
    transition: transform 0.2s ease;
}

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

/* === Diagram Container === */
.diagram-container {
    background: #0F172A;
    border-radius: 24px;
    padding: 4px;
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.diagram-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

/* === Platform Visual === */
.platform-visual {
    position: relative;
    overflow: hidden;
}

/* === Tech Pillar === */
.tech-pillar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
}

.tech-pillar:hover {
    transform: translateY(-8px);
    border-color: #00C4CC;
    box-shadow: 0 20px 40px -12px rgba(16, 185, 129, 0.3);
}

.tech-pillar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: #10B981;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tech-pillar:hover::before {
    transform: scaleX(1);
}

/* === News Image Wrapper === */
.news-image-wrapper {
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    height: 200px;
}

.news-image-wrapper img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card:hover .news-image-wrapper img {
    transform: scale(1.05);
}