/**
 * =============================================================================
 * MULTISITE POSTS BLOCK — STYLESHEET (style.css)
 * =============================================================================
 *
 * This file contains all styling for the Multisite Posts Aggregator block.
 * It is enqueued on both the public frontend AND in the Gutenberg block editor
 * (because block.json declares it under "style" rather than "editorStyle").
 * Additional editor-only overrides appear at the bottom of this file inside
 * .editor-styles-wrapper selectors.
 *
 * LAYOUT SYSTEM OVERVIEW:
 * The block supports three fundamentally different layout modes:
 *
 *   CARD layouts (card-one-column through card-four-column)
 *     → Vertical cards: image on top, title + excerpt text below.
 *       Grid columns are set by the layout class on the wrapper div.
 *
 *   LIST layout (list)
 *     → Horizontal rows: a fixed-width thumbnail floated left, title +
 *       excerpt on the right. Single-column only.
 *
 *   GRID layouts (grid-one-column through grid-four-column)
 *     → Square cards with the title overlaid as centered text directly on
 *       the image, behind a semi-transparent dark overlay. No excerpt or
 *       date is shown. Grid columns are set by the layout class.
 *
 * RESPONSIVE BREAKPOINTS:
 *   ≥ 1025px  — Full desktop columns as configured
 *   1024px    — 3-column and 4-column layouts collapse to 2 columns
 *    600px    — All multi-column layouts collapse to 1 column
 *    767px    — List layout reverts to vertical (image on top)
 *
 * CSS CUSTOM PROPERTIES (DESIGN TOKENS):
 * Colors, shadows, radii, and transitions are defined as variables at :root
 * so they can be changed in one place if the design language evolves.
 */

/* Design variables removed — using direct styling values. */

/* =============================================================================
   BASE WRAPPER & OUTER CONTAINER
   =============================================================================
   .wp-block-pc-php-blocks-post-aggregator is added by WordPress automatically
   based on the block name (pc-php-blocks/post-aggregator →
   wp-block-pc-php-blocks-post-aggregator). It is the outermost element in the
   rendered HTML.

   .pc-php-post-block-posts-container is our own class added by render.php. Setting
   flex-direction: column on it stacks the post grid and the "Load More"
   button vertically.
*/
.wp-block-pc-php-blocks-post-aggregator {
	font-family: "GT America", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: block;
	box-sizing: border-box;
	margin: 6ex 0 ;
}

.pc-php-post-block-posts-container {
	width: 100%;
	display: flex;
	/* Column direction stacks the grid above the pagination button */
	flex-direction: column;
}

/* =============================================================================
   CSS GRID CONTAINER
   =============================================================================
   .pc-php-post-block-posts-grid is the direct parent of all post card <article>
   elements. It uses CSS Grid rather than flexbox so column widths are
   governed by grid-template-columns declarations in the layout sections below.
   The gap provides consistent gutters between cards both horizontally and
   vertically.
*/
.pc-php-post-block-posts-grid {
	display: grid;
	gap: 28px;
	width: 100%;
}

/* =============================================================================
   COLUMN CONFIGURATIONS
   =============================================================================
   Each of the nine layout variants (list + four card variants + four grid
   variants) maps to a specific grid-template-columns value. CSS selects the
   right column count by combining the layout class on the wrapper div
   (.layout-card-three-column, etc.) with the grid class (.pc-php-post-block-posts-grid).

   The "layout-one-column" / "layout-two-column" selectors without a prefix
   exist as legacy fallbacks in case older saved block instances don't have the
   "card-" prefix.
*/

/* Single column — full width, stacked vertically */
.layout-one-column .pc-php-post-block-posts-grid,
.layout-card-one-column .pc-php-post-block-posts-grid,
.layout-grid-one-column .pc-php-post-block-posts-grid {
	grid-template-columns: 1fr;
}

/* Two equal columns */
.layout-two-column .pc-php-post-block-posts-grid,
.layout-card-two-column .pc-php-post-block-posts-grid,
.layout-grid-two-column .pc-php-post-block-posts-grid {
	grid-template-columns: repeat(2, 1fr);
}

