/* =========================================================
   文件：assets/css/pages.css
   作用：
   1. 定义各页面的专属布局样式
   2. 在 common.css 与 components.css 基础上完成页面拼装
   3. 负责首页、地区列表页、地区详情页、关于页的页面级表现

   说明：
   - 本文件只写“页面布局与页面专属区块”
   - 不重复定义通用组件基础样式
   - 若某段样式多个页面都复用，应优先下沉到 components.css
   ========================================================= */


/* =========================================================
   一、首页（index.html）
   页面目标：
   - 让访问者第一眼看出这是一个真实摄影内容网站
   - 展示平台定位、热门地区、精选图片、平台说明
   ========================================================= */

/* 首页首屏 section 外边距控制
   说明：
   - 顶部导航已经占据一定视觉空间
   - 首屏与导航之间留出舒适间距，避免拥挤 */
.home-hero-section {
    padding-top: var(--space-8);
}

/* 首页 Hero 内部内容区域最大宽度控制 */
.home-hero .hero__content {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 首页 Hero 底部补充说明区 */
.home-hero__meta {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* 首页 Hero 中的小型信息块 */
.home-hero__meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--space-4);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(229, 231, 235, 0.9);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* 首页热门地区区 */
.home-regions-section {
    padding-top: var(--space-16);
}

/* 首页热门地区网格
   说明：
   - 首页展示数量不宜过多
   - 采用 3 列布局更像正式官网 */
.home-regions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 首页精选图片区 */
.home-featured-section {
    padding-top: var(--space-12);
}

/* 首页精选图片网格
   说明：
   - 采用 3 列，展示 9~12 张时视觉较稳定 */
.home-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 首页平台说明区整体 */
.home-intro-section {
    padding-top: var(--space-12);
}

/* 首页说明区双列布局
   左侧：平台说明
   右侧：平台特点 */
.home-intro-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-8);
    align-items: start;
}

/* 首页说明主面板 */
.home-intro-panel {
    height: 100%;
}

/* 首页说明段落最后一行去掉额外下边距 */
.home-intro-panel p:last-child {
    margin-bottom: 0;
}

/* 首页特色列表区域微调 */
.home-feature-list {
    height: 100%;
}

/* 首页底部补充提示区
   可用于说明“当前为官网展示站点”等 */
.home-notice-panel {
    margin-top: var(--space-8);
}


/* =========================================================
   二、地区列表页（regions.html）
   页面目标：
   - 展示所有地区分类
   - 让网站看起来有明确栏目结构，而不是单页站
   ========================================================= */

/* 地区列表页头部区 */
.regions-page-header {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
}

/* 地区列表页标题区最大宽度 */
.regions-page-header__content {
    max-width: 760px;
}

/* 地区列表页说明文字 */
.regions-page-header__description {
    margin-bottom: 0;
    color: var(--color-text-secondary);
}

/* 地区列表页统计信息行 */
.regions-page-header__meta {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* 地区列表页统计胶囊 */
.regions-page-header__meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 var(--space-4);
    border-radius: 999px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* 地区列表页主体区 */
.regions-page-section {
    padding-top: var(--space-6);
}

/* 地区列表页网格 */
.regions-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 地区列表页底部说明区 */
.regions-page-footer-note {
    margin-top: var(--space-10);
}


/* =========================================================
   三、地区详情页（region-detail.html）
   页面目标：
   - 展示某一个地区的整体说明、横幅、统计信息、代表地点、图片列表
   - 形成“首页 -> 地区 -> 图片”的真实产品路径
   ========================================================= */

/* 地区详情页顶部区域 */
.region-detail-top-section {
    padding-top: var(--space-8);
}

/* 地区详情页 Hero
   说明：
   - 与首页 Hero 共用组件，但详情页更偏内容页 */
.region-detail-hero .hero__content {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 地区详情页 Hero 附加标签区 */
.region-detail-hero__tags {
    margin-top: var(--space-6);
}

/* 地区详情页统计区 */
.region-detail-stats-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* 地区详情页简介 + 地点布局 */
.region-detail-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: var(--space-8);
    align-items: start;
}

/* 地区简介面板 */
.region-detail-summary-panel {
    height: 100%;
}

/* 地区简介正文最后一段清理下边距 */
.region-detail-summary-panel p:last-child {
    margin-bottom: 0;
}

/* 代表地点面板 */
.region-detail-locations-panel {
    height: 100%;
}

/* 代表地点列表 */
.region-detail-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* 单个代表地点项 */
.region-detail-location-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--space-4);
    border-radius: 999px;
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* 地区详情页图片区 */
.region-detail-photos-section {
    padding-top: var(--space-12);
}

/* 地区详情页图片网格 */
.region-detail-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 地区详情页底部导航区
   可用于返回地区列表、跳转其他地区 */
.region-detail-bottom-nav {
    margin-top: var(--space-10);
}

/* 地区详情页底部面板布局 */
.region-detail-bottom-nav__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

