/* ============================================================
   Flair Companion: Author Headline and Author Links block styles.

   Loaded everywhere (inc/assets.php, flair_companion_blocks_style()), on the
   front end and in the editor. Either block can appear in any pattern or
   template.

   Markup: inc/blocks/author-headline.php and inc/blocks/author-links.php.
   ============================================================ */

.flair-author-headline{
	display:block;
	font-size:var(--flair-companion-font-size-small);
	color:var(--flair-companion-color-muted);
}
.flair-author-headline.is-style-eyebrow{
	font-family:var(--flair-companion-font-headings,inherit);
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--flair-companion-color-secondary);
}

.flair-author-links{
	display:block;
	margin-top:var(--flair-companion-space-xs);
	font-size:var(--flair-companion-font-size-small);
	color:var(--flair-companion-color-muted);
}
.flair-author-links a{
	color:inherit;
	text-decoration:none;
	border-bottom:0.0625rem solid currentColor;
}
.flair-author-links a:hover{
	color:var(--flair-companion-color-primary);
	border-bottom-color:currentColor;
}
.flair-author-links.is-style-stacked{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:var(--flair-companion-space-3xs);
}
.flair-author-links.is-style-stacked > span{
	display:none; /* The separator between links. Shown only when the links are inline. */
}

/* Price prefix ("From $15" or "Desde $15") for variable products.
   This is the one product-page style in this plugin. It keeps the prefix
   word at the same size as the price. Without it, the word would use the
   full price size. See inc/woocommerce.php, show_from_price. */
.flair-from-price-prefix{
	font-size:.55em;
	font-weight:400;
	margin-right:.25em;
}

/* ---- Reading time ----
   A small line, a little lighter than the text around it. It takes the size and
   color of whatever row it sits in (inherit), so it fits any theme. */
.flair-reading-time{
	font-size:inherit;
	opacity:.72;
}

/* ---- Format icon (Video and Audio badge) ----
   A solid circle with the icon inside, in the Brand Kit primary color. On a
   single post it sits above the title; in a list it sits to the left of the
   title. Sizes are in rem so the large title does not scale it. */
.flair-format-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:1.9em;height:1.9em;margin-right:.6em;
	border-radius:50%;
	background:var(--flair-companion-color-primary);
	color:var(--flair-companion-color-background);
	vertical-align:middle;
}
.flair-format-icon .dashicons{
	width:1em;height:1em;font-size:1em;line-height:1;color:inherit;
}
.flair-format-icon--video .dashicons{margin-left:.1em}
.single-post .flair-format-icon{
	display:flex;width:3rem;height:3rem;margin:0 0 .75rem;
}
.single-post .flair-format-icon .dashicons{font-size:1.4rem}
.wp-block-query .wp-block-post-title:has(.flair-format-icon){
	display:flex;align-items:flex-start;gap:.5em;
}
.wp-block-query .flair-format-icon{
	width:1.5em;height:1.5em;margin:.1em 0 0;flex:0 0 auto;
}
.wp-block-query .flair-format-icon .dashicons{font-size:.85em}

/* ---- Columns with the "Reverse on mobile" style (the theme registers it; this keeps the plugin's patterns right under any theme) ---- */
@media (max-width:48.8125rem){.wp-block-columns.is-style-reverse-on-mobile:not(.is-not-stacked-on-mobile){flex-direction:column-reverse}}

/* Column style "Photo fill": a photo column that grows to the height of the column beside it (the theme has the same style; this keeps the plugin right under any theme). */
.wp-block-column.is-style-photo-fill{display:flex;flex-direction:column}
.is-style-photo-fill > :is(.wp-block-cover,.wp-block-image,.wp-block-media-text){flex:1 1 auto;width:100%;min-width:0;margin:0}
.is-style-photo-fill > .wp-block-image img{display:block;width:100%;height:100%;min-height:20rem;object-fit:cover}
@media (max-width:48.8125rem){.is-style-photo-fill > .wp-block-image img{height:auto;aspect-ratio:4/3}}