/*
 * potensic/assets/css/blog.css
 * Blog list page (/category/news/) + article page.
 *
 * 1:1 port of the Shopify Enterprise 1.6.1 stylesheets that the blog templates
 * load on top of main.css:
 *     theme-assets/css/blog.css               (list-page spacing utilities)
 *     theme-assets/css/article.css            (.article-content typography)
 *     theme-assets/css/article-pagination.css (fixed prev/next bar)
 * Source of truth: docs/spec/08-blog.md §3, §4, §7.
 *
 * Everything else the blog markup needs (.card, .card__info, .pagination__*,
 * .social, .social__link, .rte, .scrollable-table, .btn--icon.btn--lg …) already
 * lives in base.css / components.css / utilities.css — do not duplicate it here.
 *
 * Loaded after utilities.css (functions.php orders tokens → base → components →
 * utilities → the rest alphabetically), which is what lets the §"cascade fixes"
 * block below win over the utility classes, exactly as the single-file original
 * main.css did.
 */


/* ==========================================================================
   blog.css — list page spacing utilities
   ========================================================================== */

.-blog-mx-2 {
	margin-right: calc(2 * var(--space-unit) * -1);
	margin-left: calc(2 * var(--space-unit) * -1);
}

.blog-gap-y-12 {
	row-gap: calc(12 * var(--space-unit)); /* 48px */
}

/* 768px exactly: cancels md-down:-mx-gutter, so the featured card stops bleeding
   one pixel before the layout flips to the horizontal variant (spec §3.3). */
@media (min-width: 768px) {
	.featured-card {
		margin-right: 0;
		margin-left: 0;
	}
}

@media (min-width: 769px) {
	.md\:blog-mb-6 { margin-bottom: calc(6 * var(--space-unit)); }
}

@media (min-width: 1024px) {
	.lg\:blog-text-lg { font-size: 1.8rem; }
	.lg\:blog-mb-6 { margin-bottom: calc(6 * var(--space-unit)); }
	.lg\:blog-gap-y-16 { row-gap: calc(16 * var(--space-unit)); }
	.lg\:blog-mb-16 { margin-bottom: calc(16 * var(--space-unit)); }
	.lg\:blog-mt-16 { margin-top: calc(16 * var(--space-unit)); }
}

@media (min-width: 1280px) {
	.featured-card .card.color-scheme .card__info { padding: calc(12 * var(--space-unit)); } /* 48px */
}


/* ==========================================================================
   article.css — article body typography
   ========================================================================== */

.article-content {
	--element-margin-bottom: 2em;   /* 32px */
	--heading-margin-bottom: 1.5em;
}

.article-content p,
.article-content ol,
.article-content ul,
.article-content blockquote,
.article-content img {
	margin-bottom: var(--element-margin-bottom, 2em);
}

/* Overridden for every heading but the first child by the higher-specificity
   `.rte h*:not(:first-child)` rule in base.css → real spacing is .2em. Ported
   verbatim so the cascade result matches the live site (spec §8 note 10). */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
	margin-top: var(--heading-margin-bottom, 1.5em);
}

.article-content img {
	padding-top: calc(2 * var(--space-unit));
	padding-bottom: calc(2 * var(--space-unit));
}

.article-content blockquote {
	padding-top: calc(4 * var(--space-unit));
	font-size: 2rem;
	font-style: italic;
	line-height: 2.4rem;
}

.article-content blockquote p:last-child { margin-bottom: 0; }

.article-content iframe { max-width: 100%; }

.article__image--wider .media {
	width: calc(100% + var(--gutter) * 2);
	max-width: calc(100% + var(--gutter) * 2);
	margin-inline-start: calc(var(--gutter) * -1);
}

@media (max-width: 1023.98px) {
	.article-content,
	.article-width { max-width: 37em; }
}

@media (min-width: 768px) {
	.article-content img { padding-top: calc(4 * var(--space-unit)); }
}

@media (min-width: 1024px) {
	.article-content blockquote { font-size: 2.8rem; line-height: 3.6rem; }
}


/* ==========================================================================
   article-pagination.css — fixed prev / reading-time / next bar
   ========================================================================== */

.article__pagination {
	z-index: 25;
	height: auto;
	transform: translateY(calc(100% + 1px));
	transition: transform 0.5s;
	background-color: rgba(var(--bg-color));
	color: #d5d5d5;
}

.article__pagination::before {
	top: -2px;
	background-color: rgb(var(--link-color));
}

.article__pagination.is-visible { transform: translateY(0); }

