/* ========================================================================
   西班牙语首页  响应式样式
   ------------------------------------------------------------------------
   对应页面: 西班牙语首页.html
   发布地址: https://yht.nanjing.gov.cn/xbyyym/index.html
   ------------------------------------------------------------------------
   设计要点:
   1. 桌面 (≥1200px) 保持 1300px 居中
   2. 平板 (768~1199px) 字号/间距微调,容器仍居中
   3. 手机 (≤767px) 单列堆叠,底部三栏竖排
   4. 小屏 (≤480px) 进一步压缩字号和内边距
   5. 关键布局用 flex 替代原 float,避免清浮动麻烦
   ======================================================================== */


/* ===== 1. 基础重置(Reset) ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;          /* padding 不撑破容器宽度,所有尺寸计算都基于 border */
}

/* 图片通用规则: 最大不超过父容器宽度,等比缩放,块级显示(去除行内元素底部 4px 间隙) */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ===== 2. 顶部红色条 ===== */

.top {
    width: 100%;
    height: 30px;
    background: #c60b1e;             /* 烈士陵园主题红 */
}


/* ===== 3. 内容/底部统一容器 ===== */

/* 替代原内联 style="width: 1300px;margin: 0 auto;"
   max-width 让窄屏自动收缩, padding 给文字留呼吸空间 */
.xbyy-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
}


/* ===== 4. 标题 (h1) ===== */

h1 {
    color: #ffc400;                 /* 烈士陵园主题金 */
    text-align: center;
    padding: 30px 0;
    font-size: 28px;                /* 桌面字号,以下断点逐步缩小 */
}


/* ===== 5. 文章内容区 (.xbyy) ===== */

.xbyy {
    border-bottom: 2px solid #ffc400;   /* 黄色分割线,符合红色主题 */
    font-size: 16px;
    margin-top: 30px;
    padding-bottom: 20px;
}

/* 第一篇文章去掉上方间距(避免与标题间隔过大) */
.xbyy:nth-child(1) {
    margin-top: 0 !important;
}

/* 最后一篇去掉分割线(视觉收尾) */
.xbyy:last-child {
    border-bottom: 0;
}

/* 段落: 1.875 倍行高 + 两端对齐,西班牙语长单词时表现良好 */
.xbyy p {
    line-height: 30px;
    text-align: justify;
}


/* ===== 6. 底部三栏 ===== */

/* 外层 footer: 整条红色背景 + 上下内边距 */
.footer {
    width: 100%;
    background: #c60b1e;
    margin-top: 20px;
    padding: 20px 16px;
}

/* 内层: 横向 flex + 自动换行 + 等间距
   替换原 .footer > div > div { float: left; width: 33% } 老式布局 */
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}

/* 单个栏目:
   flex: 1 1 280px  →  基础宽 280px,可伸缩
   min-width: 0     →  解决 flex 子项默认 min-width:auto 不收缩问题(西语长单词必须) */
.footer-item {
    flex: 1 1 280px;
    min-width: 0;
    color: #ffc400;
    text-align: center;
}

/* 栏目标题(地址/联系方式/开放时间) */
.footer-item span {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
}

/* 栏目正文 */
.footer-item p {
    padding: 0 8px;
}


/* ========================================================================
   7. 响应式断点
   ------------------------------------------------------------------------
   断点选择理由:
   - 1199px: 常见桌面/平板分界(13寸笔记本窗口缩到 1200 左右)
   - 767px:  平板/手机分界(iPad mini 竖屏 768,iPhone 12/13/14 标准 390)
   - 480px:  小屏(iPhone SE 375,老旧安卓)
   ======================================================================== */


/* ----- 平板及以下(≤1199px): 容器不变,字号微调 ----- */
@media (max-width: 1199px) {
    h1 {
        font-size: 24px;
        padding: 24px 0;
    }
    .xbyy {
        font-size: 15px;
        margin-top: 24px;
    }
}


/* ----- 手机(≤767px): 容器内边距压缩,字号进一步缩小,底部三栏竖排 ----- */
@media (max-width: 767px) {
    .xbyy-container {
        padding: 0 12px;            /* 缩窄边距,留更多内容空间 */
    }
    h1 {
        font-size: 20px;
        padding: 20px 0;
        line-height: 1.4;            /* 西语长标题换行时更紧凑 */
    }
    .xbyy {
        font-size: 15px;
        margin-top: 20px;
        padding-bottom: 16px;
    }
    .xbyy p {
        line-height: 1.8;            /* 行高从 30px 相对值改为 1.8 倍,跟字号联动 */
    }
    .footer {
        padding: 16px 12px;
        margin-top: 16px;
    }
    /* 关键: 手机上三栏改为竖向堆叠,每栏占满整行 */
    .footer-inner {
        flex-direction: column;
        gap: 14px;
    }
    .footer-item {
        flex: 1 1 auto;
        width: 100%;
    }
    .footer-item span {
        font-size: 18px;
        padding: 6px 0;
    }
    .footer-item p {
        font-size: 13px;
        line-height: 1.6;
    }
}


/* ----- 小屏(≤480px): 极致压缩,避免文字溢出 ----- */
@media (max-width: 480px) {
    .xbyy-container {
        padding: 0 10px;
    }
    h1 {
        font-size: 18px;
        padding: 16px 0;
    }
    .xbyy {
        font-size: 14px;
    }
    .xbyy p {
        line-height: 1.7;
    }
}