/*
 * Tablet + zoomed-desktop layer — loaded with media="(min-width: 700px)", after
 * style.css / page-sections.css / section-rhythm.css (see inc/responsive-tablet.php).
 *
 * Who lands here besides a 1920px desktop:
 *   - Windows display scaling 125 % / 150 % (or browser zoom): 1536px, 1280px, 1093px
 *   - iPad landscape 1024-1366px, iPad portrait 744-1024px
 * The site was drawn at 1920px; older rules shrink things in jumps (1520, 1250, 1150,
 * 1000, 860px). This file smooths that out:
 *   1. one page gutter that shrinks continuously instead of 10 % -> 5 % -> 2.5 %
 *   2. headings and long-text sizes that scale with the screen (identical at 1920px)
 *   3. a one-line header on every tablet
 *   4. component fixes for the 700-1023px range (iPad portrait)
 */

/* ---------------------------------------------------------------------------
   1. Page gutter
   1400px max like before; below ~1550px the gutter is 5 % of the screen,
   never less than 24px. Used to be 10 % at 1536px, then 5 % at 1519px,
   then 2.5 % at 999px (text almost touching the edge on iPad portrait).
   --------------------------------------------------------------------------- */
.content,
section.aboutus div.textcontainer,
.home section.slider .swiper,
section.topservice,
section.tabscontainer div.tabs,
div.tabs section.tabactive {
	width: min(1400px, calc(100% - 2 * max(24px, 5vw)));
}

/* A .content nested in another .content must not lose the gutter twice. */
.content .content {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   2. Typography that follows the screen width
   Every clamp() reaches the old fixed value at 1920px, so the full-size desktop
   is unchanged; at 1024px it is ~80 % of it instead of the old abrupt drops.
   --------------------------------------------------------------------------- */
section.hero h1 {
	font-size: clamp(1.8rem, 1.15rem + 1.2vw, 2.6rem);
}

section.hero h1 span {
	font-size: clamp(1.3rem, 0.97rem + 0.5vw, 1.6rem);
}

.home section.hero p,
.page section.hero p,
.archive section.hero p,
.blog section.hero p,
.search section.hero p {
	font-size: clamp(0.95rem, 0.8rem + 0.2vw, 1.05rem);
	line-height: 1.9;
	letter-spacing: 0.5px;
}

.page-template-default div.description h2,
div.head h2,
div.heading h2 {
	font-size: clamp(1.75rem, 1.15rem + 1vw, 2.3rem);
}

/* Long-text blocks next to the astronaut illustrations (blue dots / yellow stars):
   20.8px at 1920px, ~17px at 1024px — they used to stay at 20.8px down to 1250px,
   which made them bigger than the hero text on a zoomed screen. */
.content_description p,
.content_description li {
	font-size: clamp(1.05rem, 0.8rem + 0.43vw, 1.3rem);
	line-height: 1.9;
}

/* Keep the bullet centred on the first line whatever the font size. */
.bluedote li:before,
#main div.description ul li:before {
	top: calc((1.9em - 0.8rem) / 2);
}

.yellow_star li:before {
	top: calc((1.9em - 1.2rem) / 2);
}

/* ---------------------------------------------------------------------------
   Pricing cards (home, /pricing/, service pages)
   A feature that wraps onto two lines used to take 2 x 64px with the second
   line floating far below ("…为上 / 线测试标准").
   --------------------------------------------------------------------------- */
ul.pricelist>li ul li {
	line-height: 1.5;
	min-height: 4rem;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

ul.pricelist>li ul li:before,
ul.pricelist>li ul li:after {
	top: 50%;
	transform: translateY(-50%);
}

/* Blog cards: the 2-line title clamp showed a sliver of a third line
   (min-height 60px > 2 lines). Two cards on the home page sit centred. */
article.post h3,
article.post h2 {
	line-height: 1.4;
	min-height: 2.8em;
	max-height: 2.8em;
}

.home section.article > section,
.page-template-template-services section.article:has(> article.post),
.page-template-template-about section.article section:has(> article.post) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1.3%;
}

