/* --------------------------------------------------------------------------
   Core blocks -> theme design

   The home page is a page built from core blocks, so its cards are assembled
   from core/post-* blocks instead of hp_card(). Core prints its own markup
   (a <figure> for the image, a <div> wrapper around the excerpt, an <li> per
   post); these rules map that markup onto the card design already defined in
   theme.css. Nothing here restyles a block — it only bridges the two shapes.
   -------------------------------------------------------------------------- */

/* On a theme with no theme.json, wp_restore_group_inner_container() (see
   wp-includes/block-supports/layout.php) puts the legacy
   .wp-block-group__inner-container div back inside every core/group at render
   time. That would leave every flex and grid container on this page with a
   single child. Taking the wrapper out of the layout restores the real parent/
   child relationship without touching the markup. The editor renders groups
   from their saved markup, which never had the wrapper, so it needs no rule. */
.home .wp-block-group__inner-container {
	display: contents;
}

/* Post template: core wraps every post in <li>. Make the list item disappear
   so the grid/stack in theme.css lands on the cards themselves. */
.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-post-template > li {
	display: flex;
	min-width: 0;
}

.wp-block-post-template > li > .hp-card {
	flex: 1 1 auto;
	min-width: 0;
}

/* Featured image: core/post-featured-image renders a <figure><a><img>, where
   the theme's hp_card() rendered <a class="hp-thumb-link"><span class="hp-thumb">.
   The link box keeps its theme styles; the aspect ratio moves to the image. */
.hp-card .hp-thumb-link {
	margin: 0;
}

.hp-card .hp-thumb-link img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--hp-surface-2);
	transition: transform 400ms var(--hp-ease);
}

.hp-card:hover .hp-thumb-link img {
	transform: scale(1.04);
}

.hp-card--row .hp-thumb-link img {
	aspect-ratio: 4 / 3;
}

/* Eyebrow: core/post-terms puts the link inside the styled wrapper. */
.hp-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.hp-eyebrow a:hover {
	color: var(--hp-red-ink);
}

/* Excerpt: core/post-excerpt wraps the text in an inner <p>. */
.hp-card__excerpt p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* Meta line: core/post-date brings its own <div>. The bullet between date and
   reading time was a <span> in hp_card(); as blocks it is a generated separator
   so the editor shows two fields instead of three. */
.hp-meta .wp-block-post-date {
	margin: 0;
}

.hp-meta .hp-read-time::before {
	content: "•";
	margin-right: var(--hp-space-2);
	color: var(--hp-ink-2);
}

/* Per-post hub accent. hp_card() set hub--<slug> on the article; a core block
   cannot vary its class per post, but core/post-template already prints
   post_class() on each <li>, so the category class it emits carries the same
   information. Mirrors the accent map in theme.css. */
.wp-block-post-template > li.category-treino {
	--hp-hub: var(--hp-red-ink);
	--hp-hub-soft: var(--hp-red-050);
}

.wp-block-post-template > li.category-dieta {
	--hp-hub: var(--hp-navy);
	--hp-hub-soft: var(--hp-navy-050);
}

.wp-block-post-template > li.category-suplementacao {
	--hp-hub: var(--hp-navy-500);
	--hp-hub-soft: var(--hp-navy-050);
}

.wp-block-post-template > li.category-receitas-fitness {
	--hp-hub: var(--hp-red-deep);
	--hp-hub-soft: var(--hp-red-050);
}

.wp-block-post-template > li.category-fisiculturismo {
	--hp-hub: var(--hp-navy-900);
	--hp-hub-soft: var(--hp-surface-2);
}

/* Section head "Ver tudo em…": a paragraph in the editor, an inline link here. */
.hp-section-head .hp-more {
	margin: 0;
}

.hp-section-head .hp-more a {
	color: inherit;
	text-decoration: none;
}

.hp-section-head .hp-more a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Editor canvas

   add_editor_style() loads this file inside the editor iframe, where there is
   no site header to set the hub accent. Without a fallback the section rules
   that paint borders with --hp-hub would render transparent.
   -------------------------------------------------------------------------- */

.editor-styles-wrapper {
	background: var(--hp-surface, #fff);
}

/* The editor nests every group's children in its own .block-editor-block-list__layout
   div — the same shape problem the front end has with .wp-block-group__inner-container,
   from a different source. Without this, every flex and grid container below has a
   single child in the editor: the trust band stacks, the hub grid collapses to one
   column, and cards lose their row/column direction. Scoped to the containers this
   theme builds, so the rest of the editor keeps its normal behaviour. */
:is(
	.hp-lead,
	.hp-shell,
	.hp-lead__grid,
	.hp-lead__main,
	.hp-lead__side,
	.hp-trust,
	.hp-trust__grid,
	.hp-trust__item,
	.hp-section,
	.hp-section-head,
	.hp-card,
	.hp-card__body,
	.hp-meta
) > .block-editor-block-list__layout {
	display: contents;
}

.editor-styles-wrapper .hp-lead,
.editor-styles-wrapper .hp-section,
.editor-styles-wrapper .hp-trust {
	--hp-hub: var(--hp-navy);
}

.editor-styles-wrapper .hub--treino {
	--hp-hub: var(--hp-red-ink);
}

.editor-styles-wrapper .hub--dieta {
	--hp-hub: var(--hp-navy);
}

.editor-styles-wrapper .hub--suplementacao {
	--hp-hub: var(--hp-navy-500);
}

.editor-styles-wrapper .hub--receitas-fitness {
	--hp-hub: var(--hp-red-deep);
}

.editor-styles-wrapper .hub--fisiculturismo {
	--hp-hub: var(--hp-navy-900);
}