/* Three equal columns */
.layout-three-column .pc-php-post-block-posts-grid,
.layout-card-three-column .pc-php-post-block-posts-grid,
.layout-grid-three-column .pc-php-post-block-posts-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* Four equal columns */
.layout-four-column .pc-php-post-block-posts-grid,
.layout-card-four-column .pc-php-post-block-posts-grid,
.layout-grid-four-column .pc-php-post-block-posts-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* ── TABLET BREAKPOINT (≤ 1024px) ───────────────────────────────────────────
   On tablets, 3-column and 4-column layouts collapse to 2 columns to prevent
   cards from becoming too narrow to read. The gap is also slightly reduced.
*/
@media (max-width: 1024px) {
	.layout-three-column .pc-php-post-block-posts-grid,
	.layout-four-column .pc-php-post-block-posts-grid,
	.layout-card-three-column .pc-php-post-block-posts-grid,
	.layout-card-four-column .pc-php-post-block-posts-grid,
	.layout-grid-three-column .pc-php-post-block-posts-grid,
	.layout-grid-four-column .pc-php-post-block-posts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

/* ── MOBILE BREAKPOINT (≤ 600px) ────────────────────────────────────────────
   On phones, ALL multi-column layouts (2, 3, and 4 columns) collapse to a
   single column so cards are full-width and the text is readable.
*/
@media (max-width: 600px) {
	.layout-two-column .pc-php-post-block-posts-grid,
	.layout-three-column .pc-php-post-block-posts-grid,
	.layout-four-column .pc-php-post-block-posts-grid,
	.layout-card-two-column .pc-php-post-block-posts-grid,
	.layout-card-three-column .pc-php-post-block-posts-grid,
	.layout-card-four-column .pc-php-post-block-posts-grid,
	.layout-grid-two-column .pc-php-post-block-posts-grid,
	.layout-grid-three-column .pc-php-post-block-posts-grid,
	.layout-grid-four-column .pc-php-post-block-posts-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   BASE CARD STYLES
   =============================================================================
   .pc-php-post-block-post-card is the <article> element for every post in every layout
   variant. These base styles define the card's surface appearance (background,
   border, shadow, radius) and its flex column layout (so the content area can
   flex-grow to fill the card height, aligning the bottoms of cards in the
   same row).

   .pc-php-post-block-post-card-inner is a full-height inner wrapper. Separating the
   "outer card shape" from the "inner content layout" makes it easier to
   switch the inner layout direction between row (list) and column (cards/grid)
   without disrupting the outer card chrome.
*/
.pc-php-post-block-post-card {
	background: #f9f9f9;
	border: 1px solid hsl(220, 15%, 90%);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	/* Smooth all visual properties together so hover transitions feel cohesive */
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	flex-direction: column;
	/* relative allows absolutely-positioned children (badge, overlay) to work */
	position: relative;
}

.pc-php-post-block-post-card-inner {
	display: flex;
	flex-direction: column;
	/* height: 100% + flex-grow: 1 ensures the inner wrapper expands to fill
	   the card's full height, even in a multi-row grid where some cards are
	   shorter than others in their row. */
	height: 100%;
	flex-grow: 1;
	width: 100%;
	box-sizing: border-box;
}

/* =============================================================================
   IMAGE CONTAINER, LINK, IMAGE, AND PLACEHOLDER
   =============================================================================
   The image container uses the "padding-top percentage trick" to enforce an
   aspect ratio without JavaScript. Setting padding-top to 56.25% (= 9/16)
   makes the element's height equal to 56.25% of its own width — a 16:9 ratio.
   The actual <img> is positioned absolutely to fill the container.

   When no featured image exists, .pc-php-post-block-post-img-placeholder provides a
   subtle gradient background so the card doesn't have an empty white gap.
*/
.pc-php-post-block-post-image-container {
	position : relative ;
	width : 100% ;
	/* 16:9 aspect ratio */
	aspect-ratio : 16 / 9 ;
	background-color : hsl(220, 15%, 90%) ;
	overflow : hidden ;
	/* flex-shrink: 0 prevents the image container from collapsing in a flex
	   column when the text content below it is very long. */
	flex-shrink : 0 ;
}

/* The image link is stretched to cover the full container using absolute
   positioning. Clicking anywhere on the image navigates to the post. */
.pc-php-post-block-post-image-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* The <img> itself fills the link area. object-fit: cover crops the image to
   fill the space without distorting it, like CSS background-size: cover. */
.pc-php-post-block-post-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Transition included so the zoom-on-hover effect below is smooth */
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Gradient placeholder shown when a post has no featured image */
.pc-php-post-block-post-img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, hsl(220, 20%, 94%) 0%, hsl(220, 15%, 88%) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Absolute positioning fills the padding-top container */
	position: absolute;
	top: 0;
	left: 0;
}

