/* Recipe: header (image+facts), ingredients/method (full and preview) -
   see pfc-plugin's WordPressBridge\Recipe\Renders\RecipeContentRenderer
   for the markup these classes style.

   Width: every top-level block below shares the same max-width as the
   recipe's own description (the theme's global content size, applied to
   wp:post-content's children as an is-layout-constrained descendant) -
   this is a plugin CSS value, not a template/global-style change, so it
   only affects these recipe-specific blocks, not other pages. */
.pfc-recipe-header,
.pfc-recipe-body,
.pfc-recipe-preview-description,
.pfc-recipe-preview-cta,
.pfc-recipe-latest {
    max-width: var(--wp--style--global--content-size, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* Cancels out the theme's own blog.css, which adds a 30px left padding to
   every .wp-block-post-title below 430px wide (intended for the blog's
   single-post title, with its own exception carved out for the blog
   listing/row context - .blog-post-row .wp-block-post .wp-block-post-title)
   - it has no equivalent exception for recipe.php, so the recipe title
   was inheriting that indent unintentionally. Fixed here, in the
   recipe-specific stylesheet, rather than editing blog.css itself - this
   only touches recipe pages (body.single-recipe), not blog posts. */
body.single-recipe .wp-block-post-title {
    padding-left: 0;
}

/* Same fix as above (peterfishercoaching-theme#54), for the recipe grid
   card's own title (.pfc-recipe-card h3, rendered via wp:post-title
   inside wp:post-template on archive-recipe.html and
   taxonomy-recipe_type.html) - blog.css's 30px mobile padding had no
   exception for this context either, so grid titles were indenting on
   mobile the same way the single-recipe title was. */
.pfc-recipe-card .wp-block-post-title {
    padding-left: 0;
}

/* Header: featured image beside the facts (see single-recipe.html's own
   docblock for why the image is rendered here instead of via the core
   wp:post-featured-image block) - stacks on mobile. */
.pfc-recipe-header {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: stretch;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Wraps .pfc-recipe-header-media + the type pills below it (2026-07-20) -
   this, not .pfc-recipe-header-media itself, is the actual grid item now,
   since the media box's own aspect-ratio/overflow:hidden would clip
   anything appended inside it rather than let it sit below. */
.pfc-recipe-header-media-column {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    /* Same min-width:auto reasoning as .pfc-recipe-header-media below -
       still needed here now that this wrapper is the grid item. */
    min-width: 0;
}

.pfc-recipe-header-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}

.pfc-recipe-header-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Type pills (recipe_type), under the featured image - same pill styling
   as .pfc-recipe-type-filters a (the /recipes/ library's own filter
   pills) for visual consistency across the site. */
.pfc-recipe-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pfc-recipe-type-pill {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
}

.pfc-recipe-type-pill:hover {
    background: rgba(0, 0, 0, 0.12);
}

.pfc-recipe-header-facts {
    display: flex;
    align-items: center;
}

/* Body: ingredients (narrow column) beside method (wide column), stacks
   on mobile. A preview may render only one of the two (depending on the
   effective limits) - :only-child lets that lone column span the full
   width instead of being stranded in a half-empty grid. */
.pfc-recipe-body {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: 1.5rem 4rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.pfc-recipe-ingredients:only-child,
.pfc-recipe-method:only-child {
    grid-column: 1 / -1;
}

.pfc-recipe-ingredients h2,
.pfc-recipe-method h2 {
    font-size: var(--wp--preset--font-size--x-large, 1.75rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* Ingredients */
.pfc-recipe-ingredient-group {
    margin-bottom: 3rem;
}

/* Image sits above the list, below the title/description - not beside
   the list (that's the method steps' own layout, not ingredients'). */
.pfc-recipe-ingredient-group-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.pfc-recipe-ingredient-group h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.pfc-recipe-ingredient-group p {
    font-size: var(--wp--preset--font-size--large, 1.38rem);
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.pfc-recipe-ingredient-items {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
}

/* Same font-size as the method steps (pfc-recipe-steps li), and matching
   the theme's own fluid "large" preset used for body copy elsewhere on
   the site (e.g. product description paragraphs) - var(), not a fixed
   rem, so it scales with viewport width the same way that text does. */
.pfc-recipe-ingredient-items li,
.pfc-recipe-steps li {
    font-size: var(--wp--preset--font-size--large, 1.38rem);
}

.pfc-recipe-ingredient-items li {
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

/* Method */
.pfc-recipe-step-sequence {
    margin-bottom: 3rem;
}

.pfc-recipe-step-sequence-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.pfc-recipe-step-sequence h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.pfc-recipe-step-sequence p {
    font-size: var(--wp--preset--font-size--large, 1.38rem);
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.pfc-recipe-steps {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0;
}

.pfc-recipe-steps li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.pfc-recipe-step-body {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.pfc-recipe-step-description {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* wpautop() (see renderStep()) can produce more than one <p> per step -
   space them out, but not the last one (that's handled by the <li>'s own
   margin-bottom above). */
.pfc-recipe-step-description p {
    margin: 0 0 0.75rem;
}

.pfc-recipe-step-description p:last-child {
    margin-bottom: 0;
}

/* Fixed height, cropped (not the authored 250-290px height) - keeps every
   step row a consistent height regardless of how little text a step has,
   instead of a short one-line step leaving a tall gap next to a full-size
   image (this was the actual "big gaps" complaint). */
.pfc-recipe-step-image {
    display: block;
    flex-shrink: 0;
    width: 220px;
    height: 160px;
    object-fit: cover;
    max-width: 40%;
    border-radius: 8px;
}

/* Preview (non-member) */
.pfc-recipe-preview-description {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: var(--wp--preset--font-size--large, 1.38rem);
    line-height: 1.6;
}

.pfc-recipe-preview-description p::after {
    content: '\2026';
}

.pfc-recipe-preview {
    position: relative;
    padding-bottom: 2rem;
    overflow: hidden;
}

.pfc-recipe-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem;
    /* Fades to the page's own background (#DDD, see base.css), not white -
       this sits directly on the page background, not inside a white card,
       so fading to white left a visible mismatched band. */
    background: linear-gradient(to bottom, rgba(221, 221, 221, 0), rgba(221, 221, 221, 1));
    pointer-events: none;
}

/* Signals "there's more here" when RecipePreviewBuilder actually truncated
   this column (see RecipeContentRenderer::hasMoreIngredientSections()/
   hasMoreSteps()) - deliberately fake placeholder lines, not the real next
   paragraph blurred, since blur/opacity is trivially reversible (view
   source, disable CSS) and this is a real paywall boundary, not just a UI
   nicety. Sits right before .pfc-recipe-preview's own fade-to-background
   gradient, so the lines themselves appear to trail off into the page. */
.pfc-recipe-preview-teaser {
    margin-top: 1rem;
}

.pfc-recipe-preview-teaser-line {
    height: 1em;
    border-radius: 4px;
    background-color: currentColor;
    margin-bottom: 0.7em;
}

.pfc-recipe-preview-teaser-line:nth-child(1) {
    width: 100%;
    opacity: 0.35;
}

.pfc-recipe-preview-teaser-line:nth-child(2) {
    width: 92%;
    opacity: 0.22;
}

.pfc-recipe-preview-teaser-line:nth-child(3) {
    width: 75%;
    opacity: 0.12;
}

/* Boxed paywall prompt (2026-07-21) - reverses the earlier "Medium-style
   plain text on the page background" decision above this comment, which
   didn't stand out enough. A negative margin-top pulls the box up so it
   overlaps .pfc-recipe-body's own bottom fade-out gradient
   (.pfc-recipe-preview::after) - it's a normal-flow sibling rendered
   after that gradient, so it paints on top without needing z-index. */
.pfc-recipe-preview-cta {
    margin-top: -3rem;
    margin-bottom: 2rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
}

/* Scoped to this CTA's own Join button only, not every button on the site
   - .wp-block-button__link/.wp-element-button otherwise rely entirely on
   the parent theme's own block defaults (native Gutenberg button classes,
   no dedicated CSS of their own elsewhere on the site). */
.pfc-recipe-preview-cta-actions .wp-block-button__link {
    border-radius: 999px;
}

.pfc-recipe-preview-cta h3 {
    /* Same size as the page's other section headings (Ingredients/Method/
       Latest Recipes - see .pfc-recipe-ingredients h2 above) - was 1.5rem,
       too small next to those. */
    font-size: var(--wp--preset--font-size--x-large, 1.75rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.pfc-recipe-preview-cta p {
    /* Same size as the recipe's own body text (description/ingredients/
       steps - see .pfc-recipe-preview-description above) - was 1.1rem
       (17.6px), visibly smaller than the 1.38rem (22px) body text
       surrounding it. */
    font-size: var(--wp--preset--font-size--large, 1.38rem);
    margin-bottom: 0.75rem;
}

.pfc-recipe-preview-cta-actions {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}

.pfc-recipe-preview-cta-signin {
    font-size: var(--wp--preset--font-size--large, 1.38rem);
    opacity: 0.8;
}

.pfc-recipe-preview-cta-signin a {
    font-weight: 600;
    text-decoration: underline;
}

/* Latest recipes - a stand-in for a future "related recipes" grid (see
   RecipeContentRenderer::renderLatestRecipes()'s docblock), shown below
   the method steps on every recipe page, full or preview. */
.pfc-recipe-latest {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.pfc-recipe-latest h2 {
    font-size: var(--wp--preset--font-size--x-large, 1.75rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.pfc-recipe-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pfc-recipe-latest-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pfc-recipe-latest-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.pfc-recipe-latest-card-meta {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0 0 0.35rem;
}

.pfc-recipe-latest-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* Recipe archive (/recipes/) - each row's featured image (see
   archive-recipe.html's wp:post-featured-image block). The block's own
   "scale":"cover" attribute puts object-fit:cover on the rendered <img>,
   but WP core never applies a matching width to that <img> itself (only
   to the wrapping <figure>, confirmed by reading post-featured-image.php
   directly) - so width:100%/height:100% here is still needed for
   object-fit:cover to actually have a box to fill, not just an inline
   property with nothing constraining the image's own natural size. This
   is what fixed inconsistent row heights across different recipes' native
   image aspect ratios (pfc-plugin#38).  */
.pfc-recipe-archive-image img,
.pfc-recipe-archive-image figure {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Recipe library (/recipes/ and /recipes/type/{slug}/) - 2.7.0's featured
   row + type filter pills + card grid. Shared by archive-recipe.html and
   taxonomy-recipe_type.html (the latter has no featured row/pills, just
   the grid below). */

/* Marketing subtitle under the "Recipes" H1 (2026-07-20) - a plain,
   centered paragraph, deliberately not as bold as the H1 itself. */
.pfc-recipe-library-subtitle {
    max-width: 640px;
    margin: 0.5rem auto 2rem;
    font-size: 1.1rem;
    opacity: 0.75;
}

/* Raised card look (white on the page's own #DDD background - see
   base.css) so the featured row reads as visually distinct from the plain
   grid below it, which sits directly on the page background unstyled. */
.pfc-featured-recipes-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2.5rem;
}

.pfc-featured-recipes-section h2 {
    font-size: var(--wp--preset--font-size--x-large, 1.75rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* .wp-block-post-template is the element WP core itself puts on whatever
   wraps a Query Loop's repeated post markup - grid-styling it directly
   here works regardless of the block's own layout attribute, rather than
   relying on Gutenberg's built-in Query Loop grid support. */
.pfc-recipe-featured-row .wp-block-post-template {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The flex item WP actually lays out is the <li> itself (a direct child
   of .wp-block-post-template), not .pfc-recipe-card-featured nested a
   level further in - a flex-basis set on the inner div has no effect on
   its own layout, since `flex` only does anything on a flex container's
   direct children. Without this on the real flex item, each card sized
   to its image's own intrinsic width instead of a third of the row,
   couldn't fit 3 across, and wrapped into a single huge-image column. */
.pfc-recipe-featured-row .wp-block-post-template > li {
    flex: 1 1 calc(33.333% - 1.4rem);
    min-width: 260px;
}

.pfc-recipe-grid-query .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.pfc-recipe-card {
    display: block;
}

.pfc-recipe-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

/* Same fixed-box object-fit:cover convention as .pfc-recipe-archive-image
   above (pfc-plugin#38) - not a new image-sizing approach. */
.pfc-recipe-card-image img,
.pfc-recipe-card-image figure {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pfc-recipe-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.pfc-recipe-featured-row .pfc-recipe-card-featured h3 {
    font-size: 1.4rem;
}

/* Type badge (core/post-terms) on each card. */
.pfc-recipe-card-badges {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
    margin-bottom: 0.35rem;
}

/* Nutrition facts ([pfc_recipe_nutrition] shortcode) - protein/carbs/fat,
   only whichever are actually known for that recipe. Same plain
   label/value styling spirit as the single recipe page's own
   .pfc-recipe-fact-value, just inline rather than stacked. */
.pfc-recipe-card-nutrition {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Type filter pills (pfc-plugin/recipe-type-filter-pills, recipe_type) -
   plain links to /recipes/ ("All recipes") and each /recipes/type/{slug}
   archive, styled as pill-shaped chips. The current page's own pill
   carries .is-active (see RecipeTypeFilterPillsBlockHook) - styled as a
   filled/inverted pill so it stays visually distinct at rest; its :hover
   only deepens that same fill rather than falling back to the plain
   pill's lighter hover tint, so hovering the active pill never reads as
   "unselecting" it. */
.pfc-recipe-type-filters {
    margin-bottom: 2.5rem;
}

.pfc-recipe-type-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pfc-recipe-type-filters li {
    margin: 0;
}

.pfc-recipe-type-filters a {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.pfc-recipe-type-filters a:hover {
    background: rgba(0, 0, 0, 0.12);
}

.pfc-recipe-type-filters a.is-active {
    background: var(--wp--preset--color--contrast, #111111);
    color: var(--wp--preset--color--base, #ffffff);
}

.pfc-recipe-type-filters a.is-active:hover {
    background: color-mix(in srgb, var(--wp--preset--color--contrast, #111111) 85%, transparent);
}

/* Pagination (core/query-pagination), both recipe library pages. */
.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .pfc-recipe-grid-query .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }

    .pfc-recipe-featured-row .wp-block-post-template > li {
        flex: 1 1 100%;
    }

    .pfc-featured-recipes-section {
        padding: 1.25rem;
    }
}

/* Facts (prep/cook time, servings, difficulty, nutrition) - never gated by
   the paywall, so this renders identically for members and previews. All
   items (including nutrition) are one flat list, stacked vertically since
   this now sits in the header's narrower facts column, not a full-width
   row - see RecipeContentRenderer::renderFacts(). */
.pfc-recipe-facts {
    width: 100%;
}

.pfc-recipe-facts-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pfc-recipe-fact {
    display: flex;
    flex-direction: column;
}

.pfc-recipe-fact-label {
    font-size: 1rem;
    font-weight: 700;
}

.pfc-recipe-fact-value {
    font-size: 1rem;
    font-weight: 400;
}

/* Mobile: stack header/body columns and every image/text row instead of
   side-by-side, and let images fill the available width instead of
   keeping their fixed desktop size. */
@media (max-width: 768px) {
    .pfc-recipe-header,
    .pfc-recipe-body {
        grid-template-columns: 1fr;
    }

    /* The facts column runs full-width once the header stacks (image
       above, facts below) - a 3-column grid reads better here than one
       long vertical list. */
    .pfc-recipe-facts-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pfc-recipe-step-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .pfc-recipe-step-image {
        width: 100%;
        max-width: 100%;
        height: 200px;
    }

    /* Ingredients/method's desktop margins (sized for side-by-side
       columns) leave an oversized gap once they stack into one column -
       the last group before "Method" and the last step before "Latest
       Recipes" only need a small gap here, not the full 3rem. */
    .pfc-recipe-ingredient-group:last-child,
    .pfc-recipe-step-sequence:last-child {
        margin-bottom: 1rem;
    }

    .pfc-recipe-body {
        margin-bottom: 1rem;
    }

    .pfc-recipe-latest {
        margin-top: 1rem;
    }
}

/* A wider threshold than the 768px breakpoint above - a 3-column grid
   still looks cramped/narrow on a landscape phone or small tablet
   (roughly 769-900px), so this one covers those too, not just true
   portrait-phone widths. */
@media (max-width: 900px) {
    .pfc-recipe-latest-grid {
        grid-template-columns: 1fr;
    }
}