/* Public Company Website -- the Updates preview card. v1.0.0
   ==================================================================
   OWNS
     .cp-updates-card and everything under it -- the compact standing-in
     for Latest Updates that appears in the homepage side panel.

   SCOPE -- READ THIS BEFORE ADDING A SELECTOR
   Every selector in this file begins with .cp-updates-card. That is not
   tidiness, it is the whole safety rule: this file is loaded on every
   public page, and a file loaded late can override rules another file
   owns. A previous addition to this set (20_elevation.css) reached the
   company landing page through selectors that were not its own and
   rewrote work that lives elsewhere.

   So: no bare element selectors, no .cp-home-section, no .cp-panel-*,
   nothing that could match anything this card does not render itself.

   DO NOT put here
     - the panel that contains the card (07_homepage.css / 11_panel_hero.css)
     - the post card used in the FEED (partials/post_card.php's own styles)
     - anything about the section this card previews
   ================================================================== */

/* margin-top matches .cp-home-section's own top margin (07_homepage.css),
   for the same reason .cp-panel-hero carries a copy of it
   (11_panel_hero.css): the gap between two stacked panel cards comes from
   the LOWER one's top margin, and this card is not a .cp-home-section, so
   it inherits none. Without it, a section placed directly above this card
   -- Services over Updates -- had the two touching, while the reverse
   order looked right because the section below supplied its own.

   At <=560px .cp-home-section keeps its margin (only .cp-panel-hero zeroes
   its own, because that card becomes the first thing on the page when the
   panel reorders ahead of the main column). This card is never first, so
   it needs no such exception. */
.cp-updates-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-surface);
}

.cp-updates-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* The heading is .cp-home-section__title (07_homepage.css) -- the same one
   About and Branches use in this panel -- and is deliberately NOT
   restyled here, so the three cards in the panel cannot drift apart.
   Nothing owns a .cp-updates-card__title any more. */

/* The way in. Quiet, because the card itself is also clickable -- this
   is for anyone who reads a heading row and looks for the action in it. */
.cp-updates-card__view {
    flex: 0 0 auto;
    color: var(--cp-primary, #137A5A);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cp-updates-card__view:hover {
    text-decoration: underline;
}

.cp-updates-card__empty {
    margin: 0;
    color: var(--cp-text-faint);
    font-size: .875rem;
}

/* The whole post is one target: a preview has no parts worth clicking
   separately, and a picture with a link under it invites the miss. */
.cp-updates-card__post {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.cp-updates-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--cp-radius-sm);
    /* A tint rather than nothing, so a slow image does not collapse the
       card and then push it open when it arrives. */
    background: var(--cp-surface-soft);
}

.cp-updates-card__media img {
    display: block;
    width: 100%;
    /* Cropped to a consistent band: posts arrive at every shape, and a
       panel whose height changes with whatever was posted last reads as
       broken rather than as content. */
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.cp-updates-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Three lines, then stop. The full post is one tap away and the card's
   job is to say what it is about, not to be read instead of it. */
.cp-updates-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: var(--cp-text);
    font-size: .875rem;
    line-height: 1.45;
}

.cp-updates-card__meta {
    color: var(--cp-text-faint);
    font-size: .75rem;
}