/* Optional icon inside the placeholder (not currently rendered in PHP/JS but
   the CSS is in place if an icon element is added in the future) */
.pc-php-post-block-post-img-placeholder .pc-php-post-block-post-placeholder-icon {
	font-size: 32px;
	opacity: 0.6;
	transform: scale(1);
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =============================================================================
   BADGE (Optional label overlay on image)
   =============================================================================
   The badge sits in the top-left corner of the image and is used to label
   posts with their source site name or category. It uses backdrop-filter for
   a frosted-glass effect. The badge is not currently rendered in the PHP/JS
   but the styles are defined and ready for future use.
*/
.pc-php-post-block-post-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 0, 0, 0.7);
	/* Frosted glass blur effect behind the badge */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 20px;
	/* Ensure the badge sits above the image and the overlay */
	z-index: 2;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =============================================================================
   CARD HOVER ANIMATIONS (Standard card and grid layouts)
   =============================================================================
   On hover, standard cards lift slightly (translateY) and gain a larger shadow
   to create a tactile "elevation" effect. The :not() selectors exclude the list
   layout and grid overlay layout, which have their own distinct hover treatments
   defined in their own sections below.

   The image zoom on hover (scale 1 → 1.05) adds subtle visual energy and
   reinforces that the card is interactive.
*/

/* Only apply the lift + shadow to regular cards, not list or grid cards */
.pc-php-post-block-post-card:not(.layout-grid-card):not(.layout-list-card):hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
	/* Remove border color on hover so the larger shadow provides the edge */
	border-color: transparent;
}

/* Zoom the image slightly on any card hover (applies to all layout variants) */
.pc-php-post-block-post-card:hover .pc-php-post-block-post-img {
	transform: scale(1.05);
}

/* Zoom the placeholder icon on hover (same feel as image zoom) */
.pc-php-post-block-post-card:hover .pc-php-post-block-post-img-placeholder .pc-php-post-block-post-placeholder-icon {
	transform: scale(1.15);
}

/* =============================================================================
   IMAGE / PLACEHOLDER SHOW-HIDE UTILITY RULES
   =============================================================================
   view.js adds either .pc-php-post-block-has-image or .pc-php-post-block-no-image to each
   <article> element it clones from the <template>. These two rules use those
   classes to show only the appropriate element inside the image container —
   the <img> when there IS a featured image, or the gradient placeholder div
   when there IS NOT.

   Keeping this logic in CSS (rather than setting inline display styles in JS)
   means the visibility behavior is easier to override or extend in the future,
   and it keeps view.js free of any styling concerns.
*/
.pc-php-post-block-has-image .pc-php-post-block-post-img-placeholder {
	display : none ;
}

.pc-php-post-block-no-image .pc-php-post-block-post-img {
	display : none ;
}

