/* 頁面佈局優化 */

/* 控制容器最大寬度 */
.container {
    width: 100%;
    max-width: 1280px; /* 調整為更合理的最大寬度 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 在較大螢幕上使用更合適的內容寬度 */
@media (min-width: 1536px) {
    .container {
        max-width: 1280px; /* 即使在超寬螢幕上也保持合理寬度 */
    }
}

/* 在中等螢幕上調整內容寬度 */
@media (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
}

/* 調整內容區域的間距 */
section {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 調整表格的最大寬度 */
.overflow-x-auto table {
    max-width: 100%;
}

/* 調整卡片網格的間距 */
.grid {
    gap: 1rem;
}

/* 優化頁腳佈局 */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

/* 調整英雄區域的高度 */
@media (max-width: 768px) {
    .h-\[70vh\] {
        height: 60vh;
    }
}

/* 調整快速訪問區域的位置 */
.py-12.-mt-16 {
    margin-top: -4rem;
}

/* 調整播放器的寬度 */
.fixed.bottom-0.left-0.right-0 {
    max-width: 100%;
}