/*
 * "Read Latest Articles" -> "LATEST NEWS" visual refinement. Placement is
 * untouched (no PHP here, no change to the swap/relocation filters in
 * functions.php) - CSS only, restyling the section in place.
 *
 * Scoping: every rule is scoped under .tdc-row:has(.tdb_loop). .tdb_loop is
 * this block's own block-type class (tdb_loop is TagDiv Composer's newer
 * "posts loop" block) and is unique on this homepage (verified against the
 * live markup - the only other post-grid section uses a different block
 * type, td_flex_block_1) - so unlike some earlier files in this theme, no
 * :not(... ~ ...) "first match" exclusion is needed here.
 *
 * Investigated first via the live rendered markup:
 * - The "white boxed heading" is the tdm_block_column_title block's own
 *   background (a .td-element-style child div forcing background:#ffffff)
 *   plus its own box-shadow:0 0 10px rgba(0,0,0,0.2) - both removed below.
 * - The "peach background shape" is a decorative, absolutely-positioned
 *   inner row (.vc_row_inner.absolute_inner_full) sitting behind the
 *   heading, whose middle inner-column carries background-color:#ffecdd -
 *   hidden entirely below.
 */

/* ---- Remove the decorative peach shape behind the heading ---- */
.tdc-row:has(.tdb_loop) .vc_row_inner.absolute_inner_full {
    display: none !important;
}

/* ---- Heading: strip the white box + shadow, make it compact/left-aligned ---- */
.tdc-row:has(.tdb_loop) .tdm_block_column_title {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 0 14px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

.tdc-row:has(.tdb_loop) .tdm_block_column_title .td-element-style {
    display: none !important; /* the white background div itself */
}

.tdc-row:has(.tdb_loop) .tds-title {
    display: inline-block;
    position: relative;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 2px solid #111111;
}

.tdc-row:has(.tdb_loop) .tds-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 2px;
    background-color: #dd0000;
}

/* Rename "Read Latest Articles" -> "LATEST NEWS" via CSS (font-size:0 hides
   the original text without removing it; :after supplies the new text) -
   PHP wasn't needed since this, like everything else here, is a pure
   restyle, not a content move. */
.tdc-row:has(.tdb_loop) .tdm-title {
    font-size: 0 !important;
}

.tdc-row:has(.tdb_loop) .tdm-title:after {
    content: 'LATEST NEWS';
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #111111;
}

/* ---- Only the first 4 cards on desktop; hide the rest + pagination/read-more ---- */
.tdc-row:has(.tdb_loop) .td_module_wrap:nth-child(n+5) {
    display: none;
}

.tdc-row:has(.tdb_loop) .td-load-more-wrap,
.tdc-row:has(.tdb_loop) .td-next-prev-wrap,
.tdc-row:has(.tdb_loop) .page-nav {
    display: none;
}

.tdc-row:has(.tdb_loop) .td-read-more {
    display: none;
}

.tdc-row:has(.tdb_loop) .td-image-wrap {
    padding-bottom: 56% !important; /* was 50% by default - close, kept modest rather than drastically reshaping the image */
}

.tdc-row:has(.tdb_loop) .tdb-block-inner {
    row-gap: 16px !important;
}

