/* SFM 2026-11-11 "Instagram philosophy" for the Network (Kim): clean, little logo, the member is the star.
   Undo: remove the sfm-insta lines in application/themes/harmony/head.tpl. Backups /root/backup-network-insta-2026-11-11/ */

/* ---------- Logo: always proportional ---------- */
.header_logo img, .header_logo_contrast img { width: auto !important; max-width: none; object-fit: contain; }
.sfm-hdr-title { display: none; }

/* ---------- Activity bubble (Instagram heart pill) ---------- */
.sfm-ibub-host { position: relative; }
.sfm-ibub { position: absolute; top: calc(100% + 9px); right: 50%; transform: translateX(50%); z-index: 60; display: none; align-items: center; gap: 9px; padding: 6px 11px; border-radius: 12px; background: #ff3040; color: #fff !important; font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.sfm-ibub.on { display: inline-flex; animation: sfmIbub .35s ease-out; }
.sfm-ibub::before { content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #ff3040; }
.sfm-ibub span { display: inline-flex; align-items: center; gap: 4px; }
.sfm-ibub svg { width: 15px; height: 15px; fill: #fff; }
@keyframes sfmIbub { from { opacity: 0; transform: translateX(50%) translateY(-4px) scale(.9); } to { opacity: 1; transform: translateX(50%) translateY(0) scale(1); } }

/* ---------- Events: chips instead of the old category list ---------- */
.layout_event_browse_menu:not(:has(li + li)) { display: none !important; }
.sfm-evchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; margin: 0 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sfm-evchips::-webkit-scrollbar { display: none; }
.sfm-evchip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--theme-border-color, #d0d7de); background: var(--theme-content-background-color, transparent); color: inherit !important; font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.sfm-evchip span { font-weight: 400; opacity: .65; font-size: 13px; }
.sfm-evchip.on { background: #1f6feb; border-color: #1f6feb; color: #fff !important; }
.sfm-evchip.on span { opacity: .85; }
.layout_event_list_categories { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.grid_listing .grid_listing_item, .grid_listing .grid_listing_item * { min-width: 0; }
.grid_listing_item_info, .grid_listing_item_info a, .grid_listing_item_info span { overflow-wrap: anywhere; }

@media (max-width: 767px) {
  html, body { overflow-x: hidden; }

  /* Logo only on home; other pages show the page name, profiles show the member's name */
  html.sfm-sub .header_logo, html.sfm-sub .header_logo_contrast { display: none !important; }
  html.sfm-sub .sfm-hdr-title { display: block; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--theme-font-color, inherit) !important; text-decoration: none !important; letter-spacing: -.01em; }
  .header_logo img, .header_logo_contrast img { height: 34px !important; }

  /* Content first on phones (lists before sponsors and side boxes) */
  #global_page_event-index-browse .layout_main, #global_page_event-index-manage .layout_main,
  #global_page_forum-index-index .layout_main, #global_page_forum-forum-view .layout_main,
  #global_page_album-index-browse .layout_main, #global_page_album-index-browse-photos .layout_main,
  #global_page_user-index-browse .layout_main, #global_page_video-index-browse .layout_main { display: flex !important; flex-direction: column; }
  #global_page_event-index-browse .layout_main > .layout_middle, #global_page_event-index-manage .layout_main > .layout_middle,
  #global_page_forum-index-index .layout_main > .layout_middle, #global_page_forum-forum-view .layout_main > .layout_middle,
  #global_page_album-index-browse .layout_main > .layout_middle, #global_page_album-index-browse-photos .layout_main > .layout_middle,
  #global_page_user-index-browse .layout_main > .layout_middle, #global_page_video-index-browse .layout_main > .layout_middle { order: 1; }
  #global_page_event-index-browse .layout_main > .layout_right, #global_page_event-index-manage .layout_main > .layout_right,
  #global_page_forum-index-index .layout_main > .layout_right, #global_page_forum-forum-view .layout_main > .layout_right,
  #global_page_album-index-browse .layout_main > .layout_right, #global_page_album-index-browse-photos .layout_main > .layout_right,
  #global_page_user-index-browse .layout_main > .layout_right, #global_page_video-index-browse .layout_main > .layout_right { order: 2; }

  /* Events: full-width cards that fit the screen */

  .upcoming_events.grid_listing, .grid_listing.upcoming_events { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .upcoming_events .grid_listing_item { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
  .upcoming_events .grid_listing_item article { display: block !important; padding: 0 !important; overflow: hidden; border-radius: 14px; }
  .upcoming_events .grid_listing_item_thumb { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 !important; border-radius: 0 !important; }
  .upcoming_events .grid_listing_item_thumb a, .upcoming_events .grid_listing_item_thumb span { display: block; width: 100% !important; height: 100% !important; border-radius: 0 !important; background-size: cover; background-position: center; }
  .upcoming_events .grid_listing_item_info { width: auto !important; padding: 12px 14px 14px !important; }
  .upcoming_events .grid_listing_item_title a { font-size: 17px; font-weight: 700; line-height: 1.3; }
  .upcoming_events .grid_listing_item_owner, .upcoming_events .grid_listing_item_stat { font-size: 14px; }

  /* Photos: one swipeable row of topic chips */
  .sfm-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .sfm-chips::-webkit-scrollbar { display: none; }
  .sfm-chips .sfm-chip { flex: none; white-space: nowrap; }
  .sfm-lb { background: #000 !important; }

  /* Feed videos: full screen width (JS sets the exact bleed) */
  .sfm-bleed { max-width: none !important; border-radius: 0 !important; }
  .sfm-bleed-host { overflow: visible !important; }

  /* Members = Discover Filmmakers (Instagram "Discover people" list) */
  #global_page_user-index-browse .sfm-mv2-hero { display: none !important; }
  #global_page_user-index-browse .sfm-filters-hidden { display: none !important; }
  .sfm-disc-bar { display: flex; gap: 8px; margin: 2px 0 10px; }
  .sfm-disc-bar button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; border: 0; background: var(--theme-input-background-color, rgba(127,127,127,.14)); color: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .sfm-mv2-head { margin: 4px 0 6px !important; }
  .sfm-mv2-head h2 { font-size: 17px !important; }
  .sfm-mv2-grid { display: block !important; }
  .sfm-mv2-card { display: flex !important; align-items: center; gap: 12px; padding: 9px 2px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; }
  .sfm-mv2-photo { flex: none; width: 56px !important; height: 56px !important; min-height: 0 !important; aspect-ratio: 1 / 1; border-radius: 50% !important; overflow: hidden; margin: 0 !important; }
  .sfm-mv2-photo img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
  .sfm-mv2-photo span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 22px; }
  .sfm-mv2-body { flex: 1; min-width: 0; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 0 !important; }
  .sfm-mv2-body > * { grid-column: 1; margin: 0 !important; }
  .sfm-mv2-name { font-size: 15px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 !important; }
  .sfm-mv2-roles, .sfm-mv2-social { font-size: 13.5px !important; line-height: 1.35 !important; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sfm-mv2-loc, .sfm-mv2-tags { display: none !important; }
  .sfm-mv2-actions { grid-column: 2 !important; grid-row: 1 / span 4; display: flex !important; flex-direction: column; gap: 6px; margin: 0 !important; }
  .sfm-mv2-actions .btn, .sfm-mv2-actions a, .sfm-mv2-actions button { min-width: 104px; height: 32px !important; padding: 0 12px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; }
  .sfm-mv2-actions i { display: none !important; }
  .sfm-mv2-actions.p-follow .sfm-mv2-friend { display: none !important; }
  .sfm-mv2-actions.p-friend > a.user_follow, .sfm-mv2-actions.p-friend > .user_follow { display: none !important; }
  .sfm-mv2-actions .sfm-mv2-friend .btn, .sfm-mv2-actions .sfm-mv2-friend a { min-width: 104px; }
  .sfm-mv2-chips { margin-bottom: 8px !important; }
}

/* Social line + member-first badges (all sizes) */
.sfm-mv2-social { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0 0; font-size: 13px; }
.sfm-mv2-social .s-line { opacity: .85; }
.sfm-mv2-social .s-new, .sfm-mv2-social .s-open { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; }
.sfm-mv2-social .s-new { background: rgba(31,111,235,.14); color: #1f6feb; }
.sfm-mv2-social .s-open { background: rgba(36,138,61,.15); color: #248a3d; }
@media (max-width: 767px) { .sfm-mv2-social { opacity: 1 !important; flex-wrap: wrap; white-space: normal; row-gap: 2px; } .sfm-mv2-social .s-line { opacity: .75; } }
@media (prefers-color-scheme: dark) { html:not(.light_mode) .sfm-mv2-social .s-new { color: #79b0ff; } html:not(.light_mode) .sfm-mv2-social .s-open { color: #4cc462; } }
.dark_mode .sfm-mv2-social .s-new { color: #79b0ff; } .dark_mode .sfm-mv2-social .s-open { color: #4cc462; }