/* ==========================================================
   SHOUT-OUT -- the one definition of a shout-out post's look.

   Rendered in place of the media block for post_type = shout_out
   (never combined with an image; the backend rejects shout-outs with
   media). Backgrounds are the fixed, approved catalog in
   workspace_feed_shoutout_backgrounds -- never arbitrary user values --
   and the class names below match its background_key exactly
   (migrations 0138/0139).

   Used by every surface that shows a post:
     .pw-shoutout  the in-app Stream (workspace_feed_stream.php,
                   04_feed.js) and the public sites' post card
                   (Company/Views/public/partials/post_card.php)
     .cw-shoutout  the Company Workspace Stream

   The two prefixes are grouped here rather than renamed, so no markup
   or script had to change. Each surface keeps only its own context
   rules (a repost embed, the modal, the Stream shell's full-bleed card,
   the Company Stream's pointer) in its own file, loaded after this one.

   Colours are copied verbatim from _shoutoutGradient() in the Flutter
   app (feed_composer_sheet.dart / feed_post_card.dart) -- keep the two
   in sync if either palette changes. Loaded by every layout that shows
   posts, right after shared/browser_controls.css.
========================================================== */

.pw-shoutout,
.cw-shoutout {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The single-image post's aspect ratio, as a floor: a shout-out is
       never shorter than an image post at the same width, and grows past
       it only if its text genuinely needs the room. */
    aspect-ratio: 16 / 9;
    padding: 28px 20px;
    /* Flutter's fallback for any key it does not recognize (including
       'blue_gradient', which has no case of its own there either). */
    background: linear-gradient(135deg, #1769e0, #24a4ff);
}

.pw-shoutout--default_shout_out,
.cw-shoutout--default_shout_out { background: linear-gradient(135deg, #1769e0, #13a67a); }

.pw-shoutout--green_gradient,
.cw-shoutout--green_gradient { background: linear-gradient(135deg, #127a4a, #34a853); }

.pw-shoutout--teal_gradient,
.cw-shoutout--teal_gradient { background: linear-gradient(135deg, #047481, #15aabf); }

.pw-shoutout--slate_gradient,
.cw-shoutout--slate_gradient { background: linear-gradient(135deg, #334155, #64748b); }

.pw-shoutout--gold_gradient,
.cw-shoutout--gold_gradient { background: linear-gradient(135deg, #b7791f, #e9b949); }

.pw-shoutout__text,
.cw-shoutout__text {
    max-width: 480px;
    margin: 0;
    color: #fff;
    text-align: center;
    /* Flutter's shout-out text: weight 800, height 1.16, and two sizes --
       30 short, 22 once the text runs past 120 characters (--long-text). */
    font-size: 30px;
    font-weight: 800;
    line-height: 1.16;
}

.pw-shoutout--long-text .pw-shoutout__text,
.cw-shoutout--long-text .cw-shoutout__text {
    font-size: 22px;
}