/* Shared inner-page styles: About, Portfolio, Contact, blog. Tweaked per page later. */

.page-section {
	padding-block: 60px;
}

.page-title {
	font-size: 44px;
	margin-bottom: 24px;
}

.section-title {
	font-size: 50px;
	margin-bottom: 12px;
}

/* --- About --- */

/* Charcoal intro band — same surface language as the Home hero, tucked
   behind the floating header (values from the original post-6.css). */
.about-intro {
	background: var(--color-charcoal);
	margin-top: calc(var(--header-pull) * -1);
	padding-top: calc(60px + var(--header-pull));
}

.about-intro .page-title {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--size-display);
	color: var(--color-white);
}

.about-intro__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.about-intro__text {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-white);
}

.about-intro__text p {
	margin: 0 0 1em;
}

.about-intro__text .jt-btn {
	margin-top: 8px;
}

.about-intro__photo img {
	border-radius: 8px;
	width: 100%;
	height: auto;
}

.about-quirks .section-title {
	text-align: center;
}

.jt-toggles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
	margin-top: 48px;
}

.jt-toggle {
	border-bottom: 0.5px solid var(--color-divider);
	padding: 0 30px 30px 0;
}

.jt-toggle summary {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	text-transform: capitalize;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 28px;
}

.jt-toggle summary::-webkit-details-marker {
	display: none;
}

.jt-toggle summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 0;
	color: var(--color-accent);
	font-size: 20px;
	line-height: 1.2;
}

.jt-toggle[open] summary::after {
	content: "\2212";
}

.jt-toggle__body {
	padding-top: 12px;
	font-family: var(--font-heading);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
}

.jt-toggle__body p {
	margin: 0;
}

/* --- CTA band --- */

.jt-cta {
	background: var(--color-light-section);
	text-align: center;
}

.jt-cta__title {
	font-size: 50px;
	line-height: 1.2;
	margin-bottom: 10px;
}

.jt-cta__sub {
	font-family: var(--font-secondary);
	font-weight: 300;
	font-size: 20px;
	margin: 0 0 24px;
}

/* Page CTA buttons (RESUME excepted — it stays a standard .jt-btn):
   the original's geometry — Raleway 18px/400, 11px radius, 17px padding. */
.jt-btn--cta {
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 18px;
	border-radius: 11px;
	padding: 17px;
}

/* --- Portfolio --- */

.portfolio-hero {
	position: relative;
	background: var(--color-charcoal) url('https://joefertraya.com/wp-content/uploads/2024/01/P7030595-scaled.jpg') center / cover no-repeat;
	color: #fff;
}

/* No color overlay on the photo (removed 2026-07-17 per Joefer) —
   readability comes from the Rentl text-shadow treatment below instead.
   Note from Rentl: the shadow is a perceived-readability fix; WCAG contrast
   math ignores shadows. If copy ever sits over bright photo highlights,
   a localized gradient scrim is the compliant tool. */
.portfolio-hero__inner {
	position: relative;
	padding-block: 90px;
	max-width: 720px;
}

.portfolio-hero__inner h1,
.portfolio-hero__inner p {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.portfolio-hero__inner .jt-social svg,
.portfolio-hero__inner .jt-social img {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

/* "Pyramids" shape dividers — the original Elementor hero's diagonal edge
   cuts (exact SVG path from the plugin, 22px per the original). Filled with
   the page bg token so the cuts match in both light and dark mode. */
.portfolio-hero__divider {
	position: absolute;
	left: 0;
	width: 100%;
	height: 22px;
	display: block;
	z-index: 1;
}

.portfolio-hero__divider path {
	fill: var(--color-bg);
}

.portfolio-hero__divider--top {
	top: -1px;
}

.portfolio-hero__divider--bottom {
	bottom: -1px;
	transform: rotate(180deg);
}

.portfolio-hero__title {
	color: #fff;
	font-size: 52px;
}

.portfolio-hero__social {
	justify-content: center;
	margin-top: 44px;
}

.gallery-section {
	text-align: center;
}

.gallery-section__hint {
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 15px;
	color: var(--color-text);
	opacity: 0.7;
	margin: 0 0 20px;
}

.gallery-section__embed img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* --- Blog --- */

.blog-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
}

/* Post cards — Rentl Digest overlay design: image fills the card, title +
   date on a bottom gradient scrim, category pills top-left. Scrim/white
   text are mode-invariant (they sit on the image); card surface, border,
   and shadow ride the tokens. */
.post-card {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--surface-card);
	border: 1.5px solid var(--color-border);
	border-radius: 10px;
	box-shadow: 0 2px 12px var(--shadow-color);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
	.post-card:hover {
		box-shadow: 0 10px 26px var(--shadow-color);
		transform: translateY(-3px);
	}
}

/* Full-card click target — a real anchor, above the image (z-1), below
   anything that must stay independently clickable (z-2). */
.post-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.post-card__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

@media (hover: hover) {
	.post-card:hover .post-card__image img {
		transform: scale(1.04);
	}
}

.post-card__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-accent);
}

.post-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	z-index: 2;
}

.post-card__badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(15, 15, 15, 0.6);
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.post-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 44px 16px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0));
}

.post-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-white);
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card__meta {
	font-family: var(--font-secondary);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.78);
}

.post-article__inner {
	max-width: 820px;
}

.post-article__inner img,
.post-article__inner video {
	max-width: 100%;
	border-radius: 6px;
}

.post-article__inner video {
	width: 100%;
}

/* --- Responsive --- */

@media (max-width: 900px) {
	.about-intro__grid {
		grid-template-columns: 1fr;
	}

	.jt-toggles {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.jt-cta__title,
	.section-title {
		font-size: 45px;
	}
}

@media (max-width: 767px) {
	.page-section {
		padding-block: 40px;
	}

	.page-title {
		font-size: 34px;
	}

	.about-intro {
		padding-top: calc(40px + var(--header-pull));
	}

	.jt-cta__title,
	.section-title {
		font-size: 28px;
		line-height: 1.1;
	}

	.jt-toggle summary,
	.jt-toggle__body {
		font-size: 14px;
	}

	.portfolio-hero__title {
		font-size: 40px;
	}
}