/*
Theme Name: 双力星 Apetops
Theme URI: https://apetops.com/
Author: Apetops
Description: 双力星官网复刻主题（PHP / WordPress）。完整还原 apetops.com 版式：首页轮播、六大优势、算力服务推荐、硬件产品、算力中心分布、解决方案、公告资讯、合作伙伴，以及 22 个栏目页与资讯/AI学院/硬件产品详情页。后台可视化编辑，无需改代码。
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: apetops
Tags: business, custom-menu, custom-logo, featured-images
*/

/* ==========================================================================
   说明：全站视觉 99% 由原站样式表 assets/static/module/index/apetops/css/main.css
   提供，本文件只放主题自身必需的少量补充样式（后台字段、区块微调、WP 默认类修正）
   ========================================================================== */

/* ---- WordPress 默认类对齐原站视觉 ---- */
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin: 0 auto 20px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: #6b7280; text-align: center; padding-top: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
img { max-width: 100%; height: auto; }

/* ---- 后台可编辑区块的一点保护样式 ---- */
.apetops-block.has-no-title .section-heading { display: none; }

/* ---- 详情页正文里原站用到的排版微调（原站靠内联样式，这里做兜底） ---- */
.news-detail .main-content img,
.main-content img { max-width: 100%; height: auto; }
.main-content table { width: 100%; margin-bottom: 1rem; }
.main-content table td, .main-content table th { border: 1px solid #e5e7eb; padding: 8px 12px; }

/* ---- 博客列表卡片两/三行截断（原站内联写死高度，这里改为自适应更稳） ---- */
.single-blog-article .two-line, .single-blog-article .three-line,
.single-service .three-line { overflow: hidden; }

/* ---- 联系表单在无 JS 时的提示 ---- */
.apetops-form-note { font-size: 13px; color: #6b7280; margin-top: 8px; }

/* ---- 价格卡锚点定位：别被固定导航栏盖住（原站「立即购买」跳转 #item_xxx 用） ---- */
[id^="item_"] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }

/* ---- GPU 计算器（外站 iframe）：原站把容器写死 600×1000，右侧留一大片空白、底部还被切。
        这里让容器和 iframe 都填满内容区宽度，并加高到 1280px 让结果明细完整显示。
        （内联 style / width 属性都需要 !important 覆盖） ---- */
.faq-wrap .card-body > div[style*="width: 600px"] {
	width: 100% !important;
	height: 1280px !important;
	max-width: 100%;
}
.faq-wrap .card-body iframe[src*="app.linpp2009.com"] {
	width: 100% !important;
	height: 1280px !important;
	max-width: 100%;
	border: 0;
	/* 外站那套表单是自己居中的窄栏（跨域改不了它的 CSS），所以在 iframe 层做缩放让内容撑满宽度。
	   缩放值 = 内容区宽 1110 ÷ 期望的内部视口宽 700 ≈ 1.586。
	   关键：外站 768px 以上会切成「左栏工具卡 + 右栏表单」双栏，切点会落在元素中间（上面露出一截被切的东西）；
	   700 < 768 走单栏，切口干净。想更大/更小改这个数值，同时按 top = -332 × zoom 调整上移量。 */
	zoom: 1.586;
	/* 关键：zoom 会把 top 一起缩放，所以「可见的内部起点」正好等于 -top（单位是 iframe 内部像素，不用乘 zoom）。
	   外站单栏布局下计算器卡片从内部 y=332 开始 → top: -332px，切口正好落在卡片顶部，不会有切一半的元素。
	   想调整起点就改这个值（改大=往下多露一点，改小=往上多切一点）。 */
	top: -332px !important;
}
/* 原站用来遮页头的白色遮挡层不再需要，留着反而多一条白带 */
.faq-wrap .card-body > div[style*="width: 600px"] > div[style*="height:99px"],
.faq-wrap .card-body > div[style*="width: 600px"] > div[style*="height: 99px"] {
	height: 0 !important;
}
/* 计算器所在卡片不给左右内边距，尽量把宽度让给 iframe */
.faq-wrap .card-body:has(> div[style*="width: 600px"]) { padding-left: 0; padding-right: 0; }

/* 手机端：宽度不够再放大，改回原始比例；外站窄屏下卡片顶部在 y≈391，据此对齐切口 */
@media (max-width: 767.98px) {
	.faq-wrap .card-body iframe[src*="app.linpp2009.com"] {
		zoom: 1;
		top: -391px !important;
		height: 1500px !important;
	}
}