.article__pagination--text {
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ==========================================================================
   Cascade fixes
   In the original theme every rule below lived in the single main.css file,
   *after* the utility classes. Splitting the port into components.css +
   utilities.css inverted that order, so they are restated here (blog.css loads
   last) to reproduce the original computed values.
   ========================================================================== */

/* product.css ships an unscoped `.social-share .social__link{width:40px}` for
   the product page and loads after blog.css, so the blog's 44px links (spec
   §1.3: link 44×44, icon 24×24, 16px after "Share:") are restated at higher
   specificity here. */
.article .social-share .social__link,
.cc-main-blog .social-share .social__link {
	width: 44px;
	height: 44px;
}

.article .social-share .social-share__heading,
.cc-main-blog .social-share .social-share__heading {
	margin-inline-end: calc(4 * var(--space-unit));
}

/* .pagination carries both `justify-center` and `justify-between`; ≥1280 the
   component rule has to win so the whole row centres (spec §3.5 / §1.3). */
@media (min-width: 1280px) {
	.pagination {
		justify-content: center;
		width: auto;
		overflow-wrap: normal;
	}

	.pagination__item--arrow { flex: 0; }

	.pagination__arrow {
		margin: 0 calc(2 * var(--space-unit));
		padding: 0 26px;
	}

	.pagination__arrow--prev { margin-inline-end: calc(8 * var(--space-unit)); }
	.pagination__arrow--next { margin-inline-start: calc(8 * var(--space-unit)); }
}


/* ==========================================================================
   WordPress-side glue
   Markup that WordPress emits and Shopify did not — kept to the minimum needed
   to reproduce the original rendering.
   ========================================================================== */

/* Native comment list: the theme ships no .comment styles, the original relied
   on plain <article>/<footer> defaults. Only the list reset is needed. */
.article__comments { list-style: none; }
.article__comments .comment { margin: 0; }
.article__comments .comment__footer { margin: 0; }

/* The empty tag slot on cards without a tag still occupies its bottom margin in
   the original (an empty <div>), but `p:empty{display:none}` does not apply to
   divs so nothing else is required. Kept as documentation. */


/* ==========================================================================
   PageFly article bodies (spec §1.3 "PageFly 区块" table, §4.11)

   Port of the framework CSS PageFly inlines on the six builder articles
   (`.__pf` reset + `pf-r` / `pf-c` grid) plus the instance rules for the hero
   band, the 3-up video rows and the Q&A accordion. The classes are put back
   onto the class-stripped imported markup by potensic_pagefly_markup() in
   potensic-core/includes/blog-extras.php.
   ========================================================================== */

/* The section is full-bleed and sits flush against the footer: on the live
   site the pf section ends at y=4446 and the footer starts at y=4446. */
.cc-pagefly {
	margin: 0;
	padding: 0;
}

.pf-content *,
.pf-content *::before,
.pf-content *::after { box-sizing: border-box; }

.pf-content img,
.pf-content video {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}

/* --- grid ---------------------------------------------------------------- */

.pf-section {
	position: relative;
	padding: 20px 0;
}

.pf-container {
	width: 100%;
	max-width: 1170px;   /* --cw:1170px */
	margin: 0 auto;
	padding: 0 15px;
}

.pf-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;     /* --s-xs:15px */
}

.pf-c {
	display: flex;
	flex: 0 0 100%;
	max-width: 100%;
	padding: 15px;
}

.pf-column {
	position: relative;
	width: 100%;
}

@media (min-width: 767.5px) {
	.pf-c {
		flex-basis: calc(100% / var(--pf-cols, 1));
		max-width: calc(100% / var(--pf-cols, 1));
	}
}

/* --- typography ---------------------------------------------------------- */

.pf-content p {
	margin: 0 0 16px;
	font-size: 1.6rem;
	line-height: 2.4rem;
}

.pf-content p:last-child { margin-bottom: 0; }

.pf-content h1,
.pf-content h2,
.pf-content h3,
.pf-content h4,
.pf-content h5,
.pf-content h6 {
	margin: 0 0 12.5px;
	font-size: 2.5rem;      /* .pf-heading-1-h3 instance size */
	line-height: 1.3;
	font-weight: 700;
	white-space: pre-line;
}

.pf-content a {
	color: rgb(24, 24, 24);
	text-decoration: none;
}

.pf-content a:hover { text-decoration: underline; }

/* --- hero band (.pf-402_) ------------------------------------------------ */