/*
 * ---- Card containment rebuild ----
 *
 * Previous round positioned .td-post-category with position:absolute;
 * top:100% relative to .td-image-container, intending it to sit visually
 * just below the image. In practice that let it (and the padding reserved
 * for it) escape the card's own box, so it was rebuilt with zero absolute
 * positioning: newspaper_artistheat_child_move_category_into_body()
 * (functions.php) actually relocates the badge into .td-module-meta-info
 * in the rendered HTML (CSS can't reparent an element), and that part is
 * unchanged here and confirmed still correct - the badge is visible.
 *
 * What broke the title/author-date: the height chain used to make the 4
 * cards equal height. `.td-module-container { height: 100%; }` depends on
 * its direct parent (.td_module_wrap) having a *definite* height for the
 * percentage to resolve against - .td_module_wrap is a flex item stretched
 * by .tdb-block-inner's default align-items:stretch, and that chain didn't
 * reliably hand a usable height down. Combined with
 * `.td-module-container { overflow: hidden; }`, whatever height it actually
 * computed to clipped off the title/author-date sitting below the image +
 * badge - "disappeared" is exactly what clipped content looks like.
 *
 * Confirmed no selector here sets display:none / visibility:hidden /
 * opacity:0 / height:0 / white-on-white for the title or meta - the
 * previous rules for .entry-title and .td-module-meta-info never touched
 * those properties. The bug was the container's own height/overflow
 * combination hiding correctly-colored, correctly-displayed content.
 *
 * Fixed by using flex-grow (flex:1) the whole way down instead of a
 * percentage height, which needs no "definite parent height" and works
 * regardless of how .td_module_wrap's own height was established - and by
 * removing overflow:hidden from every element wrapping the title/meta
 * (kept only on .td-image-container, for the image's own crop - unrelated
 * to text visibility).
 *
 * That alone still let title/date render *outside* the card's white box on
 * some cards: flex items default to min-height:auto, which lets their own
 * content force them taller than whatever height flex-grow/stretch gave
 * them - with overflow:hidden gone, that excess became visible overflow
 * past the box instead of being clipped inside it. min-height:0 on every
 * level of the chain below removes that default, so flex-grow/stretch
 * actually governs the height as intended, and all 4 cards - including
 * whichever has the longest content - end up the same height with nothing
 * escaping:
 *   .td_module_wrap:     display:flex; flex-direction:column; min-height:0
 *                         (makes the stretched flex item a flex container
 *                         in its own right, so its child below can grow
 *                         into it)
 *   .td-module-container: flex:1; min-height:0 (fills whatever height
 *                         .td_module_wrap ends up stretched to)
 *   .td-image-container:  flex:0 0 auto (image only, top, fixed)
 *   .td-module-meta-info: flex:1; min-height:0 (body: badge + title + date)
 *   .td-editor-date:      margin-top:auto (pinned to the body's bottom)
 */
.tdc-row:has(.tdb_loop) .td_module_wrap {
    display: flex;
    flex-direction: column;
    min-height: 0; /* flex items default to min-height:auto, which lets their content force them taller than their flex-grown size - that's what was pushing title/date outside the card's own box. min-height:0 lets flex-grow/stretch actually govern the height instead. */
}

.tdc-row:has(.tdb_loop) .td-module-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.tdc-row:has(.tdb_loop) .td-image-container {
    flex: 0 0 auto;
    height: auto !important; /* the block's own base CSS sets height:100% here; with flex-basis:auto in a column flex layout, a height:100% child resolves its flex-basis against the (now stretched, taller) card, making this box - not just the picture inside it - balloon to the full card height. That gap between the actual image and .td-module-meta-info starting below it was the "whitespace between the category label and the picture". height:auto lets it size to just the image's own aspect-ratio height again. */
    overflow: hidden; /* image's own crop only - .td-module-meta-info below is a separate sibling, unaffected */
}

.tdc-row:has(.tdb_loop) .td-post-category {
    /* .td-module-container also carries .td-category-pos-image (part of the
       block's own default markup), which triggers a higher-specificity base
       rule: [class*="tdb_module_loop"] .td-category-pos-image .td-post-category
       {position:absolute;left:0;bottom:0} - 4 classes' worth of specificity
       vs. this selector's 3, and neither had !important, so that base rule
       was winning and the badge stayed position:absolute;left:0 - anchored
       to whatever positioned ancestor it could find, not the padded flow
       position intended. Forcing every one of those properties here with
       !important is what actually overrides it. */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    display: inline-block;
    order: -1; /* guarantees first position (above the title) within the flex-column body, regardless of source order */
    align-self: flex-start;
    margin: 0 0 10px !important;
    padding: 5px 10px !important; /* was 8px 16px */
    font-size: 10px !important; /* was 14px */
}

.tdc-row:has(.tdb_loop) .td-module-meta-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px !important;
    background-color: #ffffff;
    color: #111111;
}

