/**
 * responsive.css — 维衡律师 WordPress 主题
 *
 * 职责边界：
 *   main.css 内部已包含 1024 / 768 / 480 三档「降级」规则（栅格降列、sticky 取消、
 *   时间轴改单侧、hero 纵排等）。本文件只做三件事：
 *     1. 超大屏（≥1440 / ≥1600 / ≥1920）的「放大与放宽」，避免内容在大屏上显得空散；
 *     2. 「宽屏 → 导航折叠」的切换点（≤1080 隐藏主导航、显示汉堡），
 *        以及顶部信息条、语言切换等次级元素的可见性阶梯；
 *     3. 极窄屏（≤360）与横屏低矮屏（max-height:520px）的兜底。
 *
 * 因此本文件不重复 main.css 的降级逻辑，只覆盖它没有覆盖的区间。
 *
 * @package Zaishangyanfa
 * @since   1.0.0
 */

/* ==========================================================================
   00. 超大屏抬升 —— 容器与栅格
   ========================================================================== */

/*
 * 1440 起：容器上限逐步放宽。
 * main.css 中 .ys-cont1200/1360/1600 使用固定 max-width，
 * 大屏上两侧留白过多，这里按档位递进。
 */
@media (min-width: 1440px) {
	:root {
		--cont1200: 1240px;
		--cont1360: 1360px;
		--cont1600: 1520px;
		--gutter: 48px;
	}

	/* 首页业务领域轨道：卡片列宽随屏加宽，避免单屏露出过多半张卡 */
	.wh-track__rail {
		grid-auto-columns: minmax(320px, 372px);
	}

	/* 律师网格：四列在 1440 下每列约 310px，略微放宽卡片间距 */
	.wh-team__grid {
		gap: var(--space24) var(--space32);
	}
}

@media (min-width: 1600px) {
	:root {
		--cont1200: 1320px;
		--cont1360: 1440px;
		--cont1600: 1640px;
		--gutter: 56px;
		/* 大屏上头部略有呼吸感，但不影响已写死的 80px 导航行高计算 */
		--space160: 180px;
		--space150: 168px;
		--space130: 144px;
		--space120: 132px;
		--space110: 120px;
	}

	/* 字阶在大屏上抬 4%–8%，中文衬线在大字号下更耐看 */
	:root {
		--font70: 76px;
		--font60: 66px;
		--font46: 50px;
		--font36: 40px;
		--font30: 32px;
	}

	/* 知识/研究卡片：三列在 1600 下过于宽松，改四列 */
	.wh-research__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space24) var(--space32);
	}

	/* 新闻列表在超宽屏下补一张「首条特稿」的视觉重量 */
	.wh-list__grid--news {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.wh-list__grid--news > .wh-ncard--feature,
	.wh-list__grid--news > .wh-ncard--hero {
		grid-column: span 2;
	}

	/* 首页服务网络点位标签在大屏上默认展开（鼠标悬停探索在超大屏不直观） */
	.wh-global__pin-label {
		opacity: 1;
		visibility: visible;
	}
}