/* The band's own image comes in as `--pf-hero` (set per handle by
   potensic_pf_hero_image()); the paddings are the `.pf-402_` instance values
   from this article's PageFly stylesheet. */
.pf-section--hero {
	margin-bottom: 100px;
	padding: 250px 0 50px;
	background-image: var(--pf-hero, none);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Section > first child is PageFly's overlay layer; the source carried
   `--overlay: rgba(26,26,26,.75)` as an inline style the importer stripped. */
.pf-section--hero > .pf-overlay {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: rgba(26, 26, 26, 0.75);
	pointer-events: none;
}

.pf-section--hero > .pf-container { position: relative; }

.pf-section--hero h1,
.pf-section--hero h2,
.pf-section--hero h3 {
	margin: 24px 0 8px;
	font-size: 5.6rem;
	line-height: 1.5em;
	font-weight: 700;
	color: #fff;
}

.pf-section--hero p {
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.5em;
	font-weight: 600;
	color: #fff;
}

.pf-section--banner .pf-c:first-child { padding-right: 0; }

.pf-section--banner img {
	width: 670px;
	margin-bottom: -100px;
}

/* 5 / 7 split above 1199.5px, 6 / 6 between 767.5 and 1199.5 (--c-lg / --c-sm). */
@media (min-width: 1199.5px) {
	.pf-section--banner > .pf-container > .pf-row > .pf-c:first-child {
		flex-basis: 41.6667%;
		max-width: 41.6667%;
	}

	.pf-section--banner > .pf-container > .pf-row > .pf-c:last-child {
		flex-basis: 58.3333%;
		max-width: 58.3333%;
	}
}

@media (min-width: 767.5px) and (max-width: 1024.4999px) {
	.pf-section--hero {
		margin-bottom: 0;
		padding: 100px 0;
	}
}

@media (max-width: 767.4999px) {
	.pf-section--hero {
		padding: 80px 0 180px;
	}
}

/* --- 16:9 video embeds --------------------------------------------------- */

.pf-video {
	width: 100%;
	max-width: 100%;
}

.pf-ratio {
	position: relative;
	padding-bottom: 56.25%;
}

.pf-ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- tables (.pf-table-default) ------------------------------------------ */

/* The importer collapses PageFly's Table wrapper on some articles, so the
   look is attached to the table itself and the wrapper only adds the scroll. */
.pf-table {
	overflow-x: auto;
	padding: 10px;
	font-weight: 400;
}

.pf-content table {
	width: 100%;
	border: 1px solid rgba(34, 36, 38, 0.15);
	border-spacing: 0;
	font-weight: 400;
}

.pf-content th,
.pf-content td {
	min-width: 50px;
	padding: 10px 15px;
	text-align: inherit;
}

.pf-content th {
	background: #f9fafb;
	font-weight: 700;
}

.pf-content td { border-top: 1px solid rgba(34, 36, 38, 0.1); }

.pf-content th span,
.pf-content td span { display: inline-block; }

/* --- Q&A accordion (.pf-461_) -------------------------------------------- */

/* The heading above an accordion is the section title, 39px on the live site. */
.pf-column--accordion > h1,
.pf-column--accordion > h2,
.pf-column--accordion > h3 {
	margin-bottom: 19.5px;
	font-size: 3.9rem;
	line-height: 1.3;
	text-align: start;
}

.pf-accordion-panel { margin-top: 32px; }

.pf-accordion-item:first-child .pf-accordion-panel { margin-top: 0; }

.pf-accordion-header {
	position: relative;
	display: block;
	padding: 15px 40px 15px 15px;
	border: 0;
	border-bottom: 1px solid rgba(74, 144, 226, 0.36);
	border-radius: 10px;
	background: rgba(74, 144, 226, 0.36);
	color: #000;
	font-size: 1.6rem;
	line-height: normal;
	font-weight: 600;
	text-align: start;
	word-wrap: break-word;
	cursor: pointer;
	list-style: none;
}

.pf-accordion-header::-webkit-details-marker { display: none; }
.pf-accordion-header::marker { content: ""; }

.pf-accordion-arrow {
	position: absolute;
	top: 50%;
	right: 15px;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.2s;
}

.pf-accordion-panel[open] > .pf-accordion-header .pf-accordion-arrow {
	transform: translateY(-60%) rotate(135deg);
}

.pf-accordion-content {
	padding: 15px;
	background-color: #f5f5f5;
}

@media (max-width: 767.4999px) {
	.pf-accordion-header { font-size: 1.4rem; }
}