/* /blog/ page — Recent Blogs cards: equal height + whole-card clickable. */

/* Force every card in the post-template grid to occupy the same row height.
   `grid-auto-rows: 1fr` makes every implicit grid row the same size as the
   tallest content in any row, so cards in the same row render identical
   heights regardless of excerpt length. The inner <li> then needs
   `height: 100%` so the .blog-card flexbox below can stretch into the cell. */
.wp-block-post-template.is-layout-grid {
    grid-auto-rows: 1fr;
}

.wp-block-post-template.is-layout-grid > li {
    height: 100%;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    /* Padding lives here (not on the inline block style) so the negative-margin
       image bleed below stays in lockstep with the card padding. */
    padding: var(--wp--preset--spacing--medium);
}

/* Featured image: edge-to-edge bleed at the top of the card, top-aligned crop.

   `<figure class="wp-block-post-featured-image">` carries WP core's
   block-supports inline rule `margin-left:0;margin-right:0` AND a UA
   default. We need negative left/right margins equal to the card padding
   so the image touches the rounded card edges.

   IMPORTANT: `calc(clamp(...) * -1)` resolves to ~0 in current engines
   (a known browser quirk), so we use a CSS custom property holding the
   raw clamp expression and negate by writing the negative form directly.
   We also use !important to beat WP core's inline block-supports CSS,
   which targets `.wp-block-post-featured-image` with the same specificity.

   `width: auto` lets the negative left/right margins actually expand the
   figure (vs. honouring an inherited 100% that ignores the margin pull). */
.blog-card .wp-block-post-featured-image {
    width: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 40px 40px 0 0;
    /* Bleed to the card edges. Negative margin = -1 * card padding.
       Use the negated clamp directly because calc(clamp() * -1) breaks. */
    margin-top: clamp(-60px, -6vw, -40px) !important;
    margin-left: clamp(-60px, -6vw, -40px) !important;
    margin-right: clamp(-60px, -6vw, -40px) !important;
    margin-bottom: var(--wp--preset--spacing--small) !important;
}

.blog-card .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Position the visible crop at 25% down the source image so portrait
       shots expose Jared's face/torso (upper-third) rather than the sky
       above his head. */
    object-position: 50% 25%;
}

.blog-card .wp-block-post-excerpt {
    flex: 1;
}

/* Stretched-link pattern: title's anchor covers the whole card. */
.blog-card .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* === "Latest Blog" pill above /blog/ hero H1 === */
.jaredgolf-hero .jaredgolf-hero-pill,
.jaredgolf-hero p.jaredgolf-hero-pill {
    display: inline-block !important;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    padding: 0.5em 1.1em !important;
    margin: 0 !important;          /* tight against the H1 below */
    background-color: var(--wp--preset--color--green, #2AD971) !important;
    color: var(--wp--preset--color--black, #000) !important;
    border-radius: 999px !important;
    font-family: "Geist", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-align: center;
}

/* Hero H1 sits flush against the pill above it (no top margin gap). */
.jaredgolf-hero .jaredgolf-hero-pill + h1.wp-block-post-title,
.jaredgolf-hero p.jaredgolf-hero-pill + h1.wp-block-post-title {
    margin-top: 0.15em !important;
}

/* === Card meta row (date · reading time) — small, below excerpt, with divider === */
.blog-card .jaredgolf-card-meta {
    display: flex !important;
    gap: 0.4em !important;
    align-items: baseline !important;
    margin-top: auto !important;   /* pushes meta to bottom of the flex card */
    margin-bottom: 0 !important;
    padding-top: 0.7em !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Beat WP's `.has-small-font-size` (16px+) and inline color:#ffffff80 with
   high-specificity + !important — both target the same elements but with
   inline / preset weights that otherwise win. */
.blog-card .jaredgolf-card-meta .wp-block-post-date,
.blog-card .jaredgolf-card-meta .wp-block-post-date a,
.blog-card .jaredgolf-card-meta .wp-block-post-date.has-small-font-size,
.blog-card .jaredgolf-card-meta .jaredgolf-card-readtime,
.blog-card .jaredgolf-card-meta p.jaredgolf-card-readtime.has-small-font-size {
    font-family: "Geist", system-ui, sans-serif !important;
    font-size: 0.6875rem !important;       /* 11px — much smaller, secondary metadata size */
    line-height: 1.3 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

.blog-card .jaredgolf-card-meta .wp-block-post-date a {
    text-decoration: none !important;
}

/* The excerpt above the meta should NOT grow to fill (otherwise it consumes
   all free space and `margin-top: auto` on the meta has nothing to push
   against). Let the excerpt size to its content; the auto margin then
   pushes the meta row to the bottom of every card. */
.blog-card .wp-block-post-excerpt {
    flex: 0 0 auto;
}

/* === "View All" button styling === */
.jaredgolf-view-all .wp-block-button__link {
    border-radius: 999px;
    padding: 0.7em 1.6em;
    font-family: "Geist", system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jaredgolf-view-all .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(42, 217, 113, 0.25);
}

/* Visual breathing room between the card title and the excerpt below. */
.blog-card .wp-block-post-title {
    margin-bottom: 0.55em;
}