@media (min-width: 1920px) {
	:root {
		--cont1600: 1760px;
		--space120: 150px;
		--space110: 136px;
	}

	/* 4K/宽屏下内容区两侧加重底色分割，避免整屏一片白 */
	.wh-practices,
	.wh-news,
	.wh-awards {
		padding-inline: clamp(24px, 3vw, 64px);
	}

	.wh-team__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   01. 导航折叠切换点 —— ≤1080
   ========================================================================== */

/*
 * main.css 在 ≤1024 隐藏 .ys-nav 并显示 .ys-burger，但 1024–1080 之间
 * 中文导航 + 语言切换 + 搜索常会挤行。这里把切换点前移到 1080，
 * 保证 1000–1100 区间（iPad Pro 横屏、小笔记本缩放）不换行、不抖动。
 */
@media (max-width: 1080px) {
	.ys-nav {
		display: none;
	}

	.ys-header__tools .ys-search-btn {
		display: inline-flex;
	}

	.ys-burger {
		display: inline-flex;
	}

	/* 抽屉内的导航需要显式接管，避免被上面的 display:none 波及 */
	.ys-drawer .ys-nav,
	.ys-drawer__nav .ys-nav {
		display: block;
	}

	/* 顶部信息条在窄屏只保留电话，其余链接折叠 */
	.ys-topbar__links {
		display: none;
	}

	.ys-topbar__inner {
		justify-content: space-between;
	}
}

@media (min-width: 1081px) {
	/* 宽屏下抽屉与汉堡必须完全退出，防止与主导航重叠 */
	.ys-drawer,
	.ys-drawer.is-open {
		display: none !important;
	}

	.ys-burger {
		display: none;
	}
}

/* ==========================================================================
   02. 头部与顶部信息条 —— 逐级压缩
   ========================================================================== */

/* 1280 以下：语言切换收为图标/短文本，导航字号微收 */
@media (max-width: 1280px) {
	.ys-header__logo {
		max-height: calc(var(--head) - 34px);
	}

	.ys-nav__item > a {
		padding-inline: 14px;
	}

	.ys-lang {
		padding-inline: 10px;
	}

	.ys-lang__item {
		font-size: 12px;
	}
}

/* 900 以下：顶部信息条整体收起（信息在页脚与联系方式页仍有） */
@media (max-width: 900px) {
	.ys-topbar {
		display: none;
	}

	/* admin-bar 的偏移量需随 topbar 一起变化，这里同步主站的头高 */
	body.admin-bar .ys-header {
		top: 46px;
	}

	.ys-header.is-scrolled .ys-header__inner,
	.ys-header__inner {
		height: 68px;
	}

	:root {
		--head: 68px;
	}

	.ys-nav__item > a {
		height: 68px;
	}
}

/* ==========================================================================
   03. 移动端细节 —— 容器、横幅、横向轨道
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--gutter: 20px;
		--head: 64px;
	}

	.ys-header__inner {
		height: 64px;
	}

	/* 横幅图：PC 版在窄屏改为裁切居中，避免主体偏左被切掉 */
	.ys-banner__img--pc {
		object-position: center;
	}

	/* 首页 hero 在移动端缩短，先看到业务领域 */
	.wh-hero {
		min-height: clamp(460px, 68vh, 620px);
	}

	/* 卡片轨道：单卡宽度改为「屏宽 - 两侧露边」，形成明确的滑动暗示 */
	.wh-track__rail {
		grid-auto-columns: minmax(232px, 74vw);
		padding-inline: var(--gutter);
	}

	/* 分页条在移动端换行居中 */
	.ys-page__cell,
	.ys-page__nums {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* 详情页侧栏在移动端上移到正文之前太突兀，保持在后并由 main.css 取消 sticky */
	.wh-detail__side,
	.wh-sidebar {
		margin-top: var(--space40);
	}

	/* 表单栅格单列后，输入框加大点击高度 */
	.wh-field-group input,
	.wh-field-group select {
		height: 50px;
	}

	/* 回到顶部按钮右下角留出安全区 */
	.ys-totop {
		right: 16px;
		bottom: 20px;
		width: 44px;
		height: 44px;
	}

	/* 全屏搜索的输入行在移动端改为纵向 */
	.ys-search__row {
		flex-wrap: wrap;
		gap: var(--space12);
	}

	.ys-search__submit {
		width: 100%;
		height: 46px;
		border-radius: var(--radius-pill);
	}

	.ys-search__box {
		padding-top: clamp(72px, 14vh, 120px);
	}
}

@media (max-width: 480px) {
	:root {
		--gutter: 16px;
		--font46: 30px;
		--font36: 26px;
		--font30: 24px;
		--font26: 21px;
		--font22: 19px;
	}

	/* 按钮在极窄屏接近全宽，保证拇指热区 */
	.wh-form__submit .ys-btn,
	.wh-404__actions .ys-btn,
	.wh-about__join .ys-btn {
		width: 100%;
		justify-content: center;
	}

	.ys-header__tools {
		gap: 6px;
	}

	.ys-search-btn,
	.ys-burger {
		width: 36px;
		height: 36px;
	}

	/* 语言切换在极窄屏仅保留当前语种 */
	.ys-lang__item:not(.is-active) {
		display: none;
	}

	.ys-lang {
		border-color: transparent;
		padding-inline: 4px;
	}

	/* 律师详情左栏 tab 改为可横向滑动 */
	.wh-ld__tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.wh-ld__tabs::-webkit-scrollbar {
		display: none;
	}

	.wh-ld__tab {
		white-space: nowrap;
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   04. 极窄屏 —— ≤360（小屏安卓 / 分屏一半）
   ========================================================================== */

@media (max-width: 360px) {
	:root {
		--gutter: 14px;
	}

	.ys-logo__cn {
		font-size: 22px;
		letter-spacing: 0.14em;
	}

	/* 文本 Logo（无图片时）：站名为长句，极窄屏再收一档，避免顶掉汉堡按钮 */
	.wh-logo__cn {
		max-width: 200px;
		font-size: 15px;
		letter-spacing: 0.02em;
	}

	.wh-logo__en {
		font-size: 8px;
		letter-spacing: 0.12em;
	}

	.ys-logo__en {
		letter-spacing: 0.14em;
	}

	.wh-track__rail {
		grid-auto-columns: minmax(216px, 78vw);
	}

	/* 表格横向滚动兜底：极窄屏降低最小宽度 */
	.wh-table-wrap table {
		min-width: 440px;
	}
}

/* ==========================================================================
   05. 横屏低矮视口 —— max-height 520
   ========================================================================== */

/*
 * 手机横屏、笔记本分屏时，垂直空间极度紧张：
 * hero 不可再用 vh 撑高，sticky 侧栏会完全遮住内容。
 */
@media (max-height: 520px) and (orientation: landscape) {
	.wh-hero,
	.ys-banner--lg {
		min-height: 340px;
	}

	.wh-lawyer-hero,
	.wh-lb {
		padding-block: var(--space40);
	}

	.wh-detail__side,
	.wh-sidebar,
	.wh-pd__aside,
	.wh-ld__tabs {
		position: static;
	}

	.wh-team__sticky {
		position: static;
	}

	.ys-drawer__panel {
		width: min(70vw, 420px);
	}

	.ys-search__box {
		padding-top: 48px;
	}
}

/* ==========================================================================
   06. 触屏设备 —— 悬停态替代
   ========================================================================== */

/*
 * 触屏没有 hover，main.css 中依赖 hover 才能看到的内容需要主动显示：
 * 地图点位标签、荣誉 logo 的彩色态、卡片箭头。
 */
@media (hover: none) and (pointer: coarse) {
	/* 地图点位标签默认可见（否则触屏永远看不到分所名） */
	.wh-global__pin-label {
		opacity: 1;
		visibility: visible;
	}

	/* 荣誉 logo 保持彩色，弱化「必须悬停才亮」的信息门槛 */
	.wh-awards__logo img {
		filter: none;
		opacity: 0.9;
	}

	/* 卡片箭头常驻，作为「可点击」的明确指示 */
	.wh-pcard__arrow,
	.wh-ncard__arrow,
	.wh-more {
		opacity: 1;
	}

	/* 轨道拖拽提示文字在触屏无意义，隐藏 */
	.wh-track__hint {
		display: none;
	}

	/* 触屏点击需要更大的热区 */
	.wh-pcard,
	.wh-ncard__link,
	.wh-lcard,
	.wh-branch-item > a {
		-webkit-tap-highlight-color: transparent;
	}
}

/* ==========================================================================
   07. 打印 —— 覆盖 main.css 的分页属性
   ========================================================================== */

@media print {
	:root {
		--colormain: #8a6840;
	}

	/* 打印时容器无上限，按纸张宽度 */
	.ys-cont1200,
	.ys-cont1360,
	.ys-cont1600 {
		max-width: none;
		width: 100%;
	}

	.wh-prose h2,
	.wh-prose h3 {
		break-after: avoid;
		page-break-after: avoid;
	}

	.wh-prose img,
	.wh-prose table,
	.wh-prose blockquote {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* 打印时链接展开 URL */
	.wh-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
		color: #555;
	}
}

/* ==========================================================================
   08. 可访问性 —— 减少动态偏好下的大屏兜底
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wh-global__pin i::after {
		animation: none;
	}

	.wh-track {
		scroll-snap-type: none;
	}
}

/* ==========================================================================
   09. 高对比度模式
   ========================================================================== */

@media (forced-colors: active) {
	.ys-btn,
	.wh-pcard__arrow,
	.ys-search__submit {
		border: 1px solid CanvasText;
	}

	.wh-anchor__list a.is-active,
	.ys-page__cell a.is-active {
		outline: 2px solid Highlight;
	}
}