.tdc-row:has(.tdb_loop) .entry-title {
    min-height: 50px; /* 2 lines at this title's own 25px line-height, so 1-line and 2-line titles reserve the same space - no line-clamp/overflow:hidden, so a rare longer title just grows the row (still equal across all 4 cards via the flex chain above) instead of being clipped */
    margin: 0 0 6px !important;
    color: #111111 !important;
}

.tdc-row:has(.tdb_loop) .entry-title a {
    color: #111111 !important;
}

.tdc-row:has(.tdb_loop) .td-editor-date {
    margin-top: auto;
}

.tdc-row:has(.tdb_loop) .td-post-author-name a,
.tdc-row:has(.tdb_loop) .td-post-author-name span,
.tdc-row:has(.tdb_loop) .td-post-date,
.tdc-row:has(.tdb_loop) .td-post-date time {
    color: #767676 !important;
}

/* ---- Top margin so the section doesn't sit flush against the hero ----
   Was 40px (24px mobile), reduced to 0 - the row itself needs no margin;
   see the negative margin-top on .td-pb-span9 below instead, which is what
   actually pulls Latest News up to meet the hero. A row-level margin here
   would apply to both this row's columns at once (including Trending This
   Week), which isn't what's needed. */
.tdc-row:has(.tdb_loop) {
    margin-top: 0;
}

/*
 * ---- Align Trending This Week's left edge with the sidebar panel above ----
 *
 * Confirmed via the live markup: this row's own columns are td-pb-span9
 * ("Read Latest Articles", rendering at TDC's native width:80%!important)
 * and td-pb-span3 (Trending This Week, ~20%) - while the hero row above it
 * overrides its own span8/span4 split to 75%/25% (homepage-hero.css, "Fix
 * desktop hero width"). Different percentages between the two rows means
 * their right-hand columns start at different horizontal positions - 80%
 * vs 75% - which is what reads as Trending This Week being "pushed to the
 * right more" than the social/newsletter panel above it. Matching this
 * row's split to the same 75%/25% aligns their left edges, at the cost of
 * narrowing the 4-card row slightly (~80%->75% of this row's width).
 *
 * .td-pb-span3 is reused elsewhere on the page (confirmed - a different,
 * unrelated column further down); scoping to .tdc-row:has(.tdb_loop)
 * (unique to this row) keeps this from touching that other usage.
 */
.tdc-row:has(.tdb_loop) .td-pb-span9 {
    width: 75% !important;
    max-width: 75% !important;
    flex: 0 0 75% !important;
}

.tdc-row:has(.tdb_loop) .td-pb-span3 {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
}

/* ---- Pull Latest News up to meet the (shorter) hero above it ----
 *
 * The hero and its sidebar (Follow ArtistHeat panel) are a flex row whose
 * columns don't stretch to match each other's height, so that row's total
 * height follows the taller sidebar - leaving ~130px of dead, empty space
 * below the shorter hero column before this row can start (measured
 * directly against a real render: LATEST NEWS landed ~196px below the
 * hero's bottom edge, while TRENDING THIS WEEK - the sidebar's own
 * neighbor - was already a reasonable ~133px below it).
 *
 * A first attempt shifted the whole row up via a negative margin-top on
 * .tdc-row:has(.tdb_loop) itself, with a matching positive margin-top on
 * .td-pb-span3 to hold Trending This Week in place - reverted, since a
 * row-level negative margin moves the row's own box for its parent's
 * layout purposes too (everything after it, and this row's own sticky
 * column's offset calculations), not just its visual content, and made
 * Trending This Week's position worse in a real browser than in a static
 * screenshot.
 *
 * Scoped to just this column instead: only .td-pb-span9 (Latest News)
 * moves, independent of its sibling - Trending This Week is untouched by
 * this rule entirely, so its position relative to the sidebar above it
 * can't be affected by it.
 */
@media (min-width: 1019px) {
    .tdc-row:has(.tdb_loop) .td-pb-span9 {
        margin-top: -130px;
    }
}