/**
 * AF Commerce — posts, pages and comments.
 *
 * A store still needs a readable journal: lookbooks, care guides and buying
 * advice are what earn the links that shop pages cannot.
 */

/* -------------------------------------------------------------------------
 * Listings
 * ---------------------------------------------------------------------- */

.af-posts {
	display: grid;
	gap: var(--af-space-xl);
}

@media (min-width: 782px) {
	.af-posts--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The list layout keeps one column but puts the image beside the text. */
	.af-posts--list .af-entry-card {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		gap: var(--af-space-lg);
		align-items: center;
	}
}

.af-entry-card {
	display: flex;
	flex-direction: column;
	gap: var(--af-space-sm);
	min-width: 0;
}

.af-entry-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--af-space-sm);
	min-width: 0;
}

.af-entry-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--af-radius-image);
	background: var(--af-surface);
}

.af-entry-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.af-entry-card__media:hover .af-entry-card__image {
	transform: scale(1.03);
}

.af-entry-card__meta,
.af-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-sm);
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
}

.af-entry-card__categories a,
.af-entry__categories a {
	color: var(--af-accent);
	text-decoration: none;
}

.af-entry-card__title {
	margin: 0;
	font-size: var(--af-fs-h5);
	line-height: 1.3;
}

.af-entry-card__title a {
	color: inherit;
	text-decoration: none;
}

.af-entry-card__title a:hover {
	color: var(--af-accent);
}

.af-entry-card__excerpt {
	margin: 0;
	color: var(--af-secondary);
	font-size: var(--af-fs-small);
}

.af-entry-card__more {
	align-self: flex-start;
	color: var(--af-primary);
	font-size: var(--af-fs-small);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Single entry
 * ---------------------------------------------------------------------- */

.af-entry {
	max-width: 100%;
}

.af-entry__header {
	max-width: 72ch;
	margin-bottom: var(--af-space-lg);
}

.af-entry__title {
	margin: 0 0 var(--af-space-sm);
	font-size: var(--af-fs-h1);
}

.af-entry__thumbnail {
	margin-bottom: var(--af-space-xl);
}

.af-entry__thumbnail img {
	width: 100%;
	border-radius: var(--af-radius-image);
}

/*
 * Measure is capped for prose only. Wide and full-width blocks opt out below,
 * which is what makes Gutenberg alignment work inside a constrained column.
 */
.af-entry-content {
	max-width: 72ch;
}

.af-entry-content > * {
	margin-block: 0 var(--af-space-md);
}

.af-entry-content > h2 {
	margin-block-start: var(--af-space-xl);
}

.af-entry-content > h3,
.af-entry-content > h4 {
	margin-block-start: var(--af-space-lg);
}

.af-entry-content ul,
.af-entry-content ol {
	padding-inline-start: var(--af-space-lg);
}

.af-entry-content li + li {
	margin-top: 6px;
}

.af-entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--af-space-lg);
	border-inline-start: 3px solid var(--af-accent);
	color: var(--af-heading);
	font-size: var(--af-fs-h5);
	font-style: italic;
}

.af-entry-content figure {
	margin-inline: 0;
}

.af-entry-content figcaption,
.wp-element-caption {
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
	text-align: center;
}

.af-entry-content pre {
	padding: var(--af-space-md);
	border-radius: var(--af-radius-sm);
	background: var(--af-surface);
	overflow-x: auto;
	font-size: var(--af-fs-small);
}

.af-entry-content code {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--af-surface);
	font-size: 0.9em;
}

.af-entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--af-fs-small);
}

.af-entry-content th,
.af-entry-content td {
	padding: 10px;
	border: 1px solid var(--af-border);
	text-align: start;
}

.af-entry-content .alignwide,
.af-entry-content .alignfull {
	max-width: none;
}

.af-entry-content .alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.af-entry-content .alignwide {
	width: min(var(--af-container), 100vw - (var(--af-container-gutter) * 2));
	margin-inline: calc(50% - min(var(--af-container), 100vw - (var(--af-container-gutter) * 2)) / 2);
}

.af-entry-content .alignleft {
	float: inline-start;
	margin: 0 var(--af-space-md) var(--af-space-md) 0;
}

.af-entry-content .alignright {
	float: inline-end;
	margin: 0 0 var(--af-space-md) var(--af-space-md);
}

.af-entry__pages {
	margin-top: var(--af-space-lg);
	font-size: var(--af-fs-small);
}

.af-entry__footer {
	margin-top: var(--af-space-xl);
	padding-top: var(--af-space-lg);
	border-top: 1px solid var(--af-border);
}

.af-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-space-xs);
	font-size: var(--af-fs-caption);
}

.af-entry__tags a {
	display: inline-flex;
	padding: 4px 10px;
	border: 1px solid var(--af-border);
	border-radius: 999px;
	color: var(--af-secondary);
	text-decoration: none;
}

