/*
 * Homepage sidebar panel: new heading + 4 social cards + newsletter card +
 * Trending This Week, replacing the old "Must Read"-adjacent sidebar
 * content (social counter block + LinkedIn embed).
 *
 * The new panel (template-parts/sidebar-panel.php) is spliced into the
 * rendered page HTML by newspaper_artistheat_child_sidebar_panel() (a
 * the_content filter, functions.php) as the sidebar column's new first
 * child - a preceding sibling of the original "Follow us on Social Media"
 * title block, which - along with the social-counter block and the
 * LinkedIn embed - is hidden here rather than removed from the markup
 * (removing it in that filter would still leave its own inline
 * <style>/<script> tags behind; CSS is simpler and equally effective).
 *
 * .td_block_social_counter is unique on this homepage (verified against the
 * live markup). The LinkedIn embed is targeted by the fixed
 * #linkedin-dope-card id inside it, since its own wrapper class
 * (.vc_raw_html) is reused elsewhere on the page (an unrelated "Our
 * Mission" section). The old title block's own class
 * (.tdm_block_column_title) is ALSO reused elsewhere (other section
 * headings further down the page) - hidden instead via the adjacent-sibling
 * selector below, which only matches the one instance that immediately
 * follows .ah-sidebar-panel (exactly the one this filter inserted itself
 * in front of), leaving every other heading using that class untouched.
 *
 * Palette: white background, black type, red (#dd0000) accents, thin gray
 * (#ededed) borders - matching the site's own already-established red/black
 * palette rather than introducing a new one.
 */

.ah-sidebar-panel + .tdm_block_column_title,
.td_block_social_counter,
.vc_raw_html:has(#linkedin-dope-card) {
    display: none !important;
}

.ah-sidebar-panel {
    margin-top: 0;
}

.ah-sidebar-panel {
    font-family: inherit;
    color: #111111;
}

.ah-sidebar-heading {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #111111;
    padding-bottom: 10px;
    border-bottom: 2px solid #dd0000;
}

/* ---- Social cards: 4 compact squares in one row ---- */
.ah-social-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.ah-social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 4px;
    background-color: #ffffff;
    border: 1px solid #ededed;
    text-align: center;
    text-decoration: none;
    color: #111111;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ah-social-card:hover {
    border-color: #dd0000;
    background-color: #fafafa;
}

.ah-social-card i {
    font-size: 18px;
    line-height: 1;
    color: #dd0000;
}

.ah-social-card-count {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: #111111;
}

.ah-social-card-label {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #767676;
}

/* ---- Newsletter card ---- */
.ah-newsletter-card {
    padding: 20px;
    margin-bottom: 24px;
    background-color: #ffffff;
    border: 1px solid #ededed;
}

.ah-newsletter-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #111111;
}

.ah-newsletter-desc {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #555555;
}

.ah-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ah-newsletter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 13px;
    color: #111111;
    background-color: #ffffff;
    border: 1px solid #ededed;
}

.ah-newsletter-input:focus {
    outline: none;
    border-color: #dd0000;
}

.ah-newsletter-submit {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #ffffff;
    background-color: #dd0000;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ah-newsletter-submit:hover {
    background-color: #b50000;
}

/* ---- "Follow us on Social Media" card ----
 * Recreates a section removed along with an old Composer Widget Sidebar
 * element (an embedded Facebook widget the site owner deleted on purpose,
 * not wanted back) - plain icon links only, no embeds. Card
 * padding/margin/border matches .ah-newsletter-card exactly; the heading
 * reuses the same .ah-sidebar-heading class as "Follow ArtistHeat" above
 * (same red underline, same typography) rather than a new heading style. */
.ah-follow-social-card {
    padding: 20px;
    margin-bottom: 24px;
    background-color: #ffffff;
    border: 1px solid #ededed;
}

.ah-follow-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ah-follow-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #ededed;
    border-radius: 50%;
    color: #dd0000;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ah-follow-social-icon i {
    font-size: 16px;
    line-height: 1;
}

.ah-follow-social-icon:hover {
    background-color: #dd0000;
    border-color: #dd0000;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .ah-follow-social-icon {
        width: 36px;
        height: 36px;
    }

    .ah-follow-social-icon i {
        font-size: 14px;
    }
}

/* ---- Trending This Week ---- */
.ah-trending-week-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #111111;
}

.ah-trending-week-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ah-trending-week-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #ededed;
}

.ah-trending-week-item:last-child {
    border-bottom: none;
}

.ah-trending-week-rank {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: #dd0000;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.ah-trending-week-thumb {
    flex: 0 0 auto;
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
}

.ah-trending-week-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.ah-trending-week-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ah-trending-week-item-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #111111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.ah-trending-week-item-title:hover {
    color: #dd0000;
}

.ah-trending-week-date {
    font-size: 11px;
    color: #767676;
}

@media (max-width: 767px) {
    .ah-social-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .ah-social-card {
        padding: 10px 2px;
    }
}

/* ---- Relocated "Categories" section ----
 * Was a 20%-wide sticky sidebar column beside "Read Latest Articles"; now
 * stands alone above that row (see
 * newspaper_artistheat_child_swap_categories_trending(), functions.php),
 * which extracted only its inner content - not the width:20%/sticky column
 * wrapper that content used to live in - so it's unstyled by TDC's own
 * column CSS and needs its own sizing here instead.
 *
 * Commented out (display:none) per request - a normal-flow block, so hiding
 * it collapses its space entirely and "Read Latest Articles" + "Trending
 * This Week" move up to fill it, with no other change needed. */
.ah-categories-standalone {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
}

.ah-categories-standalone .tds-title {
    margin-bottom: 16px;
}