/* 地区详情页底部说明 */
.region-detail-bottom-nav__text {
    margin: 0;
    color: var(--color-text-secondary);
}

/* 地区详情页推荐跳转链接组 */
.region-detail-bottom-nav__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}


/* =========================================================
   四、关于页（about.html）
   页面目标：
   - 展示平台简介、服务说明、联系方式、备案信息
   - 满足备案审核对网站基础信息公示的预期
   ========================================================= */

/* 关于页顶部区域 */
.about-page-header {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
}

/* 关于页标题说明最大宽度 */
.about-page-header__content {
    max-width: 820px;
}

/* 关于页正文区 */
.about-page-main-section {
    padding-top: var(--space-6);
}

/* 关于页主体布局
   左侧：平台介绍与服务说明
   右侧：联系方式与备案信息 */
.about-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: var(--space-8);
    align-items: start;
}

/* 关于页左列内容栈 */
.about-page-main-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* 关于页右列内容栈 */
.about-page-side-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* 关于页平台介绍面板 */
.about-intro-panel {
    min-height: 100%;
}

/* 关于页服务说明列表 */
.about-service-list {
    display: grid;
    gap: var(--space-4);
}

/* 关于页单项服务块 */
.about-service-list__item {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-secondary);
}

/* 服务项标题 */
.about-service-list__title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-base);
}

/* 服务项说明 */
.about-service-list__description {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* 关于页联系方式面板中的强调链接 */
.about-contact-link {
    font-weight: 600;
}

/* 关于页备案提示说明 */
.about-record-note {
    margin-top: var(--space-4);
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* 关于页底部补充说明区 */
.about-page-bottom-note {
    margin-top: var(--space-10);
}


/* =========================================================
   五、图片详情页预留（photo-detail.html）
   说明：
   - 当前你还未正式开始写该页面
   - 但这里先预留样式，后续扩展时可直接使用
   ========================================================= */

/* 图片详情页顶部区 */
.photo-detail-top-section {
    padding-top: var(--space-8);
}

/* 图片详情页主体布局
   左侧大图，右侧说明 */
.photo-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: var(--space-8);
    align-items: start;
}

/* 图片详情页大图面板 */
.photo-detail-media-panel {
    overflow: hidden;
}

/* 图片详情页大图 */
.photo-detail-media {
    aspect-ratio: 4 / 3;
    background-color: var(--color-surface-secondary);
}

.photo-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片详情页信息区 */
.photo-detail-info-panel {
    position: sticky;
    top: 96px;
}

/* 图片详情页标题 */
.photo-detail-title {
    margin-bottom: var(--space-3);
}

/* 图片详情页地点 */
.photo-detail-location {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* 图片详情页描述 */
.photo-detail-description {
    margin-bottom: var(--space-5);
}

/* 图片详情页标签区 */
.photo-detail-tags {
    margin-bottom: var(--space-5);
}

/* 图片详情页相关推荐区 */
.photo-detail-related-section {
    padding-top: var(--space-12);
}

.photo-detail-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}


/* =========================================================
   六、页面级通用辅助区块
   作用：
   - 某些布局只在页面级使用，不适合放在 components.css
   ========================================================= */

/* 双栏内容布局 */
.page-two-column-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: var(--space-8);
    align-items: start;
}

/* 页面补充说明文字 */
.page-note-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* 页面顶部与面包屑之间的紧凑间距 */
.page-breadcrumb-compact {
    margin-bottom: var(--space-4);
}


/* =========================================================
   七、响应式适配：页面级
   作用：
   - 保证四类页面在平板和手机端不会明显错乱
   ========================================================= */

/* 中等屏幕：平板或窄桌面 */
@media (max-width: 1024px) {

    .home-regions-grid,
    .home-featured-grid,
    .regions-page-grid,
    .region-detail-photos-grid,
    .photo-detail-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-intro-layout,
    .region-detail-summary-layout,
    .about-page-layout,
    .photo-detail-layout,
    .page-two-column-layout {
        grid-template-columns: 1fr;
    }

    .photo-detail-info-panel {
        position: static;
    }
}

/* 小屏幕：手机与窄窗口 */
@media (max-width: 768px) {

    .home-hero-section,
    .regions-page-header,
    .region-detail-top-section,
    .about-page-header,
    .photo-detail-top-section {
        padding-top: var(--space-6);
    }

    .home-hero .hero__content,
    .region-detail-hero .hero__content {
        min-height: auto;
    }

    .home-regions-grid,
    .home-featured-grid,
    .regions-page-grid,
    .region-detail-photos-grid,
    .photo-detail-related-grid {
        grid-template-columns: 1fr;
    }

    .region-detail-bottom-nav__panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .region-detail-bottom-nav__actions {
        width: 100%;
    }
}

/* 超小屏 */
@media (max-width: 480px) {

    .home-hero__meta,
    .regions-page-header__meta {
        gap: var(--space-2);
    }

    .home-hero__meta-item,
    .regions-page-header__meta-item {
        width: 100%;
        justify-content: center;
    }
}