.home section.article article.post,
.page-template-template-services section.article article.post,
.page-template-template-about section.article article.post {
	margin-right: 0;
}

/* Footer links / contact lines: same 35px rhythm on one line, but a line that
   wraps (address, e-mail) no longer gets 35px between its own two lines. */
footer ul ul li {
	line-height: 1.6;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

/* Home hero illustration: 130 % of its column pushed the rocket to the screen edge
   on zoomed laptops and iPad landscape. */
@media (max-width: 1365px) {
	.home section.hero div.col3 img {
		width: 120%;
		margin-left: -4rem;
	}
}

/* Titles break into balanced lines instead of leaving one character alone
   ("广州协同电子科技有限公 / 司", "WooCommerce商 / 城"). */
section h1,
section h2,
section h3,
section.topservice ul li strong {
	text-wrap: balance;
}

/* Pricing grids (home, /pricing/, service pages): style.css switched to 2 cards
   per row below 1150px, leaving the third plan alone on a second row. Keep the
   3 plans side by side down to 700px with a more compact card. */
@media (max-width: 1150px) {
	ul.pricelist {
		justify-content: space-between;
	}

	ul.pricelist>li {
		width: 32.4%;
		margin: 0;
	}

	ul.pricelist h3 {
		font-size: 1rem;
	}

	ul.pricelist p.price {
		font-size: 1.6rem;
	}

	ul.pricelist button {
		width: 88%;
		padding: 0.6rem 0;
		font-size: 0.95rem;
	}

	ul.pricelist>li ul {
		width: 92%;
		margin: 1.4rem auto;
	}

	ul.pricelist>li ul li {
		font-size: 0.85rem;
		line-height: 1.45;
		min-height: 3.2rem;
		padding: 0.6rem 1.5rem 0.6rem 2.2rem;
		text-wrap: pretty;
	}

	ul.pricelist>li ul li:before {
		width: 1.6rem;
		height: 1.6rem;
	}

	ul.pricelist>li ul li:after {
		width: 1.1rem;
		height: 1.1rem;
	}

	ul.pricelist>li ul li span {
		margin-left: 6px;
		padding: 0 8px;
		font-size: 12px;
		line-height: 22px;
	}
}

@media (max-width: 899px) {
	ul.pricelist>li ul li {
		font-size: 0.8rem;
		padding: 0.55rem 1.3rem 0.55rem 1.9rem;
	}

	ul.pricelist>li ul li:before {
		width: 1.35rem;
		height: 1.35rem;
	}

	ul.pricelist p.price {
		font-size: 1.4rem;
	}
}

/* ---------------------------------------------------------------------------
   Heroes of /services/, /about/ and /pricing/
   The 42rem band keeps 7-8rem at its bottom for the white block that the home
   and the service pages pull up into it. Nothing overlaps on these three
   pages, so that room stayed an empty dark strip under the buttons. The band
   now follows its content: 35rem at 1920px (the visible part of a service
   hero), less on zoomed screens where the illustration is smaller.
   No media query on purpose: below 1024px the page-hero rules further down
   (same specificity, later in the file) take over.
   --------------------------------------------------------------------------- */
body.page-template-template-archive-services section.hero,
body.page-template-template-about section.hero,
body.page-template-template-pricing section.hero {
	height: auto;
	padding-top: 0; /* section.about adds 2rem on the /about/ and /pricing/ heroes */
}

body.page-template-template-archive-services section.hero > .content,
body.page-template-template-about section.hero > .content,
body.page-template-template-pricing section.hero > .content {
	display: flex;
	height: auto;
	min-height: min(35rem, 30vw);
}

body.page-template-template-archive-services section.hero div.col3,
body.page-template-template-about section.hero div.col3,
body.page-template-template-pricing section.hero div.col3 {
	height: auto;
	float: none;
	padding: 2.5rem 0 3rem;
}

/* ---------------------------------------------------------------------------
   3 + 4. iPad portrait and small zoomed laptops (700-1023px)
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {

	/* Header: one line. The phone number is in the footer and behind 联系我们. */
	header nav ul li.phone {
		display: none;
	}

	header a,
	header li {
		font-size: 15px;
	}

	header nav ul li {
		margin-right: 1.15rem;
	}

	/* style.css turned 联系我们 into a bare headset icon below 860px. */
	header button,
	header button:hover {
		text-indent: 0;
		width: auto;
		height: auto;
		overflow: visible;
		padding: 5px 14px;
		border: 1px solid #fff;
		font-size: 14px;
	}

	header button {
		background: #191f2b;
	}

	header button:hover {
		background: #fff;
	}

	/* Drop-downs: one column so the second one stays on screen. */
	nav .menu-item-has-children>.sub-menu {
		width: 240px;
		grid-template-columns: 1fr;
	}

	/* Home hero: the 130 % illustration pushed the rocket past the right edge. */
	.home section.hero div.col3 img {
		width: 115%;
		margin-left: -3rem;
	}

	/* Home "不仅仅是外贸建站": the 240px super-hero ran over both text columns. */
	section.slider .minihero {
		width: 10rem;
		flex-shrink: 0;
		transform: none;
	}

	section.slider .miniflexbox {
		padding-left: 1.5rem;
		padding-top: 6rem;
	}

	section.slider .miniflexbox:last-child {
		padding: 6rem 1.5rem 0 0;
	}

	/* Home services grid, second row: Google SEO (20 %) was too narrow for its text. */
	section.services ul {
		height: 480px;
	}

	section.services ul li:nth-child(6),
	section.services ul li:nth-child(8) {
		width: 34%;
	}

	section.services ul li:nth-child(7) {
		flex: 1;
	}

	section.services ul li div {
		padding: 2rem 1rem;
	}

	/* MG: drop the small side illustration, the cell then reads like the others. */
	section.services ul li:nth-child(6) a>div:first-child>div:last-child {
		display: none;
	}

	section.services ul li:nth-child(6) a>div:first-child>div:first-child {
		width: 100%;
		padding: 0;
	}

	/* Google Partner: title + badge centred; the sentence did not fit in 230px. */
	section.services ul li:nth-child(8) a>div.flex {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 2rem 1rem;
	}

	section.services ul li:nth-child(8) .google_customer {
		padding: 0;
		height: auto;
	}

	section.services ul li:nth-child(8) .google_customer strong {
		text-align: center;
	}

	section.services ul li:nth-child(8) .google_customer p {
		display: none;
	}

	/* Home "why choose us" strip: icon above the text instead of eating a third of
	   each 200px column. */
	section.why_choose_us>div {
		padding: 2.2rem 1.5rem;
	}

	section.why_choose_us>div>ul li {
		padding: 4rem 1rem 0;
	}

	section.why_choose_us>div>ul li:before {
		top: 0;
		left: 1rem;
		width: 2.8rem;
		height: 2.8rem;
	}

	section.why_choose_us>div>ul li p {
		font-size: 0.95rem;
		line-height: 1.8;
	}

	/* About band: the flying astronaut crossed the paragraph on narrow screens. */
	section.aboutus #superatro {
		display: none;
	}

	/* Footer: give the contact column room, keep the mascot off the copyright line. */
	footer div.content>div {
		padding: 0;
	}

	footer div.content>div>ul>li {
		width: 31%;
	}

	footer div.content>div>ul>li:last-child {
		width: 38%;
	}

	footer div.content>div>ul>li:last-child img {
		width: 6rem;
		right: 0;
	}

	footer div.content>div.head img {
		left: 0;
	}

	/* Blog list cards: author line on one line, no clipped second line. */
	section.article article div.author p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Blog post: the 26 % sidebar was ~190px wide (one word per line). Article full
	   width, related posts underneath on two columns. */
	.single article#main,
	.single section.sidebar {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.single section.sidebar div.widget div.lasted {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
	}

	/* The sidebar CTA image is drawn for a 300px column; keep it that size. */
	.single section.sidebar .contact {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Page heroes: fixed 42rem band with the text centred in a 32rem column left
	   ~250px of empty dark band under the buttons. Height follows the content.
	   (Blog / archive / search heroes keep their own layout with the search box.) */
	body.page section.hero {
		height: auto;
	}

	body.page section.hero > .content {
		display: flex;
		align-items: center;
	}

	body.page section.hero div.col3 {
		height: auto;
		float: none;
		padding: 4.5rem 0 5rem;
	}

	/* Service pages: the white feature strip is pulled 112px up into the band. */
	body.page-template-template-services section.hero div.col3 {
		padding-bottom: 10rem;
	}

	/* Home: the services grid is pulled 8rem (128px) up into the band. */
	body.home section.hero div.col3 {
		padding-bottom: 11rem;
	}

	/* Dark tab panel (网站内容分析 / 外贸建站神器): box sized to its text, mascot
	   smaller and kept on the box corner. */
	div.tabs section.tabactive {
		height: auto;
		padding: 3rem 0 6rem;
	}

	section.tabactive div.tabs__section {
		padding: 0 2rem;
	}

	section.tabactive div.tabs__section section.tabs {
		min-height: 0;
		padding: 2rem 2rem 5rem;
	}

	div.tabs__section div.mascot {
		width: 10rem;
		height: 10rem;
		right: 2rem;
		bottom: -3rem;
	}

	/* Blog cards (home, service, about pages): fixed 34rem card with a 17rem text
	   box left a blank bottom and cut titles. Height follows the content now. */
	.home section.article article.post,
	.page-template-default section.article article.post,
	.page-template-template-about section.article article.post,
	.page-template-template-services section.article article.post {
		height: auto;
		display: flex;
		flex-direction: column;
	}

	section.article article.post div.featureimg,
	.home section.article article.post div.featureimg,
	.page-template-default section.article article.post div.featureimg,
	.page-template-template-about section.article article.post div.featureimg,
	.page-template-template-services section.article article.post div.featureimg,
	section.article article.post:hover div.featureimg,
	.home section.article article.post:hover div.featureimg,
	.page-template-default section.article article.post:hover div.featureimg,
	.page-template-template-about section.article article.post:hover div.featureimg,
	.page-template-template-services section.article article.post:hover div.featureimg {
		height: auto;
		aspect-ratio: 16 / 11;
		flex-shrink: 0;
	}

	section.article article.post div.excerpt {
		height: auto;
		flex: 1;
		padding: 1rem 1.2rem 1.4rem;
	}

	article.post h3,
	article.post h2 {
		font-size: 1.1rem;
		margin-bottom: 0.6rem;
	}

	section.article article.post p.excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Blog card "了解更多" pill: on desktop it slides up into the card's empty
	   bottom on hover. Cards have no empty bottom here (auto height), so it slid
	   over the excerpt. The whole card is the link (footer.js), the pill stays hidden. */
	section.article article.post:hover a {
		bottom: -5rem;
	}
}

/* iPad portrait and narrow zoomed windows: the 50/50 hero left ~350px for the
   text, so the two buttons stacked; the 4-column feature strip squeezed each
   title onto two lines ("关键词与 / 网站结构"). */
@media (max-width: 899px) {
	body.page section.hero div.col3:first-child {
		width: 56%;
	}

	body.page section.hero div.col3:last-child {
		width: 44%;
	}

	section.hero .actions button,
	section.hero .actions a {
		padding: 0 2.6rem 0 1.6rem;
		font-size: 1rem;
	}

	section.hero .actions .headbutton {
		padding: 0 1.6rem;
	}

	section.hero .actions button::before {
		right: 1rem;
	}

	section.topservice ul {
		height: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 1.8rem;
	}

	section.topservice ul li {
		width: auto;
		float: none;
	}

	section.topservice ul li p {
		padding: 0.3rem 1.5rem;
	}
}