/*
 Theme Name: GeneratePress Child
 Template: generatepress
 Version: 1.0.0
 Description: TopGiga IT child theme
*/

/* === Logo === */
.site-logo img, .custom-logo { max-height: 90px; width: auto; }
.wp-custom-logo .main-title, .wp-custom-logo .site-description { display: none; }

/* === 產品 Grid === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 32px 0;
}

.product-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.product-card .icon {
    font-size: 2em;
    margin-bottom: 8px;
    display: block;
}

.product-card .card-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

.product-section-title {
    font-size: 1.4em;
    font-weight: 700;
    margin: 40px 0 16px;
    padding-bottom: 8px;
    border-bottom: 3px solid #0073aa;
    color: #222;
}

/* === Hero === */
.hero-section {
    position: relative;
    margin: -20px -20px 0;
    line-height: 0;
}

.hero-bg {
    width: 100%;
    height: auto;
    display: block;
}

.hero-left {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    z-index: 1;
    width: 36%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
}

.hero-section h1 {
    font-size: 2.6em;
    font-weight: 800;
    line-height: 1.2;
    color: #111;
    margin-bottom: 16px;
}

.hero-section .hero-subtitle {
    font-size: 1.05em;
    color: #333;
    margin-bottom: 32px;
    line-height: 1.6;
}

.hero-cta-wrap {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-cta {
    display: inline-block;
    background: #1565c0;
    color: #fff;
    padding: 13px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
}

.hero-cta:hover {
    background: #0d47a1;
    color: #fff;
}

.hero-cta.outline {
    background: transparent;
    color: #1565c0;
    border: 2px solid #1565c0;
}

.hero-cta.outline:hover {
    background: rgba(21,101,192,0.08);
    color: #1565c0;
}

/* === RWD === */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    .hero-section { margin: 0; }
    .hero-left {
        position: static;
        transform: none;
        width: 100%;
        padding: 28px 20px;
        background: #f0f6ff;
    }
    .hero-section h1 { font-size: 1.6em; }
    .hero-cta { padding: 10px 20px; font-size: 0.9em; }
}