/* Planetmav Feed Templates — what a list of articles needs on top of the site
   stylesheet, and nothing else.

   Everything structural here is already defined by
   planetmav-review/assets/style.css, which this file is enqueued after and
   depends on: .shell, .header, .page-intro, .eyebrow, .lead, .grid, .card,
   .number, .text-link, .button and the dark palette custom properties. A Feed
   card IS a services card -- it is literally the same .card rule -- so the only
   rules below are the ones a card carrying a thumbnail, a date and a title link
   needs, plus the article body, pagination and search form.

   Written against the custom properties rather than literal colours, so the
   Feed follows the site if the palette is ever retuned. */

/* ------------------------------------------------------------- the list -- */

.pm-feed-list {
	margin-bottom: 8px;
}

/* The card's own rule gives the surface, border, radius and padding. This only
   makes it a column so the "Read the article" link settles at the bottom and
   the cards in a row end level, however long the titles run. */
.pm-feed-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pm-feed-card > :last-child {
	margin-top: auto;
}

.pm-feed-card .number {
	margin-bottom: 0;
	text-transform: uppercase;
}

.pm-feed-card h2 {
	font-size: 22px;
	margin: 0;
	max-width: none;
}

/* The title is the primary link, so it takes the body colour rather than the
   accent -- a card of accent-coloured headings reads as a list of buttons. The
   accent is kept for the explicit "Read the article" link underneath. */
.pm-feed-card h2 a {
	color: var(--ink);
	text-decoration: none;
}

.pm-feed-card h2 a:hover,
.pm-feed-card h2 a:focus-visible {
	color: var(--cyan);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.pm-feed-card p {
	margin: 0;
	font-size: 16px;
	max-width: none;
}

/* Thumbnails are whatever size the author uploaded -- 16:9 screenshots next to
   square logos. A fixed box with object-fit keeps the row of cards aligned,
   the same reasoning as the product-logo chips in portfolio.css. The negative
   margins let the image sit flush with the card edge inside its padding. */
.pm-feed-art {
	display: block;
	margin: -28px -28px 4px;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	background: #0d1829;
}

.pm-feed-art img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

/* --------------------------------------------------------- the article -- */

.pm-post-art {
	margin: 0 0 32px;
}

.pm-post-art img {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--line);
}

/* The measure is set on the body text rather than on the container, because an
   article may contain an Elementor section that is entitled to the full width.
   Constraining the wrapper would crush those; constraining the paragraphs gives
   a readable line length without touching anything else. */
.pm-post-body > p,
.pm-post-body > ul,
.pm-post-body > ol,
.pm-post-body > blockquote,
.pm-post-body > h2,
.pm-post-body > h3,
.pm-post-body > h4 {
	max-width: 70ch;
}

.pm-post-body {
	padding-bottom: 24px;
}

.pm-post-body h2 {
	font-size: 28px;
	margin: 40px 0 16px;
}

.pm-post-body h3 {
	font-size: 22px;
	margin: 32px 0 12px;
}

.pm-post-body p,
.pm-post-body li {
	font-size: 18px;
	line-height: 1.7;
	color: var(--muted);
}

.pm-post-body li {
	margin-bottom: 8px;
}

.pm-post-body img,
.pm-post-body iframe,
.pm-post-body video {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.pm-post-body figure {
	margin: 32px 0;
}

.pm-post-body figcaption {
	font-size: 14px;
	color: var(--muted);
	margin-top: 8px;
}

.pm-post-body blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--cyan);
}

.pm-post-body pre {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 20px;
	overflow-x: auto;
	font-size: 14px;
}

.pm-post-body a {
	color: var(--cyan);
}

/* The tag row under an article. Deliberately quiet: these are navigation, not
   part of the piece, so they sit below the body in the muted colour and only
   pick up the accent on hover. */
.pm-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	max-width: none;
}

.pm-post-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
}

.pm-post-tags a:hover,
.pm-post-tags a:focus-visible {
	color: var(--cyan);
	border-color: var(--cyan);
}

/* ------------------------------------------------- pagination and search -- */

.pm-feed-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--line);
	padding-block: 24px 48px;
	margin-top: 32px;
}

.pm-feed-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 650;
	color: var(--cyan);
}

.pm-feed-search form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
}

.pm-feed-search form > div {
	display: flex;
	gap: 10px;
}

.pm-feed-search label {
	font-size: 14px;
	font-weight: 650;
}

.pm-feed-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 10px 14px;
	font: inherit;
	font-size: 16px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
}

.pm-feed-search input[type="search"]:focus-visible {
	outline: 3px solid var(--cyan);
	outline-offset: 2px;
}

.pm-feed-search .button {
	flex: 0 0 auto;
	border: 0;
}

.pm-feed-recovery p {
	margin-bottom: 12px;
}

/* Defined here rather than relied on: the site stylesheet has no need for it,
   and the card's "Read the article" link needs its title for a screen reader
   without repeating it visually. */
.pm-feed .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 760px) {
	.pm-feed-art {
		margin: -24px -24px 4px;
	}

	.pm-feed-art img {
		height: 170px;
	}

	.pm-post-body p,
	.pm-post-body li {
		font-size: 17px;
	}

	.pm-feed-search form > div {
		flex-direction: column;
	}
}