/*!
 * @package     Joomla.Site
 * @subpackage  Templates.moko-cassiopeia
 * @file        /media/templates/sote/moko-cassiopeia/css/global/csocial-media-demos.css
 *
 * @copyright 	2025 Moko Consulting <https://mokoconsulting.tech>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Website: https://mokoconsulting.tech
 * Email: hello@mokoconsulting.tech
 * Phone: +1 (931) 279-6313
 */
 *
/*
======================================================================
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
Scope:   All selectors prefixed with .social-media-demo to avoid leakage
Usage:   Wrap your article markup in <div class="social-media-demo"> ... </div>
Version: 2.0 (2025-08-23)

How it’s organized:
  1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
  2) Base/layout styles (sections, header shell, placeholders, buttons).
  3) Platform brand colors (hard-coded) and cover height tweaks.
  4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).

INSTRUCTIONS:
 - Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
 - For circle images, sue a square image t fille the entire space
 - All images are center and miiddle aligned when loaded.
======================================================================
REQUIRED IMAGE SIZES — Social Media Demo Wireframes

 Facebook
   --fb-cover-img   → Cover: 820×312 (desktop), 640×360 (mobile safe)
   --fb-avatar-img  → Profile: 176×176 (shown as circle, but use square image)

 Twitter / X
   --x-cover-img    → Header: 1500×500
   --x-avatar-img   → Profile: up to 400×400 (shown as circle, but use square image)

 LinkedIn Company
   --li-cover-img   → Banner: ~1128×191
   --li-logo-img    → Logo: up to 300×300 (rounded square)

 Google Business Profile
   --gmb-cover-img  → Banner: ~960×200 (mobile ~960×140)
   --gmb-logo-img   → Logo: up to 300×300 (shown as circle, but use square image)

 Instagram Business
   --ig-cover-img   → Not always visible, safe 1080×608 for highlight background
   --ig-avatar-img  → Profile: 320×320 (shown as circle, but use square image)

 YouTube Channel
   --yt-cover-img   → Channel art: 2560×1440 (safe area ~1546×423 center)
   --yt-avatar-img  → Channel icon: 800×800 (shown as circle, but use square image)

 TikTok Business
   --tt-cover-img   → Profile header: ~900×500 (safe area ~720×405)
   --tt-avatar-img  → Profile: 200×200 (shown as circle, but use square image)

 Pinterest Business
   --pin-cover-img  → Board/brand banner: ~800×450
   --pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)

 Snapchat Public Profile
   --sc-cover-img   → Banner: ~1080×1920 (stories/poster)
   --sc-avatar-img  → Bitmoji/Profile: 320×320 (shown as circle, but use square image)

 Reddit Community
   --rd-cover-img   → Banner: 1920×384
   --rd-avatar-img  → Community icon: 256×256 (shown as circle, but use square image)
 ====================================================================== */

/* Container variables — IMAGES ONLY (safe-scoped) */
.social-media-demo {
  --fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
  --fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');

  --x-cover-img:  url('../../../../../image/social/x-cover.jpg');
  --x-avatar-img: url('../../../../../image/social/x-avatar.jpg');

  --li-cover-img: url('../../../../../image/social/li-cover.jpg');
  --li-logo-img:  url('../../../../../image/social/li-logo.jpg');

  --gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
  --gmb-logo-img:  url('../../../../../image/social/gmb-logo.jpg');

  --ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
  --ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');

  --yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
  --yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');

  --tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
  --tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');

  --pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
  --pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');

  --sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
  --sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');

  --rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
  --rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
}

/* DO NOT TOUCH */
.social-media-demo * { box-sizing: border-box; }
.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; }
.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; }
.social-media-demo .preview { padding: 16px; }

/* Header shell */
.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; }
.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; }
.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; }
.social-media-demo .avatar,
.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; }
.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; }
.social-media-demo .logo.rounded { border-radius: 16px; }

/* Meta */
.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; }
.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; }
.social-media-demo .subline { font-size: 13px; color: #666; }

/* Buttons */
.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; }
.social-media-demo .btn.primary { color: #fff; border-color: transparent; }

/* Placeholder visuals (used until you swap in real images) */
.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; }
.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; }

/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */
/* Facebook */
.social-media-demo #fb .btn.primary { background: #1877F2; }
.social-media-demo #fb .cover { height: 312px; }
@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } }

/* Twitter / X */
.social-media-demo #x .btn.primary { background: #1D9BF0; }
.social-media-demo #x .cover { height: 200px; background-color: #22303C; }
@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } }

/* LinkedIn */
.social-media-demo #li .btn.primary { background: #0A66C2; }
.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; }
@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } }

/* Google Business Profile */
.social-media-demo #gmb .btn.primary { background: #4285F4; }
.social-media-demo #gmb .cover { height: 200px; }
@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } }

/* Instagram Business */
.social-media-demo #ig .btn.primary { background: #E1306C; }
.social-media-demo #ig .cover { height: 200px; }

/* YouTube Channel */
.social-media-demo #yt .btn.primary { background: #FF0000; }
.social-media-demo #yt .cover { height: 180px; }

/* TikTok Business */
.social-media-demo #tt .btn.primary { background: #000000; color: #fff; }
.social-media-demo #tt .cover { height: 200px; }

/* Pinterest Business */
.social-media-demo #pin .btn.primary { background: #E60023; }
.social-media-demo #pin .cover { height: 200px; }

/* Snapchat Public Profile */
.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; }
.social-media-demo #sc .cover { height: 160px; }

/* Reddit Community */
.social-media-demo #rd .btn.primary { background: #FF4500; }
.social-media-demo #rd .cover { height: 180px; }

/* 4) Image assignments — map classes to variables (swap vars to change images) */
/* Facebook */
.social-media-demo .fb-cover  { background-image: var(--fb-cover-img); }
.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); }

/* X */
.social-media-demo .x-cover  { background-image: var(--x-cover-img); }
.social-media-demo .x-avatar { background-image: var(--x-avatar-img); }

/* LinkedIn */
.social-media-demo .li-cover { background-image: var(--li-cover-img); }
.social-media-demo .li-logo  { background-image: var(--li-logo-img); }

/* Google Business */
.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); }
.social-media-demo .gmb-logo  { background-image: var(--gmb-logo-img); }

/* Instagram */
.social-media-demo .ig-cover  { background-image: var(--ig-cover-img); }
.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); }

/* YouTube */
.social-media-demo .yt-cover  { background-image: var(--yt-cover-img); }
.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); }

/* TikTok */
.social-media-demo .tt-cover  { background-image: var(--tt-cover-img); }
.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); }

/* Pinterest */
.social-media-demo .pin-cover  { background-image: var(--pin-cover-img); }
.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); }

/* Snapchat */
.social-media-demo .sc-cover  { background-image: var(--sc-cover-img); }
.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); }

/* Reddit */
.social-media-demo .rd-cover  { background-image: var(--rd-cover-img); }
.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); }