/* =============================================================================
   CARD CONTENT AREA (Title, Excerpt, Arrow Link)
   =============================================================================
   .pc-php-post-block-post-content-container holds the title and excerpt for card and
   list layouts. flex-grow: 1 causes it to expand to fill the remaining
   vertical space in the card after the image, which keeps card bottoms aligned
   in multi-column grid rows.
*/
.pc-php-post-block-post-content-container {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.pc-php-post-block-post-header {
	margin-bottom: 12px;
}

/* Post title — uses the condensed medium font weight for visual hierarchy */
.pc-php-post-block-post-title {
	font-family: "GT America Condensed Medium", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 1.4em;
	line-height: 1.4;
	margin: 0;
	font-weight: 700 !important;
}

/* Title link inherits the condensed font from the parent div */
.pc-php-post-block-post-title a {
	font-family: "GT America Condensed Medium", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 700 !important;
}

/* =============================================================================
   EXCERPT & ARROW LINK (Rule #2)
   =============================================================================
   The excerpt area contains the trimmed post excerpt followed immediately by
   an arrow (→) that also links to the post. This is referred to as "Rule #2"
   in the code comments in render.php and view.js.

   The arrow uses a right-slide (translateX) transition on hover to suggest
   forward navigation. flex-grow: 1 on the excerpt pushes content to fill
   available space, keeping the arrow at a consistent position across cards
   with different-length excerpts.
*/
.pc-php-post-block-post-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: #000000;
	margin-bottom: 0;
	/* flex-grow causes the excerpt to expand and fill the remaining card height,
	   so the "read more" arrow lands at the same vertical position in every
	   card in the same row. */
	flex-grow: 1;
	font-family: "GT America", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* These three selectors override font stacking at multiple specificity levels
   to ensure GT America is used consistently even when theme stylesheets apply
   different fonts to p, a, or specific component classes. */
.wp-block-pc-php-blocks-post-aggregator .pc-php-post-block-post-excerpt,
.wp-block-pc-php-blocks-post-aggregator .pc-php-post-block-post-excerpt p,
.wp-block-pc-php-blocks-post-aggregator .pc-php-post-block-post-link-arrow {
	font-family: "GT America", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Reset margin on the paragraph inside the excerpt div to avoid double-spacing
   when the theme's global paragraph styles apply bottom margin. */
.pc-php-post-block-post-excerpt p {
	margin: 0;
	font-family: "GT America", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* The arrow (→) that follows the excerpt text. Displayed inline after the
   excerpt copy. Color is black matching the titles. */
.pc-php-post-block-post-link-arrow {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	/* inline-block is required for translateX to work on an inline element */
	display: inline-block;
	transition: transform 0.2s ease;
}

/* On hover, the arrow slides 4px to the right to suggest forward navigation */
.pc-php-post-block-post-link-arrow:hover {
	color: #000000;
	transform: translateX(4px);
}

/* =============================================================================
   LIST LAYOUT
   =============================================================================
   In list layout, each card is a horizontal row: the image thumbnail is on
   the left and the title + excerpt is on the right. Cards are separated by a
   bottom border rather than a box-shadow to give a clean editorial feel.

   On narrow viewports (≤ 767px), the layout reverts to vertical stacking
   so the image and text are full-width on phones.
*/
.layout-list .pc-php-post-block-posts-grid {
	/* The grid has only one column in list layout (one card per row) */
	grid-template-columns: 1fr;
	gap: 32px;
}

/* Strip the default card chrome (border, shadow, radius) from list cards.
   The visual separation between list items comes from a bottom border instead. */
.pc-php-post-block-post-card.layout-list-card {
	border: none;
	box-shadow: none;
	border-radius: 0;
	border-bottom: 1px solid hsl(220, 15%, 90%);
	padding-bottom: 32px;
	background: transparent;
}

/* Switch the card inner from column (vertical) to row (horizontal) layout */
.layout-list-card .pc-php-post-block-post-card-inner {
	flex-direction: row;
	gap: 28px;
	align-items: flex-start;
}

/* Fixed-size thumbnail in list layout.
   aspect-ratio: auto overrides the 16:9 ratio set on .pc-php-post-block-post-image-container
   because we're using an explicit pixel height here instead. */
.layout-list-card .pc-php-post-block-post-image-container {
	width : 260px ;
	/* Clear the aspect ratio; use a fixed pixel height instead */
	aspect-ratio : auto ;
	height : 160px ;
	border-radius : 0 ;
	overflow : hidden ;
	box-shadow : 0 2px 8px rgba(0, 0, 0, 0.04) ;
}

/* The content area (title + excerpt) fills all remaining horizontal space */
.layout-list-card .pc-php-post-block-post-content-container {
	padding: 0;
	flex-grow: 1;
}

/* On list card hover, upgrade the thumbnail shadow slightly */
.layout-list-card:hover .pc-php-post-block-post-image-container {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* ── LIST MOBILE BREAKPOINT (≤ 767px) ───────────────────────────────────────
   Below 767px, switch list cards back to vertical stacking (column) and
   restore the full-width aspect-ratio trick for the image.
*/
@media (max-width: 767px) {
	.layout-list-card .pc-php-post-block-post-card-inner {
		flex-direction: column;
		gap: 16px;
	}
	.layout-list-card .pc-php-post-block-post-image-container {
		width : 100% ;
		/* Re-enable the aspect ratio for the full-width mobile image */
		aspect-ratio : 16 / 9 ;
		height : auto ;
	}
}

/* =============================================================================
   GRID LAYOUTS (Overlay text centered on image)
   =============================================================================
   Grid cards are square tiles where the post title is displayed as centered
   white text overlaid on the image. A semi-transparent dark overlay (.bg-overlay)
   sits between the image and the text to ensure readability against any image.

   The overlay darkens on hover (35% → 55% opacity) to create a focus effect.
   No excerpt or date is shown — grid cards are purely visual with the title.
*/

/* Strip the white card surface — grid cards are image-first, not content cards */
.pc-php-post-block-post-card.layout-grid-card {
	border: none;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
}

.layout-grid-card .pc-php-post-block-post-card-inner {
	border-radius: 0;
}

/* Override the default 16:9 ratio with a 1:1 square ratio for grid tiles. */
.layout-grid-card .pc-php-post-block-post-image-container {
	/* 1:1 Square aspect ratio as per mockup */
	aspect-ratio : 1 / 1 ;
	border-radius : 0 ;
}

/* Force the image and placeholder to fill the square container absolutely.
   The !important declarations here override the base styles that position
   these elements for 16:9 containers. */
.layout-grid-card .pc-php-post-block-post-img,
.layout-grid-card .pc-php-post-block-post-img-placeholder {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* The overlay content container sits on top of both the image and the dark
   overlay. It uses absolute positioning to stretch edge-to-edge and flexbox
   to center the title both horizontally and vertically. */
.pc-php-post-block-post-overlay-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* z-index: 2 ensures the text sits above the overlay (z-index: 1) */
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 24px;
	box-sizing: border-box;
}

/* Title text is white with a heavier weight for readability over images */
.layout-grid-card .pc-php-post-block-post-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff !important;
}

/* The entire grid card is one large link wrapping the image container */
.pc-php-post-block-post-grid-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none !important;
	color: #ffffff !important;
}

/* On hover, underline the title inside the grid card to indicate interactivity */
.pc-php-post-block-post-grid-link:hover .pc-php-post-block-post-title {
	text-decoration: underline !important;
}

/* ── DARK OVERLAY ────────────────────────────────────────────────────────────
   .bg-overlay is a full-size absolutely-positioned div that sits between the
   image (z-index 0) and the text (z-index 2). It uses a semi-transparent black
   background to darken the image enough for white text to be legible.

   On hover, the opacity increases (35% → 55%) to create a focus/darkening
   effect that reinforces interactivity.

   pointer-events: none ensures the overlay doesn't intercept click events —
   the link behind it should remain clickable.
*/
.bg-overlay {
	background: rgba(0, 0, 0, 0.35) !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background 0.35s ease;
	/* z-index: 1 places overlay above image (0) but below text content (2) */
	z-index: 1;
	/* Prevent the overlay from blocking clicks on the link beneath it */
	pointer-events: none;
}

/* Darken the overlay on hover for a subtle focus effect */
.layout-grid-card:hover .bg-overlay {
	background: rgba(0, 0, 0, 0.55) !important;
}

/* Text shadow applied to grid card titles for additional legibility over
   bright or busy images */
.txt-shadow-black {
	text-shadow: 0px 2px 4px black !important;
}

/* =============================================================================
   "LOAD MORE" PAGINATION BUTTON
   =============================================================================
   The pagination button is centered below the post grid and uses the theme's
   .pc-callout button class for consistent styling. It is rendered by render.php
   and managed by view.js (which disables it while loading and hides it when
   there are no more posts to fetch).
*/
.pc-php-post-block-posts-more-container {
	width: 100%;
	text-align: center;
	margin-top: 48px;
	display: flex;
	justify-content: center;
}

/* The button itself. The theme's .pc-callout class handles most of the
   heavy styling (black background, white text, uppercase, letter-spacing).
   These rules handle block-specific sizing and transition behaviors. */
.pc-php-post-block-posts-more-button {
	border : 1px solid transparent !important ;
	border-radius : 0 !important ;
	cursor : pointer ;
	box-shadow : none !important ;
	transition : all 0.25s ease !important ;
	display : inline-block !important ;
	width : auto !important ;
	margin : 0 !important ;
}

/* Position arrow on the left side of the text for the Previous button and rotate it */
.pc-php-post-block-posts-prev-button .callout-inner {
	padding-left : 15px !important ;
	padding-right : 10px !important ;
}

.pc-php-post-block-posts-prev-button .callout-inner::after,
.pc-php-post-block-posts-prev-button .callout-inner:after {
	left : 15px !important ;
	right : auto !important ;
	transform : rotate(-135deg) !important ;
}

/* Nudge the left-pointing arrow on hover */
.pc-php-post-block-posts-prev-button:hover .callout-inner::after,
.pc-php-post-block-posts-prev-button:hover .callout-inner:after {
	left : 9px !important ;
	right : auto !important ;
}

/* On hover, add a visible black border to give a "punched out" / outlined look */
.pc-php-post-block-posts-more-button:hover {
	border: 1px solid #000000 !important;
}

/* Disabled state shown while view.js is fetching the next page of posts */
.pc-php-post-block-posts-more-button:disabled {
	background-color: #666666 !important;
	cursor: not-allowed;
	opacity: 0.8;
}

/* =============================================================================
   CSS RESETS & THEME COLLISION OVERRIDES
   =============================================================================
   The PC theme applies aggressive CSS to many elements including headers,
   links, and text containers. Some of these theme rules interfere with the
   block's intended appearance — for example, the theme may hide headers with
   opacity: 0 or transform: translateY for animation purposes, which would make
   card titles invisible.

   The !important declarations in this section override those theme styles
   specifically within the block's card components, restoring the expected
   visibility and layout. This section exists entirely to fight theme
   interference, not to define baseline styles.

   These are intentionally broad resets inside the .pc-php-post-block-post-card scope.
   They should be revisited if the theme is updated or replaced.
*/
.pc-php-post-block-post-card .pc-php-post-block-post-header {
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	margin: 0 0 12px 0 !important;
	transform: none !important;
	background: transparent !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
}

.pc-php-post-block-post-card .pc-php-post-block-post-title {
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	margin: 0 0 10px 0 !important;
	transform: none !important;
}

.pc-php-post-block-post-card .pc-php-post-block-post-title a {
	position: static !important;
	display: inline !important;
	opacity: 1 !important;
	visibility: visible !important;
	background: transparent !important;
	padding: 0 !important;
	height: auto !important;
	width: auto !important;
	transform: none !important;
}



.pc-php-post-block-post-card .pc-php-post-block-post-excerpt {
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Force black text for excerpt content on standard card and list layouts.
   Grid cards are intentionally excluded (:not(.layout-grid-card)) because
   grid cards use white text overlaid on dark images. */
.pc-php-post-block-post-card:not(.layout-grid-card) .pc-php-post-block-post-excerpt,
.pc-php-post-block-post-card:not(.layout-grid-card) .pc-php-post-block-post-excerpt p,
.pc-php-post-block-post-card:not(.layout-grid-card) .pc-php-post-block-post-link-arrow {
	color: #000000 !important;
}

/* =============================================================================
   BLOCK EDITOR (BACKEND CANVAS) STYLES
   =============================================================================
   .editor-styles-wrapper is a class WordPress adds to the Gutenberg editor
   canvas. Styles scoped to this selector only apply in the editor, not on
   the public frontend. We use it here to:

   1. Ensure title and excerpt links are visible and identifiable as links
      in the editor preview (not just on the frontend).
   2. Replicate the theme's .pc-callout button styling inside the editor,
      because the theme stylesheet is NOT loaded in the editor canvas.
      Without these rules, the "Load More" button preview would appear
      unstyled (plain HTML button) in the editor.
*/

/* Reset margins and width on the block wrapper inside the editor to let
   Gutenberg handle the alignment and layout borders natively */
.editor-styles-wrapper .wp-block-pc-php-blocks-post-aggregator {
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

/* Make title links visible as links in the editor (black text + underline) */
.editor-styles-wrapper .pc-php-post-block-post-title a {
	color: #000000 !important;
	text-decoration: underline !important;
}

/* Make excerpt links visible in the editor */
.editor-styles-wrapper .pc-php-post-block-post-excerpt a {
	color: #000000 !important;
	text-decoration: underline !important;
}

/* Ensure excerpt arrows are not underlined in the editor, matching the
   frontend appearance where the arrow uses a slide transition instead */
.editor-styles-wrapper .pc-php-post-block-post-excerpt a.pc-php-post-block-post-link-arrow {
	text-decoration: none !important;
}

/* Ensure grid links are styled correctly inside grid layouts in the editor */
.editor-styles-wrapper .layout-grid-card .pc-php-post-block-post-grid-link {
	color: #ffffff !important;
	text-decoration: none !important;
}

.editor-styles-wrapper .layout-grid-card .pc-php-post-block-post-grid-link:hover .pc-php-post-block-post-title {
	text-decoration: underline !important;
}

/* ── REPLICATE .pc-callout BUTTON INSIDE THE EDITOR ─────────────────────────
   The theme's .pc-callout button styles are defined in the theme's own CSS,
   which is not loaded inside the Gutenberg editor canvas. These rules
   reproduce that styling so the "Load More" button preview in the editor
   looks identical to the frontend version. The chunky-arrow SVG path is
   relative to the theme directory.
*/
.editor-styles-wrapper .pc-php-post-block-posts-more-button {
	background: #000000 !important;
	color: #ffffff !important;
	font-family: 'GT America Bold', "Segoe UI", Roboto, sans-serif !important;
	font-size: 16px !important;
	padding: 10px 25px 12px !important;
	text-align: center !important;
	display: inline-block !important;
	position: relative !important;
	border: 1px solid transparent !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	margin: 20px auto !important;
}

/* The .callout-inner span shifts text left to make room for the arrow icon */
.editor-styles-wrapper .pc-php-post-block-posts-more-button .callout-inner {
	display: block !important;
	padding-right: 10px !important;
}

/* The ::after pseudo-element renders the chunky-arrow icon on the button.
   filter: invert(100) makes the normally dark SVG icon white on the black
   button background. */
.editor-styles-wrapper .pc-php-post-block-posts-more-button .callout-inner::after {
	background: url(../../../../themes/pc-ex-theme-2022/core/images/chunky-arrow.svg) !important;
	background-size: cover !important;
	content: '' !important;
	display: inline-block !important;
	/* invert(100) turns the black SVG icon white to show on dark background */
	filter: invert(100) !important;
	height: 12px !important;
	width: 12px !important;
	position: absolute !important;
	/* calc(50% - 6px) centers the 12px icon vertically */
	top: calc(50% - 6px) !important;
	right: 15px !important;
	/* 45° rotation makes the right-pointing arrow into a northeast arrow */
	transform: rotate(45deg) !important;
	transition: all 0.25s ease !important;
}

/* On hover: invert the button colors (white background, black text/icon) */
.editor-styles-wrapper .pc-php-post-block-posts-more-button:hover {
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #000000 !important;
}

/* On hover: remove the invert so the arrow icon shows as dark on white bg,
   and nudge it slightly left to create a subtle motion cue */
.editor-styles-wrapper .pc-php-post-block-posts-more-button:hover .callout-inner::after {
	filter: invert(0) !important;
	right: 9px !important;
}