.af-entry__tags a:hover {
	border-color: var(--af-primary);
	color: var(--af-primary);
}

/* -------------------------------------------------------------------------
 * Post navigation and comments
 * ---------------------------------------------------------------------- */

.post-navigation {
	display: grid;
	gap: var(--af-space-md);
	margin-block: var(--af-space-xl);
	padding-block: var(--af-space-lg);
	border-block: 1px solid var(--af-border);
}

@media (min-width: 600px) {
	.post-navigation .nav-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--af-space-lg);
	}

	.post-navigation .nav-next {
		text-align: end;
	}
}

.post-navigation a {
	color: var(--af-heading);
	font-weight: 600;
	text-decoration: none;
}

.af-comments {
	margin-top: var(--af-space-xxl);
	max-width: 72ch;
}

.af-comments__title,
.comment-reply-title {
	font-size: var(--af-fs-h4);
}

.af-comments__list,
.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-comments__closed,
.af-comment-form__notes {
	color: var(--af-muted);
	font-size: var(--af-fs-caption);
}

.comment-list .children {
	margin-inline-start: var(--af-space-lg);
	padding-inline-start: var(--af-space-md);
	border-inline-start: 1px solid var(--af-border);
	list-style: none;
}

.comment-body {
	padding-block: var(--af-space-md);
	border-bottom: 1px solid var(--af-border);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--af-space-sm);
	margin-bottom: var(--af-space-sm);
	font-size: var(--af-fs-caption);
}

.comment-author .avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.comment-author .fn {
	color: var(--af-heading);
	font-style: normal;
	font-weight: 600;
}

.comment-metadata,
.comment-metadata a {
	color: var(--af-muted);
	text-decoration: none;
}

.comment-respond {
	margin-top: var(--af-space-xl);
}

.comment-form {
	display: grid;
	gap: var(--af-space-md);
}

.comment-form p {
	margin: 0;
	display: grid;
	gap: 4px;
}

.comment-form label {
	font-size: var(--af-fs-caption);
	font-weight: 600;
}

.comment-form-cookies-consent {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: var(--af-fs-caption);
}

.comment-form .submit {
	justify-self: start;
	min-height: var(--af-tap-target);
	padding: var(--af-button-py) var(--af-button-px);
	border: 0;
	border-radius: var(--af-radius-button);
	background: var(--af-button-bg);
	color: var(--af-button-color);
	font-family: var(--af-font-button);
	font-weight: var(--af-button-weight);
}

/* -------------------------------------------------------------------------
 * Sidebar widgets
 * ---------------------------------------------------------------------- */

.af-sidebar .widget,
.af-widget-area .widget {
	margin-bottom: var(--af-space-xl);
}

.af-sidebar .widget-title,
.af-sidebar .wp-block-heading {
	margin: 0 0 var(--af-space-md);
	font-size: var(--af-fs-caption);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.af-sidebar ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--af-fs-small);
}

.af-sidebar a {
	color: var(--af-secondary);
	text-decoration: none;
}

.af-sidebar a:hover {
	color: var(--af-primary);
}

/* -------------------------------------------------------------------------
 * Block patterns
 *
 * The patterns are built from core blocks and inherit almost everything from
 * theme.json. These rules only cover the few theme classes the patterns add.
 * ---------------------------------------------------------------------- */

.af-pattern {
	margin-block: var(--af-section-gap);
}

.af-pattern__media img {
	width: 100%;
	border-radius: var(--af-radius-image);
}

.af-tile {
	overflow: hidden;
	border-radius: var(--af-radius-image);
}

.af-tile .wp-block-heading {
	margin: 0;
}

.af-link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--af-primary);
	font-size: var(--af-fs-small);
	font-weight: 600;
	text-decoration: none;
}

.af-link-more:hover {
	color: var(--af-accent);
}

.af-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--af-fs-small);
}

.af-table th,
.af-table td {
	padding: var(--af-space-xs) var(--af-space-sm);
	border: 1px solid var(--af-border);
	text-align: start;
}

.af-table thead th {
	background: var(--af-surface);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 404
 *
 * A dead end is a recovery page: search first, then the routes back into the
 * catalogue.
 * ---------------------------------------------------------------------- */

.af-404 {
	padding-block: var(--af-space-xxl);
}

.af-404__intro {
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}

.af-404__code {
	margin: 0;
	color: var(--af-border);
	font-family: var(--af-font-heading);
	font-size: clamp(64px, 14vw, 140px);
	font-weight: 700;
	line-height: 1;
}

.af-404__title {
	margin: 0 0 var(--af-space-sm);
	font-size: var(--af-fs-h2);
}

.af-404__text {
	margin: 0 0 var(--af-space-lg);
	color: var(--af-secondary);
}

.af-404__intro .af-search__field,
.af-404__intro .search-form {
	max-width: 460px;
	margin-inline: auto;
}

.af-404__section {
	margin-block-start: var(--af